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())
.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()
.join("\n");

73
src/ui/App.css
View File

@@ -22,6 +22,43 @@ body {
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 {
visibility: hidden;
padding: 0;
@@ -40,15 +77,15 @@ button,
padding: 10px;
font-family: "Ubuntu";
font-size: 1.5rem;
background: rgb(0, 173, 136);
color: #0e0e13;
background: var(--color-btn);
color: var(--color-text-contrast);
border-radius: 5px;
width: 100%;
}
button:hover,
.upload:hover::before {
background: rgb(0, 207, 162);
background: var(--color-btn-light);
cursor: pointer;
}
@@ -59,9 +96,9 @@ textarea {
font-family: "Fira Mono";
font-size: 1.4rem;
margin-bottom: 10px;
background: #20242a;
border: solid 1px #2d323a;
color: #acbddb;
background: var(--color-bg-input);
border: solid 1px var(--color-border-input);
color: var(--color-text-input);
outline: none;
}
@@ -71,14 +108,14 @@ textarea:focus {
}
h2 {
color: #aaa;
color: var(--color-text);
text-align: left;
font-size: 1.8rem;
margin: 25px 0 10px 0;
}
h3 {
color: #aaa;
color: var(--color-text);
text-align: left;
font-size: 1.6rem;
margin: 15px 0 10px 0;
@@ -86,26 +123,14 @@ h3 {
hr {
margin-top: 20px;
border-top: solid 1px #ffffff22;
}
.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;
border-top: solid 1px var(--color-highlight);
}
.board {
box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
border-radius: 5px;
max-width: 100%;
max-height: 95vh;
max-height: 100%;
}
.double {
@@ -130,7 +155,7 @@ hr {
/* background: rgba(255, 166, 0, 0.1); */
height: 100vh;
grid-area: board;
padding: 20px;
padding: 20px 0;
}
@media screen and (max-width: 1024px) {
@@ -156,5 +181,5 @@ hr {
}
::placeholder {
color: #677794;
color: var(--color-text-dimmed);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -18,16 +18,21 @@
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
height: 38px;
background: var(--color-tab);
}
.setup-tabs__btn:hover {
background: var(--color-tab-light);
}
.setup-tabs__btn--active {
background: #0e0e13;
color: #aaa;
background: var(--color-bg-block);
color: var(--color-text);
cursor: default;
}
.setup-tabs__btn--active:hover {
background: #0e0e13;
background: var(--color-bg-block);
}
.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__size {
padding: 10px;
@@ -33,7 +38,6 @@
.share__format--active:hover,
.share__size--active:hover {
background: rgb(0, 173, 136);
cursor: default;
}
@@ -50,7 +54,6 @@
margin: 3px;
padding: 5px;
font-size: 3rem;
background: rgb(0, 173, 136);
text-align: center;
border-radius: 5px;
width: 44px;
@@ -63,7 +66,7 @@
}
.options__button:hover {
background: rgb(0, 207, 162);
background: var(--color-btn-light);
cursor: pointer;
}

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

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

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

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