Episodio 5

components/Countdown.tsx

@@ -0,0 +1,43 @@
+import React, { useState } from 'react'
+import useInterval from '../hooks/useInterval'
+
+type Props = {
+  time: number
+  onFinish: () => void
+}
+
+const Countdown = ({ time, onFinish }: Props) => {
+  const [translateLeft, setTranslateLeft] = useState(100)
+  const [finished, setFinished] = useState(false)
+  const step = 100 / time
+
+  useInterval(
+    () => {
+      let nextTranslateLeft = Math.round(translateLeft - step)
+
+      if (nextTranslateLeft < 0) {
+        nextTranslateLeft = 0
+
+        onFinish()
+        setFinished(true)
+      }
+
+      setTranslateLeft(nextTranslateLeft)
+    },
+    1000,
+    !finished,
+  )
+
+  return (
+    <div className="bg-white h-4 relative shadow overflow-hidden">
+      <div
+        className="absolute bg-red-500 left-0 bottom-0 top-0 w-full h-full transition-transform duration-1000 ease-linear"
+        style={{
+          transform: `translateX(-${translateLeft}%)`,
+        }}
+      ></div>
+    </div>
+  )
+}
+
+export default Countdown

components/ListChallenges.tsx

@@ -12,6 +12,7 @@ const ListChallenges = () => {
     listen: true,
     parseDates: ['createdAt'],
     where: ['createdBy', '==', user.uid],
+    orderBy: ['createdAt', 'desc'],
   })
 
   if (loading) {

hooks/useAudio.tsx

@@ -0,0 +1,32 @@
+import { useEffect, useState } from 'react'
+
+const useAudio = (url: string, volume = 0.5) => {
+  const sound = new Audio(url)
+  sound.volume = volume
+
+  const [audio] = useState(sound)
+  const [playing, setPlaying] = useState(false)
+
+  const toggle = () => setPlaying(!playing)
+
+  useEffect(() => {
+    if (playing) {
+      audio.play()
+    } else {
+      audio.currentTime = 0
+      audio.pause()
+    }
+  }, [playing])
+
+  useEffect(() => {
+    audio.addEventListener('ended', () => setPlaying(false))
+
+    return () => {
+      audio.removeEventListener('ended', () => setPlaying(false))
+    }
+  }, [])
+
+  return { playing, toggle }
+}
+
+export default useAudio

hooks/useCremona.tsx

@@ -10,11 +10,12 @@ export default function useCremona(
     successfulChoices: 0,
   })
 
-  const update = (selectedOption: Option) => {
+  const update = (selectedOption: Option | null) => {
     setState((prev) => {
       const currentIndex = prev.currentIndex + 1
-      const isValid =
-        game.questions[prev.currentIndex].validOption === selectedOption.id
+      const isValid = selectedOption
+        ? game.questions[prev.currentIndex].validOption === selectedOption.id
+        : false
       const successfulChoices = isValid
         ? prev.successfulChoices + 1
         : prev.successfulChoices

hooks/useInterval.tsx

@@ -0,0 +1,27 @@
+import { useEffect, useRef } from 'react'
+
+export default function useInterval(
+  callback: () => void,
+  delay: number,
+  inRunning: boolean,
+) {
+  const savedCallback = useRef<() => void>()
+
+  useEffect(() => {
+    savedCallback.current = callback
+  })
+
+  useEffect(() => {
+    function tick() {
+      if (savedCallback.current) {
+        savedCallback.current()
+      }
+    }
+
+    if (inRunning) {
+      const id = setInterval(tick, delay)
+
+      return () => clearInterval(id)
+    }
+  }, [inRunning])
+}

pages/games/[gameId]/[playerId].tsx

@@ -7,6 +7,11 @@ import { Game, Option } from '../../../types/Game'
 import { Player } from '../../../types/Player'
 import Button from '../../../ui/Button'
 import useCremona from '../../../hooks/useCremona'
+import useAudio from '../../../hooks/useAudio'
+import useInterval from '../../../hooks/useInterval'
+import Countdown from '../../../components/Countdown'
+import Link from 'next/link'
+import A from '../../../ui/A'
 
 const PlayerId = () => {
   const router = useRouter()
@@ -53,7 +58,16 @@ const PlayerId = () => {
   /* TODO: verify game and player status */
   if (player.status === 'finished') {
     /* return <PlayerScore /> */
-    return <p>You finished.</p>
+    return (
+      <>
+        <p>You finished with {player.score} points.</p>
+        <div className="mt-4">
+          <Link href="/games/[gameId]" as={`/games/${gameId}`} passHref>
+            <A href="#!">Go back</A>
+          </Link>
+        </div>
+      </>
+    )
   }
 
   const onFinish = (score: number) => {
@@ -101,6 +115,23 @@ function PlayerGame({ game, onFinish }: GameProps) {
     successfulChoices,
   } = useCremona(game, onFinish)
   const [selectedOption, setSelectedOption] = useState<Option | null>(null)
+  const { toggle: playError } = useAudio('/sounds/error.mp3', 0.2)
+  const { toggle: playSuccess } = useAudio('/sounds/success.mp3', 0.9)
+  const { playing, toggle: toggleBackground } = useAudio(
+    '/sounds/background.mp3',
+    0.1,
+  )
+  const [showNext, setShowNext] = useState(false)
+
+  useInterval(
+    () => {
+      if (!playing) {
+        toggleBackground()
+      }
+    },
+    100,
+    !showNext,
+  )
 
   const currentQuestion = game.questions[currentIndex]
 
@@ -119,15 +150,24 @@ function PlayerGame({ game, onFinish }: GameProps) {
             <button
               className={classnames([
                 'block px-4 py-2 my-4 bg-white border w-full text-left',
-                selectedOption &&
+                showNext &&
                   currentQuestion.validOption === option.id &&
                   'bg-green-300',
-                selectedOption &&
+                showNext &&
                   currentQuestion.validOption !== option.id &&
                   'bg-red-300',
               ])}
               onClick={() => {
                 setSelectedOption(option)
+                setShowNext(true)
+
+                toggleBackground()
+
+                if (currentQuestion.validOption === option.id) {
+                  playSuccess()
+                } else {
+                  playError()
+                }
               }}
               disabled={!!selectedOption}
             >
@@ -140,16 +180,29 @@ function PlayerGame({ game, onFinish }: GameProps) {
       <p className="mt-4 text-center italic">
         Question {currentIndex + 1} of {totalQuestions}
       </p>
-      {selectedOption && (
+      {showNext && (
         <Button
           onClick={() => {
             update(selectedOption)
             setSelectedOption(null)
+            setShowNext(false)
           }}
         >
           {currentIndex === totalQuestions - 1 ? 'Finish' : 'Next'}
         </Button>
       )}
+      {!showNext && (
+        <div className="mt-4">
+          <Countdown
+            time={currentQuestion.time}
+            onFinish={() => {
+              playError()
+              setSelectedOption(null)
+              setShowNext(true)
+            }}
+          />
+        </div>
+      )}
     </div>
   )
 }