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-02-14 22:56:07 +01:00
parent 15ccd8acbf
commit c8fd7a05f1
13 changed files with 94 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/game/PGNHelpers.ts
View File

@@ -42,7 +42,10 @@ const compressPGN = (pgn: string) => {
const header = Object.entries(game.header()) const header = Object.entries(game.header())
.filter(([key]) => PGN_KEYS.includes(key)) .filter(([key]) => PGN_KEYS.includes(key))
.map(([key, val]) => `${key[0].toUpperCase()} ${val}`) .map(
([key, val]) =>
`${PGN_KEYS_TO_SHORT[key as keyof typeof PGN_KEYS_TO_SHORT]} ${val}`
)
.sort() .sort()
.join("\n"); .join("\n");

73
src/ui/App.css
View File

@@ -22,6 +22,43 @@ body {
font-family: Ubuntu, sans-serif; font-family: Ubuntu, sans-serif;
} }
.dark {
background-color: #232831;
background-image: url(src/ui/img/pattern.png);
color: #ddd;
--color-btn: rgb(0, 173, 136);
--color-btn-light: rgb(0, 207, 162);
--color-tab: #899399;
--color-tab-light: #a9b4bd;
--color-bg-block: #0e0e13;
--color-bg-input: #20242a;
--color-border-input: #2d323a;
--color-highlight: #ffffff22;
--color-text: #aaa;
--color-text-contrast: #0e0e13;
--color-text-input: #acbddb;
--color-text-dimmed: #677794;
}
.light {
background-color: #a7b3b9;
/* background-image: url(src/ui/img/pattern-light.png); */
color: #222;
--color-btn: rgb(0, 148, 116);
--color-btn-light: rgb(0, 114, 89);
--color-tab: #5d6468;
--color-tab-light: #3e4346;
--color-bg-block: #f1f1f1;
--color-bg-input: #fcfcfc;
--color-border-input: #7f8999;
--color-highlight: #00000022;
--color-text: rgb(46, 54, 58);
--color-text-contrast: #fff;
--color-text-input: #46494e;
--color-text-dimmed: #767980;
}
.upload { .upload {
visibility: hidden; visibility: hidden;
padding: 0; padding: 0;
@@ -40,15 +77,15 @@ button,
padding: 10px; padding: 10px;
font-family: "Ubuntu"; font-family: "Ubuntu";
font-size: 1.5rem; font-size: 1.5rem;
background: rgb(0, 173, 136); background: var(--color-btn);
color: #0e0e13; color: var(--color-text-contrast);
border-radius: 5px; border-radius: 5px;
width: 100%; width: 100%;
} }
button:hover, button:hover,
.upload:hover::before { .upload:hover::before {
background: rgb(0, 207, 162); background: var(--color-btn-light);
cursor: pointer; cursor: pointer;
} }
@@ -59,9 +96,9 @@ textarea {
font-family: "Fira Mono"; font-family: "Fira Mono";
font-size: 1.4rem; font-size: 1.4rem;
margin-bottom: 10px; margin-bottom: 10px;
background: #20242a; background: var(--color-bg-input);
border: solid 1px #2d323a; border: solid 1px var(--color-border-input);
color: #acbddb; color: var(--color-text-input);
outline: none; outline: none;
} }
@@ -71,14 +108,14 @@ textarea:focus {
} }
h2 { h2 {
color: #aaa; color: var(--color-text);
text-align: left; text-align: left;
font-size: 1.8rem; font-size: 1.8rem;
margin: 25px 0 10px 0; margin: 25px 0 10px 0;
} }
h3 { h3 {
color: #aaa; color: var(--color-text);
text-align: left; text-align: left;
font-size: 1.6rem; font-size: 1.6rem;
margin: 15px 0 10px 0; margin: 15px 0 10px 0;
@@ -86,26 +123,14 @@ h3 {
hr { hr {
margin-top: 20px; margin-top: 20px;
border-top: solid 1px #ffffff22; border-top: solid 1px var(--color-highlight);
}
.dark {
background-color: #191d24;
/* background-image: url(src/ui/img/pattern.png); */
color: #ddd;
}
.light {
background-color: #cfcfcf;
/* background-image: url(src/ui/img/pattern-light.png); */
color: #222;
} }
.board { .board {
box-shadow: 0 0 30px rgba(0, 0, 0, 0.5); box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
border-radius: 5px; border-radius: 5px;
max-width: 100%; max-width: 100%;
max-height: 95vh; max-height: 100%;
} }
.double { .double {
@@ -130,7 +155,7 @@ hr {
/* background: rgba(255, 166, 0, 0.1); */ /* background: rgba(255, 166, 0, 0.1); */
height: 100vh; height: 100vh;
grid-area: board; grid-area: board;
padding: 20px; padding: 20px 0;
} }
@media screen and (max-width: 1024px) { @media screen and (max-width: 1024px) {
@@ -156,5 +181,5 @@ hr {
} }
::placeholder { ::placeholder {
color: #677794; color: var(--color-text-dimmed);
} }

2
src/ui/components/Boards.css
View File

@@ -1,5 +1,7 @@
.boards { .boards {
text-align: center; text-align: center;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
} }
.boards__ico { .boards__ico {

5
src/ui/components/Controls.css
View File

@@ -4,7 +4,7 @@
} }
.controls { .controls {
background: #0e0e13; background: var(--color-bg-block);
height: 100%; height: 100%;
padding: 20px; padding: 20px;
border-bottom-left-radius: 5px; border-bottom-left-radius: 5px;
@@ -15,7 +15,6 @@
margin: 3px; margin: 3px;
padding: 5px; padding: 5px;
font-size: 3rem; font-size: 3rem;
background: rgb(0, 173, 136);
text-align: center; text-align: center;
border-radius: 5px; border-radius: 5px;
width: 44px; width: 44px;
@@ -23,7 +22,7 @@
} }
.controls__button:hover { .controls__button:hover {
background: rgb(0, 207, 162); background: var(--color-btn-light);
cursor: pointer; cursor: pointer;
} }

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

@@ -16,17 +16,22 @@
border-bottom-left-radius: 0; border-bottom-left-radius: 0;
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
height: 38px; height: 38px;
background: var(--color-tab);
}
.game-tabs__btn:hover {
background: var(--color-tab-light);
} }
.game-tabs__btn--active { .game-tabs__btn--active {
width: 50%; width: 50%;
background: #0e0e13; background: var(--color-bg-block);
color: #aaa; color: var(--color-text);
cursor: default; cursor: default;
} }
.game-tabs__btn--active:hover { .game-tabs__btn--active:hover {
background: #0e0e13; background: var(--color-bg-block);
} }
.game-tabs__btn:nth-child(1) { .game-tabs__btn:nth-child(1) {

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

@@ -1,5 +1,5 @@
.load { .load {
background: #0e0e13; background: var(--color-bg-block);
padding: 20px; padding: 20px;
border-bottom-left-radius: 5px; border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px; border-bottom-right-radius: 5px;
@@ -39,7 +39,7 @@
.load__pgn-file-info p { .load__pgn-file-info p {
margin-top: 10px; margin-top: 10px;
color: #677794; color: var(--color-text-dimmed);
} }
.load__link-input { .load__link-input {

9
src/ui/components/Moves.css
View File

@@ -5,7 +5,6 @@
} }
.move { .move {
/* display: inline-block; */
padding: 3px; padding: 3px;
} }
@@ -14,18 +13,18 @@
width: 40px; width: 40px;
text-align: right; text-align: right;
margin-right: 20px; margin-right: 20px;
color: #aaa; color: var(--color-text);
} }
.move__ply { .move__ply {
display: inline-block; display: inline-block;
width: 70px; width: 70px;
color: rgb(0, 173, 136); color: var(--color-btn);
} }
.move__ply--current { .move__ply--current {
color: #aaa; color: var(--color-text);
background-color: #ffffff22; background-color: var(--color-highlight);
} }
.move__ply:hover { .move__ply:hover {

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

@@ -1,5 +1,7 @@
.pieces { .pieces {
text-align: center; text-align: center;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
} }
.pieces__ico { .pieces__ico {
@@ -7,7 +9,7 @@
margin: 5px; margin: 5px;
cursor: pointer; cursor: pointer;
width: 82px; width: 82px;
background-color: #ffffff22; background-color: var(--color-highlight);
} }
.pieces__ico--active { .pieces__ico--active {

11
src/ui/components/SetupTabs.css
View File

@@ -18,16 +18,21 @@
border-bottom-left-radius: 0; border-bottom-left-radius: 0;
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
height: 38px; height: 38px;
background: var(--color-tab);
}
.setup-tabs__btn:hover {
background: var(--color-tab-light);
} }
.setup-tabs__btn--active { .setup-tabs__btn--active {
background: #0e0e13; background: var(--color-bg-block);
color: #aaa; color: var(--color-text);
cursor: default; cursor: default;
} }
.setup-tabs__btn--active:hover { .setup-tabs__btn--active:hover {
background: #0e0e13; background: var(--color-bg-block);
} }
.setup-tabs__btn:nth-child(1), .setup-tabs__btn:nth-child(1),

9
src/ui/components/Share.css
View File

@@ -1,3 +1,8 @@
.share {
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
.share__format, .share__format,
.share__size { .share__size {
padding: 10px; padding: 10px;
@@ -33,7 +38,6 @@
.share__format--active:hover, .share__format--active:hover,
.share__size--active:hover { .share__size--active:hover {
background: rgb(0, 173, 136);
cursor: default; cursor: default;
} }
@@ -50,7 +54,6 @@
margin: 3px; margin: 3px;
padding: 5px; padding: 5px;
font-size: 3rem; font-size: 3rem;
background: rgb(0, 173, 136);
text-align: center; text-align: center;
border-radius: 5px; border-radius: 5px;
width: 44px; width: 44px;
@@ -63,7 +66,7 @@
} }
.options__button:hover { .options__button:hover {
background: rgb(0, 207, 162); background: var(--color-btn-light);
cursor: pointer; cursor: pointer;
} }

4
src/ui/components/Share.tsx
View File

@@ -86,6 +86,10 @@ const Share: Component<{ handlers: Handlers }> = (props) => {
readOnly readOnly
placeholder="Current FEN..." placeholder="Current FEN..."
value={state.fen} value={state.fen}
onClick={(e) => {
const target = e.target as HTMLInputElement;
target.select();
}}
/> />
<div class="double"> <div class="double">

2
src/ui/components/reusable/Scrollable.css
View File

@@ -1,5 +1,5 @@
.scrollable { .scrollable {
background: #0e0e13; background: var(--color-bg-block);
height: auto; height: auto;
padding: 40px 20px; padding: 40px 20px;
height: 100%; height: 100%;

2
tsconfig.json
View File

@@ -17,5 +17,5 @@
"jsxImportSource": "solid-js", "jsxImportSource": "solid-js",
"types": ["vite/client"] "types": ["vite/client"]
}, },
"include": ["./src", "gif.worker.js", "gif.worker.js"] "include": ["./src", "public/gif.worker.js", "public/gif.worker.js"]
} }