deep in kefir lore

packages/client/src/components/Game.tsx

@@ -1,95 +1,25 @@
+import { Accessor, createContext } from "solid-js";
 import {
-	Accessor,
-	createContext,
-	createEffect,
-	createResource,
-	createSignal,
-	For,
-	onCleanup,
-	Resource,
-	ResourceReturn,
-	Show,
-	untrack,
-} from "solid-js";
-import {
-	GameState,
-	Action,
-	vGameState,
-	PlayerView,
+	SimpleAction,
+	SimplePlayerView,
 } from "../../../server/src/games/simple";
-import api from "../api";
-import Hand from "./Hand";
-import Pile from "./Pile";
-import { ApiType } from "../fn";
-import { createStore } from "solid-js/store";
 
 export const GameContext = createContext<{
-	view: Accessor<PlayerView | undefined>;
-	submitAction: (action: Action) => Promise<any>;
+	view: Accessor<SimplePlayerView | undefined>;
+	submitAction: (action: SimpleAction) => Promise<any>;
 }>();
 
-const [playerProfiles, setPlayerProfiles] = createStore<
-	Record<string, Resource<ApiType<typeof api.profile.get>>>
->({});
-
-export default (props: { tableKey: string }) => {
-	const [view, setView] = createSignal<PlayerView>();
-	const [players, setPlayers] = createSignal<string[]>([]);
-
-	createEffect(() => {
-		players().forEach((player) => {
-			if (!untrack(() => playerProfiles[player])) {
-				const [playerProfile] = createResource(() =>
-					api.profile
-						.get({ query: { otherHumanKey: player } })
-						.then((r) => r.data)
-				);
-				setPlayerProfiles((prev) => ({
-					...prev,
-					[player]: playerProfile,
-				}));
-			}
-		});
-	});
-
-	const ws = api(props).subscribe;
-	onCleanup(() => ws.close());
-	ws.on("message", (evt) => {
-		if (evt.data.players) {
-			setPlayers(evt.data.players);
-		}
-		if (evt.data.view) {
-			setView(evt.data.view);
-		}
-	});
-
-	const submitAction = (action: Action) => api.simple(props).post({ action });
-
-	const Lobby = () => {
-		return (
-			<div class="fixed tc mt-20 flex flex-col items-center">
-				<button class="button p-1 m-10">Start Game!</button>
-				<For each={players()}>
-					{(player) => (
-						<p style={{ "font-size": "2em" }}>
-							{playerProfiles[player]?.()?.name}
-						</p>
-					)}
-				</For>
-			</div>
-		);
-	};
+export default () => {
 	return (
-		<GameContext.Provider value={{ view, submitAction }}>
-			<Show when={view() != undefined} fallback={<Lobby />}>
-				<Pile
+		<>
+			Game started!
+			{/* <Pile
 					count={view()!.deckCount}
 					class="cursor-pointer fixed center"
 					onClick={() => submitAction({ type: "draw" })}
 				/>
 
-				<Hand class="fixed bc" hand={view()!.myHand} />
-			</Show>
-		</GameContext.Provider>
+				<Hand class="fixed bc" hand={view()!.myHand} /> */}
+		</>
 	);
 };

packages/client/src/components/Table.tsx

@@ -7,21 +7,13 @@ import {
 	For,
 	onCleanup,
 	Resource,
-	ResourceReturn,
 	Show,
 	untrack,
 } from "solid-js";
-import {
-	GameState,
-	Action,
-	vGameState,
-	PlayerView,
-} from "../../../server/src/games/simple";
-import api, { me } from "../api";
-import Hand from "./Hand";
-import Pile from "./Pile";
-import { ApiType } from "../fn";
 import { createStore } from "solid-js/store";
+import { SimplePlayerView } from "../../../server/src/games/simple";
+import api, { me } from "../api";
+import { ApiType } from "../fn";
 import Game from "./Game";
 
 const [playerProfiles, setPlayerProfiles] = createStore<
@@ -30,15 +22,15 @@ const [playerProfiles, setPlayerProfiles] = createStore<
 
 export const TableContext = createContext<{
 	players: Accessor<string[]>;
-	view: Accessor<PlayerView | undefined>;
+	view: Accessor<SimplePlayerView | undefined>;
 	// submitAction: (action: Action) => Promise<any>;
 }>();
 
 export default (props: { tableKey: string }) => {
 	const [players, setPlayers] = createSignal<string[]>([]);
-	const [view, setView] = createSignal<PlayerView>();
+	const [view, setView] = createSignal<SimplePlayerView>();
 
-	const ws = api(props).subscribe();
+	const ws = api.ws(props).subscribe();
 	onCleanup(() => ws.close());
 
 	ws.on("message", (evt) => {
@@ -81,8 +73,8 @@ export default (props: { tableKey: string }) => {
 							<div
 								style={{
 									transform: `translate(0, ${
-										verticalOffset() * 1500
-									}px)`,
+										verticalOffset() * 150
+									}vh)`,
 								}}
 								class="w-20 h-20 rounded-full bg-red-900 flex justify-center items-center"
 							>
@@ -103,7 +95,12 @@ export default (props: { tableKey: string }) => {
 			>
 				<Show when={view() == null}>
 					<div class="absolute center">
-						<button class="button p-1 ">Start Game!</button>
+						<button
+							onClick={() => ws.send({ startGame: true })}
+							class="button p-1 "
+						>
+							Start Game!
+						</button>
 					</div>
 				</Show>
 			</div>