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-17 03:36:40 +01:00
parent 3095c3b55e
commit 10cea708f0
25 changed files with 326 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2,14 +2,20 @@
grid-area: moves;
padding: 20px;
padding-top: var(--header-margin);
min-width: 360px;
min-width: 375px;
height: 100vh;
}
@media screen and (max-width: 1024px) {
.game-box {
height: auto;
}
}
.game-tabs {
height: 100%;
display: grid;
grid-template-rows: 38px 1fr 84px;
grid-template-rows: 38px 195px 1fr 84px;
}
.game-tabs__btn {

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

@@ -1,6 +1,7 @@
import { Component, Switch, Match } from "solid-js";
import Moves from "./Moves";
import Controls from "./Controls";
import Info from "./Info";
import Load from "./Load";
import { Handlers } from "../../types";
import "./GameTabs.css";
@@ -33,6 +34,7 @@ const GameTabs: Component<{ moves: readonly string[]; handlers: Handlers }> = (
</div>
<Switch>
<Match when={state.activeTab === "game"}>
<Info handlers={props.handlers}></Info>
<Moves moves={props.moves} handlers={props.handlers} />
<Controls handlers={props.handlers} />
</Match>

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

@@ -5,7 +5,7 @@
top: 0;
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-columns: 2fr 1fr;
font-size: 1.8rem;
}

54
src/ui/components/Info.css Normal file
View File

@@ -0,0 +1,54 @@
.info-box {
grid-area: controls;
padding: 0 20px 20px 20px;
}
.info {
background: var(--color-bg-block);
padding: 30px 20px;
font-size: 1.5rem;
text-align: left;
}
.info__players {
position: relative;
line-height: 2rem;
margin-bottom: 2rem;
padding: 0 1rem;
}
.info__rating {
font-family: "Fira Code", monospace;
color: var(--color-text-dimmed);
position: absolute;
right: 1rem;
}
.info__color {
border-radius: 1rem;
padding: 0;
border: solid 2px var(--color-tab);
width: 1.4rem;
height: 1.4rem;
margin-right: 0.8rem;
}
.info__color--white {
background-color: #eee;
}
.info__color--black {
background-color: #111;
}
.info__event {
margin-bottom: 1rem;
}
.info__event,
.info__site {
font-size: 1.3rem;
line-height: 1.5rem;
color: var(--color-text);
padding: 0 1rem;
}

55
src/ui/components/Info.tsx Normal file
View File

@@ -0,0 +1,55 @@
import { Component, Show } from "solid-js";
import { Handlers } from "../../types";
import { state } from "../../state";
import "./Info.css";
import isSafeLink from "../../utils/isSafeLink";
const Info: Component<{ handlers: Handlers }> = () => {
return (
<div class="info">
<div className="info__players">
<p>
<button className="info__color info__color--white"></button>
{state.game.header.WhitePretty}{" "}
<span className="info__rating">
{state.game.header.WhiteElo ?? "????"}
</span>
</p>
<p>
<button className="info__color info__color--black"></button>
{state.game.header.BlackPretty}{" "}
<span className="info__rating">
{state.game.header.BlackElo ?? "????"}
</span>
</p>
</div>
<div className="info__event">
<Show when={state.game.header.Event}>
<p>{state.game.header.Event}</p>
</Show>
<Show when={state.game.header.Round}>
<p>Round {state.game.header.Round}</p>
</Show>
</div>
<div className="info__site">
<Show when={state.game.header.Site}>
<p>
<Show
when={isSafeLink(state.game.header.Site)}
fallback={state.game.header.Site}
>
<a href={state.game.header.Site ?? ""}>
{state.game.header.Site?.replace(/^https:\/\//, "")}
</a>
</Show>
</p>
</Show>
<Show when={state.game.header.DatePretty}>
<p>{state.game.header.DatePretty}</p>
</Show>
</div>
</div>
);
};
export default Info;

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

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

5
src/ui/components/Moves.css
View File

@@ -2,6 +2,11 @@
font-size: 1.4rem;
font-family: "Fira Mono";
text-align: left;
background-color: var(--color-bg-input);
}
.moves__turn {
text-align: center;
}
.move {

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

@@ -1,4 +1,4 @@
import { Component, For, createEffect } from "solid-js";
import { Component, For, Show, createEffect } from "solid-js";
import chunk_ from "@arrows/array/chunk_";
import { Handlers } from "../../types";
import Scrollable from "./reusable/Scrollable";
@@ -16,6 +16,11 @@ const Moves: Component<{ moves: readonly string[]; handlers: Handlers }> = (
return (
<Scrollable class="moves">
<Show when={props.moves.length === 0}>
<p class="moves__turn">
{state.game.getPosition(0).turn === "w" ? "White" : "Black"} to move.
</p>
</Show>
<For each={chunk_(2, props.moves as string[])}>
{(move, i) => {
const [white, black] = move as [string, string];

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

@@ -3,7 +3,13 @@
grid-area: setup;
padding: 20px;
padding-top: var(--header-margin);
min-width: 360px;
min-width: 375px;
}
@media screen and (max-width: 1024px) {
.setup-box {
height: auto;
}
}
.setup {

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

@@ -43,7 +43,7 @@ const Share: Component<{ handlers: Handlers }> = (props) => {
"options__button--active": state.boardConfig.showBorder,
}}
onClick={props.handlers.toggleBorder}
title="BORDER"
title={state.boardConfig.showBorder ? "HIDE BORDER" : "SHOW BORDER"}
>
<i class="las la-expand"></i>
</button>
@@ -53,7 +53,11 @@ const Share: Component<{ handlers: Handlers }> = (props) => {
"options__button--active": state.boardConfig.showExtraInfo,
}}
onClick={props.handlers.toggleExtraInfo}
title="EXTRA INFO"
title={
state.boardConfig.showExtraInfo
? "HIDE EXTRA INFO"
: "SHOW EXTRA INFO"
}
>
<i class="las la-info-circle"></i>
</button>
@@ -63,7 +67,11 @@ const Share: Component<{ handlers: Handlers }> = (props) => {
"options__button--active": state.gameConfig.titleScreen,
}}
onClick={props.handlers.toggleTitleScreen}
title="TITLE SCREEN"
title={
state.gameConfig.titleScreen
? "EXCLUDE TITLE SCREEN"
: "INCLUDE TITLE SCREEN"
}
>
<i class="las la-heading"></i>
</button>
@@ -74,7 +82,7 @@ const Share: Component<{ handlers: Handlers }> = (props) => {
"options__button--active": state.boardConfig.anonymous,
}}
onClick={props.handlers.toggleAnonymous}
title="ANONYMOUS"
title="TOGGLE ANONYMOUS"
>
<i class="las la-user-secret"></i>
</button>
@@ -116,7 +124,7 @@ const Share: Component<{ handlers: Handlers }> = (props) => {
</button>
</div>
<Show when={!state.mobile}>
<h3>Image</h3>
<hr class="invisible" />
<button
classList={{
share__size: true,
@@ -215,19 +223,9 @@ const Share: Component<{ handlers: Handlers }> = (props) => {
<button
class="share__btn"
onClick={() => {
const header = state.game.header;
const w = state.boardConfig.anonymous
? "Anonymous"
: header.WhitePretty;
const b = state.boardConfig.anonymous
? "Anonymous"
: header.BlackPretty;
const title =
`${w} vs ${b}` +
(header.Event ? ` | ${header.Event}` : "") +
(header.Round ? `, Round ${header.Round}` : "") +
(header.DatePretty ? ` | ${header.DatePretty}` : "");
const title = state.game.getTitle({
anonymous: state.boardConfig.anonymous,
});
const md = `[${title}](${window.location.href})`;
@@ -241,7 +239,7 @@ const Share: Component<{ handlers: Handlers }> = (props) => {
</div>
<Show when={!state.mobile}>
<div class="share__animation">
<h3>Animation</h3>
<hr className="invisible" />
<button
classList={{
share__size: true,

10
src/ui/components/reusable/Scrollable.css
View File

@@ -1,7 +1,7 @@
.scrollable {
background: var(--color-bg-block);
height: auto;
padding: 40px 20px;
padding: 20px 10px 20px 20px;
height: 100%;
display: flex;
overflow: auto;
@@ -11,6 +11,7 @@
overflow-y: auto;
overflow-x: hidden;
padding: 0;
padding-right: 10px;
width: 100%;
}
@@ -20,10 +21,11 @@
}
.scrollable__content::-webkit-scrollbar-track {
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
background-color: var(--color-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);
background-color: var(--color-scrollbar);
outline: 1px solid var(--color-scrollbar);
}