59 lines
1.9 KiB
TypeScript
59 lines
1.9 KiB
TypeScript
import { Component, Show } from "solid-js";
|
|
import { Handlers } from "../../types";
|
|
import { state } from "../../state";
|
|
import "./Info.css";
|
|
import isSafeLink from "../../utils/isSafeLink";
|
|
import isLink from "../../utils/isLink";
|
|
|
|
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>
|
|
<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>
|
|
);
|
|
};
|
|
|
|
export default Info;
|