result states

pkg/client/src/components/Game.tsx

@@ -2,6 +2,7 @@ import { Accessor, createContext, For, useContext } from "solid-js";
 import type {
 	SimpleAction,
 	SimplePlayerView,
+	SimpleResult,
 } from "@games/shared/games/simple";
 import { me, profile } from "~/profile";
 import Hand from "./Hand";

pkg/client/src/components/Table.tsx

@@ -1,5 +1,5 @@
 import type { TWsIn, TWsOut } from "@games/server/src/table";
-import { fromPromise, Stream } from "kefir";
+import { fromPromise, merge, Stream } from "kefir";
 import {
 	Accessor,
 	createContext,
@@ -11,7 +11,7 @@ import {
 } from "solid-js";
 import api, { fromWebsocket } from "~/api";
 import { createObservable, createObservableWithInit, cx } from "~/fn";
-import { me, mePromise } from "~/profile";
+import { me, mePromise, profile } from "~/profile";
 import Game from "./Game";
 import Player from "./Player";
 import games from "@games/shared/games/index";
@@ -39,6 +39,7 @@ export default (props: { tableKey: string }) => {
 
 	const presenceEvents = wsEvents.filter((evt) => evt.playersPresent != null);
 	const gameEvents = wsEvents.filter((evt) => evt.view !== undefined);
+	const resultEvents = wsEvents.filter((evt) => evt.results !== undefined);
 
 	const players = createObservableWithInit<string[]>(
 		presenceEvents.map((evt) => evt.playersPresent!),
@@ -57,6 +58,14 @@ export default (props: { tableKey: string }) => {
 
 	createEffect(() => sendWs({ ready: ready() }));
 	const view = createObservable(gameEvents.map((evt) => evt.view));
+	const results = createObservable(
+		merge([
+			gameEvents
+				.filter((evt) => "view" in evt && evt.view == null)
+				.map(() => undefined),
+			resultEvents.map((evt) => evt.results),
+		])
+	);
 
 	return (
 		<TableContext.Provider
@@ -127,6 +136,11 @@ export default (props: { tableKey: string }) => {
 			<Show when={view() != null}>
 				<Game />
 			</Show>
+			<Show when={results() != null}>
+				<span class="bg-[var(--light)] text-[var(--dark)] rounded-[24px] border-2 border-[var(--dark)] absolute center p-4 shadow-lg text-[4em] text-center">
+					{profile(results())()?.name} won!
+				</span>
+			</Show>
 		</TableContext.Provider>
 	);
 };