diff --git a/site/src/components/GameStatus.vue b/site/src/components/GameStatus.vue
index 9b5ee9a..090ccb8 100644
--- a/site/src/components/GameStatus.vue
+++ b/site/src/components/GameStatus.vue
@@ -16,23 +16,24 @@ import { computed, ref, watch } from 'vue';
 import type { Game } from '@/lib/game';
 
 export interface Props {
-    game: Game;
+    game: Game | undefined;
 }
 
 const props = defineProps<Props>();
 
 // TODO(zeph): simplify this condition, this should just come in the game state
-const gameOn = computed(() => props.game.round < 3 || props.game.players.every((p) => p.hp > 0))
+const gameOn = computed(() => (props?.game?.round ?? 0 < 3) || (props?.game?.players?.every((p) => p.hp > 0)))
 
 const roundChips = computed(() => [
-    { text: "I", variant: props.game.round === 1 ? 'elevated' : undefined },
-    { text: "II", variant: props.game.round === 2 ? 'elevated' : undefined },
-    { text: "III", variant: props.game.round === 3 ? 'elevated' : undefined },
+    { text: "I", variant: props?.game?.round === 1 ? 'elevated' : undefined },
+    { text: "II", variant: props?.game?.round === 2 ? 'elevated' : undefined },
+    { text: "III", variant: props?.game?.round === 3 ? 'elevated' : undefined },
 ] as const)
 
 // TODO(zeph): this probably should just be handled by the server and sent in the dto
+const game = computed(() => props.game);
 const msg = ref<string>('');
-watch(props.game, (now, was) => {
+watch(game, (now, was) => {
     if (now == null) {
         return;
     }