From e905e896d3768a25748005273a9dc7117e931660 Mon Sep 17 00:00:00 2001 From: Maciej Caderek Date: Wed, 16 Feb 2022 03:17:19 +0100 Subject: [PATCH] WIP --- favicon.svg | 17 ++------ index.html | 9 +---- src/imports/importFromLink.ts | 6 ++- src/logo-dark.svg | 11 ++++++ src/logo.svg | 11 ++++++ src/main.tsx | 2 + src/ui/App.css | 24 ++++++----- src/ui/App.tsx | 26 ++++++------ src/ui/components/Controls.css | 3 +- src/ui/components/GameTabs.css | 3 +- src/ui/components/Header.css | 47 ++++++++++++++++++++++ src/ui/components/Header.tsx | 39 ++++++++++++++++++ src/ui/components/Load.css | 1 + src/ui/components/Moves.tsx | 4 +- src/ui/components/Pieces.tsx | 70 --------------------------------- src/ui/components/SetupTabs.css | 2 +- src/ui/components/Share.tsx | 18 +++++++-- 17 files changed, 171 insertions(+), 122 deletions(-) create mode 100644 src/logo-dark.svg create mode 100644 src/logo.svg create mode 100644 src/ui/components/Header.css create mode 100644 src/ui/components/Header.tsx diff --git a/favicon.svg b/favicon.svg index de4aedd..796371e 100644 --- a/favicon.svg +++ b/favicon.svg @@ -1,15 +1,4 @@ - - - - - - - - - - - - - - + + + diff --git a/index.html b/index.html index 2a75c2d..d7ef81d 100644 --- a/index.html +++ b/index.html @@ -8,17 +8,10 @@ rel="stylesheet" href="https://maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.3.0/css/line-awesome.min.css" /> - Vite App + shortcastle
- - diff --git a/src/imports/importFromLink.ts b/src/imports/importFromLink.ts index 61a25c1..e2fbd6f 100644 --- a/src/imports/importFromLink.ts +++ b/src/imports/importFromLink.ts @@ -21,7 +21,11 @@ const importFromLichess = async (link: string): Promise => { const pgn = await res.text(); - return { error: false, pgn, side: second === "black" ? "b" : "w" }; + return { + error: false, + pgn, + side: String(second).startsWith("black") ? "b" : "w", + }; } return { error: true, errorType: "INCORRECT_LINK" }; diff --git a/src/logo-dark.svg b/src/logo-dark.svg new file mode 100644 index 0000000..9dcf106 --- /dev/null +++ b/src/logo-dark.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/logo.svg b/src/logo.svg new file mode 100644 index 0000000..c23b702 --- /dev/null +++ b/src/logo.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/main.tsx b/src/main.tsx index f71295f..61985e2 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -119,6 +119,7 @@ const main = async () => { await this.loadPGN(result.pgn); }, async downloadImage() { + await new Promise((resolve) => setTimeout(resolve, 0)); const data = await createImage( state.fen, state.pgn, @@ -129,6 +130,7 @@ const main = async () => { download(data, "fen", "png"); }, async downloadAnimation() { + await new Promise((resolve) => setTimeout(resolve, 0)); const data = await createAnimation( state.pgn, state.boardConfig, diff --git a/src/ui/App.css b/src/ui/App.css index 0945eae..48429e9 100644 --- a/src/ui/App.css +++ b/src/ui/App.css @@ -20,12 +20,16 @@ body { background-position: center; text-align: center; font-family: Ubuntu, sans-serif; + + --header-height: 4rem; + --header-margin: 6rem; } .dark { background-color: #232831; /* background-image: url(src/ui/img/pattern.png); */ color: #ddd; + --logo-url: url(src/logo.svg); --color-btn: rgb(0, 173, 136); --color-btn-light: rgb(0, 207, 162); @@ -42,9 +46,11 @@ body { } .light { - background-color: #a7b3b9; + background-color: #c1ced4; /* background-image: url(src/ui/img/pattern-light.png); */ color: #222; + --logo-url: url(src/logo-dark.svg); + --color-btn: rgb(0, 148, 116); --color-btn-light: rgb(0, 114, 89); --color-tab: #5d6468; @@ -74,7 +80,7 @@ body { button, .upload::before { - padding: 10px; + padding: 1rem; font-family: "Ubuntu"; font-size: 1.5rem; background: var(--color-btn); @@ -92,10 +98,10 @@ button:hover, input, textarea { width: 100%; - padding: 10px; + padding: 1rem; font-family: "Fira Mono"; font-size: 1.4rem; - margin-bottom: 10px; + margin-bottom: 1rem; background: var(--color-bg-input); border: solid 1px var(--color-border-input); color: var(--color-text-input); @@ -111,7 +117,7 @@ h2 { color: var(--color-text); text-align: left; font-size: 1.8rem; - margin: 25px 0 15px 0; + margin: 2.5rem 0 1.5rem 0; font-weight: 500; } @@ -119,17 +125,17 @@ h3 { color: var(--color-text); text-align: left; font-size: 1.6rem; - margin: 15px 0 10px 0; + margin: 1.5rem 0 1rem 0; font-weight: 500; } hr { - margin-top: 20px; + margin-top: 2rem; border-top: solid 1px var(--color-highlight); } .board { - box-shadow: 0 0 30px rgba(0, 0, 0, 0.5); + /* box-shadow: 0 0 30px rgba(0, 0, 0, 0.5); */ border-radius: 5px; max-width: 100%; max-height: 100%; @@ -157,7 +163,7 @@ hr { /* background: rgba(255, 166, 0, 0.1); */ height: 100vh; grid-area: board; - padding: 20px 0; + padding: var(--header-margin) 0 2rem 0; } @media screen and (max-width: 1024px) { diff --git a/src/ui/App.tsx b/src/ui/App.tsx index dbe2613..81920fe 100644 --- a/src/ui/App.tsx +++ b/src/ui/App.tsx @@ -4,6 +4,7 @@ import type { DeepReadonly } from "solid-js/store"; import { Handlers } from "../types"; import { State } from "../state"; +import Header from "./components/Header"; import GameTabs from "./components/GameTabs"; import SetupTabs from "./components/SetupTabs"; @@ -13,18 +14,21 @@ const App: Component<{ handlers: Handlers; state: DeepReadonly }> = ( props ) => { return ( -
-
- + <> +
+
+
+ +
+
+
+ +
-
-
- -
-
+ ); }; diff --git a/src/ui/components/Controls.css b/src/ui/components/Controls.css index eba7ac1..d00e430 100644 --- a/src/ui/components/Controls.css +++ b/src/ui/components/Controls.css @@ -5,14 +5,13 @@ .controls { background: var(--color-bg-block); - height: 100%; padding: 20px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; } .controls__button { - margin: 3px; + margin: 0 3px; padding: 5px; font-size: 3rem; text-align: center; diff --git a/src/ui/components/GameTabs.css b/src/ui/components/GameTabs.css index eef7ef5..4e1ac47 100644 --- a/src/ui/components/GameTabs.css +++ b/src/ui/components/GameTabs.css @@ -1,6 +1,7 @@ .game-box { grid-area: moves; padding: 20px; + padding-top: var(--header-margin); min-width: 360px; height: 100vh; } @@ -8,7 +9,7 @@ .game-tabs { height: 100%; display: grid; - grid-template-rows: 38px 1fr; + grid-template-rows: 38px 1fr 84px; } .game-tabs__btn { diff --git a/src/ui/components/Header.css b/src/ui/components/Header.css new file mode 100644 index 0000000..b3e85c8 --- /dev/null +++ b/src/ui/components/Header.css @@ -0,0 +1,47 @@ +.header-box { + height: var(--header-height); + background-color: var(--color-bg-block); + position: absolute; + top: 0; + width: 100%; + display: grid; + grid-template-columns: 1fr 1fr; + font-size: 1.8rem; +} + +.header__logo { + padding: 10px 20px; + text-align: left; + color: var(--color-text-dimmed); +} + +.header__logo-pic { + height: 2rem; + max-width: 320px; + background-image: var(--logo-url); + background-repeat: no-repeat; + background-size: contain; +} + +.header__options { + padding: 0px 20px; + text-align: right; +} + +.header__options-ico { + display: inline-block; + font-size: 2.4rem; + position: relative; + top: -0.2rem; + color: var(--color-text); + padding-top: 1rem; + height: 100%; + margin-left: 10px; + /* background-color: aqua; */ + text-align: center; +} + +.header__options-ico:hover { + color: var(--color-btn); + cursor: pointer; +} diff --git a/src/ui/components/Header.tsx b/src/ui/components/Header.tsx new file mode 100644 index 0000000..a4474a4 --- /dev/null +++ b/src/ui/components/Header.tsx @@ -0,0 +1,39 @@ +import { Component, createSignal } from "solid-js"; +import { Handlers } from "../../types"; +// import { state, setState } from "../../state"; +import "./Header.css"; + +const Header: Component<{ handlers: Handlers }> = () => { + const [darkMode, setDarkMode] = createSignal(true); + + return ( +
+
+ ); +}; + +export default Header; diff --git a/src/ui/components/Load.css b/src/ui/components/Load.css index 82f20cf..0b752cd 100644 --- a/src/ui/components/Load.css +++ b/src/ui/components/Load.css @@ -3,6 +3,7 @@ padding: 20px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; + grid-row-end: span 2; } .load__pgn-input { diff --git a/src/ui/components/Moves.tsx b/src/ui/components/Moves.tsx index f45786c..29d46ca 100644 --- a/src/ui/components/Moves.tsx +++ b/src/ui/components/Moves.tsx @@ -9,7 +9,9 @@ const Moves: Component<{ moves: readonly string[]; handlers: Handlers }> = ( props ) => { createEffect(() => { - document.querySelector(`[data-ply="${state.ply}"]`)?.scrollIntoView(); + if (!state.mobile) { + document.querySelector(`[data-ply="${state.ply}"]`)?.scrollIntoView(); + } }); return ( diff --git a/src/ui/components/Pieces.tsx b/src/ui/components/Pieces.tsx index 5d835e3..940861a 100644 --- a/src/ui/components/Pieces.tsx +++ b/src/ui/components/Pieces.tsx @@ -39,73 +39,3 @@ const Pieces: Component<{ handlers: Handlers }> = (props) => { }; export default Pieces; - -// import { Component, For, createSignal } from "solid-js"; -// import { Handlers, StyleCategory, BoardStyle, Style } from "../../types"; -// import Scrollable from "./reusable/Scrollable"; -// import "./Boards.css"; -// import styles from "../../board/styles-board"; -// import Board from "../../board/Board"; -// import { state, setState } from "../../state"; - -// type BoardPreview = { -// key: keyof typeof styles; -// name: string; -// category: StyleCategory; -// img: string; -// }; - -// const prepareBoards = async () => { -// const boards = []; - -// const board = new Board({ -// size: 72, -// tiles: 2, -// showBorder: true, -// showExtraInfo: false, -// }); - -// for (const [key, style] of Object.entries(styles) as [BoardStyle, Style][]) { -// await board.updateConfig({ boardStyle: key }); -// await board.frame(null, {}); -// board.render(); -// boards.push({ -// key, -// name: style.name, -// category: style.category, -// img: board.toImgUrl(), -// } as BoardPreview); -// } - -// return boards; -// }; - -// const Boards: Component<{ handlers: Handlers }> = (props) => { -// const [boards, setBoards] = createSignal([]); - -// prepareBoards().then((data) => setBoards(data)); - -// return ( -// -// -// {(board) => { -// return ( -// setState("boardConfig", "boardStyle", board.key)} -// src={board.img} -// title={board.name} -// /> -// ); -// }} -// -// -// ); -// }; - -// export default Boards; diff --git a/src/ui/components/SetupTabs.css b/src/ui/components/SetupTabs.css index 6a2bd61..2e7f989 100644 --- a/src/ui/components/SetupTabs.css +++ b/src/ui/components/SetupTabs.css @@ -1,8 +1,8 @@ .setup-box { - /* background: rgba(135, 207, 235, 0.1); */ height: 100vh; grid-area: setup; padding: 20px; + padding-top: var(--header-margin); min-width: 360px; } diff --git a/src/ui/components/Share.tsx b/src/ui/components/Share.tsx index 0559598..6559179 100644 --- a/src/ui/components/Share.tsx +++ b/src/ui/components/Share.tsx @@ -7,6 +7,8 @@ import download from "../../utils/download"; const Share: Component<{ handlers: Handlers }> = (props) => { const [copyId, setCopyId] = createSignal(""); + const [imageRendering, setImageRendering] = createSignal(false); + const [animationRendering, setAnimationRendering] = createSignal(false); const blinkCopy = (id: string) => { setCopyId(id); @@ -164,9 +166,13 @@ const Share: Component<{ handlers: Handlers }> = (props) => {
@@ -314,9 +320,13 @@ const Share: Component<{ handlers: Handlers }> = (props) => {