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);
}