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-04-11 22:46:30 +02:00
parent 9fa3285297
commit 7beecd3c72
17 changed files with 870 additions and 127 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
src/ui/components/Header.tsx
View File

@@ -20,47 +20,44 @@ const Header: Component<{ handlers: Handlers }> = (props) => {
<div
class="header__options-ico"
onClick={() => {
props.handlers.toggleSound();
}}
title={state.boardConfig.sounds ? "MUTE" : "SOUND ON"}
onClick={props.handlers.toggleSound}
title={state.siteConfig.sounds ? "MUTE" : "SOUND ON"}
>
<i
classList={{
las: true,
"la-volume-mute": !state.boardConfig.sounds,
"la-volume-up": state.boardConfig.sounds,
"la-volume-mute": !state.siteConfig.sounds,
"la-volume-up": state.siteConfig.sounds,
}}
></i>
</div>
<div
class="header__options-ico"
onClick={() => {
props.handlers.toggleSpeech();
}}
title={state.boardConfig.speech ? "SPEECH OFF" : "SPEECH ON"}
onClick={props.handlers.toggleSpeech}
title={state.siteConfig.speech ? "SPEECH OFF" : "SPEECH ON"}
>
<i
classList={{
las: true,
"la-deaf": !state.boardConfig.speech,
"la-assistive-listening-systems": state.boardConfig.speech,
"la-deaf": !state.siteConfig.speech,
"la-assistive-listening-systems": state.siteConfig.speech,
}}
></i>
</div>
<div
class="header__options-ico"
onClick={() => {
setDarkMode(!darkMode());
document.body.classList.toggle("light");
}}
title={darkMode() ? "LIGHT MODE" : "DARK MODE"}
onClick={props.handlers.toggleDarkMode}
title={
state.siteConfig.darkMode
? "SWITCH TO LIGHT MODE"
: "SWITCH TO DARK MODE"
}
>
<i
classList={{
las: true,
"la-sun": darkMode(),
"la-moon": !darkMode(),
"la-sun": state.siteConfig.darkMode,
"la-moon": !state.siteConfig.darkMode,
}}
></i>
</div>

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

@@ -67,9 +67,16 @@
padding: 0 1rem;
}
.info__analyze {
position: absolute;
bottom: 2rem;
width: 100%;
padding-right: 4rem;
.info__header {
height: 13.1rem;
}
.info__analyze {
margin-top: 2rem;
}
@media (orientation: portrait) {
.info__header {
height: auto;
}
}

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

@@ -10,84 +10,86 @@ const Info: Component<{ handlers: Handlers }> = (props) => {
return (
<div class="info">
<div className="info__players">
<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>
<Show when={state.game.header.WhiteElo}>
<span className="info__rating">
{" "}
({state.game.header.WhiteElo})
</span>
</Show>
</div>
<div className="info__right">
<span className="info__score">
{state.game.header.Result === "1-0"
? "1"
: state.game.header.Result === "0-1"
? "0"
: state.game.header.Result === "1/2-1/2"
? "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>
<Show when={state.game.header.BlackElo}>
<span className="info__rating">
{" "}
({state.game.header.BlackElo})
</span>
</Show>
</div>
<div className="info__right">
<span className="info__score">
{state.game.header.Result === "1-0"
? "0"
: state.game.header.Result === "0-1"
? "1"
: state.game.header.Result === "1/2-1/2"
? "1/2"
: ""}
</span>
</div>
</div>
</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={!state.anonymous || !isLink(state.game.header.Site)}>
<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>
<div className="info__header">
<div className="info__players">
<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>
</Show>
</p>
</Show>
<Show when={state.game.header.DatePretty}>
<p>{state.game.header.DatePretty}</p>
</Show>
<Show when={state.game.header.WhiteElo}>
<span className="info__rating">
{" "}
({state.game.header.WhiteElo})
</span>
</Show>
</div>
<div className="info__right">
<span className="info__score">
{state.game.header.Result === "1-0"
? "1"
: state.game.header.Result === "0-1"
? "0"
: state.game.header.Result === "1/2-1/2"
? "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>
<Show when={state.game.header.BlackElo}>
<span className="info__rating">
{" "}
({state.game.header.BlackElo})
</span>
</Show>
</div>
<div className="info__right">
<span className="info__score">
{state.game.header.Result === "1-0"
? "0"
: state.game.header.Result === "0-1"
? "1"
: state.game.header.Result === "1/2-1/2"
? "1/2"
: ""}
</span>
</div>
</div>
</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={!state.anonymous || !isLink(state.game.header.Site)}>
<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>
</Show>
</p>
</Show>
<Show when={state.game.header.DatePretty}>
<p>{state.game.header.DatePretty}</p>
</Show>
</div>
</div>
<div className="info__analyze">
<button