diff --git a/Makefile b/Makefile index 8ff73bc..f6952f5 100644 --- a/Makefile +++ b/Makefile @@ -10,4 +10,4 @@ build: start: - sudo docker run -p $(PORT):3000 -t games + sudo docker run -p $(PORT):3000 -p 5555:5555 -t games diff --git a/assets/views/back.svg b/assets/views/back.svg deleted file mode 120000 index 3ea4d28..0000000 --- a/assets/views/back.svg +++ /dev/null @@ -1 +0,0 @@ -../sources/Card_back_01.svg \ No newline at end of file diff --git a/assets/views/cards b/assets/views/cards deleted file mode 120000 index 1585a23..0000000 --- a/assets/views/cards +++ /dev/null @@ -1 +0,0 @@ -../sources/Vector-Cards-Version-3.2/FACES (BORDERED)/STANDARD BORDERED/Single Cards (One Per FIle)/ \ No newline at end of file diff --git a/package.json b/package.json index 620df05..d1fb227 100644 --- a/package.json +++ b/package.json @@ -3,10 +3,11 @@ "type": "module", "version": "0.0.2", "scripts": { - "dev": "concurrently 'vinxi dev' 'pnpm dlx prisma studio --browser none'", + "dev": "concurrently 'vinxi dev' 'pnpm run dbstudio'", "build": "vinxi build", - "start": "vinxi start", - "sync_db": "concurrently 'pnpm dlx prisma generate' 'pnpm dlx prisma migrate dev'" + "start": "concurrently 'vinxi start' 'pnpm run dbstudio'", + "dbstudio": "pnpm dlx prisma studio --browser none", + "dbsync": "concurrently 'pnpm dlx prisma generate' 'pnpm dlx prisma migrate dev'" }, "dependencies": { "@prisma/client": "6.13.0", diff --git a/public/views/back.svg b/public/views/back.svg new file mode 120000 index 0000000..093fb45 --- /dev/null +++ b/public/views/back.svg @@ -0,0 +1 @@ +../../assets/sources/Card_back_01.svg \ No newline at end of file diff --git a/public/views/cards b/public/views/cards new file mode 120000 index 0000000..ff9a472 --- /dev/null +++ b/public/views/cards @@ -0,0 +1 @@ +../../assets/sources/Vector-Cards-Version-3.2/FACES (BORDERED)/STANDARD BORDERED/Single Cards (One Per FIle)/ \ No newline at end of file diff --git a/src/components/Card.tsx b/src/components/Card.tsx index 2848e53..a841a10 100644 --- a/src/components/Card.tsx +++ b/src/components/Card.tsx @@ -1,5 +1,5 @@ import { Component, createResource, JSX, Suspense } from "solid-js"; -import { Card } from "../types/cards"; +import { Card, newDeck } from "../types/cards"; import { Clickable, Stylable } from "./toolbox"; const cardToSvgFilename = (card: Card) => { @@ -17,17 +17,6 @@ const cardToSvgFilename = (card: Card) => { }; export default ((props) => { - const [svgPath] = createResource(() => - props.face == "down" - ? // @ts-ignore - import("~/../assets/views/back.svg") - : import( - `~/../assets/views/cards/${cardToSvgFilename( - props.card - )}.svg` - ) - ); - return ( { ...props.style, }} width="100px" - src={svgPath()?.default} + src={ + props.face == "down" + ? "/views/back.svg" + : `/views/cards/${cardToSvgFilename(props.card)}.svg` + } /> ); diff --git a/src/components/Game.tsx b/src/components/Game.tsx index c8e33b9..8c5eee4 100644 --- a/src/components/Game.tsx +++ b/src/components/Game.tsx @@ -1,42 +1,54 @@ -import { createContext, JSX } from "solid-js"; +import { + Accessor, + createContext, + createResource, + JSX, + Show, + Suspense, +} from "solid-js"; import Card from "./Card"; import Hand from "./Hand"; import Pile from "./Pile"; import { GameState, newDeck, shuffle, Hand as THand } from "../types/cards"; import { createStore, produce, SetStoreFunction, Store } from "solid-js/store"; +import { getGameState, updateGameState } from "../db/Instances"; export const GameContext = createContext<{ - gameState: Store; - setGameState: SetStoreFunction; + gameState: Accessor; + setGameState: (state: GameState) => Promise; }>(); -export default (props: { initialState: GameState }) => { - const [gameState, setGameState] = createStore( - props.initialState +export default (props: { instanceId: number }) => { + const [gameState, { refetch }] = createResource(() => + getGameState(props.instanceId) ); + const setGameState = (state: GameState) => + updateGameState(props.instanceId, state).then(refetch); return ( -
{}} - class="full column center" - style={{ "row-gap": "20px", "font-size": "32px" }} - > -
- - setGameState( - produce((state) => { - state.hand.push(state.deck.pop()!); - }) - ) - } - /> + +
{}} + class="full column center" + style={{ "row-gap": "20px", "font-size": "32px" }} + > +
+ { + const [drawn, ...rest] = gameState()!.deck; + setGameState({ + deck: rest, + hand: [drawn, ...gameState()!.hand], + }); + }} + /> +
+
- -
+ ); }; diff --git a/src/components/Hand.tsx b/src/components/Hand.tsx index 0311eeb..72f83ff 100644 --- a/src/components/Hand.tsx +++ b/src/components/Hand.tsx @@ -5,7 +5,7 @@ import { GameContext } from "./Game"; import { produce } from "solid-js/store"; export default ((props) => { - const { setGameState } = useContext(GameContext)!; + const { setGameState, gameState } = useContext(GameContext)!; return (
{ style={{ cursor: "pointer", }} - onClick={() => - setGameState( - produce((state) => { - const index = state.hand.indexOf(card); - console.log(index); - state.deck.push( - state.hand.splice( - props.hand.indexOf(card), - 1 - )[0]! - ); - }) - ) - } + onClick={() => { + const index = gameState()!.hand.indexOf(card); + setGameState({ + deck: [card, ...gameState()!.deck], + hand: [ + ...gameState()!.hand.slice(0, index), + ...gameState()!.hand.slice(index + 1), + ], + }); + }} /> )} diff --git a/src/db/Instances.ts b/src/db/Instances.ts index 7996310..71380ee 100644 --- a/src/db/Instances.ts +++ b/src/db/Instances.ts @@ -1,6 +1,25 @@ "use server"; +import { GameState, newDeck, shuffle } from "../types/cards"; import { prisma } from "./db"; export const queryInstances = async (gameName: string) => - await prisma.instance.findMany({ where: { game: { name: gameName } } }); + prisma.instance.findMany({ where: { game: { name: gameName } } }); + +export const createInstance = (gameName: string) => + prisma.instance.create({ + data: { + gameState: { deck: shuffle(newDeck()), hand: [] } as GameState, + game: { connect: { name: gameName } }, + }, + }); + +export const getGameState = (instanceId: number) => + prisma.instance + .findUnique({ where: { id: instanceId } }) + .then((i) => i?.gameState as GameState | undefined); + +export const updateGameState = async ( + instanceId: number, + gameState: GameState +) => prisma.instance.update({ where: { id: instanceId }, data: { gameState } }); diff --git a/src/routes/[game]/[instance].tsx b/src/routes/[game]/[instance].tsx index 73de752..cb9f6cc 100644 --- a/src/routes/[game]/[instance].tsx +++ b/src/routes/[game]/[instance].tsx @@ -1,19 +1,30 @@ -import { useParams } from "@solidjs/router"; +import { A, useParams } from "@solidjs/router"; import { createEffect, createResource, Show, Suspense } from "solid-js"; import Game from "../../components/Game"; -import { aql } from "arangojs"; +import { getGameState } from "../../db/Instances"; export default () => { - const params = useParams(); - - const [instance] = createResource(async () => { - return null; - }); + const params = useParams<{ game: string; instance: string }>(); return ( - - - + <> + + + Back + + ); }; diff --git a/src/routes/[game]/index.tsx b/src/routes/[game]/index.tsx index 727e98d..de0d87c 100644 --- a/src/routes/[game]/index.tsx +++ b/src/routes/[game]/index.tsx @@ -5,26 +5,31 @@ import * as Instance from "../../db/Instances"; export default () => { const params = useParams<{ game: string }>(); - createEffect(() => { - console.log(">>", params.game); - }); - const [instances] = createResource( + + const [instances, { refetch }] = createResource( () => params.game, () => Instance.queryInstances(params.game) ); - createEffect(() => console.log(instances())); - return (

{params.game}

+ diff --git a/src/routes/index.tsx b/src/routes/index.tsx index 9d9f3e6..8ca09e1 100644 --- a/src/routes/index.tsx +++ b/src/routes/index.tsx @@ -1,6 +1,6 @@ import { A } from "@solidjs/router"; import { createResource, For } from "solid-js"; -import * as Games from "../db/games"; +import * as Games from "../db/Games"; export default () => { const [games] = createResource(() => Games.queryAll());