Implement classic Kahoot!-style icons

Remove placeholder text and only show images on the client, requiring them to look at the host's screen.
ejv2 · Jan 20, 2023 · 0f25b1d · 0f25b1d
1 parent 79b9c7c
commit 0f25b1d
Show file tree

Hide file tree

Showing 6 changed files with 24 additions and 7 deletions.
diff --git a/frontend/src/common.ts b/frontend/src/common.ts
@@ -9,6 +9,14 @@
 export const PlayEndpoint = "ws://" + location.host + "/api/play/"
 export const HostEndpoint = "ws://" + location.host + "/api/host/"
 
+// Common icon resource paths
+export const iconpath: string = "/static/assets/"
+export const icons: string[] = [
+    iconpath + "triangle.png",
+    iconpath + "diamond.png",
+    iconpath + "circle.png",
+    iconpath + "square.png",
+]
 
 // GameMessage represents a message received over the websocket channel
 export interface GameMessage {

diff --git a/frontend/src/host.ts b/frontend/src/host.ts
@@ -66,6 +66,7 @@ class HostState {
     players: Player[]
     startError: boolean
 
+    icons: string[]
     question: QuestionData
     gotAnswers: number
     questionCountdown: number
@@ -90,6 +91,7 @@ class HostState {
         this.countdownCount = 10
         this.countdownHndl = 0
 
+        this.icons = common.icons
         this.question = {
             title: "Error!",
             image: "https://developer.valvesoftware.com/w/images/5/5b/Missing_textures_example.png",

diff --git a/frontend/src/play.ts b/frontend/src/play.ts
@@ -12,6 +12,7 @@ import Alpine from "alpinejs"
 let conn: WebSocket
 let plr: PlayerState
 
+
 // Possible game state IDs
 enum States {
     Loading = 1,
@@ -28,8 +29,8 @@ interface CountdownData {
 }
 
 interface QuestionData {
-    title: string,
-    image: string,
+    title: string
+    image: string
     answers: string[]
 }
 
@@ -64,6 +65,7 @@ class PlayerState {
 
     feedbackPending: boolean
 
+    icons : string[]
     question: QuestionData
     feedback: FeedbackData
     submitSpinner: boolean
@@ -92,6 +94,7 @@ class PlayerState {
                 "4"
             ],
         }
+        this.icons = common.icons
         this.feedback = {
             leaderboard: [],
             correct: false,

diff --git a/frontend/static/styles.css b/frontend/static/styles.css
@@ -351,6 +351,11 @@ input.error {
         padding: 10px;
 }
 
+.game-answer-plr {
+        justify-content: center !important;
+        text-align: center;
+}
+
 .game-answer-text {
         margin-left: 20px;
 }

diff --git a/frontend/templates/host.gohtml b/frontend/templates/host.gohtml
@@ -50,9 +50,9 @@
 				</div>
 			</div>
 			<div class="game-answers">
-				<template x-for="ans in $store.host.question.answers">
+				<template x-for="(ans, i) in $store.host.question.answers">
 					<div class="game-answer">
-						<p>Symbol here</p>
+						<img :src="$store.host.icons[i]" />
 						<p class="game-answer-text" x-text="ans.title" />
 					</div>
 				</template>

diff --git a/frontend/templates/play.gohtml b/frontend/templates/play.gohtml
@@ -34,9 +34,8 @@
 		<div id="question" x-show="stateID == 4" class="game-container">
 			<div class="game-answers game-answers-full">
 				<template x-for="(ans, i) in $store.game.question.answers">
-					<div @click="$store.game.answer(i)" class="game-answer">
-						<p>Symbol here</p>
-						<p class="game-answer-text" x-text="ans.title" />
+					<div @click="$store.game.answer(i)" class="game-answer game-answer-plr">
+						<img :src="$store.game.icons[i]" />
 					</div>
 				</template>
 			</div>