WIP

src/player/Player.ts

@@ -1,6 +1,7 @@
 import { GameConfig } from "../types";
 import Board from "../board/Board";
 import Game from "../game/Game";
+import { setState } from "../state";
 
 const delay = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
 
@@ -22,6 +23,14 @@ class Player {
     this.config = { ...this.config, ...config };
   }
 
+  getPosition() {
+    const position = this.game.getPosition(this.ply);
+    setState({ ply: position.ply });
+    setState({ fen: position.fen });
+
+    return position;
+  }
+
   async load(game: Game) {
     this.pause();
     await this.firstRender;
@@ -29,7 +38,7 @@ class Player {
     this.game = game;
     this.ply = 0;
 
-    await this.board.frame(this.game.getPosition(this.ply), this.game.header);
+    await this.board.frame(this.getPosition(), this.game.header);
     this.board.render();
   }
 
@@ -65,7 +74,7 @@ class Player {
       return;
     }
 
-    await this.board.frame(this.game.getPosition(ply), this.game.header);
+    await this.board.frame(this.getPosition(), this.game.header);
     this.board.render();
   }
 
@@ -78,28 +87,28 @@ class Player {
 
     this.ply = ply;
 
-    await this.board.frame(this.game.getPosition(ply), this.game.header);
+    await this.board.frame(this.getPosition(), this.game.header);
     this.board.render();
   }
 
   async first() {
     this.ply = 0;
 
-    await this.board.frame(this.game.getPosition(this.ply), this.game.header);
+    await this.board.frame(this.getPosition(), this.game.header);
     this.board.render();
   }
 
   async last() {
     this.ply = this.game.length - 1;
 
-    await this.board.frame(this.game.getPosition(this.ply), this.game.header);
+    await this.board.frame(this.getPosition(), this.game.header);
     this.board.render();
   }
 
   async goto(ply: number) {
     this.ply = ply;
 
-    await this.board.frame(this.game.getPosition(this.ply), this.game.header);
+    await this.board.frame(this.getPosition(), this.game.header);
     this.board.render();
   }
 }

src/state.ts

@@ -28,16 +28,18 @@ export type State = {
   board: BoardConfig;
   game: GameConfig;
   pgn: string | null;
-  fen: string | null;
+  fen: string;
   moves: string[];
+  ply: number;
 };
 
 const initialState: State = {
   board: boardConfig,
   game: gameConfig,
   pgn: null,
-  fen: null,
+  fen: "",
   moves: [],
+  ply: 0,
 };
 
 const [state, setState] = createStore(initialState);

src/ui/components/Moves.css

@@ -23,6 +23,11 @@
   color: rgb(0, 173, 136);
 }
 
+.move__ply--current {
+  color: #aaa;
+  background-color: #ffffff22;
+}
+
 .move__ply:hover {
   text-decoration: underline;
   cursor: pointer;

src/ui/components/Moves.tsx

@@ -3,6 +3,7 @@ import chunk_ from "@arrows/array/chunk_";
 import { Handlers } from "../../types";
 import Scrollable from "./reusable/Scrollable";
 import "./Moves.css";
+import { state } from "../../state";
 
 const Moves: Component<{ moves: readonly string[]; handlers: Handlers }> = (
   props
@@ -17,13 +18,19 @@ const Moves: Component<{ moves: readonly string[]; handlers: Handlers }> = (
             <div class="move">
               <span class="move__id">{i() + 1}.</span>
               <span
-                class="move__ply"
+                classList={{
+                  move__ply: true,
+                  "move__ply--current": state.ply === i() * 2 + 1,
+                }}
                 onClick={() => props.handlers.goto(i() * 2 + 1)}
               >
                 {white}
               </span>
               <span
-                class="move__ply"
+                classList={{
+                  move__ply: true,
+                  "move__ply--current": state.ply === i() * 2 + 2,
+                }}
                 onClick={() => props.handlers.goto(i() * 2 + 2)}
               >
                 {black}

src/ui/components/Share.tsx

@@ -8,7 +8,7 @@ const Share: Component<{ handlers: Handlers }> = (props) => {
   return (
     <Scrollable class="share">
       <div className="share__view">
-        <h2>View options</h2>
+        <h2>Board options</h2>
         <button
           class="controls__button controls__button--first"
           onClick={props.handlers.flip}
@@ -28,7 +28,6 @@ const Share: Component<{ handlers: Handlers }> = (props) => {
           onClick={props.handlers.toggleExtraInfo}
           title="EXTRA INFO"
         >
-          {/* <i class="las la-info"></i> */}
           <i class="las la-info-circle"></i>
         </button>
         <button
@@ -53,6 +52,7 @@ const Share: Component<{ handlers: Handlers }> = (props) => {
           name="current_fen"
           readOnly
           placeholder="Current FEN..."
+          value={state.fen}
         />
 
         <div class="double">