some proper auth

packages/client/package.json

@@ -8,12 +8,15 @@
 	},
 	"dependencies": {
 		"@elysiajs/eden": "^1.3.2",
+		"@solid-primitives/scheduled": "^1.5.2",
 		"@solidjs/router": "^0.15.3",
+		"js-cookie": "^3.0.5",
 		"object-hash": "^3.0.0",
 		"solid-js": "^1.9.5"
 	},
 	"devDependencies": {
 		"@iconify-json/solar": "^1.2.4",
+		"@types/js-cookie": "^3.0.6",
 		"@unocss/preset-icons": "^66.4.2",
 		"@unocss/preset-wind4": "^66.4.2",
 		"unocss": "^66.4.2",

packages/client/src/api.ts

@@ -2,8 +2,6 @@ import { type Api } from "../../server/src/api";
 import { treaty } from "@elysiajs/eden";
 
 const { api } = treaty<Api>("http://localhost:5001", {
-	headers: {
-		human: "daniel",
-	},
+	fetch: { credentials: "include" },
 });
 export default api;

packages/client/src/app.tsx

@@ -1,20 +1,47 @@
-import "./style.css";
 import { Route, Router } from "@solidjs/router";
 import { lazy, Suspense } from "solid-js";
-import pkg from "../package.json";
 import { render } from "solid-js/web";
-import Root from "./routes/index";
 import "virtual:uno.css";
+import pkg from "../package.json";
+import "./style.css";
+import api from "./api";
+
+const Profile = () => {
+	let dialogRef!: HTMLDialogElement;
+
+	return (
+		<>
+			<div
+				onClick={() => dialogRef.showModal()}
+				class="i-solar-user-circle-bold button s-10 m-2 cursor-pointer fixed tr"
+			/>
+
+			<dialog ref={dialogRef} closedby="any">
+				<div class="fixed tr bg-emerald-100 m-2 p-4 rounded-xl border-2 shadow-md shadow-black">
+					Name:{" "}
+					<input
+						onChange={(e) =>
+							api.setName.post({ name: e.target.value })
+						}
+						class="bg-emerald-200 border-1.5 rounded-full px-4"
+					/>
+				</div>
+			</dialog>
+		</>
+	);
+};
 
 const App = () => (
 	<Router
 		root={(props) => (
 			<>
 				<Suspense>{props.children}</Suspense>
+				<Profile />
+
+				{/* Version */}
 				<span class="fixed br m-2 font-mono text-xs">
 					{"v" + pkg.version}
 				</span>
-				<div class="i-solar-user-circle-bold fixed s-10 top-0 right-0 m-2 cursor-pointer" />
 			</>
 		)}
 	>

packages/client/src/routes/[game]/index.tsx

@@ -17,13 +17,7 @@ export default () => {
 				<p class="text-[40px]">{param.game}</p>
 				<button
 					class="px-2 py-1.5 m-4 button rounded"
-					onClick={() =>
-						api.simple.newGame
-							.post({
-								players: ["daniel"],
-							})
-							.then(refetch)
-					}
+					onClick={() => api.simple.newGame.post().then(refetch)}
 				>
 					New Game
 				</button>