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-08 21:52:31 +01:00
parent 56ed83d9f6
commit 4785b61644
15 changed files with 274 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
index.html
View File

@@ -4,6 +4,10 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="favicon.svg" /> <link rel="icon" type="image/svg+xml" href="favicon.svg" />
<meta name="viewport" content="width=device-width" /> <meta name="viewport" content="width=device-width" />
<link
rel="stylesheet"
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>Vite App</title>
</head> </head>
<body class="dark"> <body class="dark">

25
src/ui/app.css → src/ui/App.css
View File

@@ -19,6 +19,7 @@ body {
background-repeat: repeat; background-repeat: repeat;
background-position: center; background-position: center;
text-align: center; text-align: center;
font-family: Ubuntu, sans-serif;
} }
.dark { .dark {
@@ -49,42 +50,26 @@ body {
.layout { .layout {
display: grid; display: grid;
grid-template-columns: 1fr 2fr 1fr; grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: 1fr;
grid-template-areas: grid-template-areas:
"setup board moves" "setup board moves"
"setup board controls"; "setup board controls";
}
.moves-box { height: 100vh;
/* background: rgba(255, 192, 203, 0.1); */
height: 85vh;
grid-area: moves;
} }
.board-box { .board-box {
/* 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;
} }
.setup-box { .setup-box {
/* background: rgba(135, 207, 235, 0.1); */ /* background: rgba(135, 207, 235, 0.1); */
height: 100vh; height: 100vh;
grid-area: setup; grid-area: setup;
}
.controls-box {
/* background: rgba(0, 255, 0, 0.1); */
height: 15vh;
grid-area: controls;
}
.controls__button {
margin: 5px;
padding: 5px;
cursor: pointer;
}
.moves {
padding: 20px; padding: 20px;
} }

18
src/ui/App.tsx
View File

@@ -1,23 +1,25 @@
import type { Component } from "solid-js"; import type { Component } from "solid-js";
import type { DeepReadonly } from "solid-js/store"; import type { DeepReadonly } from "solid-js/store";
import Controls from "./components/Controls";
import { Handlers } from "../types"; import { Handlers } from "../types";
import { State } from "../state"; import { State } from "../state";
import GameTabs from "./components/GameTabs";
import "./app.css"; import Controls from "./components/Controls";
import GameTabs from "./components/GameTabs";
import SetupTabs from "./components/SetupTabs";
import "./App.css";
const App: Component<{ handlers: Handlers; state: DeepReadonly<State> }> = ( const App: Component<{ handlers: Handlers; state: DeepReadonly<State> }> = (
props props
) => { ) => {
return ( return (
<div class="layout"> <div class="layout">
<div id="setup" class="setup-box"></div> <div id="setup" class="setup-box">
<div id="board" class="board-box"></div> <SetupTabs handlers={props.handlers}></SetupTabs>
<div id="controls" class="controls-box">
<Controls handlers={props.handlers}></Controls>
</div> </div>
<div id="moves" class="moves-box"> <div id="board" class="board-box"></div>
<div id="moves" class="game-box">
<GameTabs <GameTabs
moves={props.state.moves} moves={props.state.moves}
handlers={props.handlers} handlers={props.handlers}

36
src/ui/components/Controls.css Normal file
View File

@@ -0,0 +1,36 @@
.controls-box {
grid-area: controls;
padding: 0 20px 20px 20px;
}
.controls {
background: #0e0e13;
height: 100%;
padding: 20px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
.controls__button {
margin: 3px;
padding: 5px;
font-size: 3rem;
background: rgb(0, 173, 136);
text-align: center;
border-radius: 5px;
width: 44px;
height: 44px;
}
.controls__button:hover {
background: rgb(0, 207, 162);
cursor: pointer;
}
.controls__button:nth-child(5) {
margin-right: 0px;
}
.controls__button:nth-child(1) {
margin-left: 0px;
}

67
src/ui/components/Controls.tsx
View File

@@ -1,33 +1,66 @@
import { Component } from "solid-js"; import { Component } from "solid-js";
import { Handlers } from "../../types"; import { Handlers } from "../../types";
import "./Controls.css";
const Controls: Component<{ handlers: Handlers }> = (props) => { const Controls: Component<{ handlers: Handlers }> = (props) => {
return ( return (
<div class="controls"> <div class="controls">
<button class="controls__button" onClick={props.handlers.first}> <button
FIRST class="controls__button"
onClick={props.handlers.first}
title="FIRST"
>
<i class="las la-angle-double-left"></i>
</button> </button>
<button class="controls__button" onClick={props.handlers.prev}> <button
PREV class="controls__button"
onClick={props.handlers.prev}
title="PREV"
>
<i class="las la-angle-left"></i>
</button> </button>
<button class="controls__button" onClick={props.handlers.togglePlay}> <button
PLAY/PAUSE class="controls__button"
onClick={props.handlers.togglePlay}
title="PLAY"
>
<i class="las la-play"></i>
</button> </button>
<button class="controls__button" onClick={props.handlers.next}> <button
NEXT class="controls__button"
onClick={props.handlers.next}
title="NEXT"
>
<i class="las la-angle-right"></i>
</button> </button>
<button class="controls__button" onClick={props.handlers.last}> <button
LAST class="controls__button"
onClick={props.handlers.last}
title="LAST"
>
<i class="las la-angle-double-right"></i>
</button> </button>
<button class="controls__button" onClick={props.handlers.flip}> {/* <button
FLIP class="controls__button"
onClick={props.handlers.flip}
title="FLIP"
>
<i class="las la-sync"></i>
</button> </button>
<button class="controls__button" onClick={props.handlers.toggleBorder}> <button
TOGGLE BORDER class="controls__button"
</button> onClick={props.handlers.toggleBorder}
<button class="controls__button" onClick={props.handlers.toggleExtraInfo}> title="BORDER"
TOGGLE EXTRA INFO >
<i class="las la-expand"></i>
</button> </button>
<button
class="controls__button"
onClick={props.handlers.toggleExtraInfo}
title="EXTRA INFO"
>
<i class="las la-info"></i>
</button> */}
</div> </div>
); );
}; };

13
src/ui/components/gameTabs.css → src/ui/components/GameTabs.css
View File

@@ -1,6 +1,14 @@
.game-box {
grid-area: moves;
padding: 20px;
min-width: 325px;
height: 100vh;
}
.game-tabs { .game-tabs {
margin: 20px; height: 100%;
/* height: 100%; */ display: grid;
grid-template-rows: 38px 1fr;
} }
.game-tabs__btn { .game-tabs__btn {
@@ -13,6 +21,7 @@
border-top-left-radius: 5px; border-top-left-radius: 5px;
border-top-right-radius: 5px; border-top-right-radius: 5px;
cursor: pointer; cursor: pointer;
height: 38px;
} }
.game-tabs__btn:hover { .game-tabs__btn:hover {

41
src/ui/components/GameTabs.tsx
View File

@@ -1,8 +1,9 @@
import { Component, createSignal, Switch, Match } from "solid-js"; import { Component, createSignal, Switch, Match } from "solid-js";
import Moves from "./Moves"; import Moves from "./Moves";
import Controls from "./Controls";
import Load from "./Load"; import Load from "./Load";
import { Handlers } from "../../types"; import { Handlers } from "../../types";
import "./gameTabs.css"; import "./GameTabs.css";
const GameTabs: Component<{ moves: readonly string[]; handlers: Handlers }> = ( const GameTabs: Component<{ moves: readonly string[]; handlers: Handlers }> = (
props props
@@ -11,26 +12,30 @@ const GameTabs: Component<{ moves: readonly string[]; handlers: Handlers }> = (
return ( return (
<div class="game-tabs"> <div class="game-tabs">
<button <div class="tabs">
class={ <button
"game-tabs__btn" + class={
(tab() === "moves" ? " game-tabs__btn--active" : "") "game-tabs__btn" +
} (tab() === "moves" ? " game-tabs__btn--active" : "")
onClick={() => setTab("moves")} }
> onClick={() => setTab("moves")}
MOVES >
</button> MOVES
<button </button>
class={ <button
"game-tabs__btn" + (tab() === "load" ? " game-tabs__btn--active" : "") class={
} "game-tabs__btn" +
onClick={() => setTab("load")} (tab() === "load" ? " game-tabs__btn--active" : "")
> }
LOAD onClick={() => setTab("load")}
</button> >
LOAD
</button>
</div>
<Switch> <Switch>
<Match when={tab() === "moves"}> <Match when={tab() === "moves"}>
<Moves moves={props.moves} handlers={props.handlers} /> <Moves moves={props.moves} handlers={props.handlers} />
<Controls handlers={props.handlers} />
</Match> </Match>
<Match when={tab() === "load"}> <Match when={tab() === "load"}>
<Load /> <Load />

3
src/ui/components/load.css → src/ui/components/Load.css
View File

@@ -1,7 +1,8 @@
.load { .load {
background: #0e0e13; background: #0e0e13;
/* background: #13141a; */
padding: 20px; padding: 20px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
} }
.load__fen-input, .load__fen-input,

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

@@ -1,5 +1,5 @@
import { Component } from "solid-js"; import { Component } from "solid-js";
import "./load.css"; import "./Load.css";
const Load: Component = () => { const Load: Component = () => {
return ( return (

2
src/ui/components/moves.css → src/ui/components/Moves.css
View File

@@ -1,8 +1,8 @@
.moves { .moves {
background: #0e0e13;
font-size: 1.4rem; font-size: 1.4rem;
font-family: "Fira Mono"; font-family: "Fira Mono";
text-align: left; text-align: left;
/* height: 85vh; */
} }
.move { .move {

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

@@ -1,13 +1,14 @@
import { Component, For } from "solid-js"; import { Component, For } from "solid-js";
import chunk_ from "@arrows/array/chunk_"; import chunk_ from "@arrows/array/chunk_";
import { Handlers } from "../../types"; import { Handlers } from "../../types";
import "./moves.css"; import Scrollable from "./reusable/Scrollable";
import "./Moves.css";
const Moves: Component<{ moves: readonly string[]; handlers: Handlers }> = ( const Moves: Component<{ moves: readonly string[]; handlers: Handlers }> = (
props props
) => { ) => {
return ( return (
<div class="moves"> <Scrollable class="moves">
<For each={chunk_(2, props.moves as string[])}> <For each={chunk_(2, props.moves as string[])}>
{(move, i) => { {(move, i) => {
const [white, black] = move as [string, string]; const [white, black] = move as [string, string];
@@ -31,7 +32,7 @@ const Moves: Component<{ moves: readonly string[]; handlers: Handlers }> = (
); );
}} }}
</For> </For>
</div> </Scrollable>
); );
}; };

35
src/ui/components/SetupTabs.css Normal file
View File

@@ -0,0 +1,35 @@
.setup {
font-size: 1.6rem;
/* background: #0e0e13; */
}
.setup-tabs__btn {
width: 32%;
background: rgb(0, 173, 136);
color: #0e0e13;
padding: 10px;
font-family: Ubuntu;
font-size: 1.5rem;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
cursor: pointer;
}
.setup-tabs__btn:hover {
background: rgb(0, 207, 162);
}
.setup-tabs__btn--active {
background: #0e0e13;
color: #aaa;
cursor: default;
}
.setup-tabs__btn--active:hover {
background: #0e0e13;
}
.setup-tabs__btn:nth-child(1),
.setup-tabs__btn:nth-child(2) {
margin-right: 2%;
}

52
src/ui/components/SetupTabs.tsx Normal file
View File

@@ -0,0 +1,52 @@
import { Component, createSignal, Switch, Match } from "solid-js";
import { Handlers } from "../../types";
import "./SetupTabs.css";
const SetupTabs: Component<{ handlers: Handlers }> = (props) => {
const [tab, setTab] = createSignal("share");
return (
<div class="setup">
<button
class={
"setup-tabs__btn" +
(tab() === "share" ? " setup-tabs__btn--active" : "")
}
onClick={() => setTab("share")}
>
<i class="las la-share"></i> SHARE
</button>
<button
class={
"setup-tabs__btn" +
(tab() === "boards" ? " setup-tabs__btn--active" : "")
}
onClick={() => setTab("boards")}
>
<i class="las la-chess-board"></i> BOARDS
</button>
<button
class={
"setup-tabs__btn" +
(tab() === "pieces" ? " setup-tabs__btn--active" : "")
}
onClick={() => setTab("pieces")}
>
<i class="las la-chess"></i> PIECES
</button>
<Switch>
<Match when={tab() === "share"}>
<div class="temp">SHARE</div>
</Match>
<Match when={tab() === "boards"}>
<div class="temp">BOARDS</div>
</Match>
<Match when={tab() === "pieces"}>
<div class="temp">PIECES</div>
</Match>
</Switch>
</div>
);
};
export default SetupTabs;

28
src/ui/components/reusable/Scrollable.css Normal file
View File

@@ -0,0 +1,28 @@
.scrollable {
background: #0e0e13;
height: auto;
padding: 40px 20px;
height: 100%;
display: flex;
overflow: auto;
}
.scrollable__content {
overflow-y: auto;
overflow-x: hidden;
padding: 0;
}
.scrollable__content::-webkit-scrollbar {
width: 0.7rem;
cursor: pointer;
}
.scrollable__content::-webkit-scrollbar-track {
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}
.scrollable__content::-webkit-scrollbar-thumb {
background-color: rgb(0, 59, 47);
outline: 1px solid rgb(0, 59, 47);
}

12
src/ui/components/reusable/Scrollable.tsx Normal file
View File

@@ -0,0 +1,12 @@
import { Component } from "solid-js";
import "./Scrollable.css";
const Scrollable: Component<{ class: string }> = (props) => {
return (
<div class={`scrollable ${props.class}`}>
<div class="scrollable__content">{props.children}</div>
</div>
);
};
export default Scrollable;