WIP

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">