end to end!

packages/client/src/components/Table.tsx

@@ -1,6 +1,7 @@
 import {
 	Accessor,
 	createContext,
+	createEffect,
 	createSignal,
 	For,
 	onCleanup,
@@ -14,6 +15,8 @@ import Bus from "kefir-bus";
 import { createObservable, createObservableWithInit, WSEvent } from "../fn";
 import { EdenWS } from "@elysiajs/eden/treaty";
 import { TWsIn, TWsOut } from "../../../server/src/table";
+import Player from "./Player";
+import Game from "./Game";
 
 export const TableContext = createContext<{
 	players: Accessor<string[]>;
@@ -27,18 +30,20 @@ export default (props: { tableKey: string }) => {
 	onCleanup(() => ws.close());
 
 	const presenceEvents = wsEvents.filter((evt) => evt.players != null);
+
 	const gameEvents = wsEvents.filter((evt) => evt.view != null);
 
 	const players = createObservableWithInit<string[]>(
 		presenceEvents.map((evt) => evt.players!),
 		[]
 	);
+
 	const view = createObservable(gameEvents.map((evt) => evt.view));
 
 	return (
 		<TableContext.Provider
 			value={{
-				sendWs: ws.send,
+				sendWs: (evt) => ws.send(evt),
 				view,
 				players,
 			}}
@@ -53,19 +58,14 @@ export default (props: { tableKey: string }) => {
 							return 1 - y;
 						};
 						return (
-							<div
+							<Player
+								playerKey={player}
 								style={{
 									transform: `translate(0, ${
 										verticalOffset() * 150
 									}vh)`,
-									"background-color": playerColor(player),
 								}}
-								class="w-20 h-20 rounded-full flex justify-center items-center"
-							>
-								<p style={{ "font-size": "1em" }}>
-									{profile(player)()?.name}
-								</p>
-							</div>
+							/>
 						);
 					}}
 				</For>
@@ -89,7 +89,7 @@ export default (props: { tableKey: string }) => {
 				</Show>
 			</div>
 			<Show when={view() != null}>
-				<div>Game started!</div>
+				<Game />
 			</Show>
 		</TableContext.Provider>
 	);