diff --git a/index.html b/index.html index d5b2d22..2a75c2d 100644 --- a/index.html +++ b/index.html @@ -4,6 +4,10 @@ + Vite App diff --git a/src/ui/app.css b/src/ui/App.css similarity index 82% rename from src/ui/app.css rename to src/ui/App.css index dfbfd86..9541a33 100644 --- a/src/ui/app.css +++ b/src/ui/App.css @@ -19,6 +19,7 @@ body { background-repeat: repeat; background-position: center; text-align: center; + font-family: Ubuntu, sans-serif; } .dark { @@ -49,42 +50,26 @@ body { .layout { display: grid; grid-template-columns: 1fr 2fr 1fr; + grid-template-rows: 1fr; + grid-template-areas: "setup board moves" "setup board controls"; -} -.moves-box { - /* background: rgba(255, 192, 203, 0.1); */ - height: 85vh; - grid-area: moves; + height: 100vh; } .board-box { /* background: rgba(255, 166, 0, 0.1); */ height: 100vh; grid-area: board; + padding: 20px; } .setup-box { /* background: rgba(135, 207, 235, 0.1); */ height: 100vh; grid-area: setup; -} - -.controls-box { - /* background: rgba(0, 255, 0, 0.1); */ - height: 15vh; - grid-area: controls; -} - -.controls__button { - margin: 5px; - padding: 5px; - cursor: pointer; -} - -.moves { padding: 20px; } diff --git a/src/ui/App.tsx b/src/ui/App.tsx index accfb11..8d7c8a9 100644 --- a/src/ui/App.tsx +++ b/src/ui/App.tsx @@ -1,23 +1,25 @@ import type { Component } from "solid-js"; import type { DeepReadonly } from "solid-js/store"; -import Controls from "./components/Controls"; + import { Handlers } from "../types"; import { State } from "../state"; -import GameTabs from "./components/GameTabs"; -import "./app.css"; +import Controls from "./components/Controls"; +import GameTabs from "./components/GameTabs"; +import SetupTabs from "./components/SetupTabs"; + +import "./App.css"; const App: Component<{ handlers: Handlers; state: DeepReadonly }> = ( props ) => { return (
-
-
-
- +
+
-
+
+
= (props) => { return (
- - - - - - - - + */}
); }; diff --git a/src/ui/components/gameTabs.css b/src/ui/components/GameTabs.css similarity index 75% rename from src/ui/components/gameTabs.css rename to src/ui/components/GameTabs.css index 6e2e8a3..fbc0130 100644 --- a/src/ui/components/gameTabs.css +++ b/src/ui/components/GameTabs.css @@ -1,6 +1,14 @@ +.game-box { + grid-area: moves; + padding: 20px; + min-width: 325px; + height: 100vh; +} + .game-tabs { - margin: 20px; - /* height: 100%; */ + height: 100%; + display: grid; + grid-template-rows: 38px 1fr; } .game-tabs__btn { @@ -13,6 +21,7 @@ border-top-left-radius: 5px; border-top-right-radius: 5px; cursor: pointer; + height: 38px; } .game-tabs__btn:hover { diff --git a/src/ui/components/GameTabs.tsx b/src/ui/components/GameTabs.tsx index c03d1c2..c6ed68f 100644 --- a/src/ui/components/GameTabs.tsx +++ b/src/ui/components/GameTabs.tsx @@ -1,8 +1,9 @@ import { Component, createSignal, Switch, Match } from "solid-js"; import Moves from "./Moves"; +import Controls from "./Controls"; import Load from "./Load"; import { Handlers } from "../../types"; -import "./gameTabs.css"; +import "./GameTabs.css"; const GameTabs: Component<{ moves: readonly string[]; handlers: Handlers }> = ( props @@ -11,26 +12,30 @@ const GameTabs: Component<{ moves: readonly string[]; handlers: Handlers }> = ( return (
- - +
+ + +
+ diff --git a/src/ui/components/load.css b/src/ui/components/Load.css similarity index 90% rename from src/ui/components/load.css rename to src/ui/components/Load.css index 0f6fb89..d2853c8 100644 --- a/src/ui/components/load.css +++ b/src/ui/components/Load.css @@ -1,7 +1,8 @@ .load { background: #0e0e13; - /* background: #13141a; */ padding: 20px; + border-bottom-left-radius: 5px; + border-bottom-right-radius: 5px; } .load__fen-input, diff --git a/src/ui/components/Load.tsx b/src/ui/components/Load.tsx index bb9348c..237f65a 100644 --- a/src/ui/components/Load.tsx +++ b/src/ui/components/Load.tsx @@ -1,5 +1,5 @@ import { Component } from "solid-js"; -import "./load.css"; +import "./Load.css"; const Load: Component = () => { return ( diff --git a/src/ui/components/moves.css b/src/ui/components/Moves.css similarity index 94% rename from src/ui/components/moves.css rename to src/ui/components/Moves.css index 6345a17..a2a19a4 100644 --- a/src/ui/components/moves.css +++ b/src/ui/components/Moves.css @@ -1,8 +1,8 @@ .moves { - background: #0e0e13; font-size: 1.4rem; font-family: "Fira Mono"; text-align: left; + /* height: 85vh; */ } .move { diff --git a/src/ui/components/Moves.tsx b/src/ui/components/Moves.tsx index d326eec..0a7d632 100644 --- a/src/ui/components/Moves.tsx +++ b/src/ui/components/Moves.tsx @@ -1,13 +1,14 @@ import { Component, For } from "solid-js"; import chunk_ from "@arrows/array/chunk_"; import { Handlers } from "../../types"; -import "./moves.css"; +import Scrollable from "./reusable/Scrollable"; +import "./Moves.css"; const Moves: Component<{ moves: readonly string[]; handlers: Handlers }> = ( props ) => { return ( -
+ {(move, i) => { const [white, black] = move as [string, string]; @@ -31,7 +32,7 @@ const Moves: Component<{ moves: readonly string[]; handlers: Handlers }> = ( ); }} -
+ ); }; diff --git a/src/ui/components/SetupTabs.css b/src/ui/components/SetupTabs.css new file mode 100644 index 0000000..ab6caee --- /dev/null +++ b/src/ui/components/SetupTabs.css @@ -0,0 +1,35 @@ +.setup { + font-size: 1.6rem; + /* background: #0e0e13; */ +} + +.setup-tabs__btn { + width: 32%; + background: rgb(0, 173, 136); + color: #0e0e13; + padding: 10px; + font-family: Ubuntu; + font-size: 1.5rem; + border-top-left-radius: 5px; + border-top-right-radius: 5px; + cursor: pointer; +} + +.setup-tabs__btn:hover { + background: rgb(0, 207, 162); +} + +.setup-tabs__btn--active { + background: #0e0e13; + color: #aaa; + cursor: default; +} + +.setup-tabs__btn--active:hover { + background: #0e0e13; +} + +.setup-tabs__btn:nth-child(1), +.setup-tabs__btn:nth-child(2) { + margin-right: 2%; +} diff --git a/src/ui/components/SetupTabs.tsx b/src/ui/components/SetupTabs.tsx new file mode 100644 index 0000000..a9d12e5 --- /dev/null +++ b/src/ui/components/SetupTabs.tsx @@ -0,0 +1,52 @@ +import { Component, createSignal, Switch, Match } from "solid-js"; +import { Handlers } from "../../types"; +import "./SetupTabs.css"; + +const SetupTabs: Component<{ handlers: Handlers }> = (props) => { + const [tab, setTab] = createSignal("share"); + + return ( +
+ + + + + +
SHARE
+ + +
BOARDS
+ + +
PIECES
+ + +
+ ); +}; + +export default SetupTabs; diff --git a/src/ui/components/reusable/Scrollable.css b/src/ui/components/reusable/Scrollable.css new file mode 100644 index 0000000..0742089 --- /dev/null +++ b/src/ui/components/reusable/Scrollable.css @@ -0,0 +1,28 @@ +.scrollable { + background: #0e0e13; + height: auto; + padding: 40px 20px; + height: 100%; + display: flex; + overflow: auto; +} + +.scrollable__content { + overflow-y: auto; + overflow-x: hidden; + padding: 0; +} + +.scrollable__content::-webkit-scrollbar { + width: 0.7rem; + cursor: pointer; +} + +.scrollable__content::-webkit-scrollbar-track { + box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5); +} + +.scrollable__content::-webkit-scrollbar-thumb { + background-color: rgb(0, 59, 47); + outline: 1px solid rgb(0, 59, 47); +} diff --git a/src/ui/components/reusable/Scrollable.tsx b/src/ui/components/reusable/Scrollable.tsx new file mode 100644 index 0000000..00284d9 --- /dev/null +++ b/src/ui/components/reusable/Scrollable.tsx @@ -0,0 +1,12 @@ +import { Component } from "solid-js"; +import "./Scrollable.css"; + +const Scrollable: Component<{ class: string }> = (props) => { + return ( +
+
{props.children}
+
+ ); +}; + +export default Scrollable;