WIP
23
index.html
@@ -2,13 +2,33 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
|
||||
<!-- HTML Meta Tags -->
|
||||
<title>ShareChess</title>
|
||||
<meta name="description" content="Share chess games." />
|
||||
|
||||
<!-- Facebook Meta Tags -->
|
||||
<meta property="og:url" content="https://sharechess.github.io/" />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:title" content="ShareChess" />
|
||||
<meta property="og:description" content="Share chess games." />
|
||||
<meta
|
||||
property="og:image"
|
||||
content="https://sharechess.github.io/img/baner.png"
|
||||
/>
|
||||
<meta property="og:url" content="https://sharechess.github.io" />
|
||||
|
||||
<!-- Twitter Meta Tags -->
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
<meta property="twitter:domain" content="sharechess.github.io" />
|
||||
<meta property="twitter:url" content="https://sharechess.github.io/" />
|
||||
<meta name="twitter:title" content="ShareChess" />
|
||||
<meta name="twitter:description" content="Share chess games." />
|
||||
<meta
|
||||
name="twitter:image"
|
||||
content="https://sharechess.github.io/img/baner.png"
|
||||
/>
|
||||
|
||||
<!-- Other Tags -->
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<link rel="manifest" href="/manifest.json" />
|
||||
<meta
|
||||
@@ -37,7 +57,6 @@
|
||||
rel="stylesheet"
|
||||
href="https://maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.3.0/css/line-awesome.min.css"
|
||||
/>
|
||||
<title>SHARECHESS</title>
|
||||
</head>
|
||||
<body class="dark">
|
||||
<div id="root"></div>
|
||||
|
||||
|
Before Width: | Height: | Size: 295 KiB After Width: | Height: | Size: 1.4 MiB |
|
Before Width: | Height: | Size: 8.6 KiB After Width: | Height: | Size: 8.5 KiB |
|
Before Width: | Height: | Size: 17 KiB After Width: | Height: | Size: 18 KiB |
|
Before Width: | Height: | Size: 8.6 KiB After Width: | Height: | Size: 8.5 KiB |
@@ -139,7 +139,7 @@ const main = async () => {
|
||||
|
||||
setState("boardConfig", "flipped", side === "b");
|
||||
|
||||
document.title = `SHARECHESS - ${game.getTitle({ anonymous: false })}`;
|
||||
document.title = `ShareChess - ${game.getTitle({ anonymous: false })}`;
|
||||
},
|
||||
async loadFEN(fen: string, hash = true) {
|
||||
const game = new Game().loadFEN(fen);
|
||||
@@ -168,7 +168,7 @@ const main = async () => {
|
||||
|
||||
setState("boardConfig", "flipped", side === "b");
|
||||
|
||||
document.title = `SHARECHESS - FEN ${fen}`;
|
||||
document.title = `ShareChess - FEN ${fen}`;
|
||||
},
|
||||
async load(data: string) {
|
||||
setState("refreshHash", false);
|
||||
|
||||
@@ -5,7 +5,6 @@
|
||||
}
|
||||
|
||||
.boards__ico {
|
||||
margin: 0.2rem;
|
||||
cursor: pointer;
|
||||
width: 8.2rem;
|
||||
height: 8.2rem;
|
||||
|
||||
@@ -6,13 +6,6 @@
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
@media (orientation: portrait) {
|
||||
.game-box {
|
||||
padding: 0;
|
||||
height: 800px;
|
||||
}
|
||||
}
|
||||
|
||||
.game {
|
||||
height: 100%;
|
||||
display: grid;
|
||||
@@ -37,3 +30,15 @@
|
||||
.span3 {
|
||||
grid-row-end: span 3;
|
||||
}
|
||||
|
||||
@media (orientation: portrait) {
|
||||
.game-box {
|
||||
padding: 0;
|
||||
height: auto;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.game {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -9,7 +9,9 @@ const Header: Component<{ handlers: Handlers }> = (props) => {
|
||||
return (
|
||||
<header class="header-box">
|
||||
<div class="header__logo">
|
||||
<a href="/">
|
||||
<div class="header__logo-pic" />
|
||||
</a>
|
||||
</div>
|
||||
<div class="header__options">
|
||||
{/* <div class="header__options-ico" onClick={() => {}}>
|
||||
|
||||
@@ -83,6 +83,18 @@ const Info: Component<{ handlers: Handlers }> = () => {
|
||||
</Show>
|
||||
</p>
|
||||
</Show>
|
||||
<Show when={state.pgn === ""}>
|
||||
<p>
|
||||
<a
|
||||
href={`https://lichess.org/analysis/${state.fen.replace(
|
||||
/\s+/g,
|
||||
"_"
|
||||
)}`}
|
||||
>
|
||||
Analyze on Lichess
|
||||
</a>
|
||||
</p>
|
||||
</Show>
|
||||
<Show when={state.game.header.DatePretty}>
|
||||
<p>{state.game.header.DatePretty}</p>
|
||||
</Show>
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
.scrollable {
|
||||
background: var(--color-bg-block);
|
||||
height: auto;
|
||||
padding: 2rem 1rem 2rem 2rem;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
@@ -29,3 +28,10 @@
|
||||
background-color: var(--color-scrollbar);
|
||||
outline: 1px solid var(--color-scrollbar);
|
||||
}
|
||||
|
||||
@media (orientation: portrait) {
|
||||
.scrollable {
|
||||
height: auto;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||