From 34b352c6c43398eee4483a7e3e6e27156ffca44e Mon Sep 17 00:00:00 2001
From: Maciej Caderek <maciej.caderek@gmail.com>
Date: Mon, 21 Feb 2022 02:34:30 +0100
Subject: [PATCH] WIP

---
 src/ui/App.css              |  13 --
 src/ui/components/Load.tsx  |  29 +++-
 src/ui/components/Share.tsx | 298 ++++++++++++++++++------------------
 3 files changed, 170 insertions(+), 170 deletions(-)

diff --git a/src/ui/App.css b/src/ui/App.css
index d0d8950..925fdb8 100644
--- a/src/ui/App.css
+++ b/src/ui/App.css
@@ -70,19 +70,6 @@ body {
   --color-scrollbar-track: #00000022;
 }
 
-.upload {
-  visibility: hidden;
-  padding: 0;
-}
-
-.upload::before {
-  content: "UPLOAD PGN FILE";
-  visibility: visible;
-  display: inline-block;
-  text-align: center;
-  box-sizing: border-box;
-}
-
 button,
 .upload::before {
   padding: 1rem;
diff --git a/src/ui/components/Load.tsx b/src/ui/components/Load.tsx
index 548f79f..18972f8 100644
--- a/src/ui/components/Load.tsx
+++ b/src/ui/components/Load.tsx
@@ -1,6 +1,7 @@
-import { Component, createSignal } from "solid-js";
+import { Component, createSignal, Show } from "solid-js";
 import { Handlers } from "../../types";
 import readFile from "../../utils/readFile";
+import { state } from "../../state";
 import "./Load.css";
 
 const Load: Component<{ handlers: Handlers }> = (props) => {
@@ -8,6 +9,8 @@ const Load: Component<{ handlers: Handlers }> = (props) => {
   const [pgn, setPGN] = createSignal("");
   const [link, setLink] = createSignal("");
 
+  let filePicker: HTMLInputElement | undefined = undefined;
+
   return (
     <div class="load">
       <input
@@ -73,9 +76,10 @@ const Load: Component<{ handlers: Handlers }> = (props) => {
       </button>
       <hr />
       <input
-        class="upload load__pgn-file"
+        style={{ display: "none" }}
         type="file"
         accept="application/vnd.chess-pgn,application/x-chess-pgn,.pgn"
+        ref={filePicker}
         onChange={async (e) => {
           const target = e.target as HTMLInputElement;
           if (target?.files && target.files.length > 0) {
@@ -84,10 +88,23 @@ const Load: Component<{ handlers: Handlers }> = (props) => {
           }
         }}
       ></input>
-      <div className="load__pgn-file-info">
-        <p>or</p>
-        <p>drop the PGN file anywhere on the page</p>
-      </div>
+      <button
+        class="load__pgn-btn load__pgn-file"
+        onClick={() => {
+          if (filePicker) {
+            filePicker.click();
+          }
+        }}
+      >
+        UPLOAD PGN FILE
+      </button>
+
+      <Show when={!state.mobile}>
+        <div className="load__pgn-file-info">
+          <p>or</p>
+          <p>drop the PGN file anywhere on the page</p>
+        </div>
+      </Show>
     </div>
   );
 };
diff --git a/src/ui/components/Share.tsx b/src/ui/components/Share.tsx
index 07ff037..c2a6f01 100644
--- a/src/ui/components/Share.tsx
+++ b/src/ui/components/Share.tsx
@@ -123,66 +123,64 @@ const Share: Component<{ handlers: Handlers }> = (props) => {
             {copyId() === "fen-link" ? "Copied!" : "Copy link"}
           </button>
         </div>
-        <Show when={!state.mobile}>
-          <hr class="invisible" />
-          <button
-            classList={{
-              share__size: true,
-              "share__size--first": true,
-              "share__size--active": state.gameConfig.picSize === "XS",
-            }}
-            onClick={() => setState("gameConfig", "picSize", "XS")}
-          >
-            XS
-          </button>
-          <button
-            classList={{
-              share__size: true,
-              "share__size--active": state.gameConfig.picSize === "S",
-            }}
-            onClick={() => setState("gameConfig", "picSize", "S")}
-          >
-            S
-          </button>
-          <button
-            classList={{
-              share__size: true,
-              "share__size--active": state.gameConfig.picSize === "M",
-            }}
-            onClick={() => setState("gameConfig", "picSize", "M")}
-          >
-            M
-          </button>
-          <button
-            classList={{
-              share__size: true,
-              "share__size--active": state.gameConfig.picSize === "L",
-            }}
-            onClick={() => setState("gameConfig", "picSize", "L")}
-          >
-            L
-          </button>
-          <button
-            classList={{
-              share__size: true,
-              "share__size--last": true,
-              "share__size--active": state.gameConfig.picSize === "XL",
-            }}
-            onClick={() => setState("gameConfig", "picSize", "XL")}
-          >
-            XL
-          </button>
-          <button
-            class="share__btn"
-            onClick={async () => {
-              setImageRendering(true);
-              await props.handlers.downloadImage();
-              setImageRendering(false);
-            }}
-          >
-            {imageRendering() ? "Please wait..." : "Save as image"}
-          </button>
-        </Show>
+        <hr class="invisible" />
+        <button
+          classList={{
+            share__size: true,
+            "share__size--first": true,
+            "share__size--active": state.gameConfig.picSize === "XS",
+          }}
+          onClick={() => setState("gameConfig", "picSize", "XS")}
+        >
+          XS
+        </button>
+        <button
+          classList={{
+            share__size: true,
+            "share__size--active": state.gameConfig.picSize === "S",
+          }}
+          onClick={() => setState("gameConfig", "picSize", "S")}
+        >
+          S
+        </button>
+        <button
+          classList={{
+            share__size: true,
+            "share__size--active": state.gameConfig.picSize === "M",
+          }}
+          onClick={() => setState("gameConfig", "picSize", "M")}
+        >
+          M
+        </button>
+        <button
+          classList={{
+            share__size: true,
+            "share__size--active": state.gameConfig.picSize === "L",
+          }}
+          onClick={() => setState("gameConfig", "picSize", "L")}
+        >
+          L
+        </button>
+        <button
+          classList={{
+            share__size: true,
+            "share__size--last": true,
+            "share__size--active": state.gameConfig.picSize === "XL",
+          }}
+          onClick={() => setState("gameConfig", "picSize", "XL")}
+        >
+          XL
+        </button>
+        <button
+          class="share__btn"
+          onClick={async () => {
+            setImageRendering(true);
+            await props.handlers.downloadImage();
+            setImageRendering(false);
+          }}
+        >
+          {imageRendering() ? "Please wait..." : "Save as image"}
+        </button>
       </div>
       <Show when={state.pgn}>
         <hr />
@@ -244,97 +242,95 @@ const Share: Component<{ handlers: Handlers }> = (props) => {
             </button>
           </div>
         </div>
-        <Show when={!state.mobile}>
-          <div class="share__animation">
-            <hr className="invisible" />
-            <button
-              classList={{
-                share__size: true,
-                "share__size--first": true,
-                "share__size--active": state.gameConfig.animationSize === "XS",
-              }}
-              onClick={() => setState("gameConfig", "animationSize", "XS")}
-            >
-              XS
-            </button>
-            <button
-              classList={{
-                share__size: true,
-                "share__size--active": state.gameConfig.animationSize === "S",
-              }}
-              onClick={() => setState("gameConfig", "animationSize", "S")}
-            >
-              S
-            </button>
-            <button
-              classList={{
-                share__size: true,
-                "share__size--active": state.gameConfig.animationSize === "M",
-              }}
-              onClick={() => setState("gameConfig", "animationSize", "M")}
-            >
-              M
-            </button>
-            <button
-              classList={{
-                share__size: true,
-                "share__size--active": state.gameConfig.animationSize === "L",
-              }}
-              onClick={() => setState("gameConfig", "animationSize", "L")}
-            >
-              L
-            </button>
-            <button
-              classList={{
-                share__size: true,
-                "share__size--last": true,
-                "share__size--active": state.gameConfig.animationSize === "XL",
-              }}
-              onClick={() => setState("gameConfig", "animationSize", "XL")}
-            >
-              XL
-            </button>
-            <button
-              classList={{
-                share__format: true,
-                "share__format--first": true,
-                "share__format--active": state.gameConfig.format === "GIF",
-              }}
-              onClick={() => setState("gameConfig", "format", "GIF")}
-            >
-              GIF
-            </button>
-            <button
-              classList={{
-                share__format: true,
-                "share__format--active": state.gameConfig.format === "MP4",
-              }}
-              onClick={() => setState("gameConfig", "format", "MP4")}
-            >
-              MP4
-            </button>
-            <button
-              classList={{
-                share__format: true,
-                "share__format--last": true,
-                "share__format--active": state.gameConfig.format === "WebM",
-              }}
-              onClick={() => setState("gameConfig", "format", "WebM")}
-            >
-              WebM
-            </button>
-            <button
-              class="share__create-animation"
-              onClick={async () => {
-                setAnimationRendering(true);
-                await props.handlers.downloadAnimation();
-                setAnimationRendering(false);
-              }}
-            >
-              {animationRendering() ? "Please wait..." : "Save animation"}
-            </button>
-          </div>
-        </Show>
+        <div class="share__animation">
+          <hr className="invisible" />
+          <button
+            classList={{
+              share__size: true,
+              "share__size--first": true,
+              "share__size--active": state.gameConfig.animationSize === "XS",
+            }}
+            onClick={() => setState("gameConfig", "animationSize", "XS")}
+          >
+            XS
+          </button>
+          <button
+            classList={{
+              share__size: true,
+              "share__size--active": state.gameConfig.animationSize === "S",
+            }}
+            onClick={() => setState("gameConfig", "animationSize", "S")}
+          >
+            S
+          </button>
+          <button
+            classList={{
+              share__size: true,
+              "share__size--active": state.gameConfig.animationSize === "M",
+            }}
+            onClick={() => setState("gameConfig", "animationSize", "M")}
+          >
+            M
+          </button>
+          <button
+            classList={{
+              share__size: true,
+              "share__size--active": state.gameConfig.animationSize === "L",
+            }}
+            onClick={() => setState("gameConfig", "animationSize", "L")}
+          >
+            L
+          </button>
+          <button
+            classList={{
+              share__size: true,
+              "share__size--last": true,
+              "share__size--active": state.gameConfig.animationSize === "XL",
+            }}
+            onClick={() => setState("gameConfig", "animationSize", "XL")}
+          >
+            XL
+          </button>
+          <button
+            classList={{
+              share__format: true,
+              "share__format--first": true,
+              "share__format--active": state.gameConfig.format === "GIF",
+            }}
+            onClick={() => setState("gameConfig", "format", "GIF")}
+          >
+            GIF
+          </button>
+          <button
+            classList={{
+              share__format: true,
+              "share__format--active": state.gameConfig.format === "MP4",
+            }}
+            onClick={() => setState("gameConfig", "format", "MP4")}
+          >
+            MP4
+          </button>
+          <button
+            classList={{
+              share__format: true,
+              "share__format--last": true,
+              "share__format--active": state.gameConfig.format === "WebM",
+            }}
+            onClick={() => setState("gameConfig", "format", "WebM")}
+          >
+            WebM
+          </button>
+          <button
+            class="share__create-animation"
+            onClick={async () => {
+              setAnimationRendering(true);
+              await props.handlers.downloadAnimation();
+              setAnimationRendering(false);
+            }}
+          >
+            {animationRendering() ? "Please wait..." : "Save animation"}
+          </button>
+        </div>
       </Show>
     </Scrollable>
   );