Section question done

tmol4 · Nov 22, 2024 · d5a24e2 · d5a24e2
1 parent be9800e
commit d5a24e2
Show file tree

Hide file tree

Showing 11 changed files with 159 additions and 61 deletions.
diff --git a/apps/frontend/src/app.tsx b/apps/frontend/src/app.tsx
@@ -1,24 +1,42 @@
 import { memo, useState, createContext } from "react";
 import { SectionHello } from "./components/sectionHello/sectionHello.js";
 import { Question } from "./components/question/question.jsx";
-import { SectionWithInfo } from './components/sectionWithInfo/sectionWithInfo.jsx'
+import { SectionWithInfo } from "./components/sectionWithInfo/sectionWithInfo.jsx";
 
-export const appContext = createContext({})
+export const appContext = createContext({});
 
 const AppComponent = function App() {
   const [page, setPage] = useState("Hello");
   const [currentState, setCurrentState] = useState({
     currentPage: "Hello",
-    balance: 0,
+    balance: 1230,
     insurance: 0,
     transport: "trolley",
     toTheEnd: 0,
+    buttonText1: "TEST text",
+    buttonText2: "TEST text",
+    buttonText3: "TEST text",
+    id1: -1,
+    id2: -2,
+    id3: -3,
+    text: "TEST text",
+    buttons: 3,
   });
-  return <>
-  <appContext.Provider value={{ page, setPage, currentState, setCurrentState }}>
-    {page == "Hello" ? <SectionHello /> : page == "Book" ? <SectionWithInfo /> : <Question insurance={currentState.insurance} currentMoney={currentState.balance} currentTransport={currentState.transport} buttons={3}/>}
-  </appContext.Provider>
-  </>;
+  return (
+    <>
+      <appContext.Provider
+        value={{ page, setPage, currentState, setCurrentState }}
+      >
+        {page == "Hello" ? (
+          <SectionHello />
+        ) : page == "Book" ? (
+          <SectionWithInfo />
+        ) : (
+          <Question />
+        )}
+      </appContext.Provider>
+    </>
+  );
 };
 
 export const App = memo(AppComponent);
diff --git a/apps/frontend/src/components/button/_button.sass b/apps/frontend/src/components/button/_button.sass
@@ -26,8 +26,11 @@ $onPrimary: var(--star4-color-on-primary)
     font-family: Jura
     font-size: 3.6rem
     color: $onSurface
+    line-height: 115%
+    text-align: center
     @include main.responde(mobile-low)
       font-size: 2.5rem
+      line-height: 110%
     & p
       text-wrap: pretty
   &__green

diff --git a/apps/frontend/src/components/header/_header.sass b/apps/frontend/src/components/header/_header.sass
@@ -6,6 +6,7 @@ $surface: var(--star4-color-surface)
 .header
   grid-row: 0/1
   min-height: 10rem
+  justify-self: stretch
   @include main.responde(mobile-low)
     height: 5rem
   display: flex

diff --git a/apps/frontend/src/components/message/_message.sass b/apps/frontend/src/components/message/_message.sass
diff --git a/apps/frontend/src/components/message/message.jsx b/apps/frontend/src/components/message/message.jsx
diff --git a/apps/frontend/src/components/question/_question.sass b/apps/frontend/src/components/question/_question.sass
@@ -2,11 +2,26 @@
   height: 100vh
   width: 100vw
   display: grid
+  justify-items: center
+  gap: 3rem
   grid-template-columns: minmax(27rem, 1fr)
-  grid-template-rows: 15rem 6rem minmax(15rem, 30rem) minmax(26rem, 30rem)
+  grid-template-rows: 10rem 6rem minmax(15rem, 30rem) minmax(26rem, 30rem)
   &__buttons
     display: flex
     justify-content: space-evenly
     align-items: center
     flex-direction: column
+  &__text
+    display: block
+    width: 100%
+    font-size: 2rem
+    font-weight: 900
+  &__event
+    width: 95%
+    border-radius: 40px
+    border: solid rgba(#E33045, 0.3) .3rem
+    text-align: center
+    display: flex
+    align-items: center
+    justify-content: center
 
diff --git a/apps/frontend/src/components/question/question.jsx b/apps/frontend/src/components/question/question.jsx
@@ -1,40 +1,75 @@
-import { memo } from "react";
+import { memo, useState, useContext } from "react";
 import { Header } from "../header/header";
 import { Statistics } from "./../statistics/statistics";
 import { Button } from "./../button/button";
+import { appContext } from "./../../app";
 import "./_question.sass";
 
-const QuestionComponent = function Question({
-  currentMoney,
-  insurance,
-  currentTransport,
-  buttons,
-  text,
-  buttonText1,
-  buttonText2,
-  buttonText3,
-  actionButton1,
-  actionButton2,
-  actionButton3,
-}) {
+const QuestionComponent = function Question() {
+  const { currentState, setCurrentState } = useContext(appContext);
+  const [time, setTime] = useState(currentState.toTheEnd);
   let mas = [];
-  for (let i = 0; i < buttons; i++) {
-    mas.push(<Button color="red" text="Инвестировать в новую компанию" onClick={i == 1 ? actionButton1 : i == 2 ? actionButton2 : actionButton3} />);
+  for (let i = 0; i < currentState.buttons; i++) {
+    mas.push(
+      <Button
+        key={i}
+        color="red"
+        text={
+          i == 1
+            ? currentState.buttonText1
+            : i == 2
+            ? currentState.buttonText2
+            : currentState.buttonText3
+        }
+        onClick={async () => {
+          const idToSend =
+            i == 1
+              ? currentState.id1
+              : i == 2
+              ? currentState.id2
+              : currentState.id3;
+          fetch("http://localhost:4000/", {
+            method: "POST",
+            headers: {
+              "Content-type": "application/json; charset=UTF-8",
+            },
+            body: JSON.stringify({
+              currentMoney: currentState.currentMoney,
+              idToSend,
+            }),
+          });
+          setTime(time - 1);
+          setCurrentState({
+            currentPage: "question",
+            balance: currentState.balance,
+            insurance: currentState.insurance,
+            transport: currentState.transport,
+            toTheEnd: time - 1,
+            buttonText1: currentState.buttonText1,
+            buttonText2: currentState.buttonText2,
+            buttonText3: currentState.buttonText3,
+            id1: currentState.id1,
+            id2: currentState.id2,
+            id3: currentState.id3,
+            text: currentState.text,
+            buttons: currentState.buttons,
+          });
+        }}
+      />
+    );
   }
   return (
     <div className="question-div">
       <Header />
       <Statistics
-        currentMoney={currentMoney}
-        currentTransport={currentTransport}
-        insurance={insurance}
+        currentMoney={currentState.balance}
+        currentTransport={currentState.currentTransport}
+        time={time}
       />
       <div className="question-div__event">
-        <h1 className="question-div__text">{text}</h1>
-      </div>
-      <div className="question-div__buttons">
-        {mas}
+        <h1 className="question-div__text">{currentState.text}</h1>
       </div>
+      <div className="question-div__buttons">{mas}</div>
     </div>
   );
 };

diff --git a/apps/frontend/src/components/questionMenu/questionMenu.jsx b/apps/frontend/src/components/questionMenu/questionMenu.jsx
@@ -3,20 +3,33 @@ import "./questionMenu.sass";
 import { appContext } from "../../app";
 
 const QuestionMenuComponent = function QuestionMenu() {
-  const { page, setPage, setCurrentState, currentState } = useContext(appContext)
+  const { page, setPage, setCurrentState, currentState } =
+    useContext(appContext);
 
   return (
     <div className="question-menu">
-      <p onClick={() => {
-        setCurrentState({
-          currentPage: page,
-          balance: currentState.balance,
-          insurance: currentState.insurance,
-          transport: currentState.transport,
-          toTheEnd: currentState.toTheEnd,
-        })
-        setPage("Book")}
-        }>?</p>
+      <p
+        onClick={() => {
+          setCurrentState({
+            currentPage: currentState.currentPage,
+            balance: currentState.balance,
+            insurance: currentState.insurance,
+            transport: currentState.transport,
+            toTheEnd: currentState.toTheEnd,
+            buttonText1: currentState.buttonText1,
+            buttonText2: currentState.buttonText2,
+            buttonText3: currentState.buttonText3,
+            id1: currentState.id1,
+            id2: currentState.id2,
+            id3: currentState.id3,
+            text: currentState.text,
+            buttons: currentState.buttons,
+          });
+          setPage("Book");
+        }}
+      >
+        ?
+      </p>
     </div>
   );
 };

diff --git a/apps/frontend/src/components/sectionHello/_sectionHello.sass b/apps/frontend/src/components/sectionHello/_sectionHello.sass
@@ -12,7 +12,7 @@ $surface: var(--star4-color-surface)
   height: 100vh
   display: grid
   grid-template-rows: 7rem minmax(59rem, 66rem) minmax(20rem, 25rem)
-  grid-template-columns: minmax(35rem, 79rem)
+  grid-template-columns: minmax(35rem, 64rem)
   @include main.responde(mobile-low)
     grid-template-rows: 6rem minmax(40rem, 50rem) minmax(5rem, 10rem)
     grid-template-columns: minmax(27rem, 45rem)

diff --git a/apps/frontend/src/components/sectionHello/sectionHello.tsx b/apps/frontend/src/components/sectionHello/sectionHello.tsx
@@ -8,13 +8,13 @@ import img from "../../img/sectionHello.png";
 
 const SectionHelloComponent = function SectionHello() {
   let { page, setPage, setCurrentState } = useContext(appContext);
-  console.log(Math.round(Math.random()))
+  console.log(Math.round(Math.random()));
   return (
     <div className="sectionHello">
       <Header />
       <section className="main-section">
         <h2 className="main-section__text">
-          Игра по финансовой грамотности: умеете ли вы распоряжаться деньгами
+          Игра по финансовой грамотности: умеете ли вы распоряжаться деньгами
         </h2>
         <img src={img}></img>
       </section>
@@ -25,10 +25,19 @@ const SectionHelloComponent = function SectionHello() {
           onClick={() => {
             setCurrentState({
               currentPage: "question",
-              balance: Math.round(Math.random() * 1000),
-              insurance: Math.round(Math.random()),
-              transport: Math.round(Math.random()),
-              toTheEnd: 0,})
+              balance: 1230,
+              insurance: 0,
+              transport: "trolley",
+              toTheEnd: 50,
+              buttonText1: "TEST text TEST text TEST text",
+              buttonText2: "TEST text",
+              buttonText3: "TEST text",
+              id1: -1,
+              id2: -2,
+              id3: -3,
+              text: "TEST text",
+              buttons: 3,
+            });
             setPage("question");
           }}
         />

diff --git a/apps/frontend/src/components/statistics/statistics.jsx b/apps/frontend/src/components/statistics/statistics.jsx
@@ -1,23 +1,30 @@
 import { memo } from "react";
-import "./_statistics.sass"
+import "./_statistics.sass";
 import cash from "./../../img/cash.png";
-import trolley from './../../img/trolley.png'
-import car from './../../img/car.png'
-import ins from './../../img/ins.png'
+import trolley from "./../../img/trolley.png";
+import car from "./../../img/car.png";
+import clock from "./../../img/clock.png";
 
-const StatisticsComponent = function Statistics({ currentMoney, currentTransport, insurance }) {
+const StatisticsComponent = function Statistics({
+  currentMoney,
+  currentTransport,
+  time,
+}) {
   return (
     <div className="statistics-bar">
       <div className="statistics-bar__money">
         <p className="statistics-bar__cash">{currentMoney}</p>
         <img src={cash} className="statistics-bar__img_1"></img>
       </div>
       <div className="statistics-bar__insurance">
-        <img src={ins} className="statistics-bar__img_3"></img>
-        <p className="statistics-bar__status">{insurance == 1 ? "YES" : "NO"}</p>
+        <p className="statistics-bar__status">{time}</p>
+        <img src={clock} className="statistics-bar__img_3"></img>
       </div>
       <div className="statistics-bar__transport">
-        <img src={currentTransport == 1 ? car : trolley} className="statistics-bar__img_2"></img>
+        <img
+          src={currentTransport == 1 ? car : trolley}
+          className="statistics-bar__img_2"
+        ></img>
       </div>
     </div>
   );