WIP
23
index.html
@@ -2,13 +2,33 @@
|
|||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<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:title" content="ShareChess" />
|
||||||
<meta property="og:description" content="Share chess games." />
|
<meta property="og:description" content="Share chess games." />
|
||||||
<meta
|
<meta
|
||||||
property="og:image"
|
property="og:image"
|
||||||
content="https://sharechess.github.io/img/baner.png"
|
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="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||||
<link rel="manifest" href="/manifest.json" />
|
<link rel="manifest" href="/manifest.json" />
|
||||||
<meta
|
<meta
|
||||||
@@ -37,7 +57,6 @@
|
|||||||
rel="stylesheet"
|
rel="stylesheet"
|
||||||
href="https://maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.3.0/css/line-awesome.min.css"
|
href="https://maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.3.0/css/line-awesome.min.css"
|
||||||
/>
|
/>
|
||||||
<title>SHARECHESS</title>
|
|
||||||
</head>
|
</head>
|
||||||
<body class="dark">
|
<body class="dark">
|
||||||
<div id="root"></div>
|
<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");
|
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) {
|
async loadFEN(fen: string, hash = true) {
|
||||||
const game = new Game().loadFEN(fen);
|
const game = new Game().loadFEN(fen);
|
||||||
@@ -168,7 +168,7 @@ const main = async () => {
|
|||||||
|
|
||||||
setState("boardConfig", "flipped", side === "b");
|
setState("boardConfig", "flipped", side === "b");
|
||||||
|
|
||||||
document.title = `SHARECHESS - FEN ${fen}`;
|
document.title = `ShareChess - FEN ${fen}`;
|
||||||
},
|
},
|
||||||
async load(data: string) {
|
async load(data: string) {
|
||||||
setState("refreshHash", false);
|
setState("refreshHash", false);
|
||||||
|
|||||||
@@ -5,7 +5,6 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.boards__ico {
|
.boards__ico {
|
||||||
margin: 0.2rem;
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
width: 8.2rem;
|
width: 8.2rem;
|
||||||
height: 8.2rem;
|
height: 8.2rem;
|
||||||
|
|||||||
@@ -6,13 +6,6 @@
|
|||||||
height: 100vh;
|
height: 100vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (orientation: portrait) {
|
|
||||||
.game-box {
|
|
||||||
padding: 0;
|
|
||||||
height: 800px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.game {
|
.game {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
display: grid;
|
display: grid;
|
||||||
@@ -37,3 +30,15 @@
|
|||||||
.span3 {
|
.span3 {
|
||||||
grid-row-end: span 3;
|
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 (
|
return (
|
||||||
<header class="header-box">
|
<header class="header-box">
|
||||||
<div class="header__logo">
|
<div class="header__logo">
|
||||||
<div class="header__logo-pic" />
|
<a href="/">
|
||||||
|
<div class="header__logo-pic" />
|
||||||
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="header__options">
|
<div class="header__options">
|
||||||
{/* <div class="header__options-ico" onClick={() => {}}>
|
{/* <div class="header__options-ico" onClick={() => {}}>
|
||||||
|
|||||||
@@ -83,6 +83,18 @@ const Info: Component<{ handlers: Handlers }> = () => {
|
|||||||
</Show>
|
</Show>
|
||||||
</p>
|
</p>
|
||||||
</Show>
|
</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}>
|
<Show when={state.game.header.DatePretty}>
|
||||||
<p>{state.game.header.DatePretty}</p>
|
<p>{state.game.header.DatePretty}</p>
|
||||||
</Show>
|
</Show>
|
||||||
|
|||||||
@@ -1,6 +1,5 @@
|
|||||||
.scrollable {
|
.scrollable {
|
||||||
background: var(--color-bg-block);
|
background: var(--color-bg-block);
|
||||||
height: auto;
|
|
||||||
padding: 2rem 1rem 2rem 2rem;
|
padding: 2rem 1rem 2rem 2rem;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -29,3 +28,10 @@
|
|||||||
background-color: var(--color-scrollbar);
|
background-color: var(--color-scrollbar);
|
||||||
outline: 1px solid var(--color-scrollbar);
|
outline: 1px solid var(--color-scrollbar);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media (orientation: portrait) {
|
||||||
|
.scrollable {
|
||||||
|
height: auto;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||