something

This commit is contained in:
2025-08-04 00:16:33 -04:00
parent 0dc0a9ce62
commit 5527506cb9
12 changed files with 184 additions and 26 deletions

View File

@@ -18,6 +18,13 @@ body::before {
height: 100%;
}
a {
color: rgb(18, 229, 113);
}
a:visited {
color: rgb(23, 138, 125);
}
#app {
height: 100%;
background: radial-gradient(rgb(24, 82, 65), rgb(1, 42, 16));

View File

@@ -10,11 +10,10 @@ export const GameContext = createContext<{
setGameState: SetStoreFunction<GameState>;
}>();
export default () => {
const [gameState, setGameState] = createStore<GameState>({
deck: shuffle(newDeck()),
hand: [],
});
export default (props: { initialState: GameState }) => {
const [gameState, setGameState] = createStore<GameState>(
props.initialState
);
return (
<GameContext.Provider value={{ gameState, setGameState }}>

View File

@@ -19,7 +19,7 @@ export default ((props) => {
margin: "10px",
"margin-bottom": "25px",
padding: "10px",
height: "200px",
height: "180px",
overflow: "scroll",
"scrollbar-width": "none",
display: "flex",

23
src/db.ts Normal file
View File

@@ -0,0 +1,23 @@
"use server";
import { JSONFilePreset } from "lowdb/node";
import { GameState, newGame } from "./types/cards";
type schema = {
games: {
[key: string]: {
name: string;
rules: string;
instances: { [id: string]: GameState };
};
};
};
const _db = await JSONFilePreset<schema>("db.json", {
games: {
renaissance: {
name: "renaissance",
rules: "",
instances: { test: newGame() },
},
},
});
export const db = async () => _db.read().then(() => _db.data);

View File

@@ -1,21 +1,25 @@
// @refresh reload
import { createHandler, StartServer } from "@solidjs/start/server";
import { JSONFilePreset } from "lowdb/node";
export default createHandler(() => (
<StartServer
document={({ assets, children, scripts }) => (
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" href="/favicon.ico" />
{assets}
</head>
<body>
<div id="app">{children}</div>
{scripts}
</body>
</html>
)}
/>
<StartServer
document={({ assets, children, scripts }) => (
<html lang="en">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1"
/>
<link rel="icon" href="/favicon.ico" />
{assets}
</head>
<body>
<div id="app">{children}</div>
{scripts}
</body>
</html>
)}
/>
));

View File

@@ -0,0 +1,18 @@
import { useParams } from "@solidjs/router";
import { db } from "../../db";
import { createEffect, createResource, Show, Suspense } from "solid-js";
import Game from "../../components/Game";
export default () => {
const params = useParams();
const [instance] = createResource(() =>
db().then((data) => data.games[params.game].instances[params.instance])
);
return (
<Show when={instance() != null}>
<Game state={instance()!} />
</Show>
);
};

View File

@@ -0,0 +1,37 @@
import { A, useParams } from "@solidjs/router";
import { createEffect, createResource, For, Suspense } from "solid-js";
import { db } from "../../db";
export default () => {
const params = useParams();
createEffect(() => {
console.log(">>", params.game);
});
const [instances] = createResource(
() => params.game,
() =>
db().then((data) => {
if (params.game == null) {
return {};
}
return data.games[params.game].instances;
})
);
return (
<Suspense>
<div style={{ padding: "20px" }}>
<h1 style={{ margin: 0 }}>{params.game}</h1>
<ul>
<For each={Object.entries(instances() ?? {})}>
{([instanceId]) => (
<A href={`/${params.game}/${instanceId}`}>
{instanceId}
</A>
)}
</For>
</ul>
</div>
</Suspense>
);
};

View File

@@ -1,5 +1,15 @@
import { A } from "@solidjs/router";
import Game from "../components/Game";
import { createResource, For } from "solid-js";
import { db } from "../db";
export default () => {
return <Game />;
const [games] = createResource(() => db().then((data) => data.games));
return (
<div style={{ padding: "20px" }}>
<For each={Object.entries(games() ?? {})}>
{([gameId, game]) => <A href={`/${gameId}`}>{game.name}</A>}
</For>
</div>
);
};

View File

@@ -60,3 +60,8 @@ export type GameState = {
deck: Pile;
hand: Hand;
};
export const newGame = () =>
({
deck: shuffle(newDeck()),
hand: [],
} as GameState);