WIP

src/game/Game.ts

@@ -70,7 +70,21 @@ class Game {
 
   loadFEN(fen: string) {
     this.game = new Chess(fen);
-    this.positions = [];
+    this.positions = [
+      {
+        ply: 0,
+        move: null,
+        end: 0,
+        fen,
+        check: false,
+        mate: false,
+        turn: this.game.turn(),
+        material: this.materialInfo(this.game.board()),
+        placement: this.getPlacement(this.game.fen()),
+        last: true,
+      },
+    ];
+    return this;
   }
 
   private getPlacement(fen: string) {

src/main.tsx

@@ -112,8 +112,21 @@ const main = async () => {
     changePiecesStyle(style: PiecesStyle) {
       board.setPiecesStyle(style);
     },
+    async loadPGN(pgn: string) {
+      const game = new Game().loadPGN(pgn);
+      setState({ pgn, fen: null, moves: game.getMoves() });
+      await player.load(game);
+    },
+    async loadFEN(fen: string) {
+      const game = new Game().loadFEN(fen);
+      setState({ pgn: null, fen, moves: game.getMoves() });
+      await player.load(game);
+    },
   };
 
+  // @ts-ignore
+  window.handlers = handlers;
+
   /**
    * RENDER
    **/

src/player/Player.ts

@@ -27,9 +27,9 @@ class Player {
     await this.firstRender;
 
     this.game = game;
-    this.ply = -1;
+    this.ply = 0;
 
-    await this.board.titleFrame(this.game.header);
+    await this.board.frame(this.game.getPosition(this.ply), this.game.header);
     this.board.render();
   }
 
@@ -53,7 +53,7 @@ class Player {
   async prev() {
     const ply = this.ply - 1;
 
-    if (ply < -1) {
+    if (ply < -1 || (ply < 0 && this.config.titleScreen === false)) {
       return;
     }
 

src/state.ts

@@ -27,12 +27,16 @@ const gameConfig: GameConfig = {
 export type State = {
   board: BoardConfig;
   game: GameConfig;
+  pgn: string | null;
+  fen: string | null;
   moves: string[];
 };
 
 const initialState: State = {
   board: boardConfig,
   game: gameConfig,
+  pgn: null,
+  fen: null,
   moves: [],
 };
 

src/types.ts

@@ -201,4 +201,6 @@ export type Handlers = {
   goto(ply: number): void;
   changeBoardStyle: (style: BoardStyle) => void;
   changePiecesStyle: (style: PiecesStyle) => void;
+  loadPGN: (pgn: string) => Promise<void>;
+  loadFEN: (fen: string) => Promise<void>;
 };

src/ui/components/Load.tsx

@@ -1,7 +1,11 @@
-import { Component } from "solid-js";
+import { Component, createSignal } from "solid-js";
+import { Handlers } from "../../types";
 import "./Load.css";
 
-const Load: Component = () => {
+const Load: Component<{ handlers: Handlers }> = (props) => {
+  const [fen, setFEN] = createSignal("");
+  const [pgn, setPGN] = createSignal("");
+
   return (
     <div class="load">
       <input
@@ -10,8 +14,15 @@ const Load: Component = () => {
         name="load-fen"
         placeholder="PASTE FEN..."
         spellcheck={false}
+        value={fen()}
+        onInput={(e) => setFEN(e.currentTarget.value)}
       />
-      <button class="load__fen-btn">LOAD FEN</button>
+      <button
+        class="load__fen-btn"
+        onClick={() => props.handlers.loadFEN(fen())}
+      >
+        LOAD FEN
+      </button>
       <textarea
         class="load__pgn-input"
         name="load-pgn"