Animações adicionadas a tela inicial

db.json

@@ -1,6 +1,6 @@
 {
- "title": "Quiz Harry Potter",
- "description": "Teste os seus conhecimentos sobre Harry Potter e vamos ver quantos feitiços você vai conseguir conjurar",
+ "title": "Quiz ",
+ "description": "Vamos ver o quanto de conhecimento você detem e vamos embarcar juntos nessa jornada do conhecimento.",
  "questions": [
  {
  "image": "https://res.cloudinary.com/dhmkfekt2/image/upload/v1633060616/a_vccpv5.gif",

package.json

@@ -6,6 +6,7 @@
  "start": "next start"
  },
  "dependencies": {
+ "framer-motion": "^4.1.17",
  "next": "latest",
  "react": "^17.0.2",
  "react-dom": "^17.0.2",

pages/api/db.js

@@ -0,0 +1,17 @@
+import db from "../../db.json";
+
+export default function dbHandler(request, response) {
+ // if (request.method === "OPTIONS") {
+ // response.status(200).end();
+ // return;
+ // }
+
+ // response.setHeader("Access-Control-Allow-Credentials", true);
+ // response.setHeader("Access-Control-Allow-Origin", "*");
+ // response.setHeader(
+ // "Access-Control-Allow-Methods",
+ // "GET,OPTIONS,PATCH,DELETE,POST,PUT"
+ // );
+
+ response.json(db);
+}

pages/index.js

@@ -2,6 +2,7 @@ import Header from "../src/components/Header";
 import Main from "../src/components/Main";
 import Background from "../src/components/Background";
 import Head from "next/head";
+import { motion } from "framer-motion";
 import { useRouter } from "next/router";
 
 export default function Home() {
@@ -12,16 +13,43 @@ export default function Home() {
  <title>TCC</title>
  </Head>
  <Header>
- <Header.Stats>
+ <Header.Stats
+ as={motion.section}
+ transition={{ delay: 0, duration: 1 }}
+ variants={{
+ show: { opacity: 1, x: "0" },
+ hidden: { opacity: 0, x: "100%" },
+ }}
+ initial="hidden"
+ animate="show"
+ >
  <Header.StatsPicture />
  <Header.StatsInfo>
  <p>William Mota</p>
  <p>Level 24</p>
  <p>xp 220</p>
  </Header.StatsInfo>
  </Header.Stats>
- <Header.Infos>
- <Header.InfoBar>
+ <Header.Infos
+ as={motion.section}
+ transition={{ delay: 0, duration: 1 }}
+ variants={{
+ show: { opacity: 1, y: "0" },
+ hidden: { opacity: 0, y: "100%" },
+ }}
+ initial="hidden"
+ animate="show"
+ >
+ <Header.InfoBar
+ as={motion.section}
+ transition={{ delay: 0.5, duration: 0.5 }}
+ variants={{
+ show: { opacity: 1, y: "0" },
+ hidden: { opacity: 0, y: "100%" },
+ }}
+ initial="hidden"
+ animate="show"
+ >
  <p>Title:</p>
  <p>The Lord of Logic</p>
  </Header.InfoBar>
@@ -30,10 +58,28 @@ export default function Home() {
  <p>Human</p>
  </Header.InfoBar>
  </Header.Infos>
- <Header.ExperienceBar />
+ <Header.ExperienceBar
+ as={motion.section}
+ transition={{ delay: 1, duration: 0.5 }}
+ variants={{
+ show: { opacity: 1, y: "0" },
+ hidden: { opacity: 0, y: "100%" },
+ }}
+ initial="hidden"
+ animate="show"
+ />
  </Header>
  <Main>
- <Main.PlayerArea>
+ <Main.PlayerArea
+ as={motion.section}
+ transition={{ delay: 1, duration: 0.5 }}
+ variants={{
+ show: { opacity: 1, x: "0" },
+ hidden: { opacity: 0, x: "-100%" },
+ }}
+ initial="hidden"
+ animate="show"
+ >
  <Main.MiniCard>
  <img
  className="icon classic"
@@ -65,7 +111,16 @@ export default function Home() {
  />
  </Main.MiniCard>
  </Main.PlayerArea>
- <Main.Ranking />
+ <Main.Ranking
+ as={motion.section}
+ transition={{ delay: 1.5, duration: 1 }}
+ variants={{
+ show: { opacity: 1 },
+ hidden: { opacity: 0 },
+ }}
+ initial="hidden"
+ animate="show"
+ />
  </Main>
  </Background>
  );

pages/quiz.js

@@ -6,6 +6,9 @@ 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";
+
 function ResultWidget({ results }) {
  return (
  <Widget>
@@ -14,7 +17,7 @@ function ResultWidget({ results }) {
  <p>{`Você acertou ${results.filter((x) => x).length} questões`}</p>
  <ul>
  {results.map((result, index) => (
- <li>
+ <li key={`result__${index}`}>
  #{index + 1} Resultado: {result === true ? "Acertou" : "Errou"}
  </li>
  ))}
@@ -50,8 +53,9 @@ function QuestionWidget({
  <>
  <Widget>
  <Widget.Header>
- {/* <BackLinkArrow href="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/" /> */}
+ <BackLinkArrow href="/" />
  <h3>
+ {/* <BackLinkArrow href="/" /> */}
  Pergunta {`${questionIndex + 1}`} de {`${totalQuestions}`}
  </h3>
  </Widget.Header>
@@ -70,7 +74,7 @@ function QuestionWidget({
  <h2>{question.title}</h2>
  <p>{question.description}</p>
 
- <form
+ <AlternativesForm
  onSubmit={(event) => {
  event.preventDefault();
  setIsQuestionSubmited(true);
@@ -84,11 +88,15 @@ function QuestionWidget({
  >
  {question.alternatives.map((alternative, alternativeIndex) => {
  const alternativeId = `alternative__${alternativeIndex}`;
+ const alternativeStatus = isCorrect ? "SUCCESS" : "ERROR";
+ const isSelect = selectedAlternative === alternativeIndex;
  return (
  <Widget.Topic
  as="label"
  htmlFor={alternativeId}
  key={alternativeId}
+ data-selected={isSelect}
+ data-status={isQuestionSubmited && alternativeStatus}
  >
  <input
  style={{
@@ -100,6 +108,7 @@ function QuestionWidget({
  onChange={() => setSelectedAlternative(alternativeIndex)}
  />
  {alternative}
+ {console.log(isSelect)}
  </Widget.Topic>
  );
  })}
@@ -109,7 +118,7 @@ function QuestionWidget({
  </Button>
  {isQuestionSubmited && isCorrect && <p>Você acertou!</p>}
  {isQuestionSubmited && !isCorrect && <p>Você errou!</p>}
- </form>
+ </AlternativesForm>
  {/* <pre>{JSON.stringify(question, null, 4)}</pre> */}
  </Widget.Content>
  </Widget>

src/components/AlternativeForms/index.js

@@ -0,0 +1,24 @@
+import styled from "styled-components";
+
+const AlternativesForm = styled.form`
+ label {
+ &[data-selected="true"] {
+ background-color: ${({ theme }) => theme.colors.blue};
+
+ &[data-status="SUCCESS"] {
+ background-color: ${({ theme }) => theme.colors.success};
+ }
+ &[data-status="ERROR"] {
+ background-color: ${({ theme }) => theme.colors.wrong};
+ }
+ }
+ &:focus {
+ opacity: 1;
+ }
+ }
+ button {
+ margin-top: 24px;
+ }
+`;
+
+export default AlternativesForm;

src/components/BackLinkArrow/index.js

@@ -0,0 +1,39 @@
+import React from "react";
+import styled from "styled-components";
+import Link from "../Link";
+
+const StyledLink = styled(Link)`
+ transition: 0.3s;
+ &:hover {
+ opacity: 0.5;
+ }
+`;
+
+const SVG = styled.svg`
+ vertical-align: middle;
+`;
+
+export default function BackLinkArrow({ href }) {
+ return (
+ <StyledLink
+ href={href}
+ style={{ width: "24px", height: "24px", display: "inline-block" }}
+ >
+ <SVG
+ xmlns="http:https://www.w3.org/2000/svg"
+ width="24"
+ height="24"
+ viewBox="0 0 24 24"
+ fill="none"
+ >
+ <path
+ fillRule="evenodd"
+ clipRule="evenodd"
+ d="M15.41 7.41L14 6L8 12L14 18L15.41 16.59L10.83 12L15.41 7.41Z"
+ fill="white"
+ fillOpacity="0.87"
+ />
+ </SVG>
+ </StyledLink>
+ );
+}

src/components/Link/index.js

@@ -0,0 +1,11 @@
+import React from "react";
+import NextLink from "next/link";
+
+export default function Link({ children, href, ...props }) {
+ return (
+ <NextLink href={href} passHref>
+ {/* eslint-disable-next-line react/jsx-props-no-spreading */}
+ <a {...props}>{children}</a>
+ </NextLink>
+ );
+}

yarn.lock

@@ -147,7 +147,7 @@
  "@babel/helper-validator-identifier" "^7.14.9"
  to-fast-properties "^2.0.0"
 
-"@emotion/is-prop-valid@^0.8.8":
+"@emotion/is-prop-valid@^0.8.2", "@emotion/is-prop-valid@^0.8.8":
  version "0.8.8"
  resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz#db28b1c4368a259b60a97311d6a952d4fd01ac1a"
  integrity sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==
@@ -867,6 +867,26 @@ foreach@^2.0.5:
  resolved "https://registry.yarnpkg.com/foreach/-/foreach-2.0.5.tgz#0bee005018aeb260d0a3af3ae658dd0136ec1b99"
  integrity sha1-C+4AUBiusmDQo6865ljdATbsG5k=
 
+framer-motion@^4.1.17:
+ version "4.1.17"
+ resolved "https://registry.yarnpkg.com/framer-motion/-/framer-motion-4.1.17.tgz#4029469252a62ea599902e5a92b537120cc89721"
+ integrity sha512-thx1wvKzblzbs0XaK2X0G1JuwIdARcoNOW7VVwjO8BUltzXPyONGAElLu6CiCScsOQRI7FIk/45YTFtJw5Yozw==
+ dependencies:
+ framesync "5.3.0"
+ hey-listen "^1.0.8"
+ popmotion "9.3.6"
+ style-value-types "4.1.4"
+ tslib "^2.1.0"
+ optionalDependencies:
+ "@emotion/is-prop-valid" "^0.8.2"
+
+[email protected]:
+ version "5.3.0"
+ resolved "https://registry.yarnpkg.com/framesync/-/framesync-5.3.0.tgz#0ecfc955e8f5a6ddc8fdb0cc024070947e1a0d9b"
+ integrity sha512-oc5m68HDO/tuK2blj7ZcdEBRx3p1PjrgHazL8GYEpvULhrtGIFbQArN6cQS2QhW8mitffaB+VYzMjDqBxxQeoA==
+ dependencies:
+ tslib "^2.1.0"
+
 fsevents@~2.3.1:
  version "2.3.2"
  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a"
@@ -979,6 +999,11 @@ [email protected]:
  resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
  integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
 
+hey-listen@^1.0.8:
+ version "1.0.8"
+ resolved "https://registry.yarnpkg.com/hey-listen/-/hey-listen-1.0.8.tgz#8e59561ff724908de1aa924ed6ecc84a56a9aa68"
+ integrity sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q==
+
 hmac-drbg@^1.0.1:
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1"
@@ -1552,6 +1577,16 @@ [email protected]:
  dependencies:
  ts-pnp "^1.1.6"
 
+[email protected]:
+ version "9.3.6"
+ resolved "https://registry.yarnpkg.com/popmotion/-/popmotion-9.3.6.tgz#b5236fa28f242aff3871b9e23721f093133248d1"
+ integrity sha512-ZTbXiu6zIggXzIliMi8LGxXBF5ST+wkpXGEjeTUDUOCdSQ356hij/xjeUdv0F8zCQNeqB1+PR5/BB+gC+QLAPw==
+ dependencies:
+ framesync "5.3.0"
+ hey-listen "^1.0.8"
+ style-value-types "4.1.4"
+ tslib "^2.1.0"
+
 postcss-value-parser@^4.0.2:
  version "4.1.0"
  resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz#443f6a20ced6481a2bda4fa8532a6e55d789a2cb"
@@ -1909,6 +1944,14 @@ [email protected]:
  dependencies:
  ansi-regex "^5.0.0"
 
+[email protected]:
+ version "4.1.4"
+ resolved "https://registry.yarnpkg.com/style-value-types/-/style-value-types-4.1.4.tgz#80f37cb4fb024d6394087403dfb275e8bb627e75"
+ integrity sha512-LCJL6tB+vPSUoxgUBt9juXIlNJHtBMy8jkXzUJSBzeHWdBu6lhzHqCvLVkXFGsFIlNa2ln1sQHya/gzaFmB2Lg==
+ dependencies:
+ hey-listen "^1.0.8"
+ tslib "^2.1.0"
+
 styled-components@^5.2.3:
  version "5.3.1"
  resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-5.3.1.tgz#8a86dcd31bff7049c2ed408bae36fa23f03f071a"
@@ -2011,6 +2054,11 @@ ts-pnp@^1.1.6:
  resolved "https://registry.yarnpkg.com/ts-pnp/-/ts-pnp-1.2.0.tgz#a500ad084b0798f1c3071af391e65912c86bca92"
  integrity sha512-csd+vJOb/gkzvcCHgTGSChYpy5f1/XKNsmvBGO4JXS+z1v2HobugDz4s1IeFXM3wZB44uczs+eazB5Q/ccdhQw==
 
+tslib@^2.1.0:
+ version "2.3.1"
+ resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.3.1.tgz#e8a335add5ceae51aa261d32a490158ef042ef01"
+ integrity sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==
+
 [email protected]:
  version "0.0.0"
  resolved "https://registry.yarnpkg.com/tty-browserify/-/tty-browserify-0.0.0.tgz#a157ba402da24e9bf957f9aa69d524eed42901a6"