something
This commit is contained in:
@@ -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));
|
||||
|
||||
@@ -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 }}>
|
||||
|
||||
@@ -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
23
src/db.ts
Normal 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);
|
||||
@@ -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>
|
||||
)}
|
||||
/>
|
||||
));
|
||||
|
||||
18
src/routes/[game]/[instance].tsx
Normal file
18
src/routes/[game]/[instance].tsx
Normal 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>
|
||||
);
|
||||
};
|
||||
37
src/routes/[game]/index.tsx
Normal file
37
src/routes/[game]/index.tsx
Normal 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>
|
||||
);
|
||||
};
|
||||
@@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -60,3 +60,8 @@ export type GameState = {
|
||||
deck: Pile;
|
||||
hand: Hand;
|
||||
};
|
||||
export const newGame = () =>
|
||||
({
|
||||
deck: shuffle(newDeck()),
|
||||
hand: [],
|
||||
} as GameState);
|
||||
|
||||
Reference in New Issue
Block a user