css cleanup
This commit is contained in:
@@ -5,7 +5,5 @@
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
<script type="module" src="/src/app.tsx"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app" />
|
||||
</body>
|
||||
<body />
|
||||
</html>
|
||||
|
||||
@@ -44,8 +44,6 @@ const App = () => {
|
||||
<>
|
||||
<Suspense>{props.children}</Suspense>
|
||||
<Profile />
|
||||
|
||||
{/* Version */}
|
||||
<span class="fixed br m-2 font-mono text-xs">
|
||||
{"v" + pkg.version}
|
||||
</span>
|
||||
@@ -54,11 +52,11 @@ const App = () => {
|
||||
>
|
||||
<Route path="/" component={lazy(() => import("./routes/index"))} />
|
||||
<Route
|
||||
path="/:tableKey"
|
||||
path="/t/:tableKey"
|
||||
component={lazy(() => import("./routes/[table]"))}
|
||||
/>
|
||||
</Router>
|
||||
);
|
||||
};
|
||||
|
||||
render(App, document.getElementById("app")!);
|
||||
render(App, document.getElementsByTagName("body")[0]);
|
||||
|
||||
17
pkg/client/src/components/Hand.css
Normal file
17
pkg/client/src/components/Hand.css
Normal 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;
|
||||
}
|
||||
@@ -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 (
|
||||
<div class={"hand " + props.class} style={props.style}>
|
||||
|
||||
@@ -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 (
|
||||
<div style={{ padding: "20px" }}>
|
||||
<For each={games()}>
|
||||
{(game) => <A href={`/${game.key}`}>{game.name}</A>}
|
||||
</For>
|
||||
<div class="flex flex-col absolute center">
|
||||
<h1>Welcome to games.drm.dev!</h1>
|
||||
<p>
|
||||
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>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user