diff --git a/package.json b/package.json index 86c4a35..9d588d3 100644 --- a/package.json +++ b/package.json @@ -58,7 +58,8 @@ "tailwind-merge": "^3.0.2", "tsx": "^4.19.3", "tw-animate-css": "^1.2.4", - "zod": "^3.24.2" + "zod": "^3.24.2", + "zustand": "^5.0.3" }, "devDependencies": { "@eslint/eslintrc": "^3.3.1", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 484a496..6ead892 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -125,6 +125,9 @@ importers: zod: specifier: ^3.24.2 version: 3.24.2 + zustand: + specifier: ^5.0.3 + version: 5.0.3(@types/react@19.0.12)(react@19.0.0) devDependencies: '@eslint/eslintrc': specifier: ^3.3.1 @@ -3382,6 +3385,24 @@ packages: zod@3.24.2: resolution: {integrity: sha512-lY7CDW43ECgW9u1TcT3IoXHflywfVqDYze4waEz812jR/bZ8FHDsl7pFQoSZTz5N+2NqRXs8GBwnAwo3ZNxqhQ==} + zustand@5.0.3: + resolution: {integrity: sha512-14fwWQtU3pH4dE0dOpdMiWjddcH+QzKIgk1cl8epwSE7yag43k/AD/m4L6+K7DytAOr9gGBe3/EXj9g7cdostg==} + engines: {node: '>=12.20.0'} + peerDependencies: + '@types/react': '>=18.0.0' + immer: '>=9.0.6' + react: '>=18.0.0' + use-sync-external-store: '>=1.2.0' + peerDependenciesMeta: + '@types/react': + optional: true + immer: + optional: true + react: + optional: true + use-sync-external-store: + optional: true + snapshots: '@alloc/quick-lru@5.2.0': {} @@ -6498,3 +6519,8 @@ snapshots: yocto-queue@0.1.0: {} zod@3.24.2: {} + + zustand@5.0.3(@types/react@19.0.12)(react@19.0.0): + optionalDependencies: + '@types/react': 19.0.12 + react: 19.0.0 diff --git a/src/app/(routes)/layout.tsx b/src/app/(routes)/layout.tsx index 10f6487..43d4ad8 100644 --- a/src/app/(routes)/layout.tsx +++ b/src/app/(routes)/layout.tsx @@ -1,16 +1,22 @@ import React from "react"; import Navbar from "@/components/navbar"; import Footer from "@/components/footer"; +import { api } from "@/trpc/server"; +import AppProvider from "../_components/app-provider"; + +async function Layout({ children }: { children: React.ReactNode }) { + const sessionPlayer = await api.player.getBySession(); -function Layout({ children }: { children: React.ReactNode }) { return ( -
- -
- {children} + +
+ +
+ {children} +
+
-
-
+ ); } diff --git a/src/app/_components/app-provider.tsx b/src/app/_components/app-provider.tsx new file mode 100644 index 0000000..fa55d69 --- /dev/null +++ b/src/app/_components/app-provider.tsx @@ -0,0 +1,22 @@ +"use client"; +import { useSessionPlayerStore } from "@/lib/store/current-player-store"; +import type { Player } from "@/server/db/schema"; +import React from "react"; + +function AppProvider({ + initialSessionPlayer, + children, +}: { + initialSessionPlayer?: Player | null; + children: React.ReactNode; +}) { + const setSessionPlayer = useSessionPlayerStore( + (state) => state.setSessionPlayer, + ); + React.useEffect(() => { + setSessionPlayer(initialSessionPlayer); + }, [initialSessionPlayer]); + return children; +} + +export default AppProvider; diff --git a/src/app/_components/lobby/lobby-form.tsx b/src/app/_components/lobby/lobby-form.tsx index 9a3aeb3..39074b2 100644 --- a/src/app/_components/lobby/lobby-form.tsx +++ b/src/app/_components/lobby/lobby-form.tsx @@ -37,7 +37,7 @@ function LobbyForm({ const form = useForm>({ resolver: zodResolver(lobbyPatchSchema), defaultValues: { - name: server_lobby?.name ?? "", + name: server_lobby?.name ?? "Random Name", maxPlayers: server_lobby?.maxPlayers ?? 2, }, }); @@ -107,7 +107,10 @@ function LobbyForm({