WIP

src/ui/components/Controls.tsx

@@ -0,0 +1,35 @@
+import { Component } from "solid-js";
+import { Handlers } from "../../types";
+
+const Controls: Component<{ handlers: Handlers }> = (props) => {
+  return (
+    <div class="controls">
+      <button class="controls__button" onClick={props.handlers.first}>
+        FIRST
+      </button>
+      <button class="controls__button" onClick={props.handlers.prev}>
+        PREV
+      </button>
+      <button class="controls__button" onClick={props.handlers.togglePlay}>
+        PLAY/PAUSE
+      </button>
+      <button class="controls__button" onClick={props.handlers.next}>
+        NEXT
+      </button>
+      <button class="controls__button" onClick={props.handlers.last}>
+        LAST
+      </button>
+      <button class="controls__button" onClick={props.handlers.flip}>
+        FLIP
+      </button>
+      <button class="controls__button" onClick={props.handlers.toggleBorder}>
+        TOGGLE BORDER
+      </button>
+      <button class="controls__button" onClick={props.handlers.toggleExtraInfo}>
+        TOGGLE EXTRA INFO
+      </button>
+    </div>
+  );
+};
+
+export default Controls;

src/ui/components/Load.tsx

@@ -0,0 +1,26 @@
+import { Component, For } from "solid-js";
+import chunk_ from "@arrows/array/chunk_";
+import { Handlers } from "../../types";
+import "./load.css";
+
+const Load: Component<{}> = (props) => {
+  return (
+    <div class="load">
+      <input
+        class="load__fen-input"
+        type="text"
+        name="load-fen"
+        placeholder="PASTE FEN..."
+      />
+      <button class="load__fen-btn">LOAD FEN</button>
+      <textarea
+        class="load__pgn-input"
+        name="load-pgn"
+        placeholder="PASTE PGN..."
+      ></textarea>
+      <button class="load__pgn-btn">LOAD PGN</button>
+    </div>
+  );
+};
+
+export default Load;

src/ui/components/Moves.tsx

@@ -0,0 +1,37 @@
+import { Component, For } from "solid-js";
+import chunk_ from "@arrows/array/chunk_";
+import { Handlers } from "../../types";
+
+const Moves: Component<{ moves: readonly string[]; handlers: Handlers }> = (
+  props
+) => {
+  return (
+    <div class="moves">
+      <For each={chunk_(2, props.moves as string[])}>
+        {(move, i) => {
+          const [white, black] = move as [string, string];
+
+          return (
+            <p class="move">
+              {i() + 1}.
+              <span
+                class="ply"
+                onClick={() => props.handlers.goto(i() * 2 + 1)}
+              >
+                {white}
+              </span>
+              <span
+                class="ply"
+                onClick={() => props.handlers.goto(i() * 2 + 2)}
+              >
+                {black}
+              </span>
+            </p>
+          );
+        }}
+      </For>
+    </div>
+  );
+};
+
+export default Moves;

src/ui/components/load.css

@@ -0,0 +1,26 @@
+.load {
+  background: black;
+  padding: 20px;
+}
+
+.load__fen-input {
+  width: 100%;
+  padding: 10px;
+  font-family: "Fira Mono";
+  font-size: 1.4rem;
+}
+
+.load__pgn-input {
+  width: 100%;
+  padding: 10px;
+  font-family: "Fira Mono";
+  font-size: 1.4rem;
+}
+
+.load__fen-btn,
+.load__pgn-btn {
+  width: 100%;
+  padding: 10px;
+  font-family: "Fira Mono";
+  font-size: 1.4rem;
+}