WIP

index.html

@@ -5,7 +5,7 @@
     <link rel="icon" type="image/svg+xml" href="favicon.svg" />
     <meta
       name="viewport"
-      content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"
+      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
     />
     <link
       rel="stylesheet"

src/main.tsx

@@ -203,7 +203,7 @@ const main = async () => {
   );
 
   const $board = document.querySelector<HTMLImageElement>("#board");
-  $board?.appendChild(board.canvas);
+  $board?.prepend(board.canvas);
 
   /* Restore game from the url */
 
@@ -219,6 +219,9 @@ const main = async () => {
       ));
 
   /* Register events */
+  document.addEventListener("dblclick", function (el) {
+    el.preventDefault();
+  });
 
   if (!state.mobile) {
     const keyMapping: { [key: string]: () => void } = {

src/state.ts

@@ -30,6 +30,8 @@ const initialGameConfig: GameConfig = {
   animationSize: "M",
 };
 
+export type TabName = "game" | "load" | "share" | "boards" | "pieces";
+
 export type State = {
   boardConfig: BoardConfig;
   gameConfig: GameConfig;
@@ -39,7 +41,8 @@ export type State = {
   moves: string[];
   ply: number;
   mobile: boolean;
-  activeTab: "game" | "load";
+  layout: "single" | "double" | "triple";
+  activeTab: TabName;
   playing: boolean;
 };
 
@@ -56,6 +59,7 @@ const initialState: State = {
   moves: [],
   ply: 0,
   mobile,
+  layout: mobile ? "single" : "triple",
   activeTab: "load",
   playing: false,
 };

src/ui/App.css

@@ -188,6 +188,12 @@ a:hover {
 
   .board-box {
     height: auto;
+    padding: var(--header-height) 0 1rem 0;
+    font-size: 0;
+  }
+
+  .board {
+    border-radius: 0;
   }
 
   .setup-box {

src/ui/App.tsx

@@ -1,12 +1,13 @@
-import type { Component } from "solid-js";
+import { Component, Show } from "solid-js";
 import type { DeepReadonly } from "solid-js/store";
 
 import { Handlers } from "../types";
-import { State } from "../state";
+import { State, state } from "../state";
 
 import Header from "./components/Header";
 import GameTabs from "./components/GameTabs";
 import SetupTabs from "./components/SetupTabs";
+import Controls from "./components/Controls";
 
 import "./App.css";
 
@@ -17,10 +18,16 @@ const App: Component<{ handlers: Handlers; state: DeepReadonly<State> }> = (
     <>
       <Header handlers={props.handlers} />
       <div class="layout">
+        <Show when={state.layout === "triple"}>
           <div id="setup" class="setup-box">
             <SetupTabs handlers={props.handlers}></SetupTabs>
           </div>
-        <div id="board" class="board-box"></div>
+        </Show>
+        <div id="board" class="board-box">
+          <Show when={state.layout === "single"}>
+            <Controls handlers={props.handlers} />
+          </Show>
+        </div>
         <div id="moves" class="game-box">
           <GameTabs
             moves={props.state.moves}

src/ui/components/Boards.tsx

@@ -46,13 +46,13 @@ const prepareBoards = async () => {
   return boards;
 };
 
-const Boards: Component<{ handlers: Handlers }> = (props) => {
+const Boards: Component<{ handlers: Handlers; class?: string }> = (props) => {
   const [boards, setBoards] = createSignal<BoardPreview[]>([]);
 
   prepareBoards().then((data) => setBoards(data));
 
   return (
-    <Scrollable class="boards">
+    <Scrollable class={"boards" + (props.class ? ` ${props.class}` : "")}>
       <For each={boards()}>
         {(board) => {
           return (

src/ui/components/GameTabs.css

@@ -8,39 +8,24 @@
 
 @media screen and (max-width: 1024px) {
   .game-box {
-    height: auto;
+    padding: 0;
+    height: 800px;
   }
 }
 
-.game-tabs {
+.game {
   height: 100%;
   display: grid;
   grid-template-rows: 38px 195px 1fr 84px;
 }
 
-.game-tabs__btn {
-  width: 48%;
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-  height: 38px;
-  background: var(--color-tab);
+.game-tabs {
+  display: grid;
+  grid-auto-flow: column;
+  grid-template-columns: 1fr 1fr;
+  column-gap: 0.5rem;
 }
 
-.game-tabs__btn:hover {
-  background: var(--color-tab-light);
-}
-
-.game-tabs__btn--active {
-  width: 50%;
-  background: var(--color-bg-block);
-  color: var(--color-text);
-  cursor: default;
-}
-
-.game-tabs__btn--active:hover {
-  background: var(--color-bg-block);
-}
-
-.game-tabs__btn:nth-child(1) {
-  margin-right: 2%;
+.span3 {
+  grid-row-end: span 3;
 }

src/ui/components/GameTabs.tsx

@@ -1,36 +1,55 @@
-import { Component, Switch, Match } from "solid-js";
+import { Component, Switch, Match, Show } from "solid-js";
 import Moves from "./Moves";
 import Controls from "./Controls";
 import Info from "./Info";
 import Load from "./Load";
+import Share from "./Share";
+import Boards from "./Boards";
+import Pieces from "./Pieces";
+import Tab from "./reusable/Tab";
 import { Handlers } from "../../types";
+import { setState, state, TabName } from "../../state";
 import "./GameTabs.css";
-import { setState, state } from "../../state";
+
+const setTab = (tab: TabName) => {
+  setState("activeTab", tab);
+};
 
 const GameTabs: Component<{ moves: readonly string[]; handlers: Handlers }> = (
   props
 ) => {
   return (
+    <div class="game">
       <div class="game-tabs">
-      <div class="tabs">
-        <button
-          class={
-            "game-tabs__btn" +
-            (state.activeTab === "game" ? " game-tabs__btn--active" : "")
-          }
-          onClick={() => setState("activeTab", "game")}
-        >
+        <Tab name="game" setTab={setTab} isActive={state.activeTab === "game"}>
           GAME
-        </button>
-        <button
-          class={
-            "game-tabs__btn" +
-            (state.activeTab === "load" ? " game-tabs__btn--active" : "")
-          }
-          onClick={() => setState("activeTab", "load")}
-        >
+        </Tab>
+        <Tab name="load" setTab={setTab} isActive={state.activeTab === "load"}>
           LOAD
-        </button>
+        </Tab>
+        <Show when={state.layout !== "triple"}>
+          <Tab
+            name="share"
+            setTab={setTab}
+            isActive={state.activeTab === "share"}
+          >
+            <i class="las la-share"></i>
+          </Tab>
+          <Tab
+            name="boards"
+            setTab={setTab}
+            isActive={state.activeTab === "boards"}
+          >
+            <i class="las la-chess-board"></i>
+          </Tab>
+          <Tab
+            name="pieces"
+            setTab={setTab}
+            isActive={state.activeTab === "pieces"}
+          >
+            <i class="las la-chess"></i>
+          </Tab>
+        </Show>
       </div>
       <Switch>
         <Match when={state.activeTab === "game"}>
@@ -39,8 +58,19 @@ const GameTabs: Component<{ moves: readonly string[]; handlers: Handlers }> = (
           <Controls handlers={props.handlers} />
         </Match>
         <Match when={state.activeTab === "load"}>
-          <Load handlers={props.handlers} />
+          <Load handlers={props.handlers} class="span3" />
         </Match>
+        <Show when={state.layout !== "triple"}>
+          <Match when={state.activeTab === "share"}>
+            <Share handlers={props.handlers} class="span3" />
+          </Match>
+          <Match when={state.activeTab === "boards"}>
+            <Boards handlers={props.handlers} class="span3" />
+          </Match>
+          <Match when={state.activeTab === "pieces"}>
+            <Pieces handlers={props.handlers} class="span3" />
+          </Match>
+        </Show>
       </Switch>
     </div>
   );

src/ui/components/Load.css

@@ -3,7 +3,6 @@
   padding: 20px;
   border-bottom-left-radius: 5px;
   border-bottom-right-radius: 5px;
-  grid-row-end: span 3;
 }
 
 .load__pgn-input {

src/ui/components/Load.tsx

@@ -4,7 +4,7 @@ import readFile from "../../utils/readFile";
 import { state } from "../../state";
 import "./Load.css";
 
-const Load: Component<{ handlers: Handlers }> = (props) => {
+const Load: Component<{ handlers: Handlers; class?: string }> = (props) => {
   const [fen, setFEN] = createSignal("");
   const [pgn, setPGN] = createSignal("");
   const [link, setLink] = createSignal("");
@@ -12,7 +12,7 @@ const Load: Component<{ handlers: Handlers }> = (props) => {
   let filePicker: HTMLInputElement | undefined = undefined;
 
   return (
-    <div class="load">
+    <div class={"load" + (props.class ? ` ${props.class}` : "")}>
       <input
         class="load__fen-input"
         type="text"

src/ui/components/Pieces.tsx

@@ -10,9 +10,9 @@ const pieces = Object.entries(piecesSets).map(([key, data]) => ({
   img: data.nw,
 })) as { key: PiecesStyle; img: string }[];
 
-const Pieces: Component<{ handlers: Handlers }> = (props) => {
+const Pieces: Component<{ handlers: Handlers; class?: string }> = (props) => {
   return (
-    <Scrollable class="pieces">
+    <Scrollable class={"pieces" + (props.class ? ` ${props.class}` : "")}>
       {
         <For each={pieces}>
           {(item) => (

src/ui/components/SetupTabs.css

@@ -6,12 +6,6 @@
   min-width: 375px;
 }
 
-@media screen and (max-width: 1024px) {
-  .setup-box {
-    height: auto;
-  }
-}
-
 .setup {
   font-size: 1.6rem;
   height: 100%;
@@ -19,29 +13,9 @@
   grid-template-rows: 38px 1fr;
 }
 
-.setup-tabs__btn {
-  width: 32%;
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-  height: 38px;
-  background: var(--color-tab);
-}
-
-.setup-tabs__btn:hover {
-  background: var(--color-tab-light);
-}
-
-.setup-tabs__btn--active {
-  background: var(--color-bg-block);
-  color: var(--color-text);
-  cursor: default;
-}
-
-.setup-tabs__btn--active:hover {
-  background: var(--color-bg-block);
-}
-
-.setup-tabs__btn:nth-child(1),
-.setup-tabs__btn:nth-child(2) {
-  margin-right: 2%;
+.setup-tabs {
+  display: grid;
+  grid-auto-flow: column;
+  grid-template-columns: 1fr 1fr 1fr;
+  column-gap: 0.5rem;
 }

src/ui/components/SetupTabs.tsx

@@ -4,6 +4,7 @@ import "./SetupTabs.css";
 import Share from "./Share";
 import Boards from "./Boards";
 import Pieces from "./Pieces";
+import Tab from "./reusable/Tab";
 
 const SetupTabs: Component<{
   handlers: Handlers;
@@ -12,34 +13,16 @@ const SetupTabs: Component<{
 
   return (
     <div class="setup">
-      <div class="tabs">
-        <button
-          class={
-            "setup-tabs__btn" +
-            (tab() === "share" ? " setup-tabs__btn--active" : "")
-          }
-          onClick={() => setTab("share")}
-        >
+      <div class="setup-tabs">
+        <Tab name="share" setTab={setTab} isActive={tab() === "share"}>
           <i class="las la-share"></i> SHARE
-        </button>
-        <button
-          class={
-            "setup-tabs__btn" +
-            (tab() === "boards" ? " setup-tabs__btn--active" : "")
-          }
-          onClick={() => setTab("boards")}
-        >
+        </Tab>
+        <Tab name="boards" setTab={setTab} isActive={tab() === "boards"}>
           <i class="las la-chess-board"></i> BOARDS
-        </button>
-        <button
-          class={
-            "setup-tabs__btn" +
-            (tab() === "pieces" ? " setup-tabs__btn--active" : "")
-          }
-          onClick={() => setTab("pieces")}
-        >
+        </Tab>
+        <Tab name="pieces" setTab={setTab} isActive={tab() === "pieces"}>
           <i class="las la-chess"></i> PIECES
-        </button>
+        </Tab>
       </div>
       <Switch>
         <Match when={tab() === "share"}>

src/ui/components/Share.tsx

@@ -5,7 +5,7 @@ import { state, setState } from "../../state";
 import "./Share.css";
 import download from "../../utils/download";
 
-const Share: Component<{ handlers: Handlers }> = (props) => {
+const Share: Component<{ handlers: Handlers; class?: string }> = (props) => {
   const [copyId, setCopyId] = createSignal("");
   const [imageRendering, setImageRendering] = createSignal(false);
   const [animationRendering, setAnimationRendering] = createSignal(false);
@@ -16,7 +16,7 @@ const Share: Component<{ handlers: Handlers }> = (props) => {
   };
 
   return (
-    <Scrollable class="share">
+    <Scrollable class={"share" + (props.class ? ` ${props.class}` : "")}>
       <div className="share__view">
         <h2 class="header--first">Board options</h2>
         <button

src/ui/components/reusable/Tab.css

@@ -0,0 +1,21 @@
+.tab {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  height: 38px;
+  background: var(--color-tab);
+  min-width: 4rem;
+}
+
+.tab:hover {
+  background: var(--color-tab-light);
+}
+
+.tab--active {
+  background: var(--color-bg-block);
+  color: var(--color-text);
+  cursor: default;
+}
+
+.tab--active:hover {
+  background: var(--color-bg-block);
+}

src/ui/components/reusable/Tab.tsx

@@ -0,0 +1,20 @@
+import { Component } from "solid-js";
+import "./Tab.css";
+import { TabName } from "../../../state";
+
+const Tab: Component<{
+  name: TabName;
+  setTab: (name: TabName) => void;
+  isActive: boolean;
+}> = (props) => {
+  return (
+    <button
+      class={"tab" + (props.isActive ? " tab--active" : "")}
+      onClick={() => props.setTab(props.name)}
+    >
+      {props.children}
+    </button>
+  );
+};
+
+export default Tab;