npm run format

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>
-  <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">
+    <GmTools v-if="isLoaded && gameStore.character?.role === 'gm'" />
+    <GmPanel v-if="isLoaded && gameStore.character?.role === 'gm'" />
+
     <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,
-  scale: {
-    mode: Phaser.Scale.RESIZE,
-    autoCenter: Phaser.Scale.CENTER_BOTH,
-    width: window.innerWidth,
-    height: window.innerHeight
-  }
+  pixelArt: true
 }
 
 const createGame = (game: Phaser.Game) => {