| null;
+}
+
export const useGameStore = defineStore("game", {
- state: () => ({
+ state: (): GameStoreState => ({
initialized: false,
config: {}, // populated from /api/v1/state on connect
game_state: "uninitialized",
@@ -30,46 +81,59 @@ export const useGameStore = defineStore("game", {
// {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,
- // Incremented every time the server fires a new daily-double. Lets the
- // viewer trigger the flip animation without watching for state changes
- // that might bounce during reconnects.
dailydoubleTrigger: 0,
socket: null,
rouletteTarget: null,
- // Set by HostView on mount. Host skips the roulette animation and jumps
- // straight to the winner so the operator can re-roll quickly for showmanship.
isHost: false,
+ _rouletteTimer: null,
}),
getters: {
- isInProgress: (s) =>
+ // 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) => s.game_state === "finished",
- teamByTid: (s) => (tid) => s.teams.find((t) => t.tid === tid),
- activeQuestionId: (s) => s.ui_state.question || "",
- selectedTeam: (s) => s.ui_state.team || "",
- isDailyDouble: (s) =>
+ isFinished: (s): boolean => s.game_state === "finished",
+ teamByTid:
+ (s) =>
+ (tid: string): Team | undefined =>
+ s.teams.find((t) => t.tid === tid),
+ activeQuestionId: (s): string => s.ui_state.question || "",
+ selectedTeam: (s): string => s.ui_state.team || "",
+ isDailyDouble: (s): boolean =>
s.ui_state.dailydouble === "enabled" ||
s.ui_state.dailydouble === "revealed",
- isDailyDoubleRevealed: (s) => s.ui_state.dailydouble === "revealed",
- bigOverlayHtml: (s) => s.ui_state["overlay-big"] || "",
- questionAnswered: (s) => (qid) => !!s.questions[qid]?.answered,
+ isDailyDoubleRevealed: (s): boolean =>
+ s.ui_state.dailydouble === "revealed",
+ bigOverlayHtml: (s): string => s.ui_state["overlay-big"] || "",
+ questionAnswered:
+ (s) =>
+ (qid: string): boolean =>
+ !!s.questions[qid]?.answered,
},
actions: {
- async refresh() {
+ async refresh(): Promise {
const data = await api.state();
this.applyServerState(data);
this.initialized = true;
},
- applyServerState(data) {
+ applyServerState(data: ServerState): void {
if (data.config) this.config = { ...this.config, ...data.config };
if (data.game_state) this.game_state = data.game_state;
if (data.teams) this.teams = data.teams;
if (data.categories) this.categories = data.categories;
if (data.questions) this.questions = data.questions;
- if (data.state) this.ui_state = { ...this.ui_state, ...data.state };
+ if (data.state) {
+ for (const [k, v] of Object.entries(data.state)) {
+ if (v !== undefined) this.ui_state[k] = v;
+ }
+ }
if (data.active_question !== undefined)
this.active_question = data.active_question || {};
if (data.messages) this.messages = data.messages;
@@ -79,7 +143,7 @@ export const useGameStore = defineStore("game", {
this.dailydouble_wager = data.dailydouble_wager;
},
- connectSocket() {
+ connectSocket(): void {
if (this.socket) return;
const s = getSocket();
this.socket = s;
@@ -88,9 +152,9 @@ export const useGameStore = defineStore("game", {
// no-op, state is already loaded via REST
});
- s.on("state", (data) => this.applyServerState(data));
+ s.on("state", (data: ServerState) => this.applyServerState(data));
- s.on("question-show", (data) => {
+ s.on("question-show", (data: QuestionShowEvent) => {
this.active_question = {
text: data.text,
category: data.category,
@@ -107,7 +171,7 @@ export const useGameStore = defineStore("game", {
this.dailydouble_wager = null;
});
- s.on("dailydouble", (data) => {
+ s.on("dailydouble", (data: DailyDoubleEvent) => {
this.ui_state.question = data.qid;
this.ui_state.dailydouble = "enabled";
this.active_question = { category: data.category, dailydouble: true };
@@ -117,7 +181,7 @@ export const useGameStore = defineStore("game", {
this.dailydoubleTrigger += 1;
});
- s.on("dailydouble-reveal", (data) => {
+ s.on("dailydouble-reveal", (data: DailyDoubleRevealEvent) => {
this.ui_state.dailydouble = "revealed";
this.active_question = {
...this.active_question,
@@ -128,47 +192,47 @@ export const useGameStore = defineStore("game", {
this.ui_state.question = data.qid;
});
- s.on("dailydouble-range", (data) => {
+ s.on("dailydouble-range", (data: DailyDoubleRangeEvent) => {
if (data?.range) this.dailydouble_range = data.range;
});
- s.on("dailydouble-wager", (data) => {
+ s.on("dailydouble-wager", (data: DailyDoubleWagerEvent) => {
this.dailydouble_wager =
data && data.team != null && data.amount != null
? { team: data.team, amount: data.amount }
: null;
});
- s.on("board-update", (data) => {
+ s.on("board-update", (data: BoardUpdateEvent) => {
this.questions = { ...this.questions, ...data.questions };
if (data.teams) this.teams = data.teams;
});
- s.on("team-select", (data) => {
+ s.on("team-select", (data: TeamSelectEvent) => {
this.ui_state.team = data.tid ?? "";
});
- s.on("team-roulette", (data) => {
+ s.on("team-roulette", (data: TeamRouletteEvent) => {
this.runRoulette(data.sequence);
});
- s.on("team-names", (data) => {
+ s.on("team-names", (data: TeamNamesEvent) => {
for (const [tid, name] of Object.entries(data.names)) {
const t = this.teamByTid(tid);
if (t) t.name = name;
}
});
- s.on("overlay-big", (data) => {
+ s.on("overlay-big", (data: OverlayBigEvent) => {
this.ui_state["overlay-big"] = data.html || "";
this.ui_state.message = data.id || "";
});
- s.on("slider", (data) => {
- this.ui_state[data.id] = data.value;
+ s.on("slider", (data: SliderEvent) => {
+ this.ui_state[data.id] = String(data.value);
});
- s.on("redirect", (data) => {
+ s.on("redirect", (data: RedirectEvent) => {
// game was reset; reload to land on the right view
if (data?.url) {
window.location.href = data.url;
@@ -180,22 +244,22 @@ export const useGameStore = defineStore("game", {
s.connect();
},
- runRoulette(sequence) {
+ runRoulette(sequence: string[]): void {
if (!sequence || sequence.length === 0) return;
// Clear any pending roulette first.
if (this._rouletteTimer) clearInterval(this._rouletteTimer);
if (this.isHost) {
- this.ui_state.team = sequence[sequence.length - 1];
+ this.ui_state.team = sequence[sequence.length - 1] ?? "";
return;
}
const queue = [...sequence];
this._rouletteTimer = setInterval(() => {
if (queue.length === 0) {
- clearInterval(this._rouletteTimer);
+ if (this._rouletteTimer) clearInterval(this._rouletteTimer);
this._rouletteTimer = null;
return;
}
- this.ui_state.team = queue.shift();
+ this.ui_state.team = queue.shift() ?? "";
}, 100);
},
},
diff --git a/frontend/src/types.ts b/frontend/src/types.ts
new file mode 100644
index 0000000..218f2d6
--- /dev/null
+++ b/frontend/src/types.ts
@@ -0,0 +1,163 @@
+// SPDX-License-Identifier: GPL-3.0-or-later
+// Type shapes shared across the front-end. Mirror the JSON the Python back-end
+// emits (see ceopardy/api/routes.py and the /game Socket.IO namespace).
+
+export interface Team {
+ tid: string;
+ name: string;
+ score: number;
+}
+
+export interface QuestionState {
+ answered: boolean;
+ team_scores?: Record;
+}
+
+export type QuestionsMap = Record;
+
+export interface AppConfig {
+ NB_TEAMS?: number;
+ VARIABLE_TEAMS?: boolean;
+ CATEGORIES_PER_GAME?: number;
+ QUESTIONS_PER_CATEGORY?: number;
+ SCORE_TICK?: number;
+ DAILYDOUBLE_WAIGER_MIN?: number;
+ DAILYDOUBLE_WAIGER_MAX_MIN?: number;
+}
+
+export type GameState = "uninitialized" | "in_round" | "in_final" | "finished";
+
+export interface UiState {
+ question: string;
+ team: string;
+ dailydouble: "" | "enabled" | "revealed";
+ message: string;
+ "overlay-big": string;
+ "overlay-small": string;
+ "overlay-question": string;
+ "container-header": string;
+ "container-footer": string;
+ [key: string]: string;
+}
+
+export interface ActiveQuestion {
+ text?: string;
+ category?: string;
+ dailydouble?: boolean;
+}
+
+export interface Range {
+ min: number;
+ max: number;
+}
+
+export interface DailyDoubleWager {
+ team: string;
+ amount: number;
+}
+
+export interface ServerMessage {
+ id?: string;
+ title?: string;
+ text?: string;
+}
+
+// /api/v1/state payload (and the equivalent on the "state" socket event).
+export interface ServerState {
+ config?: AppConfig;
+ game_state?: GameState;
+ teams?: Team[];
+ categories?: string[];
+ questions?: QuestionsMap;
+ state?: Partial;
+ active_question?: ActiveQuestion | null;
+ messages?: ServerMessage[];
+ dailydouble_range?: Range;
+ dailydouble_wager?: DailyDoubleWager | null;
+}
+
+// Socket event payloads (one per `s.on("...")` subscription in the store).
+export interface QuestionShowEvent {
+ qid: string;
+ text: string;
+ category: string;
+ dailydouble: boolean;
+}
+
+export interface DailyDoubleEvent {
+ qid: string;
+ category: string;
+ team?: string;
+ range?: Range;
+}
+
+export interface DailyDoubleRevealEvent {
+ qid: string;
+ text: string;
+ category: string;
+}
+
+export interface DailyDoubleRangeEvent {
+ team?: string;
+ range?: Range;
+}
+
+export interface DailyDoubleWagerEvent {
+ team: string | null;
+ amount: number | null;
+}
+
+export interface BoardUpdateEvent {
+ questions: QuestionsMap;
+ teams?: Team[];
+}
+
+export interface TeamSelectEvent {
+ tid?: string | null;
+}
+
+export interface TeamRouletteEvent {
+ sequence: string[];
+ winner: string;
+}
+
+export interface TeamNamesEvent {
+ names: Record;
+}
+
+export interface OverlayBigEvent {
+ html?: string;
+ id?: string;
+}
+
+export interface SliderEvent {
+ id: string;
+ value: string | number;
+}
+
+export interface RedirectEvent {
+ url?: string;
+}
+
+// REST request/response shapes.
+export interface SubmitAnswerPayload {
+ id: string;
+ answers: Record;
+}
+
+export interface SelectQuestionResponse {
+ result?: string;
+ dailydouble?: boolean;
+ dailydouble_range?: Range;
+ team?: string;
+}
+
+export interface InitPayload {
+ action: "new" | string;
+ [key: string]: unknown;
+}
+
+export interface ApiOk {
+ result?: string;
+ [key: string]: unknown;
+}
diff --git a/frontend/src/views/HostView.vue b/frontend/src/views/HostView.vue
index 93f5ab8..ea7038a 100644
--- a/frontend/src/views/HostView.vue
+++ b/frontend/src/views/HostView.vue
@@ -1,5 +1,5 @@
-
diff --git a/frontend/src/views/StartView.vue b/frontend/src/views/StartView.vue
index b362e91..ba551a3 100644
--- a/frontend/src/views/StartView.vue
+++ b/frontend/src/views/StartView.vue
@@ -1,5 +1,5 @@
-