forked from noxious/client
npm run format
This commit is contained in:
parent
a32d62417a
commit
ed28a3213f
@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<ul class="list-none flex gap-2.5 items-center">
|
<ul class="list-none flex gap-2.5 items-center">
|
||||||
<li class="menu-item group relative">
|
<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>
|
||||||
@ -38,3 +38,9 @@
|
|||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { useGameStore } from '@/stores/game'
|
||||||
|
|
||||||
|
const gameStore = useGameStore()
|
||||||
|
</script>
|
||||||
|
|||||||
@ -1,26 +1,10 @@
|
|||||||
<template>
|
<template>
|
||||||
<Container
|
<Container v-if="props.character" :x="currentX" :y="currentY">
|
||||||
v-if="props.character"
|
<Text @create="createText" :text="props.character.name" :origin-x="0.5" :origin-y="9" />
|
||||||
:x="currentX"
|
|
||||||
:y="currentY"
|
|
||||||
>
|
|
||||||
<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="0x09ad19" :width="70" :height="3" :radius="5" />
|
<RoundRectangle :origin-x="0.5" :origin-y="36.4" :fillColor="0x00b3b3" :width="70" :height="3" :radius="5" />
|
||||||
<Image v-if="!props.character.characterType" texture="character" :origin-y="1" />
|
<Image v-if="!props.character.characterType" texture="character" :origin-y="1" />
|
||||||
<Sprite
|
<Sprite v-else :texture="charTexture" :play="props.character.isMoving ? charTexture : undefined" :origin-y="1" :flipX="props.character.rotation === 6 || props.character.rotation === 4" :flipY="false" />
|
||||||
v-else
|
|
||||||
:texture="charTexture"
|
|
||||||
:play="props.character.isMoving ? charTexture : undefined"
|
|
||||||
:origin-y="1"
|
|
||||||
:flipX="props.character.rotation === 6 || props.character.rotation === 4"
|
|
||||||
:flipY="false"
|
|
||||||
/>
|
|
||||||
</Container>
|
</Container>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -71,17 +55,21 @@ const updatePosition = (x: number, y: number) => {
|
|||||||
onUpdate: (tween) => {
|
onUpdate: (tween) => {
|
||||||
currentX.value = tween.targets[0].x ?? 0
|
currentX.value = tween.targets[0].x ?? 0
|
||||||
currentY.value = tween.targets[0].y ?? 0
|
currentY.value = tween.targets[0].y ?? 0
|
||||||
},
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
watch(() => props.character, (newChar, oldChar) => {
|
watch(
|
||||||
if (newChar) {
|
() => props.character,
|
||||||
if (!oldChar || newChar.position_x !== oldChar.position_x || newChar.position_y !== oldChar.position_y) {
|
(newChar, oldChar) => {
|
||||||
updatePosition(newChar.position_x, newChar.position_y)
|
if (newChar) {
|
||||||
|
if (!oldChar || newChar.position_x !== oldChar.position_x || newChar.position_y !== oldChar.position_y) {
|
||||||
|
updatePosition(newChar.position_x, newChar.position_y)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
},
|
||||||
}, { immediate: true, deep: true })
|
{ immediate: true, deep: true }
|
||||||
|
)
|
||||||
|
|
||||||
const charTexture = computed(() => {
|
const charTexture = computed(() => {
|
||||||
if (!props.character?.characterType?.sprite) {
|
if (!props.character?.characterType?.sprite) {
|
||||||
@ -102,6 +90,7 @@ 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')
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,152 +1,150 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="absolute z-50 w-full h-dvh top-0 left-0 bg-black/60">
|
<div class="absolute z-50 w-full h-dvh top-0 left-0 bg-black/60">
|
||||||
<div class="flex flex-col gap-8 m-10 h-[calc(100%_-_5rem)]">
|
<div class="flex flex-col gap-8 m-10 h-[calc(100%_-_5rem)]">
|
||||||
<div class="flex gap-8 items-stretch justify-center grow max-h-[650px]">
|
<div class="flex gap-8 items-stretch justify-center grow max-h-[650px]">
|
||||||
<div class="md:block hidden w-[30%] max-w-[350px] bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-lg backdrop-blur-sm shadow-lg">
|
<div class="md:block hidden w-[30%] max-w-[350px] bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-lg backdrop-blur-sm shadow-lg">
|
||||||
<div class="h-full flex flex-col justify-center items-center">
|
<div class="h-full flex flex-col justify-center items-center">
|
||||||
<h3 class="mt-4">Ethereal</h3>
|
<h3 class="mt-4">Ethereal</h3>
|
||||||
<img class="h-96 my-6 mx-auto" src="/assets/placeholders/inventory_player.png" />
|
<img class="h-96 my-6 mx-auto" src="/assets/placeholders/inventory_player.png" />
|
||||||
<span class="block mb-4">Level 69</span>
|
<span class="block mb-4">Level 69</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
<div class="max-w-[875px] w-[65%] bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-lg z-50 flex flex-col backdrop-blur-sm shadow-lg">
|
|
||||||
<div class="p-2.5 flex justify-between items-center border-solid border-0 border-b border-cyan-200">
|
|
||||||
<h3 class="m-0 font-medium shrink-0">Inventory</h3>
|
|
||||||
<div class="flex gap-2.5">
|
|
||||||
<button class="w-5 h-5 m-0 p-0 relative hover:rotate-180 transition-transform duration-300 ease-in-out">
|
|
||||||
<img alt="close" draggable="false" src="/assets/icons/close-button-white.svg" class="w-full h-full" />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="grow flex flex-col">
|
|
||||||
<div class="w-full h-[70%] max-h-[375px] relative flex flex-col md:flex-row justify-between overflow-auto">
|
|
||||||
<div class="flex flex-col gap-3 m-5">
|
|
||||||
<div class="flex gap-3 justify-center">
|
|
||||||
<!-- Helmet -->
|
|
||||||
<div class="bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-md aspect-square h-11 w-11 relative hover:bg-gray-200">
|
|
||||||
<img src="/assets/icons/inventory/helmet.svg" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-11/12 opacity-20"/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Head charm -->
|
|
||||||
<div class=" bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-md aspect-square h-11 w-11 relative hover:bg-gray-200">
|
|
||||||
<img src="/assets/icons/inventory/head_charm.svg" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-11/12 opacity-20"/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="flex gap-3 justify-center">
|
|
||||||
<!-- Bracers -->
|
|
||||||
<div class="bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-md w-11 h-[104px] relative hover:bg-gray-200">
|
|
||||||
<img src="/assets/icons/inventory/bracers.svg" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-11/12 opacity-20"/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Chestplate -->
|
|
||||||
<div class="bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-md aspect-square w-[104px] h-[104px] relative hover:bg-gray-200">
|
|
||||||
<img src="/assets/icons/inventory/chestplate.svg" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-10/12 opacity-20"/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Primary Weapon -->
|
|
||||||
<div class="bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-md w-11 h-[104px] self-stretch justify-self-stretch relative hover:bg-gray-200">
|
|
||||||
<img src="/assets/icons/inventory/primary_weapon.svg" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-11/12 opacity-20"/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="flex gap-3 justify-center">
|
|
||||||
<!-- Legs -->
|
|
||||||
<div class="bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-md w-11 h-[104px] self-stretch justify-self-stretch relative hover:bg-gray-200">
|
|
||||||
<img src="/assets/icons/inventory/legs.svg" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-11/12 opacity-20"/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="flex flex-col gap-3">
|
|
||||||
<!-- Belt/pouch -->
|
|
||||||
<div class="bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-md aspect-square h-11 w-11 self-stretch justify-self-stretch relative hover:bg-gray-200">
|
|
||||||
<img src="/assets/icons/inventory/pouch.svg" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-11/12 opacity-20"/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Boots -->
|
|
||||||
<div class="bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-md aspect-square h-11 w-11 self-stretch justify-self-stretch relative hover:bg-gray-200">
|
|
||||||
<img src="/assets/icons/inventory/boots.svg" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-11/12 opacity-20"/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex gap-3 m-5 flex-wrap justify-end max-lg:justify-center lg:max-w-[50%]">
|
|
||||||
<div v-for="n in 25" class="bg-gray-300/80 border-solid border-2 border-cyan-200 w-12 h-12 rounded-md aspect-square shrink-0 justify-self-stretch hover:bg-gray-200"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="w-full h-[30%] flex flex-wrap relative overflow-auto xl:grow">
|
|
||||||
<div class="absolute left-0 top-0 w-full h-px bg-cyan-200"></div>
|
|
||||||
<div class="w-full xl:w-1/2 h-full">
|
|
||||||
<div class="m-4 h-[calc(100%_-_32px)] flex flex-col gap-4 mr-8">
|
|
||||||
<div class="flex gap-2">
|
|
||||||
<h4>Armor piece name</h4>
|
|
||||||
<span class="rounded-sm px-2.5 content-center bg-purple text-white text-xs">RARE</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex gap-8 xl:justify-between items-center grow">
|
|
||||||
<img src="/assets/placeholders/chestplate.png" class="max-w-36"/>
|
|
||||||
<ul class="p-0 m-0 list-none">
|
|
||||||
<li class="flex gap-8 justify-between">
|
|
||||||
<span>Health:</span>
|
|
||||||
<span>+15</span>
|
|
||||||
</li>
|
|
||||||
<li class="flex gap-8 justify-between">
|
|
||||||
<span>Defense:</span>
|
|
||||||
<span>500</span>
|
|
||||||
</li>
|
|
||||||
<li class="flex gap-8 justify-between">
|
|
||||||
<span>Stats:</span>
|
|
||||||
<span></span>
|
|
||||||
</li>
|
|
||||||
<li class="flex gap-8 justify-between">
|
|
||||||
<span>More stats:</span>
|
|
||||||
<span></span>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="absolute left-1/2 -translate-x-1/2 bottom-0 w-px h-full bg-cyan-200 xl:block hidden"></div>
|
|
||||||
<div class="w-full xl:w-1/2 h-full">
|
|
||||||
<div class="m-4 h-[calc(100%_-_32px)] flex flex-col gap-4 ml-8">
|
|
||||||
<h4>Character stats</h4>
|
|
||||||
<div class="flex justify-between items-center grow">
|
|
||||||
<ul class="p-0 m-0 list-none">
|
|
||||||
<li class="flex gap-8 justify-between">
|
|
||||||
<span>Health:</span>
|
|
||||||
<p class="m-0 relative">100 <span class="text-green absolute left-full ml-2">+15</span></p>
|
|
||||||
</li>
|
|
||||||
<li class="flex gap-8 justify-between">
|
|
||||||
<span>Defense:</span>
|
|
||||||
<p class="m-0 relative">1000 <span class="text-green absolute left-full ml-2">+500</span></p>
|
|
||||||
</li>
|
|
||||||
<li class="flex gap-8 justify-between">
|
|
||||||
<span>Stats:</span>
|
|
||||||
<p class="m-0 relative"></p>
|
|
||||||
</li>
|
|
||||||
<li class="flex gap-8 justify-between">
|
|
||||||
<span>More stats:</span>
|
|
||||||
<p class="m-0 relative"></p>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="flex justify-center">
|
|
||||||
<div class="overflow-auto w-[calc(90%_+_32px)] bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-lg flex flex-col backdrop-blur-sm shadow-lg">
|
|
||||||
<div class="h-full flex flex-col items-center">
|
|
||||||
<h3 class="mt-4">Chest</h3>
|
|
||||||
<div class="flex flex-wrap gap-4 m-4 justify-center max-w-[500px] overflow-auto">
|
|
||||||
<div v-for="n in 15" class="bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-md w-11 h-11 hover:bg-gray-200"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="max-w-[875px] w-[65%] bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-lg z-50 flex flex-col backdrop-blur-sm shadow-lg">
|
||||||
|
<div class="p-2.5 flex justify-between items-center border-solid border-0 border-b border-cyan-200">
|
||||||
|
<h3 class="m-0 font-medium shrink-0">Inventory</h3>
|
||||||
|
<div class="flex gap-2.5">
|
||||||
|
<button class="w-5 h-5 m-0 p-0 relative hover:rotate-180 transition-transform duration-300 ease-in-out">
|
||||||
|
<img alt="close" draggable="false" src="/assets/icons/close-button-white.svg" class="w-full h-full" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="grow flex flex-col">
|
||||||
|
<div class="w-full h-[70%] max-h-[375px] relative flex flex-col md:flex-row justify-between overflow-auto">
|
||||||
|
<div class="flex flex-col gap-3 m-5">
|
||||||
|
<div class="flex gap-3 justify-center">
|
||||||
|
<!-- Helmet -->
|
||||||
|
<div class="bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-md aspect-square h-11 w-11 relative hover:bg-gray-200">
|
||||||
|
<img src="/assets/icons/inventory/helmet.svg" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-11/12 opacity-20" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Head charm -->
|
||||||
|
<div class="bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-md aspect-square h-11 w-11 relative hover:bg-gray-200">
|
||||||
|
<img src="/assets/icons/inventory/head_charm.svg" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-11/12 opacity-20" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex gap-3 justify-center">
|
||||||
|
<!-- Bracers -->
|
||||||
|
<div class="bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-md w-11 h-[104px] relative hover:bg-gray-200">
|
||||||
|
<img src="/assets/icons/inventory/bracers.svg" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-11/12 opacity-20" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Chestplate -->
|
||||||
|
<div class="bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-md aspect-square w-[104px] h-[104px] relative hover:bg-gray-200">
|
||||||
|
<img src="/assets/icons/inventory/chestplate.svg" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-10/12 opacity-20" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Primary Weapon -->
|
||||||
|
<div class="bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-md w-11 h-[104px] self-stretch justify-self-stretch relative hover:bg-gray-200">
|
||||||
|
<img src="/assets/icons/inventory/primary_weapon.svg" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-11/12 opacity-20" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex gap-3 justify-center">
|
||||||
|
<!-- Legs -->
|
||||||
|
<div class="bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-md w-11 h-[104px] self-stretch justify-self-stretch relative hover:bg-gray-200">
|
||||||
|
<img src="/assets/icons/inventory/legs.svg" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-11/12 opacity-20" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex flex-col gap-3">
|
||||||
|
<!-- Belt/pouch -->
|
||||||
|
<div class="bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-md aspect-square h-11 w-11 self-stretch justify-self-stretch relative hover:bg-gray-200">
|
||||||
|
<img src="/assets/icons/inventory/pouch.svg" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-11/12 opacity-20" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Boots -->
|
||||||
|
<div class="bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-md aspect-square h-11 w-11 self-stretch justify-self-stretch relative hover:bg-gray-200">
|
||||||
|
<img src="/assets/icons/inventory/boots.svg" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-11/12 opacity-20" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex gap-3 m-5 flex-wrap justify-end max-lg:justify-center lg:max-w-[50%]">
|
||||||
|
<div v-for="n in 25" class="bg-gray-300/80 border-solid border-2 border-cyan-200 w-12 h-12 rounded-md aspect-square shrink-0 justify-self-stretch hover:bg-gray-200"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="w-full h-[30%] flex flex-wrap relative overflow-auto xl:grow">
|
||||||
|
<div class="absolute left-0 top-0 w-full h-px bg-cyan-200"></div>
|
||||||
|
<div class="w-full xl:w-1/2 h-full">
|
||||||
|
<div class="m-4 h-[calc(100%_-_32px)] flex flex-col gap-4 mr-8">
|
||||||
|
<div class="flex gap-2">
|
||||||
|
<h4>Armor piece name</h4>
|
||||||
|
<span class="rounded-sm px-2.5 content-center bg-purple text-white text-xs">RARE</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex gap-8 xl:justify-between items-center grow">
|
||||||
|
<img src="/assets/placeholders/chestplate.png" class="max-w-36" />
|
||||||
|
<ul class="p-0 m-0 list-none">
|
||||||
|
<li class="flex gap-8 justify-between">
|
||||||
|
<span>Health:</span>
|
||||||
|
<span>+15</span>
|
||||||
|
</li>
|
||||||
|
<li class="flex gap-8 justify-between">
|
||||||
|
<span>Defense:</span>
|
||||||
|
<span>500</span>
|
||||||
|
</li>
|
||||||
|
<li class="flex gap-8 justify-between">
|
||||||
|
<span>Stats:</span>
|
||||||
|
<span></span>
|
||||||
|
</li>
|
||||||
|
<li class="flex gap-8 justify-between">
|
||||||
|
<span>More stats:</span>
|
||||||
|
<span></span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="absolute left-1/2 -translate-x-1/2 bottom-0 w-px h-full bg-cyan-200 xl:block hidden"></div>
|
||||||
|
<div class="w-full xl:w-1/2 h-full">
|
||||||
|
<div class="m-4 h-[calc(100%_-_32px)] flex flex-col gap-4 ml-8">
|
||||||
|
<h4>Character stats</h4>
|
||||||
|
<div class="flex justify-between items-center grow">
|
||||||
|
<ul class="p-0 m-0 list-none">
|
||||||
|
<li class="flex gap-8 justify-between">
|
||||||
|
<span>Health:</span>
|
||||||
|
<p class="m-0 relative">100 <span class="text-green absolute left-full ml-2">+15</span></p>
|
||||||
|
</li>
|
||||||
|
<li class="flex gap-8 justify-between">
|
||||||
|
<span>Defense:</span>
|
||||||
|
<p class="m-0 relative">1000 <span class="text-green absolute left-full ml-2">+500</span></p>
|
||||||
|
</li>
|
||||||
|
<li class="flex gap-8 justify-between">
|
||||||
|
<span>Stats:</span>
|
||||||
|
<p class="m-0 relative"></p>
|
||||||
|
</li>
|
||||||
|
<li class="flex gap-8 justify-between">
|
||||||
|
<span>More stats:</span>
|
||||||
|
<p class="m-0 relative"></p>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex justify-center">
|
||||||
|
<div class="overflow-auto w-[calc(90%_+_32px)] bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-lg flex flex-col backdrop-blur-sm shadow-lg">
|
||||||
|
<div class="h-full flex flex-col items-center">
|
||||||
|
<h3 class="mt-4">Chest</h3>
|
||||||
|
<div class="flex flex-wrap gap-4 m-4 justify-center max-w-[500px] overflow-auto">
|
||||||
|
<div v-for="n in 15" class="bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-md w-11 h-11 hover:bg-gray-200"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@ -1,4 +1,4 @@
|
|||||||
const dev: boolean = false
|
const dev: boolean = true
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'New Quest',
|
name: 'New Quest',
|
||||||
|
|||||||
@ -4,7 +4,12 @@
|
|||||||
<div class="ui-wrapper h-dvh flex flex-col justify-center items-center gap-20 px-10 sm:px-20">
|
<div class="ui-wrapper h-dvh flex flex-col justify-center items-center gap-20 px-10 sm:px-20">
|
||||||
<div class="filler"></div>
|
<div class="filler"></div>
|
||||||
<div class="flex gap-14 w-full max-h-[650px] overflow-x-auto" v-if="!isLoading">
|
<div class="flex gap-14 w-full max-h-[650px] overflow-x-auto" v-if="!isLoading">
|
||||||
<div v-for="character in characters" :key="character.id" class="group first:ml-auto last:mr-auto m-4 w-[170px] h-[275px] flex flex-col shrink-0 rounded-2xl relative bg-[url('/assets/shapes/character-select-shape.svg')] bg-no-repeat shadow-character" :class="{ active: selected_character == character.id }">
|
<div
|
||||||
|
v-for="character in characters"
|
||||||
|
:key="character.id"
|
||||||
|
class="group first:ml-auto last:mr-auto m-4 w-[170px] h-[275px] flex flex-col shrink-0 rounded-2xl relative bg-[url('/assets/shapes/character-select-shape.svg')] bg-no-repeat shadow-character"
|
||||||
|
:class="{ active: selected_character == character.id }"
|
||||||
|
>
|
||||||
<input class="opacity-0 h-full w-full absolute m-0 z-10" type="radio" :id="character.id" name="character" :value="character.id" v-model="selected_character" />
|
<input class="opacity-0 h-full w-full absolute m-0 z-10" type="radio" :id="character.id" name="character" :value="character.id" v-model="selected_character" />
|
||||||
<label class="font-bold absolute left-1/2 top-5 max-w-32 -translate-x-1/2 -translate-y-1/2 text-center text-ellipsis overflow-hidden whitespace-nowrap drop-shadow-text" :for="character.id">{{ character.name }}</label>
|
<label class="font-bold absolute left-1/2 top-5 max-w-32 -translate-x-1/2 -translate-y-1/2 text-center text-ellipsis overflow-hidden whitespace-nowrap drop-shadow-text" :for="character.id">{{ character.name }}</label>
|
||||||
<!-- @TODO : Add a confirmation dialog -->
|
<!-- @TODO : Add a confirmation dialog -->
|
||||||
|
|||||||
@ -1,18 +1,20 @@
|
|||||||
<template>
|
<template>
|
||||||
<GmTools v-if="isLoaded && gameStore.character?.role === 'gm'" />
|
|
||||||
<GmPanel v-if="isLoaded && gameStore.character?.role === 'gm'" />
|
|
||||||
|
|
||||||
<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'" />
|
||||||
|
<GmPanel v-if="isLoaded && gameStore.character?.role === 'gm'" />
|
||||||
|
|
||||||
<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="flex absolute justify-between left-0 right-0 top-12 mx-12 my-0">
|
||||||
<Hud />
|
<Hud />
|
||||||
</div>
|
</div>
|
||||||
<!-- <Inventory />-->
|
<!-- <Inventory />-->
|
||||||
<World v-if="isLoaded" :key="gameStore.character?.zoneId" />
|
<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="flex absolute justify-between left-0 right-0 bottom-24 h-24 mx-12 my-0">
|
||||||
<Chat />
|
<div class="w-full">
|
||||||
|
<Chat v-show="gameStore.isChatOpen" />
|
||||||
|
</div>
|
||||||
<Menubar />
|
<Menubar />
|
||||||
</div>
|
</div>
|
||||||
</Scene>
|
</Scene>
|
||||||
@ -62,13 +64,7 @@ const gameConfig = {
|
|||||||
height: window.innerHeight,
|
height: window.innerHeight,
|
||||||
type: Phaser.AUTO,
|
type: Phaser.AUTO,
|
||||||
resolution: 5,
|
resolution: 5,
|
||||||
pixelArt: true,
|
pixelArt: true
|
||||||
scale: {
|
|
||||||
mode: Phaser.Scale.RESIZE,
|
|
||||||
autoCenter: Phaser.Scale.CENTER_BOTH,
|
|
||||||
width: window.innerWidth,
|
|
||||||
height: window.innerHeight
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const createGame = (game: Phaser.Game) => {
|
const createGame = (game: Phaser.Game) => {
|
||||||
|
|||||||
@ -4,7 +4,7 @@ import config from '@/config'
|
|||||||
|
|
||||||
export const useAssetStore = defineStore('assets', {
|
export const useAssetStore = defineStore('assets', {
|
||||||
state: () => ({
|
state: () => ({
|
||||||
assets: [] as Asset[],
|
assets: [] as Asset[]
|
||||||
}),
|
}),
|
||||||
actions: {
|
actions: {
|
||||||
setAssets(assets: Asset[]) {
|
setAssets(assets: Asset[]) {
|
||||||
|
|||||||
@ -12,7 +12,8 @@ export const useGameStore = defineStore('game', {
|
|||||||
user: null as User | null,
|
user: null as User | null,
|
||||||
character: null as Character | null,
|
character: null as Character | null,
|
||||||
isGmPanelOpen: false,
|
isGmPanelOpen: false,
|
||||||
isMovingCamera: false
|
isMovingCamera: false,
|
||||||
|
isChatOpen: false
|
||||||
}),
|
}),
|
||||||
actions: {
|
actions: {
|
||||||
setScreen(screen: string) {
|
setScreen(screen: string) {
|
||||||
@ -36,6 +37,9 @@ export const useGameStore = defineStore('game', {
|
|||||||
setMovingCamera(moving: boolean) {
|
setMovingCamera(moving: boolean) {
|
||||||
this.isMovingCamera = moving
|
this.isMovingCamera = moving
|
||||||
},
|
},
|
||||||
|
toggleChat() {
|
||||||
|
this.isChatOpen = !this.isChatOpen
|
||||||
|
},
|
||||||
initConnection() {
|
initConnection() {
|
||||||
this.connection = io(config.server_endpoint, {
|
this.connection = io(config.server_endpoint, {
|
||||||
secure: !config.development,
|
secure: !config.development,
|
||||||
|
|||||||
@ -8,7 +8,7 @@ export const useZoneStore = defineStore('zone', {
|
|||||||
}),
|
}),
|
||||||
getters: {
|
getters: {
|
||||||
getCharacterById: (state) => {
|
getCharacterById: (state) => {
|
||||||
return (id: number) => state.characters.find(char => char.id === id)
|
return (id: number) => state.characters.find((char) => char.id === id)
|
||||||
},
|
},
|
||||||
getCharacterCount: (state) => {
|
getCharacterCount: (state) => {
|
||||||
return state.characters.length
|
return state.characters.length
|
||||||
@ -28,13 +28,13 @@ export const useZoneStore = defineStore('zone', {
|
|||||||
this.characters.push(character)
|
this.characters.push(character)
|
||||||
},
|
},
|
||||||
updateCharacter(updatedCharacter: ExtendedCharacter) {
|
updateCharacter(updatedCharacter: ExtendedCharacter) {
|
||||||
const index = this.characters.findIndex(char => char.id === updatedCharacter.id)
|
const index = this.characters.findIndex((char) => char.id === updatedCharacter.id)
|
||||||
if (index !== -1) {
|
if (index !== -1) {
|
||||||
this.characters[index] = { ...this.characters[index], ...updatedCharacter }
|
this.characters[index] = { ...this.characters[index], ...updatedCharacter }
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
removeCharacter(character_id: number) {
|
removeCharacter(character_id: number) {
|
||||||
this.characters = this.characters.filter(char => char.id !== character_id)
|
this.characters = this.characters.filter((char) => char.id !== character_id)
|
||||||
},
|
},
|
||||||
reset() {
|
reset() {
|
||||||
this.zone = null
|
this.zone = null
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user