haunter/sharechess
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

WIP

Browse Source
This commit is contained in:
Maciej Caderek
2022-02-21 02:34:30 +01:00
parent 9561b0cbf6
commit 34b352c6c4
3 changed files with 170 additions and 170 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/ui/App.css
View File

@@ -70,19 +70,6 @@ body {
--color-scrollbar-track: #00000022; --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, button,
.upload::before { .upload::before {
padding: 1rem; padding: 1rem;

29
src/ui/components/Load.tsx
View File

@@ -1,6 +1,7 @@
import { Component, createSignal } from "solid-js"; import { Component, createSignal, Show } from "solid-js";
import { Handlers } from "../../types"; import { Handlers } from "../../types";
import readFile from "../../utils/readFile"; import readFile from "../../utils/readFile";
import { state } from "../../state";
import "./Load.css"; import "./Load.css";
const Load: Component<{ handlers: Handlers }> = (props) => { const Load: Component<{ handlers: Handlers }> = (props) => {
@@ -8,6 +9,8 @@ const Load: Component<{ handlers: Handlers }> = (props) => {
const [pgn, setPGN] = createSignal(""); const [pgn, setPGN] = createSignal("");
const [link, setLink] = createSignal(""); const [link, setLink] = createSignal("");
let filePicker: HTMLInputElement | undefined = undefined;
return ( return (
<div class="load"> <div class="load">
<input <input
@@ -73,9 +76,10 @@ const Load: Component<{ handlers: Handlers }> = (props) => {
</button> </button>
<hr /> <hr />
<input <input
class="upload load__pgn-file" style={{ display: "none" }}
type="file" type="file"
accept="application/vnd.chess-pgn,application/x-chess-pgn,.pgn" accept="application/vnd.chess-pgn,application/x-chess-pgn,.pgn"
ref={filePicker}
onChange={async (e) => { onChange={async (e) => {
const target = e.target as HTMLInputElement; const target = e.target as HTMLInputElement;
if (target?.files && target.files.length > 0) { if (target?.files && target.files.length > 0) {
@@ -84,10 +88,23 @@ const Load: Component<{ handlers: Handlers }> = (props) => {
} }
}} }}
></input> ></input>
<div className="load__pgn-file-info"> <button
<p>or</p> class="load__pgn-btn load__pgn-file"
<p>drop the PGN file anywhere on the page</p> onClick={() => {
</div> 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> </div>
); );
}; };

298
src/ui/components/Share.tsx
View File

@@ -123,66 +123,64 @@ const Share: Component<{ handlers: Handlers }> = (props) => {
{copyId() === "fen-link" ? "Copied!" : "Copy link"} {copyId() === "fen-link" ? "Copied!" : "Copy link"}
</button> </button>
</div> </div>
<Show when={!state.mobile}> <hr class="invisible" />
<hr class="invisible" /> <button
<button classList={{
classList={{ share__size: true,
share__size: true, "share__size--first": true,
"share__size--first": true, "share__size--active": state.gameConfig.picSize === "XS",
"share__size--active": state.gameConfig.picSize === "XS", }}
}} onClick={() => setState("gameConfig", "picSize", "XS")}
onClick={() => setState("gameConfig", "picSize", "XS")} >
> XS
XS </button>
</button> <button
<button classList={{
classList={{ share__size: true,
share__size: true, "share__size--active": state.gameConfig.picSize === "S",
"share__size--active": state.gameConfig.picSize === "S", }}
}} onClick={() => setState("gameConfig", "picSize", "S")}
onClick={() => setState("gameConfig", "picSize", "S")} >
> S
S </button>
</button> <button
<button classList={{
classList={{ share__size: true,
share__size: true, "share__size--active": state.gameConfig.picSize === "M",
"share__size--active": state.gameConfig.picSize === "M", }}
}} onClick={() => setState("gameConfig", "picSize", "M")}
onClick={() => setState("gameConfig", "picSize", "M")} >
> M
M </button>
</button> <button
<button classList={{
classList={{ share__size: true,
share__size: true, "share__size--active": state.gameConfig.picSize === "L",
"share__size--active": state.gameConfig.picSize === "L", }}
}} onClick={() => setState("gameConfig", "picSize", "L")}
onClick={() => setState("gameConfig", "picSize", "L")} >
> L
L </button>
</button> <button
<button classList={{
classList={{ share__size: true,
share__size: true, "share__size--last": true,
"share__size--last": true, "share__size--active": state.gameConfig.picSize === "XL",
"share__size--active": state.gameConfig.picSize === "XL", }}
}} onClick={() => setState("gameConfig", "picSize", "XL")}
onClick={() => setState("gameConfig", "picSize", "XL")} >
> XL
XL </button>
</button> <button
<button class="share__btn"
class="share__btn" onClick={async () => {
onClick={async () => { setImageRendering(true);
setImageRendering(true); await props.handlers.downloadImage();
await props.handlers.downloadImage(); setImageRendering(false);
setImageRendering(false); }}
}} >
> {imageRendering() ? "Please wait..." : "Save as image"}
{imageRendering() ? "Please wait..." : "Save as image"} </button>
</button>
</Show>
</div> </div>
<Show when={state.pgn}> <Show when={state.pgn}>
<hr /> <hr />
@@ -244,97 +242,95 @@ const Share: Component<{ handlers: Handlers }> = (props) => {
</button> </button>
</div> </div>
</div> </div>
<Show when={!state.mobile}> <div class="share__animation">
<div class="share__animation"> <hr className="invisible" />
<hr className="invisible" /> <button
<button classList={{
classList={{ share__size: true,
share__size: true, "share__size--first": true,
"share__size--first": true, "share__size--active": state.gameConfig.animationSize === "XS",
"share__size--active": state.gameConfig.animationSize === "XS", }}
}} onClick={() => setState("gameConfig", "animationSize", "XS")}
onClick={() => setState("gameConfig", "animationSize", "XS")} >
> XS
XS </button>
</button> <button
<button classList={{
classList={{ share__size: true,
share__size: true, "share__size--active": state.gameConfig.animationSize === "S",
"share__size--active": state.gameConfig.animationSize === "S", }}
}} onClick={() => setState("gameConfig", "animationSize", "S")}
onClick={() => setState("gameConfig", "animationSize", "S")} >
> S
S </button>
</button> <button
<button classList={{
classList={{ share__size: true,
share__size: true, "share__size--active": state.gameConfig.animationSize === "M",
"share__size--active": state.gameConfig.animationSize === "M", }}
}} onClick={() => setState("gameConfig", "animationSize", "M")}
onClick={() => setState("gameConfig", "animationSize", "M")} >
> M
M </button>
</button> <button
<button classList={{
classList={{ share__size: true,
share__size: true, "share__size--active": state.gameConfig.animationSize === "L",
"share__size--active": state.gameConfig.animationSize === "L", }}
}} onClick={() => setState("gameConfig", "animationSize", "L")}
onClick={() => setState("gameConfig", "animationSize", "L")} >
> L
L </button>
</button> <button
<button classList={{
classList={{ share__size: true,
share__size: true, "share__size--last": true,
"share__size--last": true, "share__size--active": state.gameConfig.animationSize === "XL",
"share__size--active": state.gameConfig.animationSize === "XL", }}
}} onClick={() => setState("gameConfig", "animationSize", "XL")}
onClick={() => setState("gameConfig", "animationSize", "XL")} >
> XL
XL </button>
</button> <button
<button classList={{
classList={{ share__format: true,
share__format: true, "share__format--first": true,
"share__format--first": true, "share__format--active": state.gameConfig.format === "GIF",
"share__format--active": state.gameConfig.format === "GIF", }}
}} onClick={() => setState("gameConfig", "format", "GIF")}
onClick={() => setState("gameConfig", "format", "GIF")} >
> GIF
GIF </button>
</button> <button
<button classList={{
classList={{ share__format: true,
share__format: true, "share__format--active": state.gameConfig.format === "MP4",
"share__format--active": state.gameConfig.format === "MP4", }}
}} onClick={() => setState("gameConfig", "format", "MP4")}
onClick={() => setState("gameConfig", "format", "MP4")} >
> MP4
MP4 </button>
</button> <button
<button classList={{
classList={{ share__format: true,
share__format: true, "share__format--last": true,
"share__format--last": true, "share__format--active": state.gameConfig.format === "WebM",
"share__format--active": state.gameConfig.format === "WebM", }}
}} onClick={() => setState("gameConfig", "format", "WebM")}
onClick={() => setState("gameConfig", "format", "WebM")} >
> WebM
WebM </button>
</button> <button
<button class="share__create-animation"
class="share__create-animation" onClick={async () => {
onClick={async () => { setAnimationRendering(true);
setAnimationRendering(true); await props.handlers.downloadAnimation();
await props.handlers.downloadAnimation(); setAnimationRendering(false);
setAnimationRendering(false); }}
}} >
> {animationRendering() ? "Please wait..." : "Save animation"}
{animationRendering() ? "Please wait..." : "Save animation"} </button>
</button> </div>
</div>
</Show>
</Show> </Show>
</Scrollable> </Scrollable>
); );