diff --git a/src/board/Board.ts b/src/board/Board.ts index 868f0d7..52e4b36 100644 --- a/src/board/Board.ts +++ b/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, }; diff --git a/src/main.tsx b/src/main.tsx index 635b335..cfc6d95 100644 --- a/src/main.tsx +++ b/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); diff --git a/src/types.ts b/src/types.ts index 0d3992a..3e9478a 100644 --- a/src/types.ts +++ b/src/types.ts @@ -168,6 +168,7 @@ export type Handlers = { loadPGN: (pgn: string) => Promise; loadFEN: (fen: string) => Promise; importPGN: (link: string) => Promise; + load: (data: string) => Promise; downloadImage: () => Promise; downloadAnimation: () => Promise; }; diff --git a/src/ui/components/Load.css b/src/ui/components/Load.css index bee0e0b..534e748 100644 --- a/src/ui/components/Load.css +++ b/src/ui/components/Load.css @@ -5,27 +5,26 @@ border-bottom-right-radius: 5px; } -.load__pgn-input { - height: 30vh; +.load__game-input { + 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__pgn-btn { +.load__game-btn { width: 100%; } diff --git a/src/ui/components/Load.tsx b/src/ui/components/Load.tsx index 2671bc0..8979cb8 100644 --- a/src/ui/components/Load.tsx +++ b/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 [pgn, setPGN] = createSignal(""); - const [link, setLink] = createSignal(""); + const [data, setData] = createSignal(""); let filePicker: HTMLInputElement | undefined = undefined; return (
- setFEN(e.currentTarget.value)} - /> - -
- setLink(e.currentTarget.value)} - /> - -

{ + return REGEX.test(data.trim()); +}; + +export default isFEN; diff --git a/src/utils/isPGN.ts b/src/utils/isPGN.ts new file mode 100644 index 0000000..5f7b7df --- /dev/null +++ b/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;