Episodio 6 - Arreglo countdown

components/Countdown.tsx

@@ -4,28 +4,34 @@ import useInterval from '../hooks/useInterval'
 type Props = {
  time: number
  onFinish: () => void
+ onStart: () => void
 }
 
-const Countdown = ({ time, onFinish }: Props) => {
+const round = (n: number) => Number(n.toFixed(5))
+
+const Countdown = ({ time, onFinish, onStart }: Props) => {
  const [translateLeft, setTranslateLeft] = useState(100)
- const [finished, setFinished] = useState(false)
- const step = 100 / time
+ const step = round(100 / time)
+ const [times, setTimes] = useState(time)
 
  useInterval(
  () => {
- let nextTranslateLeft = Math.round(translateLeft - step)
+ const nextTranslateLeft = round(translateLeft - step)
+ setTranslateLeft(nextTranslateLeft)
+
+ if (times === time) {
+ onStart()
+ }
 
- if (nextTranslateLeft < 0) {
-  nextTranslateLeft = 0
+ const nextTimes = times - 1
+ setTimes(nextTimes)
 
+ if (!nextTimes) {
  onFinish()
- setFinished(true)
  }
-
- setTranslateLeft(nextTranslateLeft)
  },
  1000,
- !finished,
+ times > -1,
  )
 
  return (

hooks/useCremona.tsx

@@ -8,9 +8,10 @@ export default function useCremona(
  const [state, setState] = useState({
  currentIndex: 0,
  successfulChoices: 0,
+ timeAwards: 0,
  })
 
- const update = (selectedOption: Option | null) => {
+ const update = (selectedOption: Option | null, ms: number) => {
  setState((prev) => {
  const currentIndex = prev.currentIndex + 1
  const isValid = selectedOption
@@ -20,22 +21,40 @@ export default function useCremona(
  ? prev.successfulChoices + 1
  : prev.successfulChoices
 
+ /* 1. Divide response time by the question timer. For example, a player responded 2 seconds after a 30-second question timer started. 2 divided by 30 is 0.0667. */
+ const s = ms / 1000
+ const step1 = s / game.questions[prev.currentIndex].time
+
+ /* 2. Divide that value by 2. For example, 0.0667 divided by 2 is 0.0333. */
+ const step2 = step1 / 2
+
+ /* 3. Subtract that value from 1. For example, 1 minus 0.0333 is 0.9667. */
+ const step3 = 1 - step2
+
+ /* 4. Multiply points possible by that value. For example, 1000 points possible multiplied by 0.9667 is 966.7. */
+ const step4 = step3 * 1000
+
+ /* 5. Round to the nearest whole number. For example, 966.7 is 967 points. */
+ const step5 = Math.round(step4)
+
+ const currentQuestionTimeAward = prev.timeAwards + (isValid ? step5 : 0)
+
  if (game.questions.length <= currentIndex) {
- onFinish(successfulChoices * 10)
+ onFinish(successfulChoices * 1000 + currentQuestionTimeAward)
  }
 
  return {
  ...prev,
  currentIndex,
  successfulChoices,
+ timeAwards: currentQuestionTimeAward,
  }
  })
  }
 
  return {
  ...state,
  totalQuestions: game.questions.length,
- gameEnded: game.questions.length <= state.currentIndex,
  update,
  }
 }

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

@@ -107,38 +107,24 @@ type GameProps = {
 }
 
 function PlayerGame({ game, onFinish }: GameProps) {
- const {
- currentIndex,
- totalQuestions,
- update,
- gameEnded,
- successfulChoices,
- } = useCremona(game, onFinish)
+ const { currentIndex, totalQuestions, update } = 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 { toggle: toggleBackground } = useAudio('/sounds/background.mp3', 0.1)
  const [showNext, setShowNext] = useState(false)
+ const [ms, setMs] = useState(0)
 
  useInterval(
  () => {
- if (!playing) {
- toggleBackground()
- }
+ setMs(ms + 100)
  },
  100,
  !showNext,
  )
 
  const currentQuestion = game.questions[currentIndex]
 
- if (gameEnded) {
- return <Heading type="h2">You got {successfulChoices * 10} points.</Heading>
- }
-
  return (
  <div className="">
  <div className="mb-4">
@@ -183,7 +169,7 @@ function PlayerGame({ game, onFinish }: GameProps) {
  {showNext && (
  <Button
  onClick={() => {
- update(selectedOption)
+ update(selectedOption, ms)
  setSelectedOption(null)
  setShowNext(false)
  }}
@@ -195,7 +181,11 @@ function PlayerGame({ game, onFinish }: GameProps) {
  <div className="mt-4">
  <Countdown
  time={currentQuestion.time}
+ onStart={() => {
+ toggleBackground()
+ }}
  onFinish={() => {
+ toggleBackground()
  playError()
  setSelectedOption(null)
  setShowNext(true)