fix pgn layout

Disservin · Apr 10, 2023 · 7664bcd · 7664bcd
1 parent 0d5b174
commit 7664bcd
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 64 deletions.
diff --git a/src/components/Analysis/EngineLines.vue b/src/components/Analysis/EngineLines.vue
@@ -209,16 +209,4 @@ export default defineComponent({
   padding: 5px;
   transition: transform 0.2s ease-in-out;
 }
-
-.container::-webkit-scrollbar {
-  width: 0.25rem;
-}
-
-.container::-webkit-scrollbar-track {
-  background: #1e1e24;
-}
-
-.container::-webkit-scrollbar-thumb {
-  background: #6649b8;
-}
 </style>
diff --git a/src/components/Analysis/Pgn.vue b/src/components/Analysis/Pgn.vue
@@ -1,6 +1,8 @@
 <template>
   <div class="pgn-display">
-    <pre>{{ formattedPgn }}</pre>
+    <div class="pgn-move" v-for="move in formattedPgn" :key="move">
+      {{ move }}
+    </div>
   </div>
 </template>
 
@@ -15,17 +17,22 @@ export default {
   computed: {
     formattedPgn() {
       const moves: string[] = this.gamePgn.split(" ");
-      console.log(this.gamePgn);
-      let format = "";
+      let formatted: string[] = [];
 
+      let new_move = "";
       moves.forEach((move, index) => {
-        if (index > 0 && index % 3 == 0) {
-          format += "\n";
+        if (move.endsWith(".")) {
+          new_move = " " + move;
+          return;
         }
-        format += move + " ";
+
+        new_move += " " + move;
+
+        formatted.push(new_move);
+        new_move = "";
       });
 
-      return format;
+      return formatted;
     },
   },
 };
@@ -34,5 +41,22 @@ export default {
 <style scoped>
 .pgn-display {
   font-family: monospace;
+  background-color: var(--bg-secondary);
+  border-radius: 5px;
+}
+
+.pgn-move {
+  padding: 5px;
+  user-select: none;
+  display: inline-block;
+  transition: transform 0.2s ease-in-out;
+  border-radius: 5px;
+}
+
+.pgn-move:hover {
+  cursor: pointer;
+  color: #34d399;
+  background-color: #1e1e24;
+  transform: scale(1.2) perspective(10px);
 }
 </style>
diff --git a/src/components/AppSideBar.vue b/src/components/AppSideBar.vue
@@ -52,15 +52,15 @@ body {
   padding: 0;
 }
 
-body::-webkit-scrollbar {
+::-webkit-scrollbar {
   width: 0.25rem;
 }
 
-body::-webkit-scrollbar-track {
+::-webkit-scrollbar-track {
   background: #1e1e24;
 }
 
-body::-webkit-scrollbar-thumb {
+::-webkit-scrollbar-thumb {
   background: #6649b8;
 }
 

diff --git a/src/views/Analysis.vue b/src/views/Analysis.vue
@@ -623,8 +623,7 @@ export default defineComponent({
             />
           </div>
           <div class="nav-secondary-content">
-            <!-- <div class="game-pgn"></div> -->
-            <Pgn :gamePgn="currentPgn" :key="currentFen" />
+            <Pgn class="game-pgn" :gamePgn="currentPgn" :key="currentFen" />
             <div class="analysis-graph"></div>
           </div>
         </div>
@@ -732,35 +731,26 @@ h1 {
   overflow-y: scroll;
   overflow-x: hidden;
   flex-grow: 0;
-  height: calc(50vh - 100px);
+  /* height: calc(50vh - 100px); */
+  height: 50%;
   background-color: var(--bg-secondary);
   border-radius: 5px;
   margin-bottom: 5px;
 }
 
-.nav-main-content::-webkit-scrollbar {
-  width: 0.25rem;
-}
-
-.nav-main-content::-webkit-scrollbar-track {
-  background: #1e1e24;
-}
-
-.nav-main-content::-webkit-scrollbar-thumb {
-  background: #6649b8;
-}
-
 .nav-secondary-content {
-  flex-basis: 50%;
   display: flex;
-  flex-wrap: wrap;
   flex-direction: column;
   flex-grow: 0 !important;
+  height: 50%;
+  margin-bottom: 20px;
+  gap: 10px;
 }
 
 .game-pgn {
   flex-basis: calc(50% - 5px);
-  background-color: #843b3b;
+  overflow-y: scroll;
+  overflow-x: hidden;
 }
 
 .analysis-graph {

diff --git a/src/views/Engines.vue b/src/views/Engines.vue
@@ -329,18 +329,6 @@ export default defineComponent({
   background-color: var(--selected-secondary);
 }
 
-.engine-table::-webkit-scrollbar {
-  width: 0.25rem;
-}
-
-.engine-table::-webkit-scrollbar-track {
-  background: #1e1e24;
-}
-
-.engine-table::-webkit-scrollbar-thumb {
-  background: #6649b8;
-}
-
 .engine-column input {
   background-color: var(--button-bg);
   color: var(--button-text);
@@ -427,18 +415,6 @@ input:focus {
   overflow-y: hidden;
 }
 
-.options::-webkit-scrollbar {
-  width: 0.25rem;
-}
-
-.options::-webkit-scrollbar-track {
-  background: #1e1e24;
-}
-
-.options::-webkit-scrollbar-thumb {
-  background: #6649b8;
-}
-
 .option {
   margin: 10px;
 }