aula03

guilhermecapitao · Feb 24, 2021 · dae06f8 · dae06f8
1 parent 9ee3364
commit dae06f8
Show file tree

Hide file tree

Showing 10 changed files with 386 additions and 24 deletions.
diff --git a/challenges.json b/challenges.json
@@ -0,0 +1,62 @@
+[
+  {
+    "type": "body",
+    "description": "Estique um de seus braços com a palma da mão virada para frente e puxe os dedos para cima por 10 segundos por mão.",
+    "amount": 80
+  },
+  {
+    "type": "body",
+    "description": "Estique seu braço contra o peito e puxe-o utilizando o outro braço por 10 segundos por braço.",
+    "amount": 60
+  },
+  {
+    "type": "body",
+    "description": "Puxe seu pescoço com a ajuda da mão para a direita e para a esquerda, permanecendo na posição por alguns segundos.",
+    "amount": 70
+  },
+  {
+    "type": "body",
+    "description": "Com as duas mãos na parte de trás da cabeça, leve-a para baixo, alongando a parte de trás da região.",
+    "amount": 60
+  },
+  {
+    "type": "body",
+    "description": "Cruze as pernas e desça com as mãos esticadas em direção ao chão. Repita o movimento com a outra perna na frente.",
+    "amount": 100
+  },
+  {
+    "type": "body",
+    "description": "Sentado, abra as pernas e tente encostar as palmas das mãos no chão, repita 3 vezes por 5 segundos.",
+    "amount": 80
+  },
+  {
+    "type": "body",
+    "description": "Puxe o joelho de encontro ao peito e segure, troque de perna após 10 segundos.",
+    "amount": 50
+  },
+  {
+    "type": "body",
+    "description": "Sentado, cruze uma perna e incline seu tronco à frente, troque de perna após 10 segundos.",
+    "amount": 80
+  },
+  {
+    "type": "eye",
+    "description": "Sentado, feche os olhos e cubra-os com as palmas da mão durante 2 minutos, depois abra normalmente.",
+    "amount": 90
+  },
+  {
+    "type": "eye",
+    "description": "Em algum ambiente aberto, olhe o mais longe que puder em quatro direções por 3s, mexa apenas os olhos. Repita 3 vezes.",
+    "amount": 140
+  },
+  {
+    "type": "eye",
+    "description": "Usando os polegares, massage a área abaixo das sobrancelhas em movimentos circulares por 15 segundos.",
+    "amount": 70
+  },
+  {
+    "type": "body",
+    "description": "Em pé, gire a cintura o máximo que puder para a esquerda, segure por cinco segundos. Repita para a direita.",
+    "amount": 90
+  }
+]
diff --git a/src/components/ChallengeBox.tsx b/src/components/ChallengeBox.tsx
@@ -0,0 +1,48 @@
+import { useContext } from 'react'
+import styles from '../styles/components/ChallengeBox.module.css'
+import { ChallengesContext } from '../contexts/ChallengesContext'
+
+export function ChallengeBox() {
+
+  const { activeChallenge, resetChallenge } = useContext(ChallengesContext)
+
+  return(
+    <div className={styles.challengeBoxContainer}>
+      { activeChallenge ? (
+        <div className={styles.challengeActive}>
+          <header>Ganhe {activeChallenge.amount} xp</header>
+
+          <main>
+            <img src={`icons/${activeChallenge.type}.svg`} alt=""/>
+            <strong>Novo desafio</strong>
+            <p>{activeChallenge.description}</p>
+          </main>
+
+          <footer>
+            <button 
+            className={styles.challengeFailedButton} 
+            type="button"
+            onClick={resetChallenge}
+            >
+              Falhei
+            </button>
+            <button 
+            className={styles.challengeSucceededButton} 
+            type="button"
+            >
+              Completei
+            </button>
+          </footer>
+        </div>
+      ) : (
+        <div className={styles.challengeNotActive}>
+          <strong>Finalize um ciclo para receber um desafio</strong>
+          <p>
+            <img src="icons/level-up.svg" alt="Level Up"/>
+            Avance de level completando desafios
+          </p>
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/src/components/CompletedChallenges.tsx b/src/components/CompletedChallenges.tsx
@@ -1,10 +1,15 @@
+import { useContext } from 'react'
+import { ChallengesContext } from '../contexts/ChallengesContext'
 import styles from '../styles/components/CompletedChallenges.module.css'
 
 export function CompletedChallenges() {
+
+  const { challengesCompleted } = useContext(ChallengesContext)
+
   return (
     <div className={styles.completedChallengesContainer}>
       <span>Desafios completos</span>
-      <span>5</span>
+      <span>{challengesCompleted}</span>
     </div>
   )
 }
diff --git a/src/components/Countdown.tsx b/src/components/Countdown.tsx
@@ -1,9 +1,15 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useContext } from 'react';
+import { ChallengesContext } from '../contexts/ChallengesContext';
 import styles from '../styles/components/Countdown.module.css';
 
+let countdownTimeout: NodeJS.Timeout
+
 export function Countdown() {
-  const [time, setTime] = useState(25 * 60)
-  const [active, setActive] = useState(false)
+  const { startNewChallenge } = useContext(ChallengesContext)
+
+  const [time, setTime] = useState(0.1 * 60)
+  const [isActive, setIsActive] = useState(false)
+  const [hasFinished, setHasFinished] = useState(false)
 
   const minutes = Math.floor(time / 60);
   const seconds = time % 60;
@@ -12,16 +18,26 @@ export function Countdown() {
   const [secondLeft, secondRight] = String(seconds).padStart(2, '0').split('')
 
   function startCountdown() {
-    setActive(true)
+    setIsActive(true)
+  }
+
+  function resetCountdown() {
+    clearTimeout(countdownTimeout);
+    setIsActive(false);
+    setTime(0.1 * 60)
   }
 
   useEffect(() => {
-    if(active && time > 0) {
-      setTimeout(() => {
+    if(isActive && time > 0) {
+      countdownTimeout = setTimeout(() => {
         setTime(time - 1)
       }, 1000)
+    } else if (isActive && time === 0) {
+      setHasFinished(true)
+      setIsActive(false)
+      startNewChallenge()
     }
-  }, [active, time])
+  }, [isActive, time])
 
   return (
     <div>
@@ -37,13 +53,35 @@ export function Countdown() {
         </div>
       </div>
 
-      <button 
-        type="button" 
+      { hasFinished ? (
+        <button 
+        disabled
         className={styles.countdownButton}
-        onClick={startCountdown}
-      > 
-      Iniciar um ciclo
-      </button>
+        > 
+          Ciclo encerrado
+        </button>
+      ) : (
+        <>
+        { isActive ? (
+          <button 
+          type="button" 
+          className={`${styles.countdownButton} ${styles.countdownButtonActive}`}
+          onClick={resetCountdown}
+          > 
+            Abandonar ciclo
+          </button>
+        ) : (
+          <button 
+          type="button" 
+          className={styles.countdownButton}
+          onClick={startCountdown}
+          > 
+            Iniciar um ciclo
+          </button>
+        )}
+        </>
+      ) }
+
     </div>
   )
 }
diff --git a/src/components/ExperienceBar.tsx b/src/components/ExperienceBar.tsx
@@ -1,17 +1,23 @@
+import { useContext } from 'react'
+import { ChallengesContext } from '../contexts/ChallengesContext'
 import styles from '../styles/components/ExperienceBar.module.css'
 
 export function ExperienceBar() {
+  const { currentExperience, experienceToNextLevel } = useContext(ChallengesContext)
+
+  const percentToNextLevel = Math.round(currentExperience * 100) / experienceToNextLevel
+
   return (
     <header className={styles.experienceBar}>
       <span>0 xp</span>
       <div>
-        <div style={{ width: '50%' }} />
+        <div style={{ width: `${percentToNextLevel}%` }} />
 
-        <span className={styles.currentExperience} style={{ left: '50%' }}>
-          300 xp
+        <span className={styles.currentExperience} style={{ left: `${percentToNextLevel}%` }}>
+          {currentExperience} xp
         </span>
       </div>
-      <span>600 xp</span>
+      <span>{experienceToNextLevel} xp</span>
     </header>
   )
 }
diff --git a/src/contexts/ChallengesContext.tsx b/src/contexts/ChallengesContext.tsx
@@ -0,0 +1,68 @@
+import { createContext, ReactNode, useState } from 'react'
+
+import challenges from '../../challenges.json'
+
+interface Challenge {
+  type: 'body' | 'eye';
+  description: string;
+  amount: number;
+}
+
+interface ChallengesContextData {
+  level: number; 
+  currentExperience: number 
+  challengesCompleted: number;
+  experienceToNextLevel:number;
+  activeChallenge: Challenge;
+  levelUp: () => void;
+  startNewChallenge: () => void;
+  resetChallenge: () => void
+}
+
+interface ChallengesProviderProps {
+  children: ReactNode
+}
+
+export const ChallengesContext = createContext({} as ChallengesContextData)
+
+export function ChallengesProvider({ children }: ChallengesProviderProps) {
+  const [level, setLevel] = useState(1)
+  const [currentExperience, setCurrentExperience] = useState(0)
+  const [challengesCompleted, setChallengesCompleted] = useState(0)
+
+  const [activeChallenge, setActiveChallenge] = useState(null)
+
+  const experienceToNextLevel = Math.pow((level + 1) * 4, 2)
+
+  function levelUp() {
+    setLevel(level + 1)
+  }
+
+  function startNewChallenge() {
+    const randomChallengeIndex = Math.floor(Math.random() * challenges.length)
+    const challenge = challenges[randomChallengeIndex]
+
+    setActiveChallenge(challenge)
+  }
+
+  function resetChallenge() {
+    setActiveChallenge(null)
+  }
+
+  return (
+    <ChallengesContext.Provider value={{ 
+      level, 
+      currentExperience, 
+      challengesCompleted, 
+      activeChallenge,
+      experienceToNextLevel,
+      levelUp,
+      startNewChallenge,
+      resetChallenge
+      }}
+    >
+      { children }
+    </ChallengesContext.Provider>
+  )
+
+}
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -1,7 +1,15 @@
 import '../styles/global.css'
 
+import { ChallengesProvider } from '../contexts/ChallengesContext'
+
 function MyApp({ Component, pageProps }) {
-  return <Component {...pageProps} />
+
+
+  return (
+    <ChallengesProvider>
+      <Component {...pageProps} />
+    </ChallengesProvider>
+  )
 }
 
 export default MyApp
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -1,10 +1,11 @@
+import Head from 'next/head'
+
 import { CompletedChallenges } from '../components/CompletedChallenges'
-import { Countdown } from '../components/Countdown'
 import { ExperienceBar } from '../components/ExperienceBar'
+import { ChallengeBox } from '../components/ChallengeBox'
+import { Countdown } from '../components/Countdown'
 import { Profile } from '../components/Profile'
 
-import Head from 'next/head'
-
 import styles from '../styles/pages/Home.module.css'
 
 export default function Home() {
@@ -23,7 +24,7 @@ export default function Home() {
           <Countdown />
         </div>
         <div>
-
+          <ChallengeBox />
         </div>
       </section>
     </div>