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-03-17 03:51:42 +01:00
parent fa68ef29b8
commit 639914dba6
646 changed files with 81 additions and 4719 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -26,6 +26,10 @@
column-gap: 0.5rem;
}
.game-tabs--condensed {
grid-template-columns: 1fr 1fr 1fr;
}
.span2 {
grid-row-end: span 2;
}

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

@@ -20,7 +20,12 @@ const GameTabs: Component<{ moves: readonly string[]; handlers: Handlers }> = (
) => {
return (
<div class="game">
<div class="game-tabs">
<div
classList={{
"game-tabs": true,
"game-tabs--condensed": state.layout !== "triple",
}}
>
<Tab name="game" setTab={setTab} isActive={state.activeTab === "game"}>
GAME
</Tab>
@@ -33,7 +38,7 @@ const GameTabs: Component<{ moves: readonly string[]; handlers: Handlers }> = (
setTab={setTab}
isActive={state.activeTab === "share"}
>
<i class="las la-share"></i>
SHARE
</Tab>
<Tab
name="boards"

20
src/ui/components/Info.css
View File

@@ -17,11 +17,27 @@
padding: 0 1rem;
}
.info__player {
display: grid;
grid-template-columns: auto 40px;
}
.info__left {
}
.info__right {
text-align: right;
}
.info__rating {
font-family: "Fira Code", monospace;
color: var(--color-text-dimmed);
position: absolute;
right: 1rem;
}
.info__score {
font-family: "Fira Code", monospace;
color: var(--color-score);
margin-left: 1rem;
}
.info__color {

56
src/ui/components/Info.tsx
View File

@@ -9,20 +9,48 @@ const Info: Component<{ handlers: Handlers }> = () => {
return (
<div class="info">
<div className="info__players">
<p>
<button className="info__color info__color--white"></button>
<Show when={!state.anonymous} fallback="Anonymous">
{state.game.header.WhitePretty}{" "}
</Show>
<span className="info__rating">{state.game.header.WhiteElo}</span>
</p>
<p>
<button className="info__color info__color--black"></button>
<Show when={!state.anonymous} fallback="Anonymous">
{state.game.header.BlackPretty}{" "}
</Show>
<span className="info__rating">{state.game.header.BlackElo}</span>
</p>
<div class="info__player">
<div className="info__left">
<button className="info__color info__color--white"></button>
<Show when={!state.anonymous} fallback="Anonymous">
{state.game.header.WhitePretty}{" "}
</Show>
<span className="info__rating">
{" "}
({state.game.header.WhiteElo})
</span>
</div>
<div className="info__right">
<span className="info__score">
{state.game.header.Result === "1-0"
? "1"
: state.game.header.Result === "0-1"
? "0"
: "1/2"}
</span>
</div>
</div>
<div class="info__player">
<div className="info__left">
<button className="info__color info__color--black"></button>
<Show when={!state.anonymous} fallback="Anonymous">
{state.game.header.BlackPretty}{" "}
</Show>
<span className="info__rating">
{" "}
({state.game.header.BlackElo})
</span>
</div>
<div className="info__right">
<span className="info__score">
{state.game.header.Result === "1-0"
? "0"
: state.game.header.Result === "0-1"
? "1"
: "1/2"}
</span>
</div>
</div>
</div>
<div className="info__event">
<Show when={state.game.header.Event}>