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-16 03:17:19 +01:00
parent f64d361c2a
commit e905e896d3
17 changed files with 171 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
favicon.svg
View File

@@ -1,15 +1,4 @@
<svg width="410" height="404" viewBox="0 0 410 404" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="256" height="256" viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M399.641 59.5246L215.643 388.545C211.844 395.338 202.084 395.378 198.228 388.618L10.5817 59.5563C6.38087 52.1896 12.6802 43.2665 21.0281 44.7586L205.223 77.6824C206.398 77.8924 207.601 77.8904 208.776 77.6763L389.119 44.8058C397.439 43.2894 403.768 52.1434 399.641 59.5246Z" fill="url(#paint0_linear)"/> <rect width="256" height="256" rx="50" fill="white"/>
<path d="M292.965 1.5744L156.801 28.2552C154.563 28.6937 152.906 30.5903 152.771 32.8664L144.395 174.33C144.198 177.662 147.258 180.248 150.51 179.498L188.42 170.749C191.967 169.931 195.172 173.055 194.443 176.622L183.18 231.775C182.422 235.487 185.907 238.661 189.532 237.56L212.947 230.446C216.577 229.344 220.065 232.527 219.297 236.242L201.398 322.875C200.278 328.294 207.486 331.249 210.492 326.603L212.5 323.5L323.454 102.072C325.312 98.3645 322.108 94.137 318.036 94.9228L279.014 102.454C275.347 103.161 272.227 99.746 273.262 96.1583L298.731 7.86689C299.767 4.27314 296.636 0.855181 292.965 1.5744Z" fill="url(#paint1_linear)"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M138.486 121H117.514H103H102.3C102.759 123.262 103 125.603 103 128C103 147.33 87.33 163 68 163C48.67 163 33 147.33 33 128C33 108.67 48.67 93 68 93C78.9953 93 88.8063 98.0701 95.2228 106H112.912C104.774 89.4161 87.72 78 68 78C40.3858 78 18 100.386 18 128C18 155.614 40.3858 178 68 178C92.8912 178 113.534 159.811 117.363 136H138.637H152H153.918C153.318 133.431 153 130.752 153 128C153 108.67 168.67 93 188 93C207.33 93 223 108.67 223 128C223 147.33 207.33 163 188 163C177.474 163 168.034 158.354 161.618 151H143.592C151.917 167.041 168.679 178 188 178C215.614 178 238 155.614 238 128C238 100.386 215.614 78 188 78C162.761 78 141.89 96.6997 138.486 121Z" fill="black"/>
<defs>
<linearGradient id="paint0_linear" x1="6.00017" y1="32.9999" x2="235" y2="344" gradientUnits="userSpaceOnUse">
<stop stop-color="#41D1FF"/>
<stop offset="1" stop-color="#BD34FE"/>
</linearGradient>
<linearGradient id="paint1_linear" x1="194.651" y1="8.81818" x2="236.076" y2="292.989" gradientUnits="userSpaceOnUse">
<stop stop-color="#FFEA83"/>
<stop offset="0.0833333" stop-color="#FFDD35"/>
<stop offset="1" stop-color="#FFA800"/>
</linearGradient>
</defs>
</svg> </svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.5 KiB

After

Width:  |  Height:  |  Size: 878 B

9
index.html
View File

@@ -8,17 +8,10 @@
rel="stylesheet" rel="stylesheet"
href="https://maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.3.0/css/line-awesome.min.css" href="https://maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.3.0/css/line-awesome.min.css"
/> />
<title>Vite App</title> <title>shortcastle</title>
</head> </head>
<body class="dark"> <body class="dark">
<div id="root"></div> <div id="root"></div>
<!-- <div class="layout">
<div id="setup" class="setup-box"></div>
<div id="board" class="board-box"></div>
<div id="controls" class="controls-box"></div>
<div id="moves" class="moves-box"></div>
</div> -->
<script type="module" src="/src/main.tsx"></script> <script type="module" src="/src/main.tsx"></script>
<!-- <script type="module" src="/src/index.tsx"></script> -->
</body> </body>
</html> </html>

6
src/imports/importFromLink.ts
View File

@@ -21,7 +21,11 @@ const importFromLichess = async (link: string): Promise<Result> => {
const pgn = await res.text(); const pgn = await res.text();
return { error: false, pgn, side: second === "black" ? "b" : "w" }; return {
error: false,
pgn,
side: String(second).startsWith("black") ? "b" : "w",
};
} }
return { error: true, errorType: "INCORRECT_LINK" }; return { error: true, errorType: "INCORRECT_LINK" };

11
src/logo-dark.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 8.4 KiB

11
src/logo.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 8.4 KiB

2
src/main.tsx
View File

@@ -119,6 +119,7 @@ const main = async () => {
await this.loadPGN(result.pgn); await this.loadPGN(result.pgn);
}, },
async downloadImage() { async downloadImage() {
await new Promise((resolve) => setTimeout(resolve, 0));
const data = await createImage( const data = await createImage(
state.fen, state.fen,
state.pgn, state.pgn,
@@ -129,6 +130,7 @@ const main = async () => {
download(data, "fen", "png"); download(data, "fen", "png");
}, },
async downloadAnimation() { async downloadAnimation() {
await new Promise((resolve) => setTimeout(resolve, 0));
const data = await createAnimation( const data = await createAnimation(
state.pgn, state.pgn,
state.boardConfig, state.boardConfig,

24
src/ui/App.css
View File

@@ -20,12 +20,16 @@ body {
background-position: center; background-position: center;
text-align: center; text-align: center;
font-family: Ubuntu, sans-serif; font-family: Ubuntu, sans-serif;
--header-height: 4rem;
--header-margin: 6rem;
} }
.dark { .dark {
background-color: #232831; background-color: #232831;
/* background-image: url(src/ui/img/pattern.png); */ /* background-image: url(src/ui/img/pattern.png); */
color: #ddd; color: #ddd;
--logo-url: url(src/logo.svg);
--color-btn: rgb(0, 173, 136); --color-btn: rgb(0, 173, 136);
--color-btn-light: rgb(0, 207, 162); --color-btn-light: rgb(0, 207, 162);
@@ -42,9 +46,11 @@ body {
} }
.light { .light {
background-color: #a7b3b9; background-color: #c1ced4;
/* background-image: url(src/ui/img/pattern-light.png); */ /* background-image: url(src/ui/img/pattern-light.png); */
color: #222; color: #222;
--logo-url: url(src/logo-dark.svg);
--color-btn: rgb(0, 148, 116); --color-btn: rgb(0, 148, 116);
--color-btn-light: rgb(0, 114, 89); --color-btn-light: rgb(0, 114, 89);
--color-tab: #5d6468; --color-tab: #5d6468;
@@ -74,7 +80,7 @@ body {
button, button,
.upload::before { .upload::before {
padding: 10px; padding: 1rem;
font-family: "Ubuntu"; font-family: "Ubuntu";
font-size: 1.5rem; font-size: 1.5rem;
background: var(--color-btn); background: var(--color-btn);
@@ -92,10 +98,10 @@ button:hover,
input, input,
textarea { textarea {
width: 100%; width: 100%;
padding: 10px; padding: 1rem;
font-family: "Fira Mono"; font-family: "Fira Mono";
font-size: 1.4rem; font-size: 1.4rem;
margin-bottom: 10px; margin-bottom: 1rem;
background: var(--color-bg-input); background: var(--color-bg-input);
border: solid 1px var(--color-border-input); border: solid 1px var(--color-border-input);
color: var(--color-text-input); color: var(--color-text-input);
@@ -111,7 +117,7 @@ h2 {
color: var(--color-text); color: var(--color-text);
text-align: left; text-align: left;
font-size: 1.8rem; font-size: 1.8rem;
margin: 25px 0 15px 0; margin: 2.5rem 0 1.5rem 0;
font-weight: 500; font-weight: 500;
} }
@@ -119,17 +125,17 @@ h3 {
color: var(--color-text); color: var(--color-text);
text-align: left; text-align: left;
font-size: 1.6rem; font-size: 1.6rem;
margin: 15px 0 10px 0; margin: 1.5rem 0 1rem 0;
font-weight: 500; font-weight: 500;
} }
hr { hr {
margin-top: 20px; margin-top: 2rem;
border-top: solid 1px var(--color-highlight); border-top: solid 1px var(--color-highlight);
} }
.board { .board {
box-shadow: 0 0 30px rgba(0, 0, 0, 0.5); /* box-shadow: 0 0 30px rgba(0, 0, 0, 0.5); */
border-radius: 5px; border-radius: 5px;
max-width: 100%; max-width: 100%;
max-height: 100%; max-height: 100%;
@@ -157,7 +163,7 @@ hr {
/* background: rgba(255, 166, 0, 0.1); */ /* background: rgba(255, 166, 0, 0.1); */
height: 100vh; height: 100vh;
grid-area: board; grid-area: board;
padding: 20px 0; padding: var(--header-margin) 0 2rem 0;
} }
@media screen and (max-width: 1024px) { @media screen and (max-width: 1024px) {

26
src/ui/App.tsx
View File

@@ -4,6 +4,7 @@ import type { DeepReadonly } from "solid-js/store";
import { Handlers } from "../types"; import { Handlers } from "../types";
import { State } from "../state"; import { State } from "../state";
import Header from "./components/Header";
import GameTabs from "./components/GameTabs"; import GameTabs from "./components/GameTabs";
import SetupTabs from "./components/SetupTabs"; import SetupTabs from "./components/SetupTabs";
@@ -13,18 +14,21 @@ const App: Component<{ handlers: Handlers; state: DeepReadonly<State> }> = (
props props
) => { ) => {
return ( return (
<div class="layout"> <>
<div id="setup" class="setup-box"> <Header handlers={props.handlers} />
<SetupTabs handlers={props.handlers}></SetupTabs> <div class="layout">
<div id="setup" class="setup-box">
<SetupTabs handlers={props.handlers}></SetupTabs>
</div>
<div id="board" class="board-box"></div>
<div id="moves" class="game-box">
<GameTabs
moves={props.state.moves}
handlers={props.handlers}
></GameTabs>
</div>
</div> </div>
<div id="board" class="board-box"></div> </>
<div id="moves" class="game-box">
<GameTabs
moves={props.state.moves}
handlers={props.handlers}
></GameTabs>
</div>
</div>
); );
}; };

3
src/ui/components/Controls.css
View File

@@ -5,14 +5,13 @@
.controls { .controls {
background: var(--color-bg-block); background: var(--color-bg-block);
height: 100%;
padding: 20px; padding: 20px;
border-bottom-left-radius: 5px; border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px; border-bottom-right-radius: 5px;
} }
.controls__button { .controls__button {
margin: 3px; margin: 0 3px;
padding: 5px; padding: 5px;
font-size: 3rem; font-size: 3rem;
text-align: center; text-align: center;

3
src/ui/components/GameTabs.css
View File

@@ -1,6 +1,7 @@
.game-box { .game-box {
grid-area: moves; grid-area: moves;
padding: 20px; padding: 20px;
padding-top: var(--header-margin);
min-width: 360px; min-width: 360px;
height: 100vh; height: 100vh;
} }
@@ -8,7 +9,7 @@
.game-tabs { .game-tabs {
height: 100%; height: 100%;
display: grid; display: grid;
grid-template-rows: 38px 1fr; grid-template-rows: 38px 1fr 84px;
} }
.game-tabs__btn { .game-tabs__btn {

47
src/ui/components/Header.css Normal file
View File

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

39
src/ui/components/Header.tsx Normal file
View File

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

1
src/ui/components/Load.css
View File

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

4
src/ui/components/Moves.tsx
View File

@@ -9,7 +9,9 @@ const Moves: Component<{ moves: readonly string[]; handlers: Handlers }> = (
props props
) => { ) => {
createEffect(() => { createEffect(() => {
document.querySelector(`[data-ply="${state.ply}"]`)?.scrollIntoView(); if (!state.mobile) {
document.querySelector(`[data-ply="${state.ply}"]`)?.scrollIntoView();
}
}); });
return ( return (

70
src/ui/components/Pieces.tsx
View File

@@ -39,73 +39,3 @@ const Pieces: Component<{ handlers: Handlers }> = (props) => {
}; };
export default Pieces; 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;

2
src/ui/components/SetupTabs.css
View File

@@ -1,8 +1,8 @@
.setup-box { .setup-box {
/* background: rgba(135, 207, 235, 0.1); */
height: 100vh; height: 100vh;
grid-area: setup; grid-area: setup;
padding: 20px; padding: 20px;
padding-top: var(--header-margin);
min-width: 360px; min-width: 360px;
} }

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

@@ -7,6 +7,8 @@ import download from "../../utils/download";
const Share: Component<{ handlers: Handlers }> = (props) => { const Share: Component<{ handlers: Handlers }> = (props) => {
const [copyId, setCopyId] = createSignal(""); const [copyId, setCopyId] = createSignal("");
const [imageRendering, setImageRendering] = createSignal(false);
const [animationRendering, setAnimationRendering] = createSignal(false);
const blinkCopy = (id: string) => { const blinkCopy = (id: string) => {
setCopyId(id); setCopyId(id);
@@ -164,9 +166,13 @@ const Share: Component<{ handlers: Handlers }> = (props) => {
</button> </button>
<button <button
class="share__btn" 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> </button>
</Show> </Show>
</div> </div>
@@ -314,9 +320,13 @@ const Share: Component<{ handlers: Handlers }> = (props) => {
</button> </button>
<button <button
class="share__create-animation" 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> </button>
</div> </div>
</Show> </Show>