drm/games
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

css cleanup

Browse Source
This commit is contained in:
Daniel McCrystal
2025-08-29 21:57:03 -04:00
parent f38a5a69df
commit 90be478e9a
6 changed files with 88 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
pkg/client/index.html
View File

@@ -5,7 +5,5 @@
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/favicon.ico" />
<script type="module" src="/src/app.tsx"></script> <script type="module" src="/src/app.tsx"></script>
</head> </head>
<body> <body />
<div id="app" />
</body>
</html> </html>

6
pkg/client/src/app.tsx
View File

@@ -44,8 +44,6 @@ const App = () => {
<> <>
<Suspense>{props.children}</Suspense> <Suspense>{props.children}</Suspense>
<Profile /> <Profile />
{/* Version */}
<span class="fixed br m-2 font-mono text-xs"> <span class="fixed br m-2 font-mono text-xs">
{"v" + pkg.version} {"v" + pkg.version}
</span> </span>
@@ -54,11 +52,11 @@ const App = () => {
> >
<Route path="/" component={lazy(() => import("./routes/index"))} /> <Route path="/" component={lazy(() => import("./routes/index"))} />
<Route <Route
path="/:tableKey" path="/t/:tableKey"
component={lazy(() => import("./routes/[table]"))} component={lazy(() => import("./routes/[table]"))}
/> />
</Router> </Router>
); );
}; };
render(App, document.getElementById("app")!); render(App, document.getElementsByTagName("body")[0]);

17
pkg/client/src/components/Hand.css Normal file
View File

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

2
pkg/client/src/components/Hand.tsx
View File

@@ -3,6 +3,8 @@ import type { Card as TCard, Hand as THand } from "@games/shared/cards";
import Card from "./Card"; import Card from "./Card";
import { Stylable } from "./toolbox"; import { Stylable } from "./toolbox";
import "./Hand.css";
export default ((props) => { export default ((props) => {
return ( return (
<div class={"hand " + props.class} style={props.style}> <div class={"hand " + props.class} style={props.style}>

43
pkg/client/src/routes/index.tsx
View File

@@ -1,17 +1,40 @@
import { A } from "@solidjs/router"; import { A } from "@solidjs/router";
import { createEffect, createResource, For } from "solid-js";
import api from "~/api";
export default () => { export default () => {
const [games] = createResource(async () => const randomTablePath = `/t/abcd`;
api.games.get().then((res) => res.data)
);
return ( return (
<div style={{ padding: "20px" }}> <div class="flex flex-col absolute center">
<For each={games()}> <h1>Welcome to games.drm.dev!</h1>
{(game) => <A href={`/${game.key}`}>{game.name}</A>} <p>
</For> This website is a real-time multiplayer platform for playing
card games online.
</p>
<br />
<p>
Games happen at <strong>tables</strong>. A table is any url of
the form{" "}
<span class="font-mono text-[var(--light-purple)]">
games.drm.dev/t/
<span class="text-[var(--yellow)]">*</span>
</span>
</p>
<br />
<p>
Go to the same one as your friend and you will find them there!
</p>
<br />
<p>
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:
</p>
<br />
<p>
With no one in it:{" "}
<A href={randomTablePath}>
https://www.games.drm.dev{randomTablePath}
</A>
</p>
</div> </div>
); );
}; };

80
pkg/client/src/style.css
View File

@@ -1,61 +1,47 @@
html {
height: 100vh;
}
body { body {
margin: 0; --purple: rgb(138, 156, 255);
font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", --light-purple: rgb(200, 150, 223);
"Lucida Sans", Arial, sans-serif; --light: seashell;
color: white; --dark: #0a180e;
height: 100%; --green: rgb(24, 82, 65);
} --dark-green: rgb(1, 42, 16);
body::before { --sweet-green: rgb(23, 138, 125);
z-index: -1; --yellow: rgb(252, 220, 103);
content: "";
position: absolute; height: 100vh;
width: 100%; color: var(--light);
height: 100%; background: radial-gradient(rgb(24, 82, 65), rgb(1, 42, 16));
font-family: "Trebuchet MS";
} }
/* a { h1 {
color: rgb(18, 229, 113); font-size: 48px;
font-family: Garamond;
}
p {
font-size: 24px;
font-family: Garamond;
}
a {
font-family: monospace;
color: var(--purple);
} }
a:visited { a:visited {
color: rgb(23, 138, 125); color: var(--light-purple);
} */ }
.button { .button {
cursor: pointer; cursor: pointer;
background-color: white; background-color: var(--light);
color: black; color: var(--dark);
box-shadow: 0px 5px 10px black; box-shadow: 0px 5px 10px var(--dark);
transition: background-color 0.15s, color 0.15s, transform 0.15s; transition: background-color 0.15s, color 0.15s, transform 0.15s;
} }
.button:hover { .button:hover {
background-color: rgb(23, 138, 125); background-color: var(--sweet-green);
color: white; color: var(--light);
transform: scale(1.1); transform: scale(1.1);
} }
strong {
#app { color: var(--yellow);
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;
} }