WIP

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>