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

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

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

@@ -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>
);