set pgn moves

Author: Disservin

src/components/Analysis/Pgn.vue

@@ -1,6 +1,10 @@
 <template>
   <div class="pgn-display">
-    <div class="pgn-move" v-for="move in formattedPgn" :key="move">
+    <div
+      class="pgn-move"
+      v-for="(move, index) in formattedPgn"
+      @click="sendPGNMoves(index)"
+    >
       {{ move }}
     </div>
   </div>
@@ -35,6 +39,23 @@ export default {
       return formatted;
     },
   },
+  methods: {
+    sendPGNMoves(moveIndex: number) {
+      const formatted = this.formattedPgn;
+      let pgn = "";
+
+      formatted.forEach((move, index) => {
+        if (index > moveIndex) {
+          return;
+        }
+
+        pgn += move.trim() + " ";
+      });
+
+      pgn = pgn.trim();
+      this.$emit("send-pgn-moves", pgn);
+    },
+  },
 };
 </script>
 

src/views/Analysis.vue

@@ -200,7 +200,26 @@ export default defineComponent({
         },
       });
 
-      //   await this.sendEngineCommand("go");
+      this.currentFen = this.game.fen();
+      this.currentPgn = this.game.pgn();
+    },
+    async newPgnMoves(pgn: string) {
+      await this.sendEngineCommand("stop");
+      this.engineLines.clear();
+
+      this.game.loadPgn(pgn);
+
+      this.cg?.set({
+        fen: this.game.fen(),
+        turnColor: this.toColor(),
+        lastMove: undefined,
+        movable: {
+          color: this.toColor(),
+          dests: this.toDests(),
+        },
+      });
+
+      this.moveHistory = this.game.history().join(" ") + " ";
 
       this.currentFen = this.game.fen();
       this.currentPgn = this.game.pgn();
@@ -623,7 +642,12 @@ export default defineComponent({
             />
           </div>
           <div class="nav-secondary-content">
-            <Pgn class="game-pgn" :gamePgn="currentPgn" :key="currentFen" />
+            <Pgn
+              class="game-pgn"
+              @send-pgn-moves="newPgnMoves"
+              :gamePgn="currentPgn"
+              :key="currentFen"
+            />
             <div class="analysis-graph"></div>
           </div>
         </div>