WIP

src/imports/importFromLink.ts

@@ -21,7 +21,11 @@ const importFromLichess = async (link: string): Promise<Result> => {
 
     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" };

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,

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) {

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<State> }> = (
   props
 ) => {
   return (
-    <div class="layout">
-      <div id="setup" class="setup-box">
-        <SetupTabs handlers={props.handlers}></SetupTabs>
+    <>
+      <Header handlers={props.handlers} />
+      <div class="layout">
+        <div id="setup" class="setup-box">
+          <SetupTabs handlers={props.handlers}></SetupTabs>
+        </div>
+        <div id="board" class="board-box"></div>
+        <div id="moves" class="game-box">
+          <GameTabs
+            moves={props.state.moves}
+            handlers={props.handlers}
+          ></GameTabs>
+        </div>
       </div>
-      <div id="board" class="board-box"></div>
-      <div id="moves" class="game-box">
-        <GameTabs
-          moves={props.state.moves}
-          handlers={props.handlers}
-        ></GameTabs>
-      </div>
-    </div>
+    </>
   );
 };
 

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;

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 {

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;
+}

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 (
+    <header class="header-box">
+      <div class="header__logo">
+        <div class="header__logo-pic" />
+      </div>
+      <div class="header__options">
+        <div class="header__options-ico" onClick={() => {}}>
+          <i class="las la-question-circle"></i>
+        </div>
+        <div
+          class="header__options-ico"
+          onClick={() => {
+            setDarkMode(!darkMode());
+            document.body.classList.toggle("light");
+          }}
+          title={darkMode() ? "LIGHT MODE" : "DARK MODE"}
+        >
+          <i
+            classList={{
+              las: true,
+              "la-sun": darkMode(),
+              "la-moon": !darkMode(),
+            }}
+          ></i>
+        </div>
+      </div>
+    </header>
+  );
+};
+
+export default Header;

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 {

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 (

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<BoardPreview[]>([]);
-
-//   prepareBoards().then((data) => setBoards(data));
-
-//   return (
-//     <Scrollable class="boards">
-//       <For each={boards()}>
-//         {(board) => {
-//           return (
-//             <img
-//               class={
-//                 "boards__ico" +
-//                 (state.board.boardStyle === board.key
-//                   ? " boards__ico--active"
-//                   : "")
-//               }
-//               onClick={() => setState("boardConfig", "boardStyle", board.key)}
-//               src={board.img}
-//               title={board.name}
-//             />
-//           );
-//         }}
-//       </For>
-//     </Scrollable>
-//   );
-// };
-
-// export default Boards;

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;
 }
 

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) => {
           </button>
           <button
             class="share__btn"
-            onClick={() => props.handlers.downloadImage()}
+            onClick={async () => {
+              setImageRendering(true);
+              await props.handlers.downloadImage();
+              setImageRendering(false);
+            }}
           >
-            Save as image
+            {imageRendering() ? "Please wait..." : "Save as image"}
           </button>
         </Show>
       </div>
@@ -314,9 +320,13 @@ const Share: Component<{ handlers: Handlers }> = (props) => {
             </button>
             <button
               class="share__create-animation"
-              onClick={() => props.handlers.downloadAnimation()}
+              onClick={async () => {
+                setAnimationRendering(true);
+                await props.handlers.downloadAnimation();
+                setAnimationRendering(false);
+              }}
             >
-              Save animation
+              {animationRendering() ? "Please wait..." : "Save animation"}
             </button>
           </div>
         </Show>