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" />
<link rel="icon" type="image/svg+xml" href="favicon.svg" />
<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>
</head>
<body class="dark">

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

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

18
src/ui/App.tsx
View File

@@ -1,23 +1,25 @@
import type { Component } from "solid-js";
import type { DeepReadonly } from "solid-js/store";
import Controls from "./components/Controls";
import { Handlers } from "../types";
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> }> = (
props
) => {
return (
<div class="layout">
<div id="setup" class="setup-box"></div>
<div id="board" class="board-box"></div>
<div id="controls" class="controls-box">
<Controls handlers={props.handlers}></Controls>
<div id="setup" class="setup-box">
<SetupTabs handlers={props.handlers}></SetupTabs>
</div>
<div id="moves" class="moves-box">
<div id="board" class="board-box"></div>
<div id="moves" class="game-box">
<GameTabs
moves={props.state.moves}
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 { Handlers } from "../../types";
import "./Controls.css";
const Controls: Component<{ handlers: Handlers }> = (props) => {
return (
<div class="controls">
<button class="controls__button" onClick={props.handlers.first}>
FIRST
<button
class="controls__button"
onClick={props.handlers.first}
title="FIRST"
>
<i class="las la-angle-double-left"></i>
</button>
<button class="controls__button" onClick={props.handlers.prev}>
PREV
<button
class="controls__button"
onClick={props.handlers.prev}
title="PREV"
>
<i class="las la-angle-left"></i>
</button>
<button class="controls__button" onClick={props.handlers.togglePlay}>
PLAY/PAUSE
<button
class="controls__button"
onClick={props.handlers.togglePlay}
title="PLAY"
>
<i class="las la-play"></i>
</button>
<button class="controls__button" onClick={props.handlers.next}>
NEXT
<button
class="controls__button"
onClick={props.handlers.next}
title="NEXT"
>
<i class="las la-angle-right"></i>
</button>
<button class="controls__button" onClick={props.handlers.last}>
LAST
<button
class="controls__button"
onClick={props.handlers.last}
title="LAST"
>
<i class="las la-angle-double-right"></i>
</button>
<button class="controls__button" onClick={props.handlers.flip}>
FLIP
{/* <button
class="controls__button"
onClick={props.handlers.flip}
title="FLIP"
>
<i class="las la-sync"></i>
</button>
<button class="controls__button" onClick={props.handlers.toggleBorder}>
TOGGLE BORDER
</button>
<button class="controls__button" onClick={props.handlers.toggleExtraInfo}>
TOGGLE EXTRA INFO
<button
class="controls__button"
onClick={props.handlers.toggleBorder}
title="BORDER"
>
<i class="las la-expand"></i>
</button>
<button
class="controls__button"
onClick={props.handlers.toggleExtraInfo}
title="EXTRA INFO"
>
<i class="las la-info"></i>
</button> */}
</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 {
margin: 20px;
/* height: 100%; */
height: 100%;
display: grid;
grid-template-rows: 38px 1fr;
}
.game-tabs__btn {
@@ -13,6 +21,7 @@
border-top-left-radius: 5px;
border-top-right-radius: 5px;
cursor: pointer;
height: 38px;
}
.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 Moves from "./Moves";
import Controls from "./Controls";
import Load from "./Load";
import { Handlers } from "../../types";
import "./gameTabs.css";
import "./GameTabs.css";
const GameTabs: Component<{ moves: readonly string[]; handlers: Handlers }> = (
props
@@ -11,26 +12,30 @@ const GameTabs: Component<{ moves: readonly string[]; handlers: Handlers }> = (
return (
<div class="game-tabs">
<button
class={
"game-tabs__btn" +
(tab() === "moves" ? " game-tabs__btn--active" : "")
}
onClick={() => setTab("moves")}
>
MOVES
</button>
<button
class={
"game-tabs__btn" + (tab() === "load" ? " game-tabs__btn--active" : "")
}
onClick={() => setTab("load")}
>
LOAD
</button>
<div class="tabs">
<button
class={
"game-tabs__btn" +
(tab() === "moves" ? " game-tabs__btn--active" : "")
}
onClick={() => setTab("moves")}
>
MOVES
</button>
<button
class={
"game-tabs__btn" +
(tab() === "load" ? " game-tabs__btn--active" : "")
}
onClick={() => setTab("load")}
>
LOAD
</button>
</div>
<Switch>
<Match when={tab() === "moves"}>
<Moves moves={props.moves} handlers={props.handlers} />
<Controls handlers={props.handlers} />
</Match>
<Match when={tab() === "load"}>
<Load />

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

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

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

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

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

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

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

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