npm run format

src/components/gui/Menu.vue

@@ -1,6 +1,6 @@
 <template>
   <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">
         <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>
@@ -38,3 +38,9 @@
     </li>
   </ul>
 </template>
+
+<script setup lang="ts">
+import { useGameStore } from '@/stores/game'
+
+const gameStore = useGameStore()
+</script>

src/components/sprites/Character.vue

@@ -1,26 +1,10 @@
 <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="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" />
-    <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>
 </template>
 
@@ -71,17 +55,21 @@ const updatePosition = (x: number, y: number) => {
     onUpdate: (tween) => {
       currentX.value = tween.targets[0].x ?? 0
       currentY.value = tween.targets[0].y ?? 0
-    },
+    }
   })
 }
 
-watch(() => props.character, (newChar, oldChar) => {
+watch(
+  () => props.character,
+  (newChar, oldChar) => {
     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(() => {
   if (!props.character?.characterType?.sprite) {
@@ -102,6 +90,7 @@ const charTexture = computed(() => {
 })
 
 const createText = (text: Phaser.GameObjects.Text) => {
+  text.setColor('#ffffff')
   text.setFontSize(13)
   text.setFontFamily('Arial')
 }

src/components/utilities/inventory/Inventory.vue

@@ -24,50 +24,49 @@
                 <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"/>
+                    <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">
+                  <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"/>
+                    <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"/>
+                    <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"/>
+                    <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"/>
+                    <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"/>
+                    <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"/>
+                      <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"/>
+                      <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%]">
@@ -83,7 +82,7 @@
                     <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"/>
+                    <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>
@@ -146,7 +145,6 @@
           </div>
         </div>
       </div>
-            
     </div>
   </div>
 </template>

src/config.ts

@@ -1,4 +1,4 @@
-const dev: boolean = false
+const dev: boolean = true
 
 export default {
   name: 'New Quest',

src/screens/Characters.vue

@@ -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="filler"></div>
       <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" />
           <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 -->

src/screens/Game.vue

@@ -1,18 +1,20 @@
 <template>
+  <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 class="flex justify-center items-center h-dvh p-8 relative">
     <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 />-->
+          <!--          <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">
-            <Chat />
+            <div class="w-full">
+              <Chat v-show="gameStore.isChatOpen" />
+            </div>
             <Menubar />
           </div>
         </Scene>
@@ -62,13 +64,7 @@ const gameConfig = {
   height: window.innerHeight,
   type: Phaser.AUTO,
   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) => {

src/stores/assets.ts

@@ -4,7 +4,7 @@ import config from '@/config'
 
 export const useAssetStore = defineStore('assets', {
   state: () => ({
-    assets: [] as Asset[],
+    assets: [] as Asset[]
   }),
   actions: {
     setAssets(assets: Asset[]) {

src/stores/game.ts

@@ -12,7 +12,8 @@ export const useGameStore = defineStore('game', {
     user: null as User | null,
     character: null as Character | null,
     isGmPanelOpen: false,
-    isMovingCamera: false
+    isMovingCamera: false,
+    isChatOpen: false
   }),
   actions: {
     setScreen(screen: string) {
@@ -36,6 +37,9 @@ export const useGameStore = defineStore('game', {
     setMovingCamera(moving: boolean) {
       this.isMovingCamera = moving
     },
+    toggleChat() {
+      this.isChatOpen = !this.isChatOpen
+    },
     initConnection() {
       this.connection = io(config.server_endpoint, {
         secure: !config.development,

src/stores/zone.ts

@@ -8,7 +8,7 @@ export const useZoneStore = defineStore('zone', {
   }),
   getters: {
     getCharacterById: (state) => {
-      return (id: number) => state.characters.find(char => char.id === id)
+      return (id: number) => state.characters.find((char) => char.id === id)
     },
     getCharacterCount: (state) => {
       return state.characters.length
@@ -28,13 +28,13 @@ export const useZoneStore = defineStore('zone', {
       this.characters.push(character)
     },
     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) {
         this.characters[index] = { ...this.characters[index], ...updatedCharacter }
       }
     },
     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() {
       this.zone = null