Funcionalidade dos titulo adicionada

db.json

@@ -39,6 +39,13 @@
  "pirate": "https://res.cloudinary.com/dhmkfekt2/image/upload/v1633060704/018-pirate_kt1uiw.png",
  "citizen": "https://res.cloudinary.com/dhmkfekt2/image/upload/v1633286796/017-robin_hood_zzwzha.png"
  },
+ "titulos": [
+ "O Aprendiz",
+ "Intelectual",
+ "Mestre das ciencias",
+ "O Sabio",
+ "Lorde do conhecimento"
+ ],
  "theme": {
  "colors": {
  "mainBg": "#000C1E",

pages/quiz.js

@@ -65,8 +65,8 @@ function QuestionWidget({
  const isCorrect = selectedAlternative === question.answer;
  const hasAlternativeSelected = selectedAlternative !== undefined;
  const { completeQuestion } = useContext(ExperienceContext);
- console.log(question);
- // console.log(questionIndex);
+ // console.log(question);
+ console.log(selectedAlternative);
  return (
  <Widget style={{ margin: "0 auto" }}>
  <Widget.Header>
@@ -96,15 +96,13 @@ function QuestionWidget({
  event.preventDefault();
  setIsQuestionSubmited(true);
  addResult(isCorrect);
- console.log(`before ${question}`);
  setTimeout(() => {
  {
  isCorrect && completeQuestion(1);
  }
- console.log(`after ${question}`);
  onSubmit();
- setIsQuestionSubmited(false);
  setSelectedAlternative(undefined);
+ setIsQuestionSubmited(false);
  }, 1 * 2000);
  }}
  >
@@ -127,7 +125,7 @@ function QuestionWidget({
  id={alternativeId}
  type="radio"
  name={questId}
- onChange={() => setSelectedAlternative(alternativeIndex)}
+ onClick={() => setSelectedAlternative(alternativeIndex)}
  />
  {alternative}
  </Widget.Topic>
@@ -159,10 +157,9 @@ export default function QuizPage(props) {
  const [question, setQuestion] = React.useState(
  handleChangeQuestion(questionIndex)
  );
- const totalQuestions = 2;
+ const totalQuestions = 5;
 
  function handleChangeQuestion(type) {
- console.log("entrou");
  const questionsForType = dbQuestions.questions.filter((question) => {
  return question.type === type;
  });

questions.json

@@ -15,18 +15,18 @@
  ]
  },
  {
- "image": "https://cdn.dribbble.com/users/1129235/screenshots/3123420/media/6802b1a795f43fb038aa3c7f60c88ee8.gif",
+ "image": "https://i.giphy.com/media/441veZw9vyx56/giphy.webp",
  "type": 0,
  "title": "De onde é a invenção do chuveiro elétrico?",
- "description": "'O ser humano só evolui a partir da necessidade.' -Vivaldo Neto",
+ "description": "Alguns paises paises utilizam gás para aquecer a água.",
  "answer": 2,
  "alternatives": ["França", "Inglaterra", "Brasil", "Austrália", "Itália"]
  },
  {
- "image": "https://cdn.dribbble.com/users/1129235/screenshots/3123420/media/6802b1a795f43fb038aa3c7f60c88ee8.gif",
+ "image": "https://i.giphy.com/media/l3nWhI38IWDofyDrW/giphy.webp",
  "type": 0,
  "title": "Qual o nome do presidente do Brasil que ficou conhecido como Jango?",
- "description": "'O ser humano só evolui a partir da necessidade.' -Vivaldo Neto",
+ "description": "Historia do Brasil, essa eu sei que você sabê...",
  "answer": 4,
  "alternatives": [
  "Jânio Quadros",
@@ -38,7 +38,7 @@
  },
  {
  "image": "https://res.cloudinary.com/dhmkfekt2/image/upload/v1633060616/a_vccpv5.gif",
- "type": 1,
+ "type": 0,
  "title": "Quais o menor e o maior país do mundo??",
  "description": "Essa é para aquecer...",
  "answer": 0,
@@ -51,15 +51,15 @@
  },
  {
  "image": "https://res.cloudinary.com/dhmkfekt2/image/upload/v1633060616/a_vccpv5.gif",
- "type": 1,
+ "type": 0,
  "title": "Qual desses Países não é Europeu?",
  "description": "Essa é para aquecer...",
  "answer": 2,
  "alternatives": ["Macedonia", "Espanha", "Casaquistão", "Polonia"]
  },
  {
  "image": "https://res.cloudinary.com/dhmkfekt2/image/upload/v1633060616/a_vccpv5.gif",
- "type": 1,
+ "type": 0,
  "title": "O Brasil é de que continente?",
  "description": "Essa é para aquecer...",
  "answer": 1,
@@ -70,6 +70,97 @@
  "Europa",
  "Asia"
  ]
+ },
+ {
+ "image": "https://i.giphy.com/media/MdeSslU80bVsTtWxEh/giphy.webp",
+ "type": 1,
+ "title": "A energia armazenada em uma bateria é:",
+ "description": "Voltz fazer errar...",
+ "answer": 0,
+ "alternatives": ["Quimica", "Eletrica", "Mecânica"]
+ },
+ {
+ "image": "https://i.giphy.com/media/gw3JAy8LMvvw5sfS/giphy.webp",
+ "type": 1,
+ "title": "Quem foi responsável pelo desenvolvimento da Teoria da Relatividade Geral?",
+ "description": "É relativo...",
+ "answer": 2,
+ "alternatives": [
+ "Isaac Newton",
+ "Charles Darwin",
+ "Albert Einstein",
+ "Thomas Edson"
+ ]
+ },
+ {
+ "image": "https://i.giphy.com/media/l2YSowMXk0Qu0DFm0/giphy.webp",
+ "type": 1,
+ "title": "O processo de conversão do vapor de água para água na superficie de um copo de vidro frio é conhecido como:",
+ "description": "Não esqueça de se hidratar...",
+ "answer": 1,
+ "alternatives": ["Evaporação", "Condensação", "Vaporização", "Ebulição"]
+ },
+ {
+ "image": "https://i.giphy.com/media/l0HlxOxMcpxMxDi8M/giphy.webp",
+ "type": 2,
+ "title": "O que está errado na frase a seguir? 'He were doing the exercises'",
+ "description": "Do you speak english?",
+ "answer": 3,
+ "alternatives": ["the", "exercises", "doing ", "were", "He"]
+ },
+ {
+ "image": "https://i.giphy.com/media/l0MYGkpex3mWWZVni/giphy.webp",
+ "type": 2,
+ "title": "O que significa 'I wonder...'",
+ "description": "Hm...",
+ "answer": 0,
+ "alternatives": [
+ "'Eu gostaria de saber...'",
+ "'Eu desejo...'",
+ "'Eu prefiro...' ",
+ "'Eu quero...'"
+ ]
+ },
+ {
+ "image": "https://i.giphy.com/media/k8mfzfxm6WpqHFBg6o/giphy.webp",
+ "type": 3,
+ "title": "No rugby, ou futebol americano, qual é o formato da bola usada durante o jogo?",
+ "description": "Mostre seu entendimento sobre esportes.",
+ "answer": 1,
+ "alternatives": [
+ "Quadrada",
+ "Oval",
+ "Redonda",
+ "Triangular",
+ "Retangular"
+ ]
+ },
+ {
+ "image": "https://i.giphy.com/media/oQt5YnUZmXq02ad84u/giphy.webp",
+ "type": 3,
+ "title": "No vôlei, o que acontece quando a bola que um jogador tocou bate na rede?",
+ "description": "",
+ "answer": 3,
+ "alternatives": [
+ "É ponto para o time do jogador",
+ "O time do jogador perde 1 ponto",
+ "O time do jogador é eliminado e o jogo acaba",
+ "É ponto para o time adversário",
+ "É ponto para os dois times"
+ ]
+ },
+ {
+ "image": "https://i.giphy.com/media/3GnKKEw2v7bXi/giphy.webp",
+ "type": 4,
+ "title": "Qual é a Formação inicial dos Vingadores?",
+ "description": "Vingadores avante!!",
+ "answer": 1,
+ "alternatives": [
+ "Homem-Formiga, Vespa, Homem de Ferro, Thor e Hulk",
+ "Capitão América, Homem de Ferro, Hulk, Thor, Viúva Negra e Gavião Arqueiro",
+ "Homem-Formiga, Vespa, Doutor Estranho, Namor, Feiticeira Escarlate e Thor (Jane Foster)",
+ "Wolverine, Capitão América, Homem de Ferro, Hulk e Senhor Fantástico"
+ ]
  }
  ]
 }

src/components/Header/index.js

@@ -2,7 +2,7 @@ import styled from "styled-components";
 import { motion } from "framer-motion";
 import ExperienceBar from "../../components/ExperienceBar";
 import { ExperienceContext } from "../../contexts/ExperienceContext";
-import { useContext } from "react";
+import { useContext, useEffect } from "react";
 
 const Header = styled.div`
  margin: 1% auto 5% auto;
@@ -105,9 +105,18 @@ Header.InfoBar = styled.div`
 `;
 
 function HeaderComplete() {
- const { level, currentExperience, experienceToNextLevel, name } =
- useContext(ExperienceContext);
+ const {
+ level,
+ currentExperience,
+ experienceToNextLevel,
+ titleUser,
+ handleTitles,
+ name,
+ } = useContext(ExperienceContext);
  const namePart = name.split(" ");
+ useEffect(() => {
+ handleTitles();
+ }, []);
  return (
  <Header>
  <Header.Stats
@@ -148,12 +157,12 @@ function HeaderComplete() {
  initial="hidden"
  animate="show"
  >
- <p>Title:</p>
- <p>The Lord of Logic</p>
+ <p>Titulo:</p>
+ <p>{titleUser}</p>
  </Header.InfoBar>
  <Header.InfoBar>
- <p>Class:</p>
- <p>Human</p>
+ <p>Classe:</p>
+ <p>Humano</p>
  </Header.InfoBar>
  </Header.Infos>
  <ExperienceBar />

src/components/Main/index.js

@@ -41,7 +41,7 @@ Main.PlayerArea = styled.div`
  &::after {
  right: 10%;
  position: absolute;
- bottom: 6.5rem;
+ bottom: 7rem;
  display: block;
  margin: 0 auto;
  content: "";
@@ -100,6 +100,7 @@ Main.MiniCard = styled.div`
  height: 5rem;
  border-radius: 10px;
  background-color: ${({ theme }) => theme.colors.secondary};
+ cursor: pointer;
 
  * {
  margin: 0;
@@ -145,22 +146,23 @@ export function MainComplete() {
  animate="show"
  >
  <Main.BlockMiniCard>
- <Main.MiniCard>
+ <Main.MiniCard
+ onClick={() => {
+ router.push(`/quiz`);
+ }}
+ >
  <img
  className="icon classic"
  src="https://res.cloudinary.com/dhmkfekt2/image/upload/v1633396500/swords_rktxam.svg"
- onClick={() => {
- router.push(`/quiz`);
- }}
  />
- <p>Classic</p>
+ <p>Classico</p>
  </Main.MiniCard>
  <Main.MiniCard>
  <img
  className="icon"
  src="https://res.cloudinary.com/dhmkfekt2/image/upload/v1633054930/scroll_jbw9wv.png"
  />
- <p>About</p>
+ <p>Sobre</p>
  </Main.MiniCard>
  </Main.BlockMiniCard>
  <Main.BlockMiniCard>

src/contexts/ExperienceContext.js

@@ -1,5 +1,6 @@
 import { createContext, useState, useEffect } from "react";
 import Cookies from "js-cookie";
+import db from "../../db.json";
 
 export const ExperienceContext = createContext({});
 
@@ -10,13 +11,28 @@ export function ExperienceProvider({ children, ...rest }) {
  );
  // prettier-ignore
  const experienceToNextLevel = Math.pow((level + 1) * 4, 2);
+ const [titleUser, setTitleUser] = useState("Iniciante");
  const name = "William Mota";
 
  useEffect(() => {
  Cookies.set("level", String(level));
  Cookies.set("currentExperience", String(currentExperience));
  }, [level, currentExperience]);
 
+ function handleTitles() {
+ if (level >= 50) {
+ setTitleUser(db.titulos[4]);
+ } else if (level >= 30) {
+ setTitleUser(db.titulos[3]);
+ } else if (level >= 20) {
+ setTitleUser(db.titulos[2]);
+ } else if (level >= 10) {
+ setTitleUser(db.titulos[1]);
+ } else if (level >= 5) {
+ setTitleUser(db.titulos[0]);
+ }
+ }
+
  function levelUp() {
  setLevel(level + 1);
  }
@@ -31,7 +47,7 @@ export function ExperienceProvider({ children, ...rest }) {
 
  setCurrentExperience(finalExperience);
  }
-
+ console.log(db.titulos[0]);
  return (
  <ExperienceContext.Provider
  value={{
@@ -41,6 +57,8 @@ export function ExperienceProvider({ children, ...rest }) {
  levelUp,
  experienceToNextLevel,
  name,
+ titleUser,
+ handleTitles,
  }}
  >
  {children}