Jeopardy: Admin: show badges on cat in bag and auction questions bunj…

…labs#19

client/src/jeopardy/Admin.jsx

@@ -15,7 +15,7 @@ import {
 import {BlockContent, Content, Footer, FooterItem, GameAdmin, Header, TextContent} from "common/Admin";
 
 import {ThemesList, ThemesGrid, QuestionsGrid} from "jeopardy/Themes";
-import {getStatusName, getTypeName, getRoundName} from "jeopardy/Common";
+import {getStatusName, EventType, getRoundName} from "jeopardy/Common";
 import styles from "jeopardy/Admin.scss";
 import {FaVolumeMute} from "react-icons/all";
 
@@ -32,7 +32,7 @@ const QuestionEvent = ({question}) => {
     }
     return <BlockContent>
         <div>
-            <div className={styles.type}>{getTypeName(type)}</div>
+            <div className={styles.type}><EventType type={type}/></div>
             {themeDiv}
             <div>Value: {value}</div>
         </div>

client/src/jeopardy/Common.js

@@ -1,3 +1,5 @@
+import {FaCat, RiAuctionFill} from "react-icons/all";
+import React from "react";
 
 const getStatusName = (status) => {
     switch (status) {
@@ -38,15 +40,16 @@ const getStatusName = (status) => {
     }
 }
 
-const getTypeName = (status) => {
-    switch (status) {
+const EventType = ({type}) => {
+    switch (type) {
         case 'standard':
-            return "Standard";
+            return <div>Standard</div>;
         case 'auction':
-            return "Auction";
+            return <div>Auction<br/><RiAuctionFill/></div>;
         case 'bagcat':
-            return "Cat in the bag";
+            return <div>Cat in the bag<br/><FaCat/></div>;
     }
+    return <div/>
 }
 
 const getRoundName = (game) => {
@@ -56,4 +59,4 @@ const getRoundName = (game) => {
     return "ROUND " + String(game.round)
 }
 
-export {getStatusName, getTypeName, getRoundName}
+export {getStatusName, EventType, getRoundName}

client/src/jeopardy/Themes.jsx

@@ -1,5 +1,6 @@
 import React from "react";
 import styles from "./Themes.scss";
+import {FaCat, RiAuctionFill} from "react-icons/all";
 
 const Theme = ({theme, onSelect, active = false}) => (
     <div className={css(active && styles.active, styles.theme)}
@@ -12,7 +13,11 @@ const Theme = ({theme, onSelect, active = false}) => (
 const Question = ({question, onSelect}) => (
     <div className={css(!question.is_processed && styles.active, styles.question)}
          onClick={() => !question.is_processed && onSelect(question.id)}>
-        <div>{!question.is_processed && question.value}</div>
+        <div>
+            {!question.is_processed && onSelect && question.type === "bagcat" && <FaCat/>}
+            {!question.is_processed && onSelect && question.type === "auction" && <RiAuctionFill/>}
+            {!question.is_processed && question.value}
+        </div>
     </div>
 );
 

client/src/jeopardy/View.jsx

@@ -1,10 +1,10 @@
 import React, {useEffect} from "react";
 
-import {AudioPlayer, HowlWrapper, ImagePlayer, VideoPlayer, Loading, useGame, useAuth} from "common/Essentials";
-import {AdminAuth} from "common/Auth";
+import {AudioPlayer, HowlWrapper, ImagePlayer, VideoPlayer, Loading, useGame, useAuth} from "../common/Essentials";
+import {AdminAuth} from "../common/Auth";
 
 import {ThemesList, ThemesGrid, QuestionsGrid} from "jeopardy/Themes";
-import {getRoundName, getTypeName} from "jeopardy/Common";
+import {getRoundName, EventType} from "jeopardy/Common";
 import {Content, ExitButton, GameView, TextContent, QRCodeContent} from "common/View";
 import styles from "jeopardy/View.scss";
 import {useHistory} from "react-router-dom";
@@ -65,7 +65,7 @@ const useStateContent = (game) => {
         case "questions":
             return <QuestionsGrid game={game}/>;
         case "question_event":
-            return <TextContent>{getTypeName(game.question.type)}</TextContent>;
+            return <TextContent><EventType type={game.question.type}/></TextContent>;
         case "question": case "answer": case "final_question": case "final_answer":
             return <QuestionMessage
                 game={game} text={question.text} image={question.image} audio={question.audio} video={question.video}