Chat changes
This commit is contained in:
parent
f513eb14e5
commit
558bf675b0
24
package-lock.json
generated
24
package-lock.json
generated
@ -3385,9 +3385,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/electron-to-chromium": {
|
||||
"version": "1.5.11",
|
||||
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.11.tgz",
|
||||
"integrity": "sha512-R1CccCDYqndR25CaXFd6hp/u9RaaMcftMkphmvuepXr5b1vfLkRml6aWVeBhXJ7rbevHkKEMJtz8XqPf7ffmew==",
|
||||
"version": "1.5.12",
|
||||
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.12.tgz",
|
||||
"integrity": "sha512-tIhPkdlEoCL1Y+PToq3zRNehUaKp3wBX/sr7aclAWdIWjvqAe/Im/H0SiCM4c1Q8BLPHCdoJTol+ZblflydehA==",
|
||||
"dev": true,
|
||||
"license": "ISC"
|
||||
},
|
||||
@ -6883,15 +6883,15 @@
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/vite": {
|
||||
"version": "5.4.1",
|
||||
"resolved": "https://registry.npmjs.org/vite/-/vite-5.4.1.tgz",
|
||||
"integrity": "sha512-1oE6yuNXssjrZdblI9AfBbHCC41nnyoVoEZxQnID6yvQZAFBzxxkqoFLtHUMkYunL8hwOLEjgTuxpkRxvba3kA==",
|
||||
"version": "5.4.2",
|
||||
"resolved": "https://registry.npmjs.org/vite/-/vite-5.4.2.tgz",
|
||||
"integrity": "sha512-dDrQTRHp5C1fTFzcSaMxjk6vdpKvT+2/mIdE07Gw2ykehT49O0z/VHS3zZ8iV/Gh8BJJKHWOe5RjaNrW5xf/GA==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"esbuild": "^0.21.3",
|
||||
"postcss": "^8.4.41",
|
||||
"rollup": "^4.13.0"
|
||||
"rollup": "^4.20.0"
|
||||
},
|
||||
"bin": {
|
||||
"vite": "bin/vite.js"
|
||||
@ -6979,16 +6979,16 @@
|
||||
}
|
||||
},
|
||||
"node_modules/vite-plugin-inspect": {
|
||||
"version": "0.8.5",
|
||||
"resolved": "https://registry.npmjs.org/vite-plugin-inspect/-/vite-plugin-inspect-0.8.5.tgz",
|
||||
"integrity": "sha512-JvTUqsP1JNDw0lMZ5Z/r5cSj81VK2B7884LO1DC3GMBhdcjcsAnJjdWq7bzQL01Xbh+v60d3lju3g+z7eAtNew==",
|
||||
"version": "0.8.6",
|
||||
"resolved": "https://registry.npmjs.org/vite-plugin-inspect/-/vite-plugin-inspect-0.8.6.tgz",
|
||||
"integrity": "sha512-iM/smnFRSuDq9UMVAN06fqBbHAofGDtB5yBucsl0QnPCFqQ2TmPIbsSgSR3gUv13qJ8oPE/FFhXlm9g1xX9nzg==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@antfu/utils": "^0.7.10",
|
||||
"@rollup/pluginutils": "^5.1.0",
|
||||
"debug": "^4.3.5",
|
||||
"error-stack-parser-es": "^0.1.4",
|
||||
"debug": "^4.3.6",
|
||||
"error-stack-parser-es": "^0.1.5",
|
||||
"fs-extra": "^11.2.0",
|
||||
"open": "^10.1.0",
|
||||
"perfect-debounce": "^1.0.0",
|
||||
|
||||
@ -1,14 +1,14 @@
|
||||
<template>
|
||||
<div class="w-full h-full flex flex-col justify-end">
|
||||
<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 v-for="message in chats" class="flex-col py-2 items-center">
|
||||
<span class="text-ellipsis overflow-hidden whitespace-nowrap text-sm text-gray-50">{{ message.character.name }}</span>
|
||||
<p class="text-sm m-0">{{ message.message }}</p>
|
||||
<div class="w-full min-w-[750px] flex flex-col">
|
||||
<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 p-3">
|
||||
<span class="text-ellipsis overflow-hidden whitespace-nowrap text-sdm">{{ message.character.name }}</span>
|
||||
<p class="text-sm text-gray-50 m-0">{{ message.message }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full flex mb-5">
|
||||
<div class="w-full flex">
|
||||
<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..."
|
||||
v-model="message"
|
||||
@keypress="handleKeyPress"
|
||||
|
||||
@ -23,24 +23,24 @@
|
||||
</div>
|
||||
|
||||
<!-- TODO: Replace gameStore.character with other (selected) player's -->
|
||||
<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">
|
||||
<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 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="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">
|
||||
<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>
|
||||
</div>
|
||||
<div class="w-full flex items-center justify-between">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <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">-->
|
||||
<!-- <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 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="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">-->
|
||||
<!-- <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>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="w-full flex items-center justify-between">-->
|
||||
<!-- <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>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
<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">
|
||||
<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>
|
||||
<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>
|
||||
<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" />
|
||||
</a>
|
||||
</li>
|
||||
@ -14,7 +14,7 @@
|
||||
<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>
|
||||
<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" />
|
||||
</a>
|
||||
</li>
|
||||
@ -23,7 +23,7 @@
|
||||
<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>
|
||||
<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" />
|
||||
</a>
|
||||
</li>
|
||||
@ -32,7 +32,7 @@
|
||||
<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>
|
||||
<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" />
|
||||
</a>
|
||||
</li>
|
||||
|
||||
@ -1,5 +1,9 @@
|
||||
<template>
|
||||
<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" />
|
||||
<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" />
|
||||
@ -90,7 +94,6 @@ const charTexture = computed(() => {
|
||||
})
|
||||
|
||||
const createText = (text: Phaser.GameObjects.Text) => {
|
||||
text.setColor('#ffffff')
|
||||
text.setFontSize(13)
|
||||
text.setFontFamily('Arial')
|
||||
}
|
||||
|
||||
@ -2,20 +2,24 @@
|
||||
<div class="flex justify-center items-center h-dvh p-8 relative">
|
||||
<GmTools v-if="isLoaded && gameStore.character?.role === 'gm'" />
|
||||
<GmPanel v-if="isLoaded && gameStore.character?.role === 'gm'" />
|
||||
<!-- <Inventory />-->
|
||||
|
||||
<div v-if="!zoneEditorStore.active">
|
||||
<Game :config="gameConfig" @create="createGame">
|
||||
<Scene name="main" @preload="preloadScene" @create="createScene">
|
||||
<div class="flex absolute justify-between left-0 right-0 top-12 mx-12 my-0">
|
||||
<Hud />
|
||||
</div>
|
||||
<!-- <Inventory />-->
|
||||
<World v-if="isLoaded" :key="gameStore.character?.zoneId" />
|
||||
<div class="flex absolute justify-between left-0 right-0 bottom-24 h-24 mx-12 my-0">
|
||||
<div class="w-full">
|
||||
<Chat v-show="gameStore.isChatOpen" />
|
||||
<div class="fixed inset-x-0 top-0 flex justify-start items-end p-10 pointer-events-none">
|
||||
<div class="pointer-events-auto">
|
||||
<Hud />
|
||||
</div>
|
||||
</div>
|
||||
<World v-if="isLoaded" :key="gameStore.character?.zoneId" />
|
||||
<div class="fixed inset-x-0 bottom-0 flex justify-between items-end p-10 pointer-events-none">
|
||||
<div class="pointer-events-auto">
|
||||
<Chat />
|
||||
</div>
|
||||
<div class="pointer-events-auto">
|
||||
<Menubar />
|
||||
</div>
|
||||
<Menubar />
|
||||
</div>
|
||||
</Scene>
|
||||
</Game>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user