feature: improve UI

.env

@@ -1,4 +1,5 @@
 VITE_BASE_PATH=/quiz
+VITE_IN_MEMORY_TIMEOUT=200
 
 VITE_SUPABASE_URL=https://<project>.supabase.co
 VITE_SUPABASE_ANON_KEY=<your-anon-key>

src/App.css

@@ -1,19 +1,20 @@
-.pergunta {
-    padding: 0 12px 12px 12px;
-    background: #ffffff;
-    color: #51575b;
+.GamePlaySessionQuestionUnanswered > .card {
+    text-shadow: 1px 1px 1px #707070;
+}
+
+.GamePlaySessionQuestionUnanswered > .card code {
+    text-shadow: none;
+    padding: 4px 6px;
     border-radius: 6px;
+    background-color: #ffffff;
+    color: #565656;
+    margin: 0 0.1rem;
 }
 
-.pergunta .radio p {
-    display: inline-block;
-    padding-left: 5px;
+.GamePlaySessionQuestionUnanswered > .card > .card-header code {
+    font-size: 1rem;
 }
 
-.pergunta .radio code {
-    padding: 2px 4px;
-    font-size: 90%;
-    color: #c7254e;
-    background-color: #f9f2f4;
-    border-radius: 4px;
+main .btn.btn-primary {
+    box-shadow: rgba(64, 60, 67, 0.3) 1px 2px 5px 1px !important;
 }

src/App.tsx

@@ -13,7 +13,7 @@ import { ProtectPage } from './view/components/auth/ProtectPage'
 import { HomePage } from './view/pages/HomePage.tsx'
 // game
 import { GameWelcomePage } from './view/pages/game/GameWelcomePage.tsx'
-import { GamePage } from './view/pages/game/GamePage.tsx'
+import { GamePlayPage } from './view/pages/game/GamePlayPage.tsx'
 import { GameEndPage } from './view/pages/game/GameEndPage.tsx'
 // session
 import { PrivatePage } from './view/pages/PrivatePage'
@@ -37,7 +37,7 @@ export default function App () {
           />
           <Route
             path="/game/:id/play"
-            element={<GamePage />}
+            element={<GamePlayPage />}
           />
           <Route
             path="/game/:id/end"

src/app/Infrastructure/InMemory/InMemoryGameRepository.ts

@@ -10,9 +10,10 @@ export default class InMemoryGameRepository implements GameRepository {
   }
 
   async promisify <T>(data: T): Promise<T> {
+    const timeout = import.meta.env.VITE_IN_MEMORY_TIMEOUT || 300
     return new Promise((resolve) => {
       const handler = () => resolve(data)
-      window.setTimeout(handler, 300)
+      window.setTimeout(handler, Number(timeout))
     })
   }
 

src/app/Infrastructure/InMemory/games.ts

@@ -69,7 +69,15 @@ export default function (): Game[] {
               text: '`construtor__`'
             }
           ]
-        },
+        }
+      ]
+    }, {
+      id: 2,
+      description: 'Avançado',
+      author: '[email protected]',
+      createdAt: new Date(),
+      updatedAt: new Date(),
+      questions: [
         {
           id: 3,
           text: 'Utilizando banco de dados MySQL, qual a função para enviar uma consulta SQL ao banco de dados ativo?',
@@ -271,15 +279,7 @@ export default function (): Game[] {
               text: '`__construct()` e `__destruct()`'
             }
           ]
-        }
-      ]
-    }, {
-      id: 2,
-      description: 'Avançado',
-      author: '[email protected]',
-      createdAt: new Date(),
-      updatedAt: new Date(),
-      questions: [
+        },
         {
           id: 10,
           text: 'O que a keyword `final` faz?',

src/config/dependencies.ts

@@ -9,7 +9,7 @@ import SupabaseGameRepository from '../app/Infrastructure/Supabase/SupabaseGameR
 export default function () {
   container.register('AuthService', { useClass: AuthService })
   container.register('AuthRepository', { useClass: JsonHttpAuthRepository })
-  if (process.env.NODE_ENV === 'development') {
+  if (process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'production') {
     container.register('GameRepository', { useClass: InMemoryGameRepository })
     return container
   }

src/config/i18n.ts

@@ -24,6 +24,39 @@ const resources = {
           callToAction: 'Jogar agora »'
         },
         game: {
+          play: {
+            pending: 'Carregando Jogo ...',
+            rejected: 'Não foi possível carregar o jogo',
+            error: 'Oh snap!',
+            instructions: {
+              title: 'O jogo já vai começar!',
+              selected: 'Jogo Selecionado: ',
+              description: 'Certifique-se de que todos estão prontos e clique em Começar!\n' +
+                'Lembrando que este jogo tem um tempo limite de {{timeout}} segundos para responder ' +
+                'cada pergunta e {{total}} perguntas ao todo',
+              greetings: 'Boa sorte!',
+              start: 'Começar'
+            },
+            session: {
+              correct: {
+                title: 'Certa a resposta! Acerto Mizeravi!',
+                description: 'Você acertou! Escolha alguém para beber e passe a vez para a pessoa à sua esquerda.'
+              },
+              wrong: {
+                title: 'Você errou! Bebe!',
+                description: 'Errou feio, errou Rude! Agora tem de beber e passar a vez para a pessoa à sua esquerda.'
+              },
+              expired: {
+                title: 'Acabou o tempo!',
+                description: 'Você demorou demais para responder! Agora tem de beber e passar a vez para a pessoa à sua esquerda.'
+              },
+              unanswered: {
+                timer: 'Tempo restante: {{time}} segundos',
+              },
+              next: 'Próximo',
+              answer: 'Responder',
+            }
+          },
           welcome: {
             title: 'Escolha um Jogo',
             description: 'Depois de selecionar um jogo cada um na mesa deve responder a uma pergunta.\n' +
@@ -33,15 +66,6 @@ const resources = {
             rejected: 'Não foi possível carregar os jogos',
             error: 'Oh snap!'
           },
-          play: {
-            title: 'O jogo já vai começar!',
-            selected: 'Jogo Selecionado: ',
-            description: 'Certifique-se de que todos estão prontos para começar e clique em Começar!\n' +
-              'Lembrando que este jogo tem um tempo limite de {{timeout}} segundos para responder ' +
-              'cada pergunta e {{total}} perguntas ao todo',
-            greetings: 'Boa sorte!',
-            start: 'Começar'
-          },
           end: {
             title: 'O jogo acabou!',
             description: 'Não está bêbado suficiente? Clique em "Começar de novo"!',

src/index.css

@@ -5,6 +5,10 @@
     padding-top: 82px;
 }
 
+body {
+    background-image: linear-gradient(90deg, #33b7e2, #a680da, #fd81b8);
+}
+
 nav {
     height: 82px;
 }
@@ -15,6 +19,7 @@ main {
 
 main > .container {
     min-height: calc(100vh - 198px);
+    transition: height 0.3s;
 }
 
 footer {

src/view/components/game/GameImage.tsx

@@ -0,0 +1,28 @@
+import { image } from '../../../config/assets.ts'
+
+export function Drink () {
+  return (
+    <div className="d-flex justify-content-center justify-content-center">
+      <img
+        className="img-fluid"
+        src={image('/status/wrong.png')}
+        alt="PHPinga"
+        style={{ maxHeight: '40vh' }}
+      />
+    </div>
+  )
+}
+
+export function Celebrate () {
+  return (
+    <div className="d-flex justify-content-center justify-content-center">
+      <img
+        className="img-fluid"
+        src={image('/status/correct.png')}
+        alt="PHPinga"
+        style={{ maxHeight: '40vh' }}
+      />
+    </div>
+  )
+}
+

src/view/components/game/GamePlaySession.tsx

@@ -0,0 +1,83 @@
+import { useEffect, useState } from 'react'
+
+import Question from '../../../app/Domain/Game/Question.ts'
+import AnswerStatus from '../../../app/Domain/Game/AnswerStatus.ts'
+import { shuffle } from '../../../app/Domain/Util.ts'
+import Game from '../../../app/Domain/Game/Game.ts'
+
+import { GamePlaySessionInstruction } from './game-play-session/GamePlaySessionInstruction.tsx'
+import { GamePlaySessionQuestion, GameQuestionAnswerQuestion } from './game-play-session/GamePlaySessionQuestion.tsx'
+
+export type GamePlaySessionProps = {
+  game: Game,
+  onStart?: () => void,
+  onFinish?: () => void
+}
+
+export function GamePlaySession ({ game, onStart, onFinish }: GamePlaySessionProps) {
+  const timeout = 1000000
+  const [questions, setQuestions] = useState<Question[]>([])
+  const [currentQuestion, setCurrentQuestion] = useState<Question | null>(null)
+
+  const nextQuestion = () => {
+    if (questions.length === 0) {
+      finishGame()
+      return
+    }
+    const randomIndex = Math.floor(Math.random() * questions.length)
+    const newQuestion = questions[randomIndex]
+    setCurrentQuestion(newQuestion)
+  }
+
+  const startGame = () => {
+    nextQuestion()
+    onStart && onStart()
+  }
+
+  const finishGame = () => {
+    setCurrentQuestion(null)
+    onFinish && onFinish()
+  }
+
+  const answerQuestion: GameQuestionAnswerQuestion = (status) => {
+    // TODO: improve actions for each result
+    const actions = {
+      [AnswerStatus.CORRECT]: () => {
+        console.log('Correct!')
+        const current = questions.findIndex((q) => q === currentQuestion)
+        const newQuestions = questions.filter((_, index) => index !== current)
+        setQuestions(shuffle<Question>(newQuestions))
+      },
+      [AnswerStatus.WRONG]: () => console.log('Wrong!'),
+      [AnswerStatus.UNANSWERED]: () => console.log('Unanswered!'),
+      [AnswerStatus.TIME_EXPIRED]: () => console.log('Time expired!'),
+    }
+    actions[status]()
+  }
+
+  useEffect(() => {
+    if (questions.length > 0) {
+      return
+    }
+    setQuestions(shuffle<Question>(game.questions))
+  }, [game, questions])
+
+  return !currentQuestion ?
+    <GamePlaySessionInstruction
+      timeout={timeout}
+      game={game}
+      nextQuestion={startGame}
+    /> :
+    <>
+      <GamePlaySessionQuestion
+        timeout={timeout}
+        text={currentQuestion.text}
+        answers={currentQuestion.answers}
+        answerQuestion={answerQuestion}
+        nextQuestion={nextQuestion}
+      />
+      <div className="pt-1">
+        <small>{game.questions.length - questions.length} / {game.questions.length}</small>
+      </div>
+    </>
+}