deep in kefir lore

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>