StatsBar funcionais

williamdlm · Oct 17, 2021 · db42471 · db42471
1 parent 7deefd2
commit db42471
Show file tree

Hide file tree

Showing 5 changed files with 111 additions and 34 deletions.
diff --git a/pages/index.js b/pages/index.js
@@ -10,6 +10,11 @@ export default function Home(props) {
  <ExperienceProvider
  level={props.level}
  currentExperience={props.currentExperience}
+ totalRounds={props.totalRounds}
+ pointsBarTypeZero={props.pointsBarTypeZero}
+ pointsBarTypeOne={props.pointsBarTypeOne}
+ pointsBarTypeTwo={props.pointsBarTypeTwo}
+ pointsBarTypeTree={props.pointsBarTypeTree}
  >
  <Background>
  <Head>
@@ -23,11 +28,24 @@ export default function Home(props) {
 }
 
 export const getServerSideProps = async (ctx) => {
- const { level, currentExperience } = ctx.req.cookies;
+ const {
+ level,
+ currentExperience,
+ totalRounds,
+ pointsBarTypeZero,
+ pointsBarTypeOne,
+ pointsBarTypeTwo,
+ pointsBarTypeTree,
+ } = ctx.req.cookies;
  return {
  props: {
  level: Number(level),
  currentExperience: Number(currentExperience),
+ totalRounds: Number(totalRounds),
+ pointsBarTypeZero: Number(pointsBarTypeZero),
+ pointsBarTypeOne: Number(pointsBarTypeOne),
+ pointsBarTypeTwo: Number(pointsBarTypeTwo),
+ pointsBarTypeTree: Number(pointsBarTypeTree),
  },
  };
 };
diff --git a/pages/quiz.js b/pages/quiz.js
@@ -66,7 +66,11 @@ function QuestionWidget({
  const hasAlternativeSelected = selectedAlternative !== undefined;
  const { completeQuestion } = useContext(ExperienceContext);
  const { handlePointsStats } = useContext(ExperienceContext);
+ const { handleRounds } = useContext(ExperienceContext);
  // console.log(question.type);
+ React.useEffect(() => {
+ handleRounds();
+ }, []);
  return (
  <Widget style={{ margin: "0 auto" }}>
  <Widget.Header>
@@ -101,6 +105,7 @@ function QuestionWidget({
  {
  isCorrect && completeQuestion(1);
  }
+
  {
  isCorrect && handlePointsStats(question.type);
  }
@@ -162,7 +167,8 @@ export default function QuizPage(props) {
  const [question, setQuestion] = React.useState(
  handleChangeQuestion(questionIndex)
  );
- const totalQuestions = 5;
+
+ const totalQuestions = 2;
 
  function handleChangeQuestion(type) {
  const questionsForType = dbQuestions.questions.filter((question) => {
@@ -191,10 +197,16 @@ export default function QuizPage(props) {
  setScreenState(screenStates.RESULT);
  }
  }
+
  return (
  <ExperienceProvider
  level={props.level}
  currentExperience={props.currentExperience}
+ totalRounds={props.totalRounds}
+ pointsBarTypeZero={props.pointsBarTypeZero}
+ pointsBarTypeOne={props.pointsBarTypeOne}
+ pointsBarTypeTwo={props.pointsBarTypeTwo}
+ pointsBarTypeTree={props.pointsBarTypeTree}
  >
  <Background>
  <QuizContainer>
@@ -218,11 +230,24 @@ export default function QuizPage(props) {
 }
 
 export const getServerSideProps = async (ctx) => {
- const { level, currentExperience } = ctx.req.cookies;
+ const {
+ level,
+ currentExperience,
+ totalRounds,
+ pointsBarTypeZero,
+ pointsBarTypeOne,
+ pointsBarTypeTwo,
+ pointsBarTypeTree,
+ } = ctx.req.cookies;
  return {
  props: {
  level: Number(level),
  currentExperience: Number(currentExperience),
+ totalRounds: Number(totalRounds),
+ pointsBarTypeZero: Number(pointsBarTypeZero),
+ pointsBarTypeOne: Number(pointsBarTypeOne),
+ pointsBarTypeTwo: Number(pointsBarTypeTwo),
+ pointsBarTypeTree: Number(pointsBarTypeTree),
  },
  };
 };
diff --git a/src/components/Main/index.js b/src/components/Main/index.js
@@ -3,6 +3,8 @@ import db from "../../../db.json";
 import { motion } from "framer-motion";
 import { useRouter } from "next/router";
 import StatsBar from "../StatsBar";
+import { useContext } from "react";
+import { ExperienceContext } from "../../contexts/ExperienceContext";
 
 const Main = styled.div`
  justify-content: space-between;
@@ -133,6 +135,7 @@ Main.MiniCard = styled.div`
 
 export function MainComplete() {
  const router = useRouter();
+ const { handleRounds } = useContext(ExperienceContext);
  return (
  <Main>
  <Main.PlayerArea
@@ -149,6 +152,9 @@ export function MainComplete() {
  <Main.MiniCard
  onClick={() => {
  router.push(`/quiz`);
+ // {
+ // handleRounds();
+ // }
  }}
  >
  <img

diff --git a/src/components/StatsBar/index.js b/src/components/StatsBar/index.js
@@ -1,6 +1,7 @@
 import React from "react";
 import styled from "styled-components";
 import db from "../../../db.json";
+import { ExperienceContext } from "../../contexts/ExperienceContext";
 const Container = styled.div`
  display: flex;
  flex-wrap: wrap;
@@ -24,6 +25,13 @@ const Desc = styled.label`
 `;
 
 export default function StatsBar() {
+ const {
+ totalRounds,
+ pointsBarTypeZero,
+ pointsBarTypeOne,
+ pointsBarTypeTwo,
+ pointsBarTypeTree,
+ } = React.useContext(ExperienceContext);
  return (
  <Container>
  <Bar>
@@ -32,7 +40,7 @@ export default function StatsBar() {
  backgroundColor: `${db.theme.colors.red}`,
  height: "100%",
  borderRadius: "50px",
- width: "70%",
+ width: `${(pointsBarTypeZero / totalRounds) * 100}%`,
  }}
  />
  <Desc>Força</Desc>
@@ -43,7 +51,7 @@ export default function StatsBar() {
  backgroundColor: `${db.theme.colors.blue}`,
  height: "100%",
  borderRadius: "50px",
- width: "25%",
+ width: `${(pointsBarTypeOne / totalRounds) * 100}%`,
  }}
  />
  <Desc>Magia</Desc>
@@ -54,7 +62,7 @@ export default function StatsBar() {
  backgroundColor: `${db.theme.colors.yellow}`,
  height: "100%",
  borderRadius: "50px",
- width: "50%",
+ width: `${(pointsBarTypeTwo / totalRounds) * 100}%`,
  }}
  />
  <Desc>Percepção</Desc>
@@ -65,7 +73,7 @@ export default function StatsBar() {
  backgroundColor: `${db.theme.colors.green}`,
  height: "100%",
  borderRadius: "50px",
- width: "78%",
+ width: `${(pointsBarTypeTree / totalRounds) * 100}%`,
  }}
  />
  <Desc>Agilidade</Desc>

diff --git a/src/contexts/ExperienceContext.js b/src/contexts/ExperienceContext.js
@@ -1,6 +1,7 @@
 import { createContext, useState, useEffect } from "react";
 import Cookies from "js-cookie";
 import db from "../../db.json";
+import { typeOf } from "react-is";
 
 export const ExperienceContext = createContext({});
 
@@ -12,54 +13,63 @@ export function ExperienceProvider({ children, ...rest }) {
  // prettier-ignore
  const experienceToNextLevel = Math.pow((level + 1) * 4, 2);
  const [titleUser, setTitleUser] = useState("Iniciante");
- const [totalPointsStatsBar, setTotalPointsStatsBar] = useState(10);
- const [pointsBarType, setPointsBarType] = useState({
- totalTypeZero: 5,
- totalTypeOne: 5,
- totalTypeTwo: 5,
- totalTypeTree: 5,
- });
+ const [totalRounds, setTotalRounds] = useState(rest.totalRounds ?? 1);
+ const [pointsBarTypeZero, setPointsBarTypeZero] = useState(
+ rest.pointsBarTypeZero ?? 0
+ );
+ const [pointsBarTypeOne, setPointsBarTypeOne] = useState(
+ rest.pointsBarTypeOne ?? 0
+ );
+ const [pointsBarTypeTwo, setPointsBarTypeTwo] = useState(
+ rest.pointsBarTypeTwo ?? 0
+ );
+ const [pointsBarTypeTree, setPointsBarTypeTree] = useState(
+ rest.pointsBarTypeTree ?? 0
+ );
  const name = "William Mota";
 
- let copy = Object.assign({}, pointsBarType);
  function handlePointsStats(type) {
- setTotalPointsStatsBar(totalPointsStatsBar + 1);
  switch (type) {
  case 0:
- console.log(pointsBarType);
- copy.totalTypeZero++;
- setPointsBarType(copy);
- console.log(copy);
+ setPointsBarTypeZero(pointsBarTypeZero + 1);
  break;
  case 1:
- copy.totalTypeOne++;
- setPointsBarType(copy);
- console.log(pointsBarType);
+ setPointsBarTypeOne(pointsBarTypeOne + 1);
  break;
  case 2:
- copy.totalTypeTwo++;
- setPointsBarType(copy);
- console.log(pointsBarType);
+ setPointsBarTypeTwo(pointsBarTypeTwo + 1);
  break;
  case 3:
- copy.totalTypeTree++;
- setPointsBarType(copy);
- console.log(pointsBarType);
+ setPointsBarTypeTree(pointsBarTypeTree + 1);
  break;
 
  default:
  break;
  }
  }
 
- useEffect(() => {
- console.log(pointsBarType);
- }, [pointsBarType]);
-
+ // useEffect(() => {
+ // console.log(totalRounds);
+ // }, [totalRounds]);
  useEffect(() => {
  Cookies.set("level", String(level));
  Cookies.set("currentExperience", String(currentExperience));
- }, [level, currentExperience]);
+ Cookies.set("totalRounds", String(totalRounds));
+ Cookies.set("pointsBarTypeZero", pointsBarTypeZero);
+ Cookies.set("pointsBarTypeOne", pointsBarTypeOne);
+ Cookies.set("pointsBarTypeTwo", pointsBarTypeTwo);
+ Cookies.set("pointsBarTypeTree", pointsBarTypeTree);
+ }, [
+ level,
+ currentExperience,
+ totalRounds,
+ pointsBarTypeZero,
+ pointsBarTypeOne,
+ pointsBarTypeTwo,
+ pointsBarTypeTree,
+ ]);
+
+ // console.log(typeof Cookies.get("pointsBarType"));
 
  function handleTitles() {
  if (level >= 50) {
@@ -78,6 +88,10 @@ export function ExperienceProvider({ children, ...rest }) {
  function levelUp() {
  setLevel(level + 1);
  }
+
+ function handleRounds() {
+ setTotalRounds(totalRounds + 1);
+ }
  const amount = 50;
  // prettier-ignore
  function completeQuestion(questionsCorrect) {
@@ -101,6 +115,12 @@ export function ExperienceProvider({ children, ...rest }) {
  titleUser,
  handleTitles,
  handlePointsStats,
+ totalRounds,
+ handleRounds,
+ pointsBarTypeZero,
+ pointsBarTypeOne,
+ pointsBarTypeTwo,
+ pointsBarTypeTree,
  }}
  >
  {children}