diff --git a/pkg/client/index.html b/pkg/client/index.html index ddaa58d..508156b 100644 --- a/pkg/client/index.html +++ b/pkg/client/index.html @@ -5,7 +5,5 @@ - -
- + diff --git a/pkg/client/src/app.tsx b/pkg/client/src/app.tsx index 1605c30..fdd834a 100644 --- a/pkg/client/src/app.tsx +++ b/pkg/client/src/app.tsx @@ -44,8 +44,6 @@ const App = () => { <> {props.children} - - {/* Version */} {"v" + pkg.version} @@ -54,11 +52,11 @@ const App = () => { > import("./routes/index"))} /> import("./routes/[table]"))} /> ); }; -render(App, document.getElementById("app")!); +render(App, document.getElementsByTagName("body")[0]); diff --git a/pkg/client/src/components/Hand.css b/pkg/client/src/components/Hand.css new file mode 100644 index 0000000..24f2d2d --- /dev/null +++ b/pkg/client/src/components/Hand.css @@ -0,0 +1,17 @@ +.hand { + height: 160px; + background: radial-gradient(var(--sweet-green), var(--dark-green)); + min-width: 100px; + width: fit-content; + max-width: 90%; + border: 2px dashed var(--light); + border-radius: 12px; + + margin-bottom: 50px; + padding: 10px; + + overflow: scroll; + scrollbar-width: none; + display: flex; + gap: 5px; +} diff --git a/pkg/client/src/components/Hand.tsx b/pkg/client/src/components/Hand.tsx index 750839c..a6ac7e6 100644 --- a/pkg/client/src/components/Hand.tsx +++ b/pkg/client/src/components/Hand.tsx @@ -3,6 +3,8 @@ import type { Card as TCard, Hand as THand } from "@games/shared/cards"; import Card from "./Card"; import { Stylable } from "./toolbox"; +import "./Hand.css"; + export default ((props) => { return (
diff --git a/pkg/client/src/routes/index.tsx b/pkg/client/src/routes/index.tsx index 1545381..a92f761 100644 --- a/pkg/client/src/routes/index.tsx +++ b/pkg/client/src/routes/index.tsx @@ -1,17 +1,40 @@ import { A } from "@solidjs/router"; -import { createEffect, createResource, For } from "solid-js"; -import api from "~/api"; export default () => { - const [games] = createResource(async () => - api.games.get().then((res) => res.data) - ); - + const randomTablePath = `/t/abcd`; return ( -
- - {(game) => {game.name}} - +
+

Welcome to games.drm.dev!

+

+ This website is a real-time multiplayer platform for playing + card games online. +

+
+

+ Games happen at tables. A table is any url of + the form{" "} + + games.drm.dev/t/ + * + +

+
+

+ Go to the same one as your friend and you will find them there! +

+
+

+ If you have a table key in mind (the part after /t/), then plug + it in to your URL bar! Or, here's a couple links to random + tables: +

+
+

+ With no one in it:{" "} + + https://www.games.drm.dev{randomTablePath} + +

); }; diff --git a/pkg/client/src/style.css b/pkg/client/src/style.css index 75be824..da55552 100644 --- a/pkg/client/src/style.css +++ b/pkg/client/src/style.css @@ -1,61 +1,47 @@ -html { - height: 100vh; -} - body { - margin: 0; - font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", - "Lucida Sans", Arial, sans-serif; - color: white; - height: 100%; -} -body::before { - z-index: -1; - content: ""; - position: absolute; - width: 100%; - height: 100%; + --purple: rgb(138, 156, 255); + --light-purple: rgb(200, 150, 223); + --light: seashell; + --dark: #0a180e; + --green: rgb(24, 82, 65); + --dark-green: rgb(1, 42, 16); + --sweet-green: rgb(23, 138, 125); + --yellow: rgb(252, 220, 103); + + height: 100vh; + color: var(--light); + background: radial-gradient(rgb(24, 82, 65), rgb(1, 42, 16)); + font-family: "Trebuchet MS"; } -/* a { - color: rgb(18, 229, 113); +h1 { + font-size: 48px; + font-family: Garamond; +} +p { + font-size: 24px; + font-family: Garamond; +} +a { + font-family: monospace; + color: var(--purple); } a:visited { - color: rgb(23, 138, 125); -} */ + color: var(--light-purple); +} .button { cursor: pointer; - background-color: white; - color: black; - box-shadow: 0px 5px 10px black; + background-color: var(--light); + color: var(--dark); + box-shadow: 0px 5px 10px var(--dark); transition: background-color 0.15s, color 0.15s, transform 0.15s; } .button:hover { - background-color: rgb(23, 138, 125); - color: white; + background-color: var(--sweet-green); + color: var(--light); transform: scale(1.1); } - -#app { - height: 100%; - background: radial-gradient(rgb(24, 82, 65), rgb(1, 42, 16)); -} - -.hand { - height: 160px; - background: radial-gradient(rgb(24, 70, 82), rgb(1, 42, 41)); - min-width: 100px; - width: fit-content; - max-width: 90%; - border: 2px dashed white; - border-radius: 12px; - - margin-bottom: 50px; - padding: 10px; - - overflow: scroll; - scrollbar-width: none; - display: flex; - gap: 5px; +strong { + color: var(--yellow); }