imshvc/noxious_client
1
0
Fork 0
forked from noxious/client
Code Pull Requests Activity

Chat changes

Browse Source
This commit is contained in:
Dennis Postma 2024-08-21 02:45:49 +02:00
parent f513eb14e5
commit 558bf675b0
6 changed files with 59 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
package-lock.json generated
View File

@ -3385,9 +3385,9 @@
} }
}, },
"node_modules/electron-to-chromium": { "node_modules/electron-to-chromium": {
"version": "1.5.11", "version": "1.5.12",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.11.tgz", "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.12.tgz",
"integrity": "sha512-R1CccCDYqndR25CaXFd6hp/u9RaaMcftMkphmvuepXr5b1vfLkRml6aWVeBhXJ7rbevHkKEMJtz8XqPf7ffmew==", "integrity": "sha512-tIhPkdlEoCL1Y+PToq3zRNehUaKp3wBX/sr7aclAWdIWjvqAe/Im/H0SiCM4c1Q8BLPHCdoJTol+ZblflydehA==",
"dev": true, "dev": true,
"license": "ISC" "license": "ISC"
}, },
@ -6883,15 +6883,15 @@
"license": "MIT" "license": "MIT"
}, },
"node_modules/vite": { "node_modules/vite": {
"version": "5.4.1", "version": "5.4.2",
"resolved": "https://registry.npmjs.org/vite/-/vite-5.4.1.tgz", "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.2.tgz",
"integrity": "sha512-1oE6yuNXssjrZdblI9AfBbHCC41nnyoVoEZxQnID6yvQZAFBzxxkqoFLtHUMkYunL8hwOLEjgTuxpkRxvba3kA==", "integrity": "sha512-dDrQTRHp5C1fTFzcSaMxjk6vdpKvT+2/mIdE07Gw2ykehT49O0z/VHS3zZ8iV/Gh8BJJKHWOe5RjaNrW5xf/GA==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"esbuild": "^0.21.3", "esbuild": "^0.21.3",
"postcss": "^8.4.41", "postcss": "^8.4.41",
"rollup": "^4.13.0" "rollup": "^4.20.0"
}, },
"bin": { "bin": {
"vite": "bin/vite.js" "vite": "bin/vite.js"
@ -6979,16 +6979,16 @@
} }
}, },
"node_modules/vite-plugin-inspect": { "node_modules/vite-plugin-inspect": {
"version": "0.8.5", "version": "0.8.6",
"resolved": "https://registry.npmjs.org/vite-plugin-inspect/-/vite-plugin-inspect-0.8.5.tgz", "resolved": "https://registry.npmjs.org/vite-plugin-inspect/-/vite-plugin-inspect-0.8.6.tgz",
"integrity": "sha512-JvTUqsP1JNDw0lMZ5Z/r5cSj81VK2B7884LO1DC3GMBhdcjcsAnJjdWq7bzQL01Xbh+v60d3lju3g+z7eAtNew==", "integrity": "sha512-iM/smnFRSuDq9UMVAN06fqBbHAofGDtB5yBucsl0QnPCFqQ2TmPIbsSgSR3gUv13qJ8oPE/FFhXlm9g1xX9nzg==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@antfu/utils": "^0.7.10", "@antfu/utils": "^0.7.10",
"@rollup/pluginutils": "^5.1.0", "@rollup/pluginutils": "^5.1.0",
"debug": "^4.3.5", "debug": "^4.3.6",
"error-stack-parser-es": "^0.1.4", "error-stack-parser-es": "^0.1.5",
"fs-extra": "^11.2.0", "fs-extra": "^11.2.0",
"open": "^10.1.0", "open": "^10.1.0",
"perfect-debounce": "^1.0.0", "perfect-debounce": "^1.0.0",

14
src/components/gui/Chat.vue
View File

@ -1,14 +1,14 @@
<template> <template>
<div class="w-full h-full flex flex-col justify-end"> <div class="w-full min-w-[750px] flex flex-col">
<div ref="chatWindow" class="w-[calc(100%_-_36px)] max-w-[750px] min-h-36 mb-5 overflow-y-auto bg-gray-300/80 rounded-lg border-2 border-solid border-cyan-200 p-4"> <div ref="chatWindow" class="w-full overflow-auto h-32 mb-5 bg-gray-300/80 rounded-lg border-2 border-solid border-cyan-200" v-show="gameStore.isChatOpen">
<div v-for="message in chats" class="flex-col py-2 items-center"> <div v-for="message in chats" class="flex-col py-2 items-center p-3">
<span class="text-ellipsis overflow-hidden whitespace-nowrap text-sm text-gray-50">{{ message.character.name }}</span> <span class="text-ellipsis overflow-hidden whitespace-nowrap text-sdm">{{ message.character.name }}</span>
<p class="text-sm m-0">{{ message.message }}</p> <p class="text-sm text-gray-50 m-0">{{ message.message }}</p>
</div> </div>
</div> </div>
<div class="w-full flex mb-5"> <div class="w-full flex">
<input <input
class="bg-[calc(100%_-_25px)_center] max-w-[750px] w-full h-12 rounded-lg text-xl px-4 py-0 bg-gray-300/80 border-2 border-solid border-cyan-200 text-gray-50 bg-[url('/assets/icons/submit-icon.svg')] bg-no-repeat bg-30px focus:outline-none focus:ring-0 focus:border-cyan-800" class="w-full h-12 rounded-lg text-lg px-4 py-0 bg-gray-300/80 border-2 border-solid border-cyan-200 text-gray-50 bg-[url('/assets/icons/submit-icon.svg')] bg-no-repeat bg-[right_25px_center] bg-[length:30px] focus:outline-none focus:ring-0 focus:border-cyan-800"
placeholder="Type something..." placeholder="Type something..."
v-model="message" v-model="message"
@keypress="handleKeyPress" @keypress="handleKeyPress"

36
src/components/gui/Hud.vue
View File

@ -23,24 +23,24 @@
</div> </div>
<!-- TODO: Replace gameStore.character with other (selected) player's --> <!-- TODO: Replace gameStore.character with other (selected) player's -->
<div class="hud-wrapper other-player relative right-0 w-[310px] h-[84px]"> <!-- <div class="hud-wrapper other-player relative right-0 w-[310px] h-[84px]">-->
<div class="absolute w-14 h-14 bg-white/80 rounded-full border-3 border-solid border-white top-1/2 -translate-y-1/2 right-0 z-20"> <!-- <div class="absolute w-14 h-14 bg-white/80 rounded-full border-3 border-solid border-white top-1/2 -translate-y-1/2 right-0 z-20">-->
<img class="w-7 absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 -scale-x-100" draggable="false" src="/assets/avatar/default/head.png" /> <!-- <img class="w-7 absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 -scale-x-100" draggable="false" src="/assets/avatar/default/head.png" />-->
</div> <!-- </div>-->
<div class="hud-bg absolute top-0 right-8 w-[280px] h-[84px] z-10 bg-[url('/assets/bg-hud-2.png')] bg-center bg-[length:cover] bg-no-repeat mask-[url('/assets/shapes/hud-image-shape.svg')] mask-center mask-[length:cover] mask-no-repeat"></div> <!-- <div class="hud-bg absolute top-0 right-8 w-[280px] h-[84px] z-10 bg-[url('/assets/bg-hud-2.png')] bg-center bg-[length:cover] bg-no-repeat mask-[url('/assets/shapes/hud-image-shape.svg')] mask-center mask-[length:cover] mask-no-repeat"></div>-->
<div class="absolute top-0 right-8 w-[280px] h-[84px] z-10 -scale-x-100 bg-[url('/assets/shapes/hud-shape-empty.svg')] bg-center bg-[length:cover] bg-no-repeat"> <!-- <div class="absolute top-0 right-8 w-[280px] h-[84px] z-10 -scale-x-100 bg-[url('/assets/shapes/hud-shape-empty.svg')] bg-center bg-[length:cover] bg-no-repeat">-->
<div class="h-16 flex flex-col items-end -scale-x-100 py-2.5 pr-12 pl-5"> <!-- <div class="h-16 flex flex-col items-end -scale-x-100 py-2.5 pr-12 pl-5">-->
<div class="w-full flex items-center justify-between mb-1.5"> <!-- <div class="w-full flex items-center justify-between mb-1.5">-->
<span class="text-ellipsis overflow-hidden whitespace-nowrap max-w-32 text-sm">{{ gameStore.character.name }}</span> <!-- <span class="text-ellipsis overflow-hidden whitespace-nowrap max-w-32 text-sm">{{ gameStore.character.name }}</span>-->
<span class="text-sm">lvl. {{ gameStore.character.level }}</span> <!-- <span class="text-sm">lvl. {{ gameStore.character.level }}</span>-->
</div> <!-- </div>-->
<div class="w-full flex items-center justify-between"> <!-- <div class="w-full flex items-center justify-between">-->
<label class="text-sm" for="hp">HP</label> <!-- <label class="text-sm" for="hp">HP</label>-->
<progress class="h-2 rounded-lg w-full max-w-44 appearance-none accent-red" id="hp" :value="gameStore.character.hitpoints" max="100">{{ gameStore.character.hitpoints }}%</progress> <!-- <progress class="h-2 rounded-lg w-full max-w-44 appearance-none accent-red" id="hp" :value="gameStore.character.hitpoints" max="100">{{ gameStore.character.hitpoints }}%</progress>-->
</div> <!-- </div>-->
</div> <!-- </div>-->
</div> <!-- </div>-->
</div> <!-- </div>-->
</template> </template>
<script setup lang="ts"> <script setup lang="ts">

10
src/components/gui/Menu.vue
View File

@ -1,11 +1,11 @@
<template> <template>
<ul class="list-none flex gap-2.5 items-center"> <ul class="list-none flex gap-2.5 items-center m-0">
<li class="menu-item group relative" @click="gameStore.toggleChat"> <li class="menu-item group relative" @click="gameStore.toggleChat">
<div class="group-hover:block absolute bottom-16 left-1/2 -translate-x-1/2 w-20 h-6 text-center bg-gray-300 border-2 border-solid border-cyan rounded-3xl hidden"> <div class="group-hover:block absolute bottom-16 left-1/2 -translate-x-1/2 w-20 h-6 text-center bg-gray-300 border-2 border-solid border-cyan rounded-3xl hidden">
<p class="absolute w-full bottom-0 m-0 text-xs leading-6">Chat</p> <p class="absolute w-full bottom-0 m-0 text-xs leading-6">Chat</p>
<div class="group-hover:block absolute -bottom-2.5 bg-cyan h-2 w-3.5 [clip-path:polygon(100%_0,_0_0,_50%_100%)] left-1/2 -translate-x-1/2 hidden"></div> <div class="group-hover:block absolute -bottom-2.5 bg-cyan h-2 w-3.5 [clip-path:polygon(100%_0,_0_0,_50%_100%)] left-1/2 -translate-x-1/2 hidden"></div>
</div> </div>
<a class="group-hover:bg-gray/70 group-hover:cursor-pointer p-2 bg-gray-300/70 border-2 border-solid border-cyan rounded-lg block w-11 h-9"> <a class="group-hover:bg-gray/70 group-hover:cursor-pointer p-1.5 bg-gray-300/70 border-2 border-solid border-cyan rounded-lg block w-11 h-9">
<img class="group-hover:drop-shadow-default w-11 h-9 object-contain" draggable="false" src="/assets/icons/chat.png" /> <img class="group-hover:drop-shadow-default w-11 h-9 object-contain" draggable="false" src="/assets/icons/chat.png" />
</a> </a>
</li> </li>
@ -14,7 +14,7 @@
<p class="absolute w-full bottom-0 m-0 text-xs leading-6">World</p> <p class="absolute w-full bottom-0 m-0 text-xs leading-6">World</p>
<div class="group-hover:block absolute -bottom-2.5 bg-cyan h-2 w-3.5 [clip-path:polygon(100%_0,_0_0,_50%_100%)] left-1/2 -translate-x-1/2 hidden"></div> <div class="group-hover:block absolute -bottom-2.5 bg-cyan h-2 w-3.5 [clip-path:polygon(100%_0,_0_0,_50%_100%)] left-1/2 -translate-x-1/2 hidden"></div>
</div> </div>
<a class="group-hover:bg-gray/70 group-hover:cursor-pointer p-2 bg-gray-300/70 border-2 border-solid border-cyan rounded-lg block w-11 h-9"> <a class="group-hover:bg-gray/70 group-hover:cursor-pointer p-1.5 bg-gray-300/70 border-2 border-solid border-cyan rounded-lg block w-11 h-9">
<img class="group-hover:drop-shadow-default w-11 h-9 object-contain" draggable="false" src="/assets/icons/world.png" /> <img class="group-hover:drop-shadow-default w-11 h-9 object-contain" draggable="false" src="/assets/icons/world.png" />
</a> </a>
</li> </li>
@ -23,7 +23,7 @@
<p class="absolute w-full bottom-0 m-0 text-xs leading-6">Users</p> <p class="absolute w-full bottom-0 m-0 text-xs leading-6">Users</p>
<div class="group-hover:block absolute -bottom-2.5 bg-cyan h-2 w-3.5 [clip-path:polygon(100%_0,_0_0,_50%_100%)] left-1/2 -translate-x-1/2 hidden"></div> <div class="group-hover:block absolute -bottom-2.5 bg-cyan h-2 w-3.5 [clip-path:polygon(100%_0,_0_0,_50%_100%)] left-1/2 -translate-x-1/2 hidden"></div>
</div> </div>
<a class="group-hover:bg-gray/70 group-hover:cursor-pointer p-2 bg-gray-300/70 border-2 border-solid border-cyan rounded-lg block w-11 h-9"> <a class="group-hover:bg-gray/70 group-hover:cursor-pointer p-1.5 bg-gray-300/70 border-2 border-solid border-cyan rounded-lg block w-11 h-9">
<img class="group-hover:drop-shadow-default w-11 h-9 object-contain" draggable="false" src="/assets/icons/users.png" /> <img class="group-hover:drop-shadow-default w-11 h-9 object-contain" draggable="false" src="/assets/icons/users.png" />
</a> </a>
</li> </li>
@ -32,7 +32,7 @@
<p class="absolute w-full bottom-0 m-0 text-xs leading-6">Inventory</p> <p class="absolute w-full bottom-0 m-0 text-xs leading-6">Inventory</p>
<div class="group-hover:block absolute -bottom-2.5 bg-cyan h-2 w-3.5 [clip-path:polygon(100%_0,_0_0,_50%_100%)] left-1/2 -translate-x-1/2 hidden"></div> <div class="group-hover:block absolute -bottom-2.5 bg-cyan h-2 w-3.5 [clip-path:polygon(100%_0,_0_0,_50%_100%)] left-1/2 -translate-x-1/2 hidden"></div>
</div> </div>
<a class="group-hover:bg-gray/70 group-hover:cursor-pointer p-2 bg-gray-300/70 border-2 border-solid border-cyan rounded-lg block w-11 h-9"> <a class="group-hover:bg-gray/70 group-hover:cursor-pointer p-1.5 bg-gray-300/70 border-2 border-solid border-cyan rounded-lg block w-11 h-9">
<img class="group-hover:drop-shadow-default w-11 h-9 object-contain" draggable="false" src="/assets/icons/treasure-chest.png" /> <img class="group-hover:drop-shadow-default w-11 h-9 object-contain" draggable="false" src="/assets/icons/treasure-chest.png" />
</a> </a>
</li> </li>

5
src/components/sprites/Character.vue
View File

@ -1,5 +1,9 @@
<template> <template>
<Container v-if="props.character" :x="currentX" :y="currentY"> <Container v-if="props.character" :x="currentX" :y="currentY">
<!-- Start chat bubble -->
<!-- <RoundRectangle :origin-x="0.5" :origin-y="7.5" :fillColor="0xffffff" :width="194" :height="21" :radius="5" />-->
<!-- <Text @create="createText" :text="`This is a chat message 🤯👋`" :origin-x="0.5" :origin-y="10.9" :style="{ fontSize: 13, fontFamily: 'Arial', color: '#000' }" />-->
<!-- End chat bubble -->
<Text @create="createText" :text="props.character.name" :origin-x="0.5" :origin-y="9" /> <Text @create="createText" :text="props.character.name" :origin-x="0.5" :origin-y="9" />
<RoundRectangle :origin-x="0.5" :origin-y="18.5" :fillColor="0xffffff" :width="74" :height="6" :radius="5" /> <RoundRectangle :origin-x="0.5" :origin-y="18.5" :fillColor="0xffffff" :width="74" :height="6" :radius="5" />
<RoundRectangle :origin-x="0.5" :origin-y="36.4" :fillColor="0x00b3b3" :width="70" :height="3" :radius="5" /> <RoundRectangle :origin-x="0.5" :origin-y="36.4" :fillColor="0x00b3b3" :width="70" :height="3" :radius="5" />
@ -90,7 +94,6 @@ const charTexture = computed(() => {
}) })
const createText = (text: Phaser.GameObjects.Text) => { const createText = (text: Phaser.GameObjects.Text) => {
text.setColor('#ffffff')
text.setFontSize(13) text.setFontSize(13)
text.setFontFamily('Arial') text.setFontFamily('Arial')
} }

22
src/screens/Game.vue
View File

@ -2,20 +2,24 @@
<div class="flex justify-center items-center h-dvh p-8 relative"> <div class="flex justify-center items-center h-dvh p-8 relative">
<GmTools v-if="isLoaded && gameStore.character?.role === 'gm'" /> <GmTools v-if="isLoaded && gameStore.character?.role === 'gm'" />
<GmPanel v-if="isLoaded && gameStore.character?.role === 'gm'" /> <GmPanel v-if="isLoaded && gameStore.character?.role === 'gm'" />
<!-- <Inventory />-->
<div v-if="!zoneEditorStore.active"> <div v-if="!zoneEditorStore.active">
<Game :config="gameConfig" @create="createGame"> <Game :config="gameConfig" @create="createGame">
<Scene name="main" @preload="preloadScene" @create="createScene"> <Scene name="main" @preload="preloadScene" @create="createScene">
<div class="flex absolute justify-between left-0 right-0 top-12 mx-12 my-0"> <div class="fixed inset-x-0 top-0 flex justify-start items-end p-10 pointer-events-none">
<Hud /> <div class="pointer-events-auto">
</div> <Hud />
<!-- <Inventory />--> </div>
<World v-if="isLoaded" :key="gameStore.character?.zoneId" /> </div>
<div class="flex absolute justify-between left-0 right-0 bottom-24 h-24 mx-12 my-0"> <World v-if="isLoaded" :key="gameStore.character?.zoneId" />
<div class="w-full"> <div class="fixed inset-x-0 bottom-0 flex justify-between items-end p-10 pointer-events-none">
<Chat v-show="gameStore.isChatOpen" /> <div class="pointer-events-auto">
<Chat />
</div>
<div class="pointer-events-auto">
<Menubar />
</div> </div>
<Menubar />
</div> </div>
</Scene> </Scene>
</Game> </Game>