New version Figmattack 0.0.2

package.json

@@ -1,6 +1,6 @@
 {
  "name": "figma-plugin-react-template",
- "version": "0.0.1",
+ "version": "0.0.2",
  "description": "Figmattack: How to be an expert in UX/UI with a simple plugin !",
  "license": "ISC",
  "scripts": {

src/app/components/App.tsx → src/app/App.tsx

@@ -1,4 +1,4 @@
-import '../styles/ui.css';
+import './styles/ui.css';
 import { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 

src/app/CtxApp.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { AppContext } from './store/appContext';
-import App from './components/App';
+import App from './App';
 import { MemoryRouter, Routes, Route } from 'react-router-dom';
 import OnBoarding from './pages/OnBoarding/OnBoarding';
 import Home from './pages/Home/Home';
@@ -10,6 +10,7 @@ import StagePage from './pages/StagePage/StagePage';
 import KnowledgeTemple from './pages/KnowledgeTemple/KnowledgeTemple';
 import Basement from './pages/Basement/Basement';
 import MinifyPage from './pages/MinifyPage/MinifyPage';
+import UniverseRecommandation from './pages/UniverseRecommandation/UniverseRecommandation';
 
 export const CtxApp = () => {
  const [activePage, setActivePage] = useState('universes');
@@ -35,6 +36,7 @@ export const CtxApp = () => {
  <Route path="/basement" element={<Basement/>} />
  <Route path="/knowledges" element={<KnowledgeTemple />} />
  <Route path="/minify" element={<MinifyPage/>} />
+ <Route path="/recommandation" element={<UniverseRecommandation/>} />
  </Routes>
  </MemoryRouter>
  </AppContext.Provider>

src/app/components/Atoms/ActionButton/ActionButton.style.scss

@@ -21,6 +21,10 @@
  &:active {
  background-color: #1f1f1f;
  }
+
+ &:disabled{
+ background-color:#AFAFAF;
+ }
 }
 
 .action-button.action-button-outline {

src/app/components/Atoms/UniversButton/UniversButton.style.scss

@@ -20,17 +20,61 @@
  border: none;
 
  &:hover{
- background-color: #0C438D;
+ background-color: #661E1E;
  }
 
  &--outline {
- border: 2px solid #A90F0F;
+ border: 2px solid #FF0000;
  background-color: #FFF;
- color: #A90F0F;
+ color: #FF0000;
 
  &:hover{
- border-color: #A90F0F;
- color: #A90F0F;
+ border-color: #661E1E;
+ color: #661E1E;
+ background-color: #FFF;
+ }
+ }
+ }
+
+ &__craftmen_crossing {
+ background-color: #0FA93F;
+ color: #fff;
+ border: none;
+
+ &:hover{
+ background-color: #133F26;
+ }
+
+ &--outline {
+ border: 2px solid #0FA93F;
+ background-color: #FFF;
+ color: #0FA93F;
+
+ &:hover{
+ border-color: #133F26;
+ color: #133F26;
+ background-color: #FFF;
+ }
+ }
+ }
+
+ &__master_metropolis{
+ background-color: #9B51E0;
+ color: #fff;
+ border: none;
+
+ &:hover{
+ background-color: #4E1782;
+ }
+
+ &--outline {
+ border: 2px solid #9B51E0;
+ background-color: #FFF;
+ color: #9B51E0;
+
+ &:hover{
+ border-color: #4E1782;
+ color: #4E1782;
  background-color: #FFF;
  }
  }

src/app/components/Atoms/UniverseBanner/UniverseBanner.style.scss

@@ -0,0 +1,14 @@
+/** @format */
+
+.universe-banner {
+ background: var(--Primary-3-Blue-2, #3c2fed);
+ padding: 16px 40px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ color: #fff;
+ font-size: 16px;
+ font-style: normal;
+ font-weight: 700;
+ text-transform: uppercase;
+}

src/app/components/Atoms/UniverseBanner/UniverseBanner.tsx

@@ -0,0 +1,12 @@
+/** @format */
+
+import { useTranslation } from "react-i18next";
+import "./UniverseBanner.style.scss";
+
+const UniverseBanner = () => {
+ const { t } = useTranslation();
+
+ return <div className="universe-banner">{t("universeBanner")}</div>;
+};
+
+export default UniverseBanner;

src/app/components/Molecules/Quiz/Quiz.style.scss

@@ -7,6 +7,7 @@
  justify-content: center;
  align-items: flex-start;
  align-self: stretch;
+ gap: 24px;
  }
 
  &__title {
@@ -15,7 +16,7 @@
  font-style: normal;
  font-weight: 600;
  line-height: 28px;
- margin: 0 0 24px 0;
+ margin: 0;
  }
 
  &__label {
@@ -37,11 +38,11 @@
  background-color: #ffff;
  margin: 0;
 
- &:checked {
+ &--checked {
  border: 1px solid #7f56d9;
 
  &::before {
- transform: scale(1);
+ transform: scale(1) !important;
  }
  }
 

src/app/components/Molecules/Quiz/Quiz.tsx

@@ -1,11 +1,17 @@
 /** @format */
-import { FunctionComponent } from "react";
+import { FunctionComponent, useState } from "react";
 import Bem from "../../../helpers/Bem";
 import "./Quiz.style.scss";
 import { QuizProps } from "./Quiz.model";
 
 const Quiz: FunctionComponent<QuizProps> = ({ title, answers, onSelectAnswer, keyValue }) => {
  const b = Bem("quiz");
+ const [userAnswer, setUserAnswer] = useState(null);
+
+ const onSelectInput = (event) => {
+ onSelectAnswer(event);
+ setUserAnswer(event.target.value);
+ };
 
  return (
  <div
@@ -21,12 +27,13 @@ const Quiz: FunctionComponent<QuizProps> = ({ title, answers, onSelectAnswer, ke
  key={`answer-${i}`}
  >
  <input
- className={b("radio-button")}
+ className={b("radio-button", {checked: answer.value === userAnswer})}
  type="radio"
  name="answer"
  value={answer.value}
  tabIndex={0}
- onChange={onSelectAnswer}
+ onChange={onSelectInput}
+ required={true}
  />
  {answer.label}
  </label>

src/app/components/Organisms/AnswersSummaryCard/AnswersSummaryCard.style.scss

@@ -0,0 +1,45 @@
+/** @format */
+
+.answers-summary-card {
+ &__title {
+ margin: 0;
+ font-size: 24px;
+ font-weight: 600;
+ color: #1f1f1f;
+ }
+ &__question-container {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+ }
+
+ &__question-index {
+ font-size: 16px;
+ font-weight: 400;
+ color: #1f1f1f;
+ }
+
+ &__question-label {
+ font-size: 16px;
+ font-weight: 600;
+ color: #1f1f1f;
+ }
+
+ &__answer-container{
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ }
+
+ &__answer-label {
+ font-size: 12px;
+ color: #1f1f1f;
+ font-weight: 600;
+ }
+
+ &__answer-title {
+ font-size: 14px;
+ color: #1f1f1f;
+ font-weight: 400;
+ }
+}

src/app/components/Organisms/AnswersSummaryCard/AnswersSummaryCard.tsx

@@ -0,0 +1,57 @@
+/** @format */
+import SimpleCard from "../../Template/SimpleCard/SimpleCard";
+import { FunctionComponent } from "react";
+import { useTranslation } from "react-i18next";
+// import { ScoreCardProps } from "./ScoreCard.model";
+import Bem from "../../../helpers/Bem";
+import "./AnswersSummaryCard.style.scss";
+import ActionButton from "../../Atoms/ActionButton/ActionButton";
+import correctAnswerLogo from "../../../assets/svg/correctAnswer.svg";
+import wrongAnswerLogo from "../../../assets/svg/wrongAnswer.svg";
+
+const AnswersSummaryCard: FunctionComponent<any> = ({ questions, answers, onClickRetry }) => {
+ const { t } = useTranslation();
+ const b = Bem("answers-summary-card");
+
+ return (
+ <SimpleCard gap="24px">
+ <h2 className={b("title")}>Summary</h2>
+ {questions.map((question, index) => {
+ const currentAnswer = answers[index];
+ const { isCorrect, answer } = currentAnswer;
+ console.log(question)
+ return (
+ <div
+ className={b("question-container")}
+ key={`question-${index}`}
+ >
+ <span className={b("question-index")}>{`Question ${index + 1}.`}</span>
+ <div className={b("question-label")}>{question.title}</div>
+ <span className={b("answer-label")}>Your answer:</span>
+ <div className={b("answer-container")}>
+ <img
+ src={isCorrect ? correctAnswerLogo : wrongAnswerLogo}
+ alt={isCorrect ? "Correct answer logo" : "Wrong answer logo"}
+ />
+ <span className={b("answer-title")}>{answer}</span>
+ </div>
+ {
+ !isCorrect && <>
+ <span className={b("answer-label")}>Correct answer</span>
+ <span className={b("answer-title")}>{question.correctAnswer}</span>
+ </>
+ }
+ </div>
+ );
+ })}
+ <div className={b("buttons-block")}>
+ <ActionButton
+ label={t("scoreCard.retry")}
+ onClick={onClickRetry}
+ />
+ </div>
+ </SimpleCard>
+ );
+};
+
+export default AnswersSummaryCard;

src/app/components/Organisms/QuizCard/QuizCard.tsx

@@ -5,14 +5,25 @@ import ActionButton from "../../Atoms/ActionButton/ActionButton";
 import { FunctionComponent } from "react";
 import { useTranslation } from "react-i18next";
 
-const QuizCard: FunctionComponent<any> = ({ title, answers, onSelectAnswer, quizIndex, quizLength, onSubmitAnswer, quizKey }) => {
+const QuizCard: FunctionComponent<any> = ({ title, answers, onSelectAnswer, quizIndex, quizLength, onSubmitAnswer, quizKey, isButtonDisabled }) => {
  const { t } = useTranslation();
 
  return (
  <SimpleCard gap="24px">
- <span>{quizIndex +1}/{quizLength}</span>
- <Quiz title={title} answers={answers} onSelectAnswer={onSelectAnswer} keyValue={quizKey}/>
- <ActionButton label={t("submitLabel")} onClick={onSubmitAnswer}/>
+ <span>
+ {quizIndex + 1}/{quizLength}
+ </span>
+ <Quiz
+ title={title}
+ answers={answers}
+ onSelectAnswer={onSelectAnswer}
+ keyValue={quizKey}
+ />
+ <ActionButton
+ label={t("submitLabel")}
+ onClick={onSubmitAnswer}
+ disabled={isButtonDisabled}
+ />
  </SimpleCard>
  );
 };

src/app/components/Organisms/ScoreCard/ScoreCard.model.ts

@@ -1,4 +1,6 @@
 export type ScoreCardProps = {
  score: number;
  questionsLength : number;
+ onClickRetry: any;
+ onClickCheckResults: any;
 }