diff --git a/e2e/test/multiplayer.tsx b/e2e/test/multiplayer.tsx index 7281e33..f8929db 100644 --- a/e2e/test/multiplayer.tsx +++ b/e2e/test/multiplayer.tsx @@ -82,7 +82,7 @@ Scenario('multiplayer_moderated', ({I, loginPage, lobbyPage, gameRoomPage}) => { I.waitForText("Banone", 5, "tr:has-text('"+username2+"')") I.waitForText("Gürkin", 5, "tr:has-text('"+username3+"')") - I.wait(10000) + I.wait(3) gameRoomPage.nextQuestion() diff --git a/frontend/src/domain/GameModel.tsx b/frontend/src/domain/GameModel.tsx index 34e9fdc..096ad9f 100644 --- a/frontend/src/domain/GameModel.tsx +++ b/frontend/src/domain/GameModel.tsx @@ -36,7 +36,7 @@ export class Game { readonly moderator: string | undefined; readonly status: GameStatus; readonly players: Player[]; - readonly questions: GameQuestion[]; + readonly currentQuestion: GameQuestion | undefined; constructor(event: GameCreatedEvent) { this.id = event.gameId @@ -46,7 +46,6 @@ export class Game { this.moderator = event.moderatorUsername this.status = GameStatus.CREATED this.players = [] - this.questions = [] } public copyWith(modifyObject: { [P in keyof Game]?: Game[P] }): Game { @@ -119,21 +118,15 @@ export class Game { public onQuestionAsked(event: QuestionAskedEvent): Game { return this.copyWith({ - questions: [ - ...this.questions, + currentQuestion: new GameQuestion(event) - ] }) } private updateQuestion(questionId: string, questionUpdater: (question: GameQuestion) => GameQuestion): Game { - const i = this.questions.findIndex(q => q.gameQuestionId == questionId) - if (i !== -1) { - const questionsCopy = [...this.questions] - questionsCopy[i] = questionUpdater(this.questions[i]) - + if (this.currentQuestion === undefined || this.currentQuestion.gameQuestionId === questionId) { return this.copyWith({ - questions: questionsCopy + currentQuestion: questionUpdater(this.currentQuestion!) }) } else { return this @@ -187,14 +180,6 @@ export class Game { public findPlayerPoints(gamePlayerId: string): number { return this.players.find(player => player.id === gamePlayerId)?.points ?? 0 } - - public findLastQuestion(): GameQuestion | undefined { - if (this.questions.length === 0) - return undefined - - const latestQuestionNumber = Math.max(...this.questions.map((question) => question.gameQuestionNumber)) - return this.questions.find((q) => q.gameQuestionNumber === latestQuestionNumber) - } } export class GameQuestion { diff --git a/frontend/src/domain/__tests__/GameModel.test.tsx b/frontend/src/domain/__tests__/GameModel.test.tsx index c9dcd5f..841b639 100644 --- a/frontend/src/domain/__tests__/GameModel.test.tsx +++ b/frontend/src/domain/__tests__/GameModel.test.tsx @@ -64,11 +64,9 @@ describe('testing game read model', () => { game = game.onQuestionAsked(questionAsked("question2", 2, "Foo2", "Bar2")) game = game.onQuestionAsked(questionAsked("question3", 3, "Foo3", "Bar3")) - expect(game.questions.length).toBe(3); - - const question = game.questions.find(q => q.gameQuestionId == "question3") - expect(question).toBeDefined() - expect(question!.question.phrase).toBe("Foo3"); + expect(game.currentQuestion).toBeDefined(); + expect(game.currentQuestion?.gameQuestionId).toBe("question3"); + expect(game.currentQuestion?.question.phrase).toBe("Foo3"); }); test('question can be answered', () => { @@ -78,12 +76,11 @@ describe('testing game read model', () => { game = game.onQuestionAnswered(questionAnswered("question1", "player2", "answer01_02", "bla")) - expect(game.questions.length).toBe(1); - expect(game.questions[0].answers.length).toBe(1); + expect(game.currentQuestion).toBeDefined(); + expect(game.currentQuestion?.answers.length).toBe(1); - const question = game.questions.find(q => q.gameQuestionId == "question1") - expect(question!.answers).toHaveLength(1) - expect(question!.answers[0].answer).toBe("bla"); + expect(game.currentQuestion!.answers).toHaveLength(1) + expect(game.currentQuestion!.answers[0].answer).toBe("bla"); }); test('question can be rated', () => { @@ -100,7 +97,7 @@ describe('testing game read model', () => { } )); - expect(game.questions[0].answers.length).toBe(2); + expect(game.currentQuestion?.answers.length).toBe(2); expect(game.findPlayerPoints("player2")).toBe(10) expect(game.findPlayerPoints("player3")).toBe(0) }); diff --git a/frontend/src/pages/GameCreationDialog.tsx b/frontend/src/pages/GameCreationDialog.tsx index 31266c6..4bca747 100644 --- a/frontend/src/pages/GameCreationDialog.tsx +++ b/frontend/src/pages/GameCreationDialog.tsx @@ -1,19 +1,8 @@ -import { - Box, - Button, - Dialog, - DialogTitle, - FormControlLabel, - FormGroup, - MenuItem, - Select, - Switch, - TextField -} from "@mui/material"; +import {Box, Button, Dialog, DialogTitle, FormControlLabel, FormGroup, MenuItem, Select, Switch, TextField} from "@mui/material"; import React, {useEffect} from "react"; import {NewGameCommand} from "../services/GameCommandService"; import {QuestionSetDto} from "../services/QuestionSetServiceTypes"; -import {questionSetService, QuestionSetService} from "../services/QuestionSetService"; +import {questionSetService} from "../services/QuestionSetService"; type GameCreationDialogProps = { open: boolean diff --git a/frontend/src/pages/GameSelectionPage.tsx b/frontend/src/pages/GameSelectionPage.tsx index cdffd6f..9231fb4 100644 --- a/frontend/src/pages/GameSelectionPage.tsx +++ b/frontend/src/pages/GameSelectionPage.tsx @@ -108,7 +108,7 @@ const GameSelectionPage = (props: GameSelectionPageProps) => { } } const onButtonClickJoinGameAsSpectator = async (gameId: string) => { - props.onGameSelected(gameId) + props.onGameSelected(gameId) } const onCloseNewGameDialog = () => { diff --git a/frontend/src/pages/Login.tsx b/frontend/src/pages/Login.tsx index baecb51..ec4fffe 100644 --- a/frontend/src/pages/Login.tsx +++ b/frontend/src/pages/Login.tsx @@ -3,56 +3,56 @@ import React from "react"; type LoginPageProps = { - loginSuccessAction: (username: string) => void + loginSuccessAction: (username: string) => void } const LoginPage = ({loginSuccessAction}: LoginPageProps) => { - const handleSubmit = (event: React.FormEvent) => { - event.preventDefault(); - const data = new FormData(event.currentTarget); + const handleSubmit = (event: React.FormEvent) => { + event.preventDefault(); + const data = new FormData(event.currentTarget); - const username: string = data.get('username')!.toString() + const username: string = data.get('username')!.toString() - console.log({ - username: username, - }); - loginSuccessAction(username) - }; + console.log({ + username: username, + }); + loginSuccessAction(username) + }; - return ( - - - - - - - - - - ) + return ( + + + + + + + + + + ) } export default LoginPage diff --git a/frontend/src/pages/QuizmaniaMainUI.tsx b/frontend/src/pages/QuizmaniaMainUI.tsx index dc48a95..6919767 100644 --- a/frontend/src/pages/QuizmaniaMainUI.tsx +++ b/frontend/src/pages/QuizmaniaMainUI.tsx @@ -8,67 +8,67 @@ import GameSelectionPage from "./GameSelectionPage"; import GamePage from "./game/GamePage"; enum MainPageState { - LOGIN, - GAME_SELECTION, - IN_GAME + LOGIN, + GAME_SELECTION, + IN_GAME } const QuizmaniaMainUI = () => { - const [username, setUsername] = useState(undefined); - const [gameId, setGameId] = useState(undefined); - const [mainPageState, setMainPageState] = useState(MainPageState.LOGIN) + const [username, setUsername] = useState(undefined); + const [gameId, setGameId] = useState(undefined); + const [mainPageState, setMainPageState] = useState(MainPageState.LOGIN) - const snackbar = useSnackbar() + const snackbar = useSnackbar() - if (mainPageState === MainPageState.LOGIN - && Cookies.get('username') && username === undefined) { - setUsername(Cookies.get('username')) + if (mainPageState === MainPageState.LOGIN + && Cookies.get('username') && username === undefined) { + setUsername(Cookies.get('username')) - if (Cookies.get('gameId') && gameId === undefined) { - setGameId(Cookies.get('gameId')) - setMainPageState(MainPageState.IN_GAME) - } else { - setMainPageState(MainPageState.GAME_SELECTION) - } + if (Cookies.get('gameId') && gameId === undefined) { + setGameId(Cookies.get('gameId')) + setMainPageState(MainPageState.IN_GAME) + } else { + setMainPageState(MainPageState.GAME_SELECTION) } + } - const onLoginSuccess = useCallback((username: string) => { - Cookies.set('username', username, {expires: 1}); - setUsername(username) - setMainPageState(MainPageState.GAME_SELECTION) - snackbar.showMessage( - 'Username: ' + username - ) - }, [snackbar]) + const onLoginSuccess = useCallback((username: string) => { + Cookies.set('username', username, {expires: 1}); + setUsername(username) + setMainPageState(MainPageState.GAME_SELECTION) + snackbar.showMessage( + 'Username: ' + username + ) + }, [snackbar]) - const onLogout = useCallback(() => { - Cookies.remove('username'); - setUsername(undefined) - setMainPageState(MainPageState.LOGIN) - }, []) + const onLogout = useCallback(() => { + Cookies.remove('username'); + setUsername(undefined) + setMainPageState(MainPageState.LOGIN) + }, []) - const onGameSelected = useCallback((gameId: string) => { - setGameId(gameId) - setMainPageState(MainPageState.IN_GAME) - Cookies.set('gameId', gameId, {expires: 1}); - }, []) + const onGameSelected = useCallback((gameId: string) => { + setGameId(gameId) + setMainPageState(MainPageState.IN_GAME) + Cookies.set('gameId', gameId, {expires: 1}); + }, []) - const onGameEnded = useCallback(() => { - setGameId(undefined) - setMainPageState(MainPageState.GAME_SELECTION) - Cookies.remove('gameId'); - },[]) + const onGameEnded = useCallback(() => { + setGameId(undefined) + setMainPageState(MainPageState.GAME_SELECTION) + Cookies.remove('gameId'); + }, []) - if (mainPageState === MainPageState.LOGIN) { - return - } - if (mainPageState === MainPageState.GAME_SELECTION) { - return - } - if (mainPageState === MainPageState.IN_GAME) { - return - } - return
Unknown state {mainPageState}
+ if (mainPageState === MainPageState.LOGIN) { + return + } + if (mainPageState === MainPageState.GAME_SELECTION) { + return + } + if (mainPageState === MainPageState.IN_GAME) { + return + } + return
Unknown state {mainPageState}
} export default QuizmaniaMainUI; diff --git a/frontend/src/pages/game/GameFinished.tsx b/frontend/src/pages/game/GameFinished.tsx index 9c32925..27ceb0e 100644 --- a/frontend/src/pages/game/GameFinished.tsx +++ b/frontend/src/pages/game/GameFinished.tsx @@ -1,18 +1,6 @@ import {Game} from "../../domain/GameModel"; -import {GameCommandService} from "../../services/GameCommandService"; import React from "react"; -import { - AppBar, - Box, - Button, Stack, - Table, - TableBody, - TableCell, - TableHead, - TableRow, - Toolbar, - Typography -} from "@mui/material"; +import {AppBar, Box, Button, Stack, Table, TableBody, TableCell, TableHead, TableRow, Toolbar, Typography} from "@mui/material"; import Logout from "@mui/icons-material/Logout"; import EmojiEvents from "@mui/icons-material/EmojiEvents"; import {amber, brown, grey} from "@mui/material/colors"; diff --git a/frontend/src/pages/game/GameLobby.tsx b/frontend/src/pages/game/GameLobby.tsx index 1363f6d..96e3ff5 100644 --- a/frontend/src/pages/game/GameLobby.tsx +++ b/frontend/src/pages/game/GameLobby.tsx @@ -1,16 +1,16 @@ import {gameCommandService, GameCommandService, GameException} from "../../services/GameCommandService"; import Cookies from "js-cookie"; import { - AppBar, - Button, - IconButton, - List, - ListItem, - ListItemIcon, - ListItemText, Stack, - Toolbar, - Tooltip, - Typography + AppBar, + Button, + IconButton, + List, + ListItem, + ListItemIcon, + ListItemText, Stack, + Toolbar, + Tooltip, + Typography } from "@mui/material"; import PlayArrow from "@mui/icons-material/PlayArrow"; import Logout from "@mui/icons-material/Logout"; @@ -22,103 +22,103 @@ import {Game} from "../../domain/GameModel"; import {useSnackbar} from "material-ui-snackbar-provider"; export type GameLobbyPageProps = { - game: Game, + game: Game, } export const GameLobbyPage = (props: GameLobbyPageProps) => { const snackbar = useSnackbar() - const onClickLeaveGame = async () => { - try { - await gameCommandService.leaveGame(props.game.id) - } catch (error) { - if (error instanceof GameException) { - snackbar.showMessage(error.message) - } + const onClickLeaveGame = async () => { + try { + await gameCommandService.leaveGame(props.game.id) + } catch (error) { + if (error instanceof GameException) { + snackbar.showMessage(error.message) } } + } - const onClickStartGame = async () => { - try { - await gameCommandService.startGame(props.game.id) - } catch (error) { - if (error instanceof GameException) { - snackbar.showMessage(error.message) - } + const onClickStartGame = async () => { + try { + await gameCommandService.startGame(props.game.id) + } catch (error) { + if (error instanceof GameException) { + snackbar.showMessage(error.message) } } + } - let startButton; - if (props.game.moderator === Cookies.get('username') || props.game.creator === Cookies.get('username')) { - startButton =
- -
- } + let startButton; + if (props.game.moderator === Cookies.get('username') || props.game.creator === Cookies.get('username')) { + startButton =
+ +
+ } - return ( -
- - - - {props.game.name} - - - - - - - - - - - - - - - - - - - - - - - - {startButton} - - Participants - - - {props.game.players.map((row) => ( - - - - - - - ))} - - + return ( +
+ + + + {props.game.name} + + + + + + + + + + + + + + + + + + + + + + + + {startButton} + + Participants + + + {props.game.players.map((row) => ( + + + + + + + ))} + + -
- ) +
+ ) } diff --git a/frontend/src/pages/game/GamePage.tsx b/frontend/src/pages/game/GamePage.tsx index 82603bb..87306a7 100644 --- a/frontend/src/pages/game/GamePage.tsx +++ b/frontend/src/pages/game/GamePage.tsx @@ -1,14 +1,12 @@ import React, {useEffect, useMemo} from "react"; -import {PlayerRemovedEvent} from "../../services/GameEventTypes"; +import {GameEvent, PlayerRemovedEvent} from "../../services/GameEventTypes"; import {useSnackbar} from "material-ui-snackbar-provider"; import Cookies from "js-cookie"; import {GameLobbyPage} from "./GameLobby"; import {GameRoomPage} from "./GameRoom"; -import {GameCommandService} from "../../services/GameCommandService"; import {GameFinishedPage} from "./GameFinished"; import {GameEventType, GameRepository} from "../../services/GameRepository"; import {Game, GameStatus} from "../../domain/GameModel"; -import {GameEvent} from "../../services/GameEventTypes"; type GamePageProps = { gameId: string, diff --git a/frontend/src/pages/game/gameroom/ModeratorGameRoomPanel.tsx b/frontend/src/pages/game/gameroom/ModeratorGameRoomPanel.tsx index 25015af..9a742c3 100644 --- a/frontend/src/pages/game/gameroom/ModeratorGameRoomPanel.tsx +++ b/frontend/src/pages/game/gameroom/ModeratorGameRoomPanel.tsx @@ -1,11 +1,11 @@ -import {Game, GameQuestion, QuestionStatus} from "../../../domain/GameModel"; +import {Game, QuestionStatus} from "../../../domain/GameModel"; import {gameCommandService, GameException} from "../../../services/GameCommandService"; import {Box, Button, CircularProgress, IconButton, Paper, Stack, Table, TableBody, TableCell, TableHead, TableRow, Typography} from "@mui/material"; import CheckCircle from "@mui/icons-material/CheckCircle"; import PlayArrow from "@mui/icons-material/PlayArrow"; import Cancel from "@mui/icons-material/Cancel"; import React from "react"; -import {Build, MarkEmailRead, QuestionMark, StopCircle} from "@mui/icons-material"; +import {Build, StopCircle} from "@mui/icons-material"; import {QuestionPhrasePanel} from "../question/QuestionPhrasePanel"; import Countdown from "react-countdown"; import {QuestionCountdownBar} from "../question/QuestionCountdownBar"; @@ -22,8 +22,7 @@ export type ModeratorGameRoomPanelProps = { export const ModeratorGameRoomPanel = ({game}: ModeratorGameRoomPanelProps) => { const snackbar = useSnackbar() - - const question = game.findLastQuestion() + const question = game.currentQuestion if (question === undefined) { return
Waiting for first question
diff --git a/frontend/src/pages/game/gameroom/PlayerAnswerLog.tsx b/frontend/src/pages/game/gameroom/PlayerAnswerLog.tsx index bd33b64..ec9a12e 100644 --- a/frontend/src/pages/game/gameroom/PlayerAnswerLog.tsx +++ b/frontend/src/pages/game/gameroom/PlayerAnswerLog.tsx @@ -1,4 +1,4 @@ -import {Game, Player} from "../../../domain/GameModel"; +import {Game} from "../../../domain/GameModel"; import {Table, TableBody, TableCell, TableHead, TableRow, Typography} from "@mui/material"; import React from "react"; import {MarkEmailRead, QuestionMark} from "@mui/icons-material"; @@ -9,9 +9,9 @@ export type PlayerAnswerLogProps = { export const PlayerAnswerLog = ({game}: PlayerAnswerLogProps) => { - const lastQuestion = game.findLastQuestion()! + const lastQuestion = game.currentQuestion! - return + return
diff --git a/frontend/src/pages/game/gameroom/PlayerGameRoomPanel.tsx b/frontend/src/pages/game/gameroom/PlayerGameRoomPanel.tsx index d943840..d65164b 100644 --- a/frontend/src/pages/game/gameroom/PlayerGameRoomPanel.tsx +++ b/frontend/src/pages/game/gameroom/PlayerGameRoomPanel.tsx @@ -21,7 +21,7 @@ export type PlayerGameRoomPanelProps = { export const PlayerGameRoomPanel = ({game, player}: PlayerGameRoomPanelProps) => { const snackbar = useSnackbar() - const question = game.findLastQuestion() + const question = game.currentQuestion let container if (question === undefined) { diff --git a/frontend/src/pages/game/gameroom/Scoreboard.tsx b/frontend/src/pages/game/gameroom/Scoreboard.tsx index 8e90d9d..0938698 100644 --- a/frontend/src/pages/game/gameroom/Scoreboard.tsx +++ b/frontend/src/pages/game/gameroom/Scoreboard.tsx @@ -4,7 +4,6 @@ import CheckCircle from "@mui/icons-material/CheckCircle"; import Cancel from "@mui/icons-material/Cancel"; import React, {useState} from "react"; import {ArrowBack, ArrowForward} from "@mui/icons-material"; -import {Simulate} from "react-dom/test-utils"; import useWindowDimensions from "../../../hooks/useWindowDimensions.tsx"; @@ -28,7 +27,7 @@ export type ScoreboardPageProps = { } const ScoreboardPage = ({game, page, pageSize}: ScoreboardPageProps) => { - const lastQuestion = game.findLastQuestion()! + const lastQuestion = game.currentQuestion const first = page * pageSize const last = (page + 1) * pageSize @@ -48,7 +47,7 @@ const ScoreboardPage = ({game, page, pageSize}: ScoreboardPageProps) => { .map((player, index) => { let icon let questionPoints - const playerAnswer = lastQuestion.answers.find(p => p.gamePlayerId === player.id) + const playerAnswer = lastQuestion?.answers.find(p => p.gamePlayerId === player.id) if (playerAnswer !== undefined) { icon = playerAnswer.points > 0 ? : diff --git a/frontend/src/pages/game/gameroom/SpectatorGameRoomPanel.tsx b/frontend/src/pages/game/gameroom/SpectatorGameRoomPanel.tsx index ad5db9c..a573c87 100644 --- a/frontend/src/pages/game/gameroom/SpectatorGameRoomPanel.tsx +++ b/frontend/src/pages/game/gameroom/SpectatorGameRoomPanel.tsx @@ -1,9 +1,8 @@ -import {Game, GameQuestion, QuestionStatus} from "../../../domain/GameModel"; +import {Game, QuestionStatus} from "../../../domain/GameModel"; import {Box, Button, CircularProgress, Paper, Stack, Table, TableBody, TableCell, TableHead, TableRow, Typography} from "@mui/material"; import CheckCircle from "@mui/icons-material/CheckCircle"; import Cancel from "@mui/icons-material/Cancel"; import React from "react"; -import {MarkEmailRead, QuestionMark} from "@mui/icons-material"; import {QuestionPhrasePanel} from "../question/QuestionPhrasePanel"; import Countdown from "react-countdown"; import {QuestionCountdownBar} from "../question/QuestionCountdownBar"; @@ -19,7 +18,7 @@ export type SpectatorGameRoomPanelProps = { export const SpectatorGameRoomPanel = ({game}: SpectatorGameRoomPanelProps) => { - const question = game.findLastQuestion() + const question = game.currentQuestion if (question === undefined) { return
Waiting for first question
diff --git a/frontend/src/pages/game/question/BuzzerQuestionContainer.tsx b/frontend/src/pages/game/question/BuzzerQuestionContainer.tsx index 7bd755f..600ce32 100644 --- a/frontend/src/pages/game/question/BuzzerQuestionContainer.tsx +++ b/frontend/src/pages/game/question/BuzzerQuestionContainer.tsx @@ -3,7 +3,6 @@ import {Button, Stack, useTheme} from "@mui/material"; import React from "react"; import {QuestionPhrasePanel} from "./QuestionPhrasePanel"; import {QuestionType} from "../../../services/GameEventTypes"; -import {Simulate} from "react-dom/test-utils"; enum BuzzerStatus { diff --git a/frontend/src/pages/game/question/CorrectAnswerContainer.tsx b/frontend/src/pages/game/question/CorrectAnswerContainer.tsx index 1c8014a..8b22fb9 100644 --- a/frontend/src/pages/game/question/CorrectAnswerContainer.tsx +++ b/frontend/src/pages/game/question/CorrectAnswerContainer.tsx @@ -5,7 +5,7 @@ export type CorrectAnswerContainerProps = { correctAnswer: string } -export const CorrectAnswerContainer = (props: CorrectAnswerContainerProps) => { +export const CorrectAnswerContainer = ({correctAnswer}: CorrectAnswerContainerProps) => { const theme = useTheme() return @@ -13,7 +13,7 @@ export const CorrectAnswerContainer = (props: CorrectAnswerContainerProps) => { Answer - {props.correctAnswer} + {correctAnswer} } diff --git a/frontend/src/pages/game/question/QuestionCountdownBar.tsx b/frontend/src/pages/game/question/QuestionCountdownBar.tsx index c409f17..21d0f54 100644 --- a/frontend/src/pages/game/question/QuestionCountdownBar.tsx +++ b/frontend/src/pages/game/question/QuestionCountdownBar.tsx @@ -6,10 +6,10 @@ export type QuestionCountdownBarProps = { timeLeft: number, } -export const QuestionCountdownBar = (props: QuestionCountdownBarProps) => { +export const QuestionCountdownBar = ({timeLeft, totalTime}: QuestionCountdownBarProps) => { const theme = useTheme() - const percentage = props.timeLeft / props.totalTime + const percentage = timeLeft / totalTime const color = percentage < 0.2 ? theme.palette.error.main : theme.palette.primary.main return (
) diff --git a/frontend/src/pages/game/question/QuestionPhrasePanel.tsx b/frontend/src/pages/game/question/QuestionPhrasePanel.tsx index d01e17b..296192e 100644 --- a/frontend/src/pages/game/question/QuestionPhrasePanel.tsx +++ b/frontend/src/pages/game/question/QuestionPhrasePanel.tsx @@ -7,17 +7,17 @@ export type QuestionPhrasePanelProps = { } -export const QuestionPhrasePanel = (props: QuestionPhrasePanelProps) => { +export const QuestionPhrasePanel = ({gameQuestion}: QuestionPhrasePanelProps) => { const theme = useTheme() let questionImage - if (props.gameQuestion.question.imagePath !== 'undefined') { - questionImage = + if (gameQuestion.question.imagePath !== 'undefined') { + questionImage = } return ( - Question {props.gameQuestion.gameQuestionNumber} + Question {gameQuestion.gameQuestionNumber} { justifyContent: 'center' }}> - {props.gameQuestion.question.phrase} + {gameQuestion.question.phrase} {questionImage}