feat: remove afen sidebar, create new sidebar with move history

DecentM · Oct 2, 2023 · df13896 · df13896
1 parent d99b1d8
commit df13896
Show file tree

Hide file tree

Showing 15 changed files with 292 additions and 330 deletions.
diff --git a/apps/frontend/src/components/afen-info.vue b/apps/frontend/src/components/afen-info.vue
diff --git a/apps/frontend/src/components/chess-board.vue b/apps/frontend/src/components/chess-board.vue
@@ -22,85 +22,91 @@ const sidebarWidth = computed(() => {
 </script>
 
 <template>
-  <div class="column">
-    <div class="row" :style="{ height: `${sidebarWidth}px` }">
-      <div :style="{ width: `${sidebarWidth}px` }"></div>
-      <q-card
-        v-for="(_, fileIndex) in 8"
-        :key="fileIndex"
-        class="col column full-height justify-center"
-        flat
-      >
-        <q-card-section class="text-center q-pa-none">
-          {{
-            fileToLetter(
-              (perspective === 'white'
-                ? 9 - (8 - fileIndex)
-                : 8 - fileIndex) as File
-            ).toUpperCase()
-          }}
-        </q-card-section>
-      </q-card>
-      <div :style="{ width: `${sidebarWidth}px` }"></div>
-    </div>
-
-    <div class="row">
-      <div class="column" :style="{ width: `${sidebarWidth}px` }">
+  <div :style="{ width: `${width}px` }">
+    <div class="column">
+      <div class="row" :style="{ height: `${sidebarWidth}px` }">
+        <div :style="{ width: `${sidebarWidth}px` }"></div>
         <q-card
-          v-for="(_, rankIndex) in 8"
-          :key="rankIndex"
-          class="col column full-height justify-center text-center"
+          v-for="(_, fileIndex) in 8"
+          :key="fileIndex"
+          class="col column full-height justify-center"
           flat
         >
-          <q-card-section class="q-pa-none">
-            {{ perspective === 'white' ? 8 - rankIndex : 9 - (8 - rankIndex) }}
+          <q-card-section class="text-center q-pa-none">
+            {{
+              fileToLetter(
+                (perspective === 'white'
+                  ? 9 - (8 - fileIndex)
+                  : 8 - fileIndex) as File
+              ).toUpperCase()
+            }}
           </q-card-section>
         </q-card>
+        <div :style="{ width: `${sidebarWidth}px` }"></div>
       </div>
 
-      <div class="col">
-        <board-table
-          @execute-node="(node) => emit('execute-node', node)"
-          :board="board"
-          :perspective="perspective"
-          :play-as="playAs"
-          :width="width - sidebarWidth"
-        />
+      <div class="row">
+        <div class="column" :style="{ width: `${sidebarWidth}px` }">
+          <q-card
+            v-for="(_, rankIndex) in 8"
+            :key="rankIndex"
+            class="col column full-height justify-center text-center"
+            flat
+          >
+            <q-card-section class="q-pa-none">
+              {{
+                perspective === 'white' ? 8 - rankIndex : 9 - (8 - rankIndex)
+              }}
+            </q-card-section>
+          </q-card>
+        </div>
+
+        <div class="col">
+          <board-table
+            @execute-node="(node) => emit('execute-node', node)"
+            :board="board"
+            :perspective="perspective"
+            :play-as="playAs"
+            :width="width - sidebarWidth * 2"
+          />
+        </div>
+
+        <div class="column" :style="{ width: `${sidebarWidth}px` }">
+          <q-card
+            v-for="(_, rankIndex) in 8"
+            :key="rankIndex"
+            class="col column full-height justify-center text-center"
+            flat
+          >
+            <q-card-section class="q-pa-none">
+              {{
+                perspective === 'white' ? 8 - rankIndex : 9 - (8 - rankIndex)
+              }}
+            </q-card-section>
+          </q-card>
+        </div>
       </div>
 
-      <div class="column" :style="{ width: `${sidebarWidth}px` }">
+      <div class="row" :style="{ height: `${sidebarWidth}px` }">
+        <div :style="{ width: `${sidebarWidth}px` }"></div>
         <q-card
-          v-for="(_, rankIndex) in 8"
-          :key="rankIndex"
-          class="col column full-height justify-center text-center"
+          v-for="(_, fileIndex) in 8"
+          :key="fileIndex"
+          class="col column full-height justify-center"
           flat
         >
-          <q-card-section class="q-pa-none">
-            {{ perspective === 'white' ? 8 - rankIndex : 9 - (8 - rankIndex) }}
+          <q-card-section class="text-center q-pa-none">
+            {{
+              fileToLetter(
+                (perspective === 'white'
+                  ? 9 - (8 - fileIndex)
+                  : 8 - fileIndex) as File
+              ).toUpperCase()
+            }}
           </q-card-section>
         </q-card>
+        <div :style="{ width: `${sidebarWidth}px` }"></div>
       </div>
     </div>
-
-    <div class="row" :style="{ height: `${sidebarWidth}px` }">
-      <div :style="{ width: `${sidebarWidth}px` }"></div>
-      <q-card
-        v-for="(_, fileIndex) in 8"
-        :key="fileIndex"
-        class="col column full-height justify-center"
-        flat
-      >
-        <q-card-section class="text-center q-pa-none">
-          {{
-            fileToLetter(
-              (perspective === 'white'
-                ? 9 - (8 - fileIndex)
-                : 8 - fileIndex) as File
-            ).toUpperCase()
-          }}
-        </q-card-section>
-      </q-card>
-      <div :style="{ width: `${sidebarWidth}px` }"></div>
-    </div>
   </div>
 </template>