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

24
src/ui/App.css
View File

@@ -20,12 +20,16 @@ body {
background-position: center;
text-align: center;
font-family: Ubuntu, sans-serif;
--header-height: 4rem;
--header-margin: 6rem;
}
.dark {
background-color: #232831;
/* background-image: url(src/ui/img/pattern.png); */
color: #ddd;
--logo-url: url(src/logo.svg);
--color-btn: rgb(0, 173, 136);
--color-btn-light: rgb(0, 207, 162);
@@ -42,9 +46,11 @@ body {
}
.light {
background-color: #a7b3b9;
background-color: #c1ced4;
/* background-image: url(src/ui/img/pattern-light.png); */
color: #222;
--logo-url: url(src/logo-dark.svg);
--color-btn: rgb(0, 148, 116);
--color-btn-light: rgb(0, 114, 89);
--color-tab: #5d6468;
@@ -74,7 +80,7 @@ body {
button,
.upload::before {
padding: 10px;
padding: 1rem;
font-family: "Ubuntu";
font-size: 1.5rem;
background: var(--color-btn);
@@ -92,10 +98,10 @@ button:hover,
input,
textarea {
width: 100%;
padding: 10px;
padding: 1rem;
font-family: "Fira Mono";
font-size: 1.4rem;
margin-bottom: 10px;
margin-bottom: 1rem;
background: var(--color-bg-input);
border: solid 1px var(--color-border-input);
color: var(--color-text-input);
@@ -111,7 +117,7 @@ h2 {
color: var(--color-text);
text-align: left;
font-size: 1.8rem;
margin: 25px 0 15px 0;
margin: 2.5rem 0 1.5rem 0;
font-weight: 500;
}
@@ -119,17 +125,17 @@ h3 {
color: var(--color-text);
text-align: left;
font-size: 1.6rem;
margin: 15px 0 10px 0;
margin: 1.5rem 0 1rem 0;
font-weight: 500;
}
hr {
margin-top: 20px;
margin-top: 2rem;
border-top: solid 1px var(--color-highlight);
}
.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;
max-width: 100%;
max-height: 100%;
@@ -157,7 +163,7 @@ hr {
/* background: rgba(255, 166, 0, 0.1); */
height: 100vh;
grid-area: board;
padding: 20px 0;
padding: var(--header-margin) 0 2rem 0;
}
@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 { State } from "../state";
import Header from "./components/Header";
import GameTabs from "./components/GameTabs";
import SetupTabs from "./components/SetupTabs";
@@ -13,18 +14,21 @@ const App: Component<{ handlers: Handlers; state: DeepReadonly<State> }> = (
props
) => {
return (
<div class="layout">
<div id="setup" class="setup-box">
<SetupTabs handlers={props.handlers}></SetupTabs>
<>
<Header handlers={props.handlers} />
<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 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 {
background: var(--color-bg-block);
height: 100%;
padding: 20px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
.controls__button {
margin: 3px;
margin: 0 3px;
padding: 5px;
font-size: 3rem;
text-align: center;

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

@@ -1,6 +1,7 @@
.game-box {
grid-area: moves;
padding: 20px;
padding-top: var(--header-margin);
min-width: 360px;
height: 100vh;
}
@@ -8,7 +9,7 @@
.game-tabs {
height: 100%;
display: grid;
grid-template-rows: 38px 1fr;
grid-template-rows: 38px 1fr 84px;
}
.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;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
grid-row-end: span 2;
}
.load__pgn-input {

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

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

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

@@ -39,73 +39,3 @@ const Pieces: Component<{ handlers: Handlers }> = (props) => {
};
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 {
/* background: rgba(135, 207, 235, 0.1); */
height: 100vh;
grid-area: setup;
padding: 20px;
padding-top: var(--header-margin);
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 [copyId, setCopyId] = createSignal("");
const [imageRendering, setImageRendering] = createSignal(false);
const [animationRendering, setAnimationRendering] = createSignal(false);
const blinkCopy = (id: string) => {
setCopyId(id);
@@ -164,9 +166,13 @@ const Share: Component<{ handlers: Handlers }> = (props) => {
</button>
<button
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>
</Show>
</div>
@@ -314,9 +320,13 @@ const Share: Component<{ handlers: Handlers }> = (props) => {
</button>
<button
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>
</div>
</Show>