From e58a9f16992de6aca0788d00e82cfbd8bc16ef07 Mon Sep 17 00:00:00 2001
From: Onizuka <gbpsms@gmail.com>
Date: Thu, 14 Nov 2024 00:18:19 +0100
Subject: [PATCH] [front] Minor features

---
 front/src/App.vue | 365 ++++++++++++++++++++++++----------------------
 1 file changed, 193 insertions(+), 172 deletions(-)

diff --git a/front/src/App.vue b/front/src/App.vue
index e5960ec..337ae49 100644
--- a/front/src/App.vue
+++ b/front/src/App.vue
@@ -63,15 +63,20 @@
       status = playback.status;
       hover = computed(() => status.value.hoverInfo(hoverTile));
       loadFile.value = false;
-
-      await nextTick();
-      if (!stageContainer.value) return;
-      stage.init(stageContainer.value, playback);
+      //
+      // await nextTick();
+      // if (!stageContainer.value) return;
+      // stage.init(stageContainer.value, playback);
     };
 
     reader.readAsText(file);
   };
 
+  const initStage = async () => {
+    if (!stageContainer.value) return;
+    stage.init(stageContainer.value, playback);
+  };
+
   // const game = mapGame(engineGame as EngineGame);
   // const hoverTile = reactive<HoverTile>({ x: undefined, y: undefined });
   // const stage = new Stage(game, hoverTile);
@@ -85,195 +90,201 @@
 </script>
 
 <template>
-  <div class="h-screen w-screen bg-gray-950">
-    <div v-if="loadFile" class="flex h-full w-full items-center justify-center">
-      <label
-        for="file-dropzone"
-        class="relative flex cursor-pointer flex-col items-center justify-center overflow-visible rounded-lg border-2 border-gray-600 bg-gray-500">
-        <img
-          alt="Lighthouse logo"
-          src="@/assets/logo-sin-fondo.png"
-          class="absolute -top-64 w-64" />
-        <div
-          class="flex flex-col items-center justify-center space-y-4 p-6 text-slate-200">
-          <Icon.Upload class="w-8" />
-          <p class="text-center">
-            <span class="text-white">Click</span> or
-            <span class="text-white">drag and drop</span>
-            <br />
-            a JSON game
-          </p>
-        </div>
-        <input
-          id="file-dropzone"
-          type="file"
-          class="hidden"
-          @change="fileUploaded" />
-      </label>
-    </div>
-    <div v-else>
-      <!-- Main -->
-      <div class="flex h-screen w-screen bg-black text-slate-100">
-        <!-- Left column -->
-        <div class="flex w-80 flex-col bg-[#0a1606]">
-          <!-- Header -->
+  <div class="h-screen w-screen overflow-hidden bg-gray-950">
+    <transition name="fade" mode="out-in" @after-enter="initStage">
+      <div
+        key="1"
+        v-if="loadFile"
+        class="flex h-full w-full items-center justify-center">
+        <label
+          for="file-dropzone"
+          class="relative flex cursor-pointer flex-col items-center justify-center overflow-visible rounded-lg border-2 border-gray-600 bg-gray-500">
+          <img
+            alt="Lighthouse logo"
+            src="@/assets/logo-sin-fondo.png"
+            class="absolute -top-64 w-64" />
           <div
-            class="flex h-40 items-center justify-center border-b-2 border-[#12230d]">
-            <img
-              alt="Lighthouse logo"
-              src="@/assets/logo-sin-fondo.png"
-              class="h-28 w-28" />
+            class="flex flex-col items-center justify-center space-y-4 p-6 text-slate-200">
+            <Icon.Upload class="w-8" />
+            <p class="text-center">
+              <span class="text-white">Upload</span> a JSON game
+            </p>
           </div>
-          <!-- Header -->
-
-          <!-- Scoreboard -->
-          <transition-group
-            name="list"
-            tag="div"
-            class="flex flex-col gap-4 p-4 text-slate-100">
+          <input
+            id="file-dropzone"
+            type="file"
+            class="hidden"
+            @change="fileUploaded" />
+        </label>
+      </div>
+      <div v-else>
+        <!-- Main -->
+        <div class="flex h-full w-full bg-black text-slate-100">
+          <!-- Left column -->
+          <div class="flex w-80 flex-col bg-[#0a1606]">
+            <!-- Header -->
             <div
-              class="flex gap-4"
-              v-for="player in status.scoreboard"
-              :key="player.id">
+              class="flex h-40 items-center justify-center border-b-2 border-[#12230d]">
               <img
-                class="w-12"
-                alt="Player avatar"
-                :src="`https://api.dicebear.com/8.x/bottts-neutral/svg?backgroundColor=${colorToString(player.color)}&radius=25&seed=${player.id}`" />
-              <div class="flex grow flex-col justify-center">
-                <span
-                  class="text-sm font-bold"
-                  :class="[tailwind[player.id - 1]]"
-                  >{{ player.name }}</span
-                >
-                <div class="flex gap-3 text-xs">
-                  <span class="flex items-center gap-1 text-yellow-300">
-                    <Icon.Medal class="w-4" />
-                    <span>{{ player.score }}</span>
-                  </span>
-                  <span class="flex items-center gap-1 text-blue-300">
-                    <Icon.Zap class="w-4" />
-                    <span>{{ player.energy }}</span>
-                  </span>
-                </div>
+                alt="Lighthouse logo"
+                src="@/assets/logo-sin-fondo.png"
+                class="h-28 w-28" />
+            </div>
+            <!-- Header -->
 
-                <div
-                  class="flex items-center gap-1 text-wrap text-xs text-slate-400">
-                  <Icon.Key class="w-4" />
-                  <span v-if="player.keys.length == 0">No keys</span>
-                  <span v-else v-for="key in player.keys">{{ key }}</span>
+            <!-- Scoreboard -->
+            <transition-group
+              name="list"
+              tag="div"
+              class="flex flex-col gap-4 p-4 text-slate-100">
+              <div
+                class="flex gap-4"
+                v-for="player in status.scoreboard"
+                :key="player.id">
+                <img
+                  class="w-12"
+                  alt="Player avatar"
+                  :src="`https://api.dicebear.com/8.x/bottts-neutral/svg?backgroundColor=${colorToString(player.color)}&radius=25&seed=${player.id}`" />
+                <div class="flex grow flex-col justify-center">
+                  <span
+                    class="text-sm font-bold"
+                    :class="[tailwind[player.id - 1]]"
+                    >{{ player.name }}</span
+                  >
+                  <div class="flex gap-3 text-xs">
+                    <span class="flex items-center gap-1 text-yellow-300">
+                      <Icon.Medal class="w-4" />
+                      <span>{{ player.score }}</span>
+                    </span>
+                    <span class="flex items-center gap-1 text-blue-300">
+                      <Icon.Zap class="w-4" />
+                      <span>{{ player.energy }}</span>
+                    </span>
+                  </div>
+
+                  <div
+                    class="flex items-center gap-1 text-wrap text-xs text-slate-400">
+                    <Icon.Key class="w-4" />
+                    <span v-if="player.keys.length == 0">No keys</span>
+                    <span v-else v-for="key in player.keys">{{ key }}</span>
+                  </div>
                 </div>
               </div>
-            </div>
-          </transition-group>
-          <!-- Scoreboard -->
-        </div>
-        <!-- Left column -->
-
-        <!-- Center column -->
-        <div class="flex grow flex-col bg-black py-4 text-slate-100">
-          <!-- Game info -->
-          <div class="flex basis-1/12 flex-col justify-end text-center">
-            <p class="font-bold">{{ status.title }}</p>
-            <p>{{ status.subtitle }}</p>
+            </transition-group>
+            <!-- Scoreboard -->
           </div>
+          <!-- Left column -->
 
-          <!-- Board -->
-          <div ref="stageContainer" class="w-full grow"></div>
-          <!-- Board -->
-
-          <!-- Playback controls -->
-          <div class="basis-1/5 space-y-2 text-center">
-            <div class="flex justify-center gap-8 pb-2">
-              <button @click="playback.restart" title="Restart">
-                <Icon.RotateCcw />
-                <!--<Icon.SkipBack />-->
-              </button>
-              <button @click="playback.prev" title="Previous Frame">
-                <Icon.StepBack />
-              </button>
-              <button
-                v-if="status.started"
-                @click="playback.pause"
-                title="Pause">
-                <Icon.Pause />
-              </button>
-              <button v-else @click="playback.play" title="Play">
-                <Icon.Play />
-              </button>
-              <button @click="playback.next" title="Next Frame">
-                <Icon.StepForward />
-              </button>
-              <button title="Load new game">
-                <Icon.Upload />
-              </button>
+          <!-- Center column -->
+          <div class="flex grow flex-col bg-black py-4 text-slate-100">
+            <!-- Game info -->
+            <div class="flex basis-1/12 flex-col justify-end text-center">
+              <p class="font-bold">{{ status.title }}</p>
+              <p>{{ status.subtitle }}</p>
             </div>
 
-            <div
-              class="mx-auto flex items-center justify-center gap-4 text-slate-400">
-              <span>Slower</span>
-              <Slider
-                v-model="playback.speed"
-                :min="1"
-                :max="MaxSpeed"
-                :lazy="false"
-                :tooltips="false"
-                class="w-40" />
-              <span>Faster</span>
-            </div>
+            <!-- Board -->
+            <div ref="stageContainer" class="relative w-full grow"></div>
+            <!-- Board -->
 
-            <div
-              class="mx-auto flex items-center justify-center gap-4 text-slate-400">
-              <span>Frame</span>
-              <Slider
-                v-model="playback.frame"
-                :min="0"
-                :max="playback.frames.length - 1"
-                :lazy="false"
-                :tooltips="false"
-                :disabled="status.started"
-                class="w-80" />
-            </div>
+            <!-- Playback controls -->
+            <div class="basis-1/5 space-y-2 text-center">
+              <div class="flex justify-center gap-8 pb-2">
+                <button @click="playback.restart" title="Restart">
+                  <Icon.RotateCcw />
+                  <!--<Icon.SkipBack />-->
+                </button>
+                <button @click="playback.prev" title="Previous Frame">
+                  <Icon.StepBack />
+                </button>
+                <button
+                  v-if="status.started"
+                  @click="playback.pause"
+                  title="Pause">
+                  <Icon.Pause />
+                </button>
+                <button v-else @click="playback.play" title="Play">
+                  <Icon.Play />
+                </button>
+                <button @click="playback.next" title="Next Frame">
+                  <Icon.StepForward />
+                </button>
+                <button
+                  title="Load new game"
+                  @click="
+                    loadFile = window.confirm('Do you want to load a new game?')
+                  ">
+                  <Icon.Upload />
+                </button>
+              </div>
+
+              <div
+                class="mx-auto flex items-center justify-center gap-4 text-slate-400">
+                <span>Slower</span>
+                <Slider
+                  v-model="playback.speed"
+                  :min="1"
+                  :max="MaxSpeed"
+                  :lazy="false"
+                  :tooltips="false"
+                  class="w-40" />
+                <span>Faster</span>
+              </div>
 
-            <div v-if="hover.show" class="text-xs">
-              <div v-if="hover.tile?.type == TileType.Ground">
-                <div class="flex items-center justify-center gap-2">
-                  <span>Tile({{ hover.tile?.x }},{{ hover.tile?.y }})</span>
-                  <div class="flex items-center gap-1 text-blue-300">
-                    <Icon.Zap class="w-3" />
-                    <span>{{ hover.tile?.energy }}</span>
+              <div
+                class="mx-auto flex items-center justify-center gap-4 text-slate-400">
+                <span>Frame</span>
+                <Slider
+                  v-model="playback.frame"
+                  :min="0"
+                  :max="playback.frames.length - 1"
+                  :lazy="false"
+                  :tooltips="false"
+                  :disabled="status.started"
+                  class="w-80" />
+              </div>
+
+              <div v-if="hover.show" class="text-xs">
+                <div v-if="hover.tile?.type == TileType.Ground">
+                  <div class="flex items-center justify-center gap-2">
+                    <span>Tile({{ hover.tile?.x }},{{ hover.tile?.y }})</span>
+                    <div class="flex items-center gap-1 text-blue-300">
+                      <Icon.Zap class="w-3" />
+                      <span>{{ hover.tile?.energy }}</span>
+                    </div>
                   </div>
-                </div>
-                <div
-                  v-if="hover.lighthouse"
-                  class="flex items-center justify-center gap-2">
-                  <span :class="[tailwindFor(hover.lighthouse?.ownerId)]"
-                    >Lighthouse({{ hover.lighthouse?.id }})</span
-                  >
-                  <div class="flex items-center gap-1 text-blue-300">
-                    <Icon.Zap class="w-3" />
-                    <span>{{ hover.lighthouse?.energy }}</span>
+                  <div
+                    v-if="hover.lighthouse"
+                    class="flex items-center justify-center gap-2">
+                    <span :class="[tailwindFor(hover.lighthouse?.ownerId)]"
+                      >Lighthouse({{ hover.lighthouse?.id }})</span
+                    >
+                    <div class="flex items-center gap-1 text-blue-300">
+                      <Icon.Zap class="w-3" />
+                      <span>{{ hover.lighthouse?.energy }}</span>
+                    </div>
+                  </div>
+                  <div class="flex items-center justify-center gap-2 pt-1">
+                    <span
+                      v-for="player in hover.players"
+                      class="font-bold"
+                      :key="player.id"
+                      :class="[tailwind[player.id - 1]]">
+                      {{ player.name }}
+                    </span>
                   </div>
                 </div>
-                <div class="flex items-center justify-center gap-2 pt-1">
-                  <span
-                    v-for="player in hover.players"
-                    class="font-bold"
-                    :key="player.id"
-                    :class="[tailwind[player.id - 1]]">
-                    {{ player.name }}
-                  </span>
-                </div>
+                <p v-else>Water tile</p>
+              </div>
+              <div v-else class="text-xs text-slate-500">
+                Hover over a tile to check its data
               </div>
-              <p v-else>Water tile</p>
-            </div>
-            <div v-else class="text-xs text-slate-500">
-              Hover over a tile to check its data
             </div>
+            <!-- Playback controls -->
           </div>
-          <!-- Playback controls -->
         </div>
       </div>
-    </div>
+    </transition>
   </div>
 </template>
 
@@ -282,4 +293,14 @@
   .list-move {
     transition: all 0.5s ease;
   }
+
+  .fade-enter-active,
+  .fade-leave-active {
+    transition: opacity 0.5s ease;
+  }
+
+  .fade-enter-from,
+  .fade-leave-to {
+    opacity: 0;
+  }
 </style>