Regra da experiencia e troca de nivel funcional

pages/quiz.js

@@ -1,17 +1,19 @@
-import React from "react";
-import Head from "next/dist/shared/lib/head";
+import React, { useContext } from "react";
 import Background from "../src/components/Background";
-import Header from "../src/components/Header";
 import Widget from "../src/components/Widget";
 import db from "../db.json";
 import QuizContainer from "../src/components/QuizContainer";
 import Button from "../src/components/Button";
 import AlternativesForm from "../src/components/AlternativeForms";
 import BackLinkArrow from "../src/components/BackLinkArrow";
 import { useRouter } from "next/router";
+import { ExperienceContext } from "../src/contexts/ExperienceContext";
 
 function ResultWidget({ results }) {
  const router = useRouter();
+
+ // setCurrentExperience(amountExp);
+ // console.log(`AmountExp: ${amountExp}`);
  return (
  <Widget style={{ margin: "0 auto" }}>
  <Widget.Header>RESULTADO</Widget.Header>
@@ -58,6 +60,7 @@ function QuestionWidget({
  const questId = `question__${questionIndex}`;
  const isCorrect = selectedAlternative === question.answer;
  const hasAlternativeSelected = selectedAlternative !== undefined;
+ const { completeQuestion } = useContext(ExperienceContext);
  return (
  <>
  <Widget style={{ margin: "0 auto" }}>
@@ -89,6 +92,9 @@ function QuestionWidget({
  setIsQuestionSubmited(true);
  addResult(isCorrect);
  setTimeout(() => {
+ {
+ isCorrect && completeQuestion(1);
+ }
  onSubmit();
  setIsQuestionSubmited(false);
  setSelectedAlternative(undefined);
@@ -117,11 +123,9 @@ function QuestionWidget({
  onChange={() => setSelectedAlternative(alternativeIndex)}
  />
  {alternative}
- {console.log(isSelect)}
  </Widget.Topic>
  );
  })}
- {console.log(`selectAlternative: ${selectedAlternative}`)}
  <Button type="submit" disabled={!hasAlternativeSelected}>
  Confirmar
  </Button>

src/components/ExperienceBar/index.js

@@ -19,12 +19,18 @@ const ExperienceBar = styled.div`
  flex: 1;
  position: absolute;
  top: -1.5rem;
- content: "Experience";
+ /* content: "Experience"; */
  font-style: italic;
  text-align: right;
  }
 `;
 
+const Span = styled.span`
+ margin: 0 1%;
+ display: block;
+ width: 5%;
+`;
+
 function ExpBar() {
  const { currentExperience, experienceToNextLevel } =
  useContext(ExperienceContext);
@@ -33,32 +39,56 @@ function ExpBar() {
  );
  // console.log(level);
  return (
- <ExperienceBar
- as={motion.div}
- transition={{ delay: 1, duration: 0.5 }}
- variants={{
- show: { opacity: 1, y: "0" },
- hidden: { opacity: 0, y: "100%" },
- }}
- initial="hidden"
- animate="show"
- >
- <div
- style={{
- height: "100%",
- width: "100%",
+ <div style={{ width: "100%", display: "flex", alignItems: "baseline" }}>
+ <Span
+ as={motion.span}
+ transition={{ delay: 1, duration: 2 }}
+ variants={{
+ show: { opacity: 1 },
+ hidden: { opacity: 0 },
  }}
+ initial="hidden"
+ animate="show"
+ >
+ 0 XP
+ </Span>
+ <ExperienceBar
+ as={motion.div}
+ transition={{ delay: 1, duration: 0.5 }}
+ variants={{
+ show: { opacity: 1, y: "0" },
+ hidden: { opacity: 0, y: "100%" },
+ }}
+ initial="hidden"
+ animate="show"
  >
  <div
  style={{
- backgroundColor: `${db.theme.colors.red}`,
  height: "100%",
- borderRadius: "50px",
- width: `${percentToNextLevel}%`,
+ width: "100%",
  }}
- />
- </div>
- </ExperienceBar>
+ >
+ <div
+ style={{
+ backgroundColor: `${db.theme.colors.red}`,
+ height: "100%",
+ borderRadius: "50px",
+ width: `${percentToNextLevel}%`,
+ }}
+ />
+ </div>
+ </ExperienceBar>
+ <Span
+ as={motion.span}
+ transition={{ delay: 1, duration: 2 }}
+ variants={{
+ show: { opacity: 1 },
+ hidden: { opacity: 0 },
+ }}
+ initial="hidden"
+ animate="show"
+ >{`${experienceToNextLevel} XP`}</Span>
+ </div>
  );
 }
 

src/components/Header/index.js

@@ -107,9 +107,8 @@ Header.InfoBar = styled.div`
 function HeaderComplete() {
  const { level, currentExperience, experienceToNextLevel, name } =
  useContext(ExperienceContext);
- console.log(experienceToNextLevel);
+ console.log(`ExperienceToNextLevel: ${experienceToNextLevel}`);
  const namePart = name.split(" ");
- console.log(namePart[0]);
  return (
  <Header>
  <Header.Stats

src/contexts/ExperienceContext.js

@@ -4,17 +4,35 @@ export const ExperienceContext = createContext({});
 
 export function ExperienceProvider({ children }) {
  const [level, setLevel] = useState(1);
- const [currentExperience, setCurrentExperience] = useState(15);
+ const [currentExperience, setCurrentExperience] = useState(0);
  const experienceToNextLevel = Math.pow((level + 1) * 4, 2);
  const name = "William Mota";
 
  function levelUp() {
  setLevel(level + 1);
  }
+ const amount = 50;
+
+ function completeQuestion(questionsCorrect) {
+ let finalExperience = currentExperience + amount * questionsCorrect;
+ if (finalExperience >= experienceToNextLevel) {
+ finalExperience = finalExperience - experienceToNextLevel;
+ levelUp();
+ }
+
+ setCurrentExperience(finalExperience);
+ }
 
  return (
  <ExperienceContext.Provider
- value={{ level, currentExperience, levelUp, experienceToNextLevel, name }}
+ value={{
+ level,
+ currentExperience,
+ completeQuestion,
+ levelUp,
+ experienceToNextLevel,
+ name,
+ }}
  >
  {children}
  </ExperienceContext.Provider>