WIP

src/board/Board.ts

@@ -1,4 +1,4 @@
-import { BoardConfig, Header, PiecesStyle, Position } from "./../types";
+import { BoardConfig, Header, Position } from "./../types";
 import { Style, BoardStyle } from "../types";
 import drawRectangle from "./layers/drawRectangle";
 import drawCoords from "./layers/drawCoords";
@@ -8,6 +8,7 @@ import drawHeader from "./layers/drawHeader";
 import drawExtraInfo from "./layers/drawExtraInfo";
 import boards from "./styles-board";
 import isLink from "../utils/isLink";
+import { PiecesStyle } from "./styles-pieces/piecesStyles";
 
 const defaultConfig: BoardConfig = {
   size: 720,
@@ -20,6 +21,7 @@ const defaultConfig: BoardConfig = {
   showMoveIndicator: true,
   showChecks: true,
   showCoords: true,
+  showShadows: false,
   flipped: false,
 };
 

src/main.tsx

@@ -2,7 +2,7 @@ import WebFont from "webfontloader";
 // import * as Hammer from "hammerjs";
 import { render } from "solid-js/web";
 
-import { BoardStyle, PiecesStyle } from "./types";
+import { BoardStyle } from "./types";
 
 import Board from "./board/Board";
 import Game from "./game/Game";
@@ -19,6 +19,10 @@ import download from "./utils/download";
 import { compressPGN } from "./game/PGNHelpers";
 import extractUrlData from "./persistance/extractUrlData";
 import importFromLink from "./imports/importFromLink";
+import isFEN from "./utils/isFEN";
+import isPGN from "./utils/isPGN";
+import isSafeLink from "./utils/isSafeLink";
+import { PiecesStyle } from "./board/styles-pieces/piecesStyles";
 
 const main = async () => {
   const board = new Board(state.boardConfig);
@@ -165,6 +169,24 @@ const main = async () => {
 
       document.title = `SHORTCASTLE - FEN ${fen}`;
     },
+    async load(data: string) {
+      if (isFEN(data)) {
+        await this.loadFEN(data);
+        return true;
+      }
+
+      if (isPGN(data)) {
+        await this.loadPGN(data);
+        return true;
+      }
+
+      if (isSafeLink(data)) {
+        await this.importPGN(data);
+        return true;
+      }
+
+      return false;
+    },
     async importPGN(link: string) {
       const result = await importFromLink(link);
 

src/types.ts

@@ -168,6 +168,7 @@ export type Handlers = {
   loadPGN: (pgn: string) => Promise<void>;
   loadFEN: (fen: string) => Promise<void>;
   importPGN: (link: string) => Promise<void>;
+  load: (data: string) => Promise<boolean>;
   downloadImage: () => Promise<void>;
   downloadAnimation: () => Promise<void>;
 };

src/ui/components/Load.css

@@ -5,27 +5,26 @@
   border-bottom-right-radius: 5px;
 }
 
-.load__pgn-input {
+.load__game-input {
-  height: 30vh;
+  height: 50vh;
   margin-top: 2rem;
 }
 
-.load__pgn-input::-webkit-scrollbar {
+.load__game-input::-webkit-scrollbar {
   width: 0.7rem;
   cursor: pointer;
 }
 
-.load__pgn-input::-webkit-scrollbar-track {
+.load__game-input::-webkit-scrollbar-track {
   box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
 }
 
-.load__pgn-input::-webkit-scrollbar-thumb {
+.load__game-input::-webkit-scrollbar-thumb {
   background-color: rgb(0, 59, 47);
   outline: 1px solid rgb(0, 59, 47);
 }
 
-.load__fen-btn,
+.load__game-btn {
-.load__pgn-btn {
   width: 100%;
 }
 

src/ui/components/Load.tsx

@@ -5,74 +5,30 @@ import { state } from "../../state";
 import "./Load.css";
 
 const Load: Component<{ handlers: Handlers; class?: string }> = (props) => {
-  const [fen, setFEN] = createSignal("");
+  const [data, setData] = createSignal("");
-  const [pgn, setPGN] = createSignal("");
-  const [link, setLink] = createSignal("");
 
   let filePicker: HTMLInputElement | undefined = undefined;
 
   return (
     <div class={"load" + (props.class ? ` ${props.class}` : "")}>
-      <input
-        class="load__fen-input"
-        type="text"
-        name="load-fen"
-        placeholder="Paste FEN..."
-        spellcheck={false}
-        value={fen()}
-        onInput={(e) => setFEN(e.currentTarget.value)}
-      />
-      <button
-        class="load__fen-btn"
-        onClick={() => {
-          if (fen()) {
-            props.handlers.loadFEN(fen());
-            setFEN("");
-          }
-        }}
-      >
-        LOAD FEN
-      </button>
-      <hr />
-      <input
-        class="load__link-input"
-        type="text"
-        name="load-link"
-        placeholder="Paste lichess link..."
-        spellcheck={false}
-        value={link()}
-        onInput={(e) => setLink(e.currentTarget.value)}
-      />
-      <button
-        class="load__link-btn"
-        onClick={() => {
-          if (link()) {
-            props.handlers.importPGN(link());
-            setLink("");
-          }
-        }}
-      >
-        IMPORT GAME
-      </button>
-      <hr />
       <textarea
-        class="load__pgn-input"
+        class="load__game-input"
-        name="load-pgn"
+        name="load-game"
-        placeholder="Paste PGN..."
+        placeholder="Paste PGN, FEN or Lichess link..."
         spellcheck={false}
-        value={pgn()}
+        value={data()}
-        onInput={(e) => setPGN(e.currentTarget.value)}
+        onInput={(e) => setData(e.currentTarget.value)}
       ></textarea>
       <button
-        class="load__pgn-btn"
+        class="load__game-btn"
         onClick={() => {
-          if (pgn()) {
+          if (data()) {
-            props.handlers.loadPGN(pgn());
+            props.handlers.load(data());
-            setPGN("");
+            setData("");
           }
         }}
       >
-        LOAD PGN
+        LOAD
       </button>
       <hr />
       <input

src/utils/isFEN.ts

@@ -0,0 +1,8 @@
+const REGEX =
+  /^([1-8kqrbnp]+\/)+[1-8kqrbnp]+ [wb] ([kq]+|-) ([a-h1-8]{2}|-) [01] \d+$/i;
+
+const isFEN = (data: string) => {
+  return REGEX.test(data.trim());
+};
+
+export default isFEN;

src/utils/isPGN.ts

@@ -0,0 +1,8 @@
+const REGEX =
+  /((\[[a-z0-9]+ +"[^"\n\r]+"](\r\n|\r|\n))*(\r\n|\r|\n)+){0,1}\d+\. +[a-h1-8x+#=]+/i;
+
+const isPGN = (data: string) => {
+  return REGEX.test(data);
+};
+
+export default isPGN;