diff --git a/src/ui/App.css b/src/ui/App.css
index 046ef95..a3c153c 100644
--- a/src/ui/App.css
+++ b/src/ui/App.css
@@ -59,7 +59,7 @@ h2 {
color: #aaa;
text-align: left;
font-size: 1.8rem;
- margin: 30px 0 10px 0;
+ margin: 25px 0 10px 0;
}
.dark {
@@ -81,6 +81,12 @@ h2 {
max-height: 95vh;
}
+.double {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ column-gap: 10px;
+}
+
.layout {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
diff --git a/src/ui/components/Controls.css b/src/ui/components/Controls.css
index ae5ebac..c013c7d 100644
--- a/src/ui/components/Controls.css
+++ b/src/ui/components/Controls.css
@@ -27,10 +27,10 @@
cursor: pointer;
}
-.controls__button:nth-child(5) {
+.controls__button--last {
margin-right: 0px;
}
-.controls__button:nth-child(1) {
+.controls__button--first {
margin-left: 0px;
}
diff --git a/src/ui/components/Controls.tsx b/src/ui/components/Controls.tsx
index e87b755..87ec11a 100644
--- a/src/ui/components/Controls.tsx
+++ b/src/ui/components/Controls.tsx
@@ -6,7 +6,7 @@ const Controls: Component<{ handlers: Handlers }> = (props) => {
return (
- {/*
-
- */}
);
};
diff --git a/src/ui/components/GameTabs.css b/src/ui/components/GameTabs.css
index 7a62304..c1e78ab 100644
--- a/src/ui/components/GameTabs.css
+++ b/src/ui/components/GameTabs.css
@@ -1,7 +1,7 @@
.game-box {
grid-area: moves;
padding: 20px;
- min-width: 325px;
+ min-width: 360px;
height: 100vh;
}
diff --git a/src/ui/components/GameTabs.tsx b/src/ui/components/GameTabs.tsx
index c6ed68f..f0bcd3b 100644
--- a/src/ui/components/GameTabs.tsx
+++ b/src/ui/components/GameTabs.tsx
@@ -38,7 +38,7 @@ const GameTabs: Component<{ moves: readonly string[]; handlers: Handlers }> = (
-
+ setTab("moves")} />
diff --git a/src/ui/components/Load.css b/src/ui/components/Load.css
index 3de5fba..30af7d2 100644
--- a/src/ui/components/Load.css
+++ b/src/ui/components/Load.css
@@ -10,6 +10,20 @@
margin-top: 20px;
}
+.load__pgn-input::-webkit-scrollbar {
+ width: 0.7rem;
+ cursor: pointer;
+}
+
+.load__pgn-input::-webkit-scrollbar-track {
+ box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
+}
+
+.load__pgn-input::-webkit-scrollbar-thumb {
+ background-color: rgb(0, 59, 47);
+ outline: 1px solid rgb(0, 59, 47);
+}
+
.load__fen-btn,
.load__pgn-btn {
width: 100%;
diff --git a/src/ui/components/Load.tsx b/src/ui/components/Load.tsx
index ee5146b..c26be9e 100644
--- a/src/ui/components/Load.tsx
+++ b/src/ui/components/Load.tsx
@@ -2,7 +2,9 @@ import { Component, createSignal } from "solid-js";
import { Handlers } from "../../types";
import "./Load.css";
-const Load: Component<{ handlers: Handlers }> = (props) => {
+const Load: Component<{ handlers: Handlers; showMoves: () => void }> = (
+ props
+) => {
const [fen, setFEN] = createSignal("");
const [pgn, setPGN] = createSignal("");
@@ -19,7 +21,10 @@ const Load: Component<{ handlers: Handlers }> = (props) => {
/>
@@ -28,8 +33,19 @@ const Load: Component<{ handlers: Handlers }> = (props) => {
name="load-pgn"
placeholder="PASTE PGN..."
spellcheck={false}
+ value={pgn()}
+ onInput={(e) => setPGN(e.currentTarget.value)}
>
-
+
);
};
diff --git a/src/ui/components/SetupTabs.css b/src/ui/components/SetupTabs.css
index eab6035..e2bd9d4 100644
--- a/src/ui/components/SetupTabs.css
+++ b/src/ui/components/SetupTabs.css
@@ -3,6 +3,7 @@
height: 100vh;
grid-area: setup;
padding: 20px;
+ min-width: 360px;
}
.setup {
diff --git a/src/ui/components/Share.tsx b/src/ui/components/Share.tsx
index 7d0dfb5..8b5a85c 100644
--- a/src/ui/components/Share.tsx
+++ b/src/ui/components/Share.tsx
@@ -8,8 +8,9 @@ const Share: Component<{ handlers: Handlers }> = (props) => {
return (
+
View options
+
Current position
@@ -46,15 +55,22 @@ const Share: Component<{ handlers: Handlers }> = (props) => {
placeholder="Current FEN..."
/>
-
+
+
+
+
-
Game
-
-
-
+
+
+
+
+
+
+
+
Animation