Added image support

src/assets/sample_game.json

@@ -7,27 +7,33 @@
           {
             "value": 200,
             "clue": "This is clue 1.1",
-            "solution": "What is the solution to clue 1.1?"
+            "solution": "What is the solution to clue 1.1?",
+            "image": "https://picsum.photos/1000/1000"
           },
           {
             "value": 400,
             "clue": "This is clue 1.2",
-            "solution": "What is the solution to clue 1.2?"
+            "solution": "What is the solution to clue 1.2?",
+            "image": "https://picsum.photos/1000/1000"
           },
           {
             "value": 600,
             "clue": "This is clue 1.3",
-            "solution": "What is the solution to clue 1.3?"
+            "solution": "What is the solution to clue 1.3?",
+            "image": "https://picsum.photos/1000/1000"
           },
           {
             "value": 800,
             "clue": "This is clue 1.4",
-            "solution": "What is the solution to clue 1.4?"
+            "solution": "What is the solution to clue 1.4?",
+            "image": "https://picsum.photos/1000/1000"
           },
           {
             "value": 1000,
             "clue": "This is clue 1.5",
-            "solution": "What is the solution to clue 1.5?"
+            "solution": "What is the solution to clue 1.5?",
+            "dailyDouble": true,
+            "image": "https://picsum.photos/1000/1000"
           }
         ]
       },

src/components/JeopardyBoard.css

@@ -95,6 +95,47 @@ td.board-clue {
   min-height: 600px;
   box-sizing: border-box;
   padding: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.clue-content {
+  display: flex;
+  width: 100%;
+  height: 100%;
+}
+
+.clue-content.has-image .clue-image {
+  width: 50%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.clue-content.has-image .clue-text {
+  width: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.clue-content.no-image .clue-text {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.clue-content.no-image .clue-image {
+  display: none;
+}
+
+.clue-content.solution-shown .clue-image {
+  display: none;
+}
+
+.clue-content.solution-shown .clue-text {
+  width: 100%;
 }
 
 .final-category {
@@ -117,6 +158,20 @@ td.board-clue {
   padding: 10px;
 }
 
+.clue-image {
+  max-height: 500px;
+  margin: 20px auto;
+  display: block;
+  width: 75%;
+  height: 100%;
+  object-fit: contain;
+}
+
+.clue-text {
+  width: 25%;
+  font-size: 0.8em;
+}
+
 @import url("https://fonts.googleapis.com/css?family=Fira+Code&display=swap");
 .code {
   font-family: "Consolas", "Fira Code", monospace;

src/components/JeopardyBoard.tsx

@@ -52,6 +52,9 @@ function JeopardyBoard(props: JeopardyBoardProps) {
   function renderClue(categoryName: string, clue: Clue, value: number) {
     const showDailyDoubleScreen =
       clue.dailyDouble && !dailyDoubleScreenPresented;
+    const hasImage = !!clue.image && !showDailyDoubleScreen && !solution;
+    const contentClass = hasImage ? "has-image" : "no-image";
+    const solutionClass = solution && !showDailyDoubleScreen ? " solution-shown" : "";
     return (
       <div
         onClick={
@@ -67,24 +70,28 @@ function JeopardyBoard(props: JeopardyBoardProps) {
           {categoryName} - ${clue.value}
         </div>
         <div
-          className={
-            showDailyDoubleScreen ? "clue-display daily-double" : "clue-display"
-          }
+          className={showDailyDoubleScreen ? "clue-display daily-double" : "clue-display"}
         >
-          <br />
-          {showDailyDoubleScreen ? (
-            "Daily Double"
-          ) : clue.html === true ? (
-            <div
-              dangerouslySetInnerHTML={{
-                __html: solution ? clue.solution : clue.clue,
-              }}
-            />
-          ) : solution ? (
-            clue.solution
-          ) : (
-            clue.clue
-          )}
+          <div className={`clue-content ${contentClass}${solutionClass}`}>
+            {hasImage && (
+              <img src={clue.image} alt="Clue" className="clue-image" />
+            )}
+            <div className="clue-text">
+              {showDailyDoubleScreen ? (
+                "Daily Double"
+              ) : clue.html === true ? (
+                <div
+                  dangerouslySetInnerHTML={{
+                    __html: solution ? clue.solution : clue.clue,
+                  }}
+                />
+              ) : solution ? (
+                clue.solution
+              ) : (
+                clue.clue
+              )}
+            </div>
+          </div>
         </div>
       </div>
     );

src/types.ts

@@ -44,6 +44,8 @@ export interface Clue {
 
   // Tracks whether the clue has already been played
   chosen: boolean | undefined;
+
+  image?: string;
 }
 
 export interface FinalRound {