addressed review comments

Author: obilodeau

Makefile

@@ -2,10 +2,10 @@
 # the user has activated it (or has direnv loaded). `make venv` creates it.
 export PATH := $(CURDIR)/.venv/bin:$(PATH)
 
-.PHONY: ci lint format format-check test install-dev run venv init build
+.PHONY: ci lint format format-check test install-dev run venv init build frontend-lint frontend-type-check
 
 # Run all CI checks — called by GitHub Actions.
-ci: lint format-check frontend-lint test
+ci: lint format-check frontend-lint frontend-type-check test
 
 # ── Python ──────────────────────────────────────────────────────────────────
 
@@ -27,6 +27,9 @@ test:
 frontend-lint:
 	npm --prefix frontend run lint
 
+frontend-type-check:
+	npm --prefix frontend run type-check
+
 # ── Dev setup ────────────────────────────────────────────────────────────────
 
 venv:

frontend/src/components/HostBoard.vue

@@ -9,7 +9,7 @@ const emit = defineEmits<{
 const game = useGameStore();
 
 const rowHeight = computed(
-  () => `${Math.floor(100 / (game.config.QUESTIONS_PER_CATEGORY ?? 5))}%`,
+  () => `${Math.floor(100 / game.questionsPerCategory)}%`,
 );
 
 // Accent colours used in the little answer pills next to each question.
@@ -60,7 +60,7 @@ function onClick(col: number, row: number): void {
     <div class="container-questions-host">
       <div class="black-box flex-small-pad">
         <div
-          v-for="row in game.config.QUESTIONS_PER_CATEGORY"
+          v-for="row in game.questionsPerCategory"
           :key="row"
           class="row-ceopardy flex-vertical-small-pad"
           :style="{ height: rowHeight }"
@@ -93,7 +93,7 @@ function onClick(col: number, row: number): void {
                 </div>
               </div>
               <div class="box-question-right">
-                <p>${{ row * (game.config.SCORE_TICK ?? 100) }}</p>
+                <p>${{ row * game.scoreTick }}</p>
               </div>
             </div>
           </div>

frontend/src/components/ViewerBoard.vue

@@ -9,7 +9,7 @@ import TeamRowDailyDouble from "@/components/TeamRowDailyDouble.vue";
 const game = useGameStore();
 
 const rowHeight = computed(
-  () => `${Math.floor(100 / (game.config.QUESTIONS_PER_CATEGORY ?? 5))}%`,
+  () => `${Math.floor(100 / game.questionsPerCategory)}%`,
 );
 
 const showCategoriesRow = computed(
@@ -26,7 +26,7 @@ function isAnswered(col: number, row: number): boolean {
 }
 
 function questionLabel(row: number): string {
-  return `$${row * (game.config.SCORE_TICK ?? 100)}`;
+  return `$${row * game.scoreTick}`;
 }
 </script>
 
@@ -71,7 +71,7 @@ function questionLabel(row: number): string {
     <div class="container-questions-viewer">
       <div class="black-box flex-pad">
         <div
-          v-for="row in game.config.QUESTIONS_PER_CATEGORY"
+          v-for="row in game.questionsPerCategory"
           :key="row"
           class="row-ceopardy flex-vertical-pad"
           :style="{ height: rowHeight }"

frontend/src/stores/game.ts

@@ -61,9 +61,9 @@ export const useGameStore = defineStore("game", {
     initialized: false,
     config: {}, // populated from /api/v1/state on connect
     game_state: "uninitialized",
-    teams: [],
-    categories: [],
-    questions: {},
+    teams: [], // [{tid, name, score}]
+    categories: [], // ['Cat1', ...]
+    questions: {}, // { c1q1: { answered: bool, team_scores: {team1: 100} } }
     ui_state: {
       question: "",
       team: "",
@@ -78,7 +78,8 @@ export const useGameStore = defineStore("game", {
     active_question: {},
     messages: [],
     dailydouble_range: { min: 0, max: 0 },
-    // null outside DD or before the operator has nudged the wager slider.
+    // {team, amount} as the host moves the wager slider during a DD; null
+    // outside DD or before the operator has set anything.
     dailydouble_wager: null,
     dailydoubleTrigger: 0,
     socket: null,
@@ -88,6 +89,12 @@ export const useGameStore = defineStore("game", {
   }),
 
   getters: {
+    // Config getters with sane defaults so components can use them without
+    // having to guard against the brief window between mount and the first
+    // /api/v1/state response.
+    questionsPerCategory: (s): number => s.config.QUESTIONS_PER_CATEGORY ?? 5,
+    scoreTick: (s): number => s.config.SCORE_TICK ?? 100,
+
     isInProgress: (s): boolean =>
       s.game_state === "in_round" || s.game_state === "in_final",
     isFinished: (s): boolean => s.game_state === "finished",