Update styles and features

Add stats features, delete cards comportment , mobile friendly and other .
solarpush · Nov 9, 2023 · 2276152 · 2276152
1 parent b678489
commit 2276152
Show file tree

Hide file tree

Showing 11 changed files with 242 additions and 118 deletions.
diff --git a/build/assets/index-20ca1b7b.css b/build/assets/index-20ca1b7b.css
diff --git a/build/assets/index-28140dc9.js → build/assets/index-b09084f5.js b/build/assets/index-28140dc9.js → build/assets/index-b09084f5.js
diff --git a/build/assets/index-d950d6bb.css b/build/assets/index-d950d6bb.css
diff --git a/build/index.html b/build/index.html
@@ -5,8 +5,8 @@
     <link rel="icon" type="image/svg+xml" href=https://solarpush.github.io/spaced-memo/vite.svg />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Spaced Mémo</title>
-    <script type="module" crossorigin src="https://solarpush.github.io/spaced-memo/assets/index-28140dc9.js"></script>
-    <link rel="stylesheet" href="https://solarpush.github.io/spaced-memo/assets/index-d950d6bb.css">
+    <script type="module" crossorigin src="https://solarpush.github.io/spaced-memo/assets/index-b09084f5.js"></script>
+    <link rel="stylesheet" href="https://solarpush.github.io/spaced-memo/assets/index-20ca1b7b.css">
   </head>
   <body>
     <div id="root"></div>

diff --git a/src/App.css b/src/App.css
@@ -1,5 +1,6 @@
 /* Content App style */
 .app_content {
+  width: 100%;
   display: flex;
   flex-direction: column;
   gap: 3rem;
@@ -9,24 +10,32 @@
   position: absolute;
   top: 30px;
   left: 20px;
-  width: 200px;
+  width: 140px;
+  @media screen and (max-width: 500px) {
+    width: 100px;
+  }
   &:hover {
     cursor: cell;
   }
 }
+h1 {
+  font-size: x-large;
+}
 .selector {
+  gap: 0.3rem;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
 }
-
+#forced_selector {
+  max-width: 200px;
+  width: 100%;
+}
 .card_and_stats_container {
   display: flex;
   flex-direction: column;
-  /* @media screen and (max-width: 500px) {
-    margin-top: 30px;
-  } */
+  width: 100%;
 }
 .stats_container {
   display: flex;
@@ -35,29 +44,30 @@
 }
 .stats_content {
   display: flex;
-  overflow-x: auto;
+  flex-direction: column;
 }
 
 .cards_container {
   display: flex;
   flex-direction: column;
   align-items: center;
+  width: 100%;
 }
+
 .cards_content {
   display: grid;
   grid-template-columns: 45% 45%;
   justify-content: space-around;
-  /* display: flex;
-  flex-direction: column; */
-  /* align-items: center; */
+
   width: 100%;
-  height: 60vh;
+  /* height: 60vh; */
   gap: 2rem;
-  overflow-y: auto;
+  /* overflow-y: auto; */
   @media screen and (max-width: 500px) {
     grid-template-columns: 85%;
   }
 }
+
 .form_container {
   /* background-color: red; */
   display: flex;
@@ -67,5 +77,5 @@
   gap: 0.3rem;
 }
 .card {
-  /* max-height: 350px; */
+  overflow: auto;
 }
diff --git a/src/App.jsx b/src/App.jsx
@@ -4,15 +4,14 @@ import CustomCard from "./components/card/CustomCard";
 import CustomDialog from "./components/dialog/CustomDialog";
 import CardForm from "./components/form/CardForm";
 import dayjs from "dayjs";
-import ForcedViewSelector from "./components/ForcedViewSelector/ForcedViewSelector";
+import ForcedViewSelector from "./components/forcedView/ForcedViewSelector";
 import { Dialog } from "primereact/dialog";
 import { Button } from "primereact/button";
 import spacedLogo from "./assets/spaced-memo.png";
 import first_Data from "./mock_data.json";
-import { ListBox } from "primereact/listbox";
 import { Toast } from "primereact/toast";
-import { Chip } from "primereact/chip";
 import { Knob } from "primereact/knob";
+import HelperTooltip from "./components/helper-tooltip/HelperTooltip";
 
 //The App function return Jsx.ELEMENT => return after compilation html and javascript vanilla only
 function App() {
@@ -44,30 +43,45 @@ function App() {
   function update_forcedView(selectedView) {
     setForcedView(selectedView);
   }
-  function delete_thisCard(data, cardId) {
-    return data.filter((f) => f.id !== cardId);
-  }
 
   function update_positionCard(card, upOrDown) {
     switch (upOrDown) {
       case "up":
         setData((oldState) => {
           let OnlyIfDelete = null;
-          const newState = oldState.map((element) => {
-            if (element.id === card.id) {
-              if (element.position <= 6) {
-                const newElement = {
-                  ...element,
-                  position: ++element.position,
-                  lastView: today,
-                };
+          const newState = oldState
+            .map((element) => {
+              if (element.id === card.id) {
+                if (element.position <= 6) {
+                  const newElement = {
+                    ...element,
+                    position: ++element.position,
+                    lastView: today,
+                  };
 
-                return newElement;
+                  return newElement;
+                }
+              } else return element;
+            })
+            .filter((element) => {
+              if (element !== undefined) {
+                return element;
               } else {
-                OnlyIfDelete = delete_thisCard(oldState, element.id);
+                const numberOf_cardsClosed =
+                  localStorage.getItem("CardsClosed");
+                if (
+                  numberOf_cardsClosed &&
+                  parseInt(numberOf_cardsClosed) < 100
+                ) {
+                  localStorage.setItem(
+                    "CardsClosed",
+                    (parseInt(numberOf_cardsClosed) + 1).toString()
+                  );
+                } else {
+                  localStorage.setItem("CardsClosed", "1");
+                }
               }
-            } else return element;
-          });
+            });
           if (OnlyIfDelete) {
             return OnlyIfDelete;
           }
@@ -77,13 +91,21 @@ function App() {
       case "down":
         setData((oldState) => {
           const newState = oldState.map((element) => {
-            if (element.id === card.id && element.position >= 2) {
-              const newElement = {
-                ...element,
-                position: --element.position,
-                lastView: today,
-              };
-              return newElement;
+            if (element.id === card.id) {
+              if (element.position >= 2) {
+                const newElement = {
+                  ...element,
+                  position: --element.position,
+                  lastView: today,
+                };
+                return newElement;
+              } else {
+                const newElement = {
+                  ...element,
+                  lastView: today,
+                };
+                return newElement;
+              }
             } else return element;
           });
           return newState;
@@ -184,22 +206,33 @@ function App() {
   };
 
   const CustomKnobs = (data) => {
-    return <Knob value={50} step={10} />;
+    const numberOf_cardsClosed = localStorage.getItem("CardsClosed");
+    return (
+      <Knob
+        value={numberOf_cardsClosed ? parseInt(numberOf_cardsClosed) : 0}
+        step={1}
+      />
+    );
   };
   useEffect(() => {
     if (data.length === 0) {
+      //Si pas de donnés intégration de la maquette de donnée dans le local storage
       localStorage.setItem("data", JSON.stringify(first_Data));
+      //Ajout de ces données par le hook useState
       setData(first_Data);
     } else {
+      //sinon Enregistrement des données par écrasement des données précédentes
       localStorage.setItem("data", JSON.stringify(data));
     }
+    //fonction executé  à chaques modification de data
   }, [data]);
 
   return (
     <div className="app_container">
       <div className="header_container">
+        <HelperTooltip />
         <img id="logo-app" src={spacedLogo} alt="Spaced-logo" />
-        <h1>Spaced Mémo App</h1>
+        <h1>Mémorisation espacée</h1>
         <Button onClick={() => setFormDisplay(true)}>Ajouter une carte</Button>
       </div>
       <div className="app_content">
@@ -259,11 +292,14 @@ function App() {
           </div>
           <div className="stats_container">
             <h3>Stats</h3>
-            <div className="stats_content"></div>
+            <div className="stats_content">
+              <span>Nombre de cartes terminés</span>
+              <CustomKnobs />
+            </div>
           </div>
         </div>
       </div>
-      <CustomKnobs data={data} />
+
       <Toast ref={toast} />
     </div>
   );

diff --git a/src/components/card/CustomCard.jsx b/src/components/card/CustomCard.jsx
@@ -11,7 +11,7 @@ const CustomCard = ({ data, actions }) => {
       className="card"
       title={data.title}
       subTitle={!data.form && "Niveau " + data.position}
-      style={{ maxHeight: data.form ? "800px" : "350px" }}
+      style={{ maxHeight: data.form ? "800px" : "450px" }}
     >
       {data.form ? data.form : <p>{data.ask}</p>}
       {!data.form && (

diff --git a/src/components/dialog/CustomDialog.jsx b/src/components/dialog/CustomDialog.jsx
@@ -9,15 +9,10 @@ const CustomDialog = ({ data, visible, actions }) => {
       <Button
         label="Non"
         icon="pi pi-times"
-        onClick={() => rejectButton()}
+        onClick={rejectButton}
         className="p-button-text"
       />
-      <Button
-        label="OuI"
-        icon="pi pi-check"
-        onClick={() => acceptButton()}
-        autoFocus
-      />
+      <Button label="OuI" icon="pi pi-check" onClick={acceptButton} autoFocus />
     </div>
   );
 
@@ -31,9 +26,11 @@ const CustomDialog = ({ data, visible, actions }) => {
   }
 
   return (
-    <Dialog header={data?.title} visible={visible} footer={footerContent}>
-      <p> Réponse : {data?.response}</p>
-    </Dialog>
+    <>
+      <Dialog header={data?.title} visible={visible} footer={footerContent}>
+        <p> Réponse : {data?.response}</p>
+      </Dialog>
+    </>
   );
 };
 

diff --git a/...ForcedViewSelector/ForcedViewSelector.jsx → ...ponents/forcedView/ForcedViewSelector.jsx b/...ForcedViewSelector/ForcedViewSelector.jsx → ...ponents/forcedView/ForcedViewSelector.jsx
@@ -9,7 +9,6 @@ const ForcedViewSelector = ({ forcedView, actions }) => {
     { position: 5, niveau: "Niveau 5" },
     { position: 6, niveau: "Niveau 6" },
     { position: 7, niveau: "Niveau 7" },
-    { position: 8, niveau: "Niveau 8" },
   ];
 
   return (

diff --git a/src/components/helper-tooltip/HelperTooltip.jsx b/src/components/helper-tooltip/HelperTooltip.jsx
@@ -0,0 +1,63 @@
+import { Dialog } from "primereact/dialog";
+import { useState } from "react";
+
+const HelperTooltip = () => {
+  const [isVisible, setIsVisible] = useState(false);
+  function helpFunction() {
+    setIsVisible(true);
+  }
+  function onHide() {
+    setIsVisible(false);
+  }
+  return (
+    <>
+      <div
+        style={{
+          position: "absolute",
+          top: "30px",
+          right: "30px",
+          display: "flex",
+          placeContent: "center",
+          width: "30px",
+          height: "30px",
+          border: "1px white dotted",
+          borderRadius: "50%",
+          cursor: "pointer",
+        }}
+        onClick={helpFunction}
+      >
+        <i
+          className="pi pi-question"
+          style={{ transform: "translateY(25%)" }}
+        ></i>
+      </div>
+      <Dialog
+        header={"Aide"}
+        visible={isVisible}
+        onHide={onHide}
+        style={{ width: "80vw" }}
+      >
+        <p>{`Pour chaques niveau correspond une durée de réactivation de l'information.
+        A chaques rendu un calcul est fais pour savoir si le dernière fois que la carte à été lue correspond au moins à cette durée.
+        
+        Les règles : 
+                - Soyez clair et verbeux dans vos questions.
+                - Soyez honnêtes avec vous-même.
+                - L'aciduité paye mieux que l'acharnement.
+                - Amusez-vous de vos réponses !
+        
+        Pour facilité l'accès :
+                - Ajoutez un rendez-vous réccurent dans votre agenda.
+                - Installez le site en tant qu'aplication mobile. (Chrome, parametre, ajouter à l'écran d'accueil).
+
+        Pour allez plus loin : 
+                - Créez un compte gitHub.
+                - Star le projet.
+                - Contribuez à celui-ci en rajoutant des fonctionnalités. (Je vous aiderez à le faire)
+        `}</p>
+      </Dialog>
+    </>
+  );
+};
+
+export default HelperTooltip;
diff --git a/src/index.css b/src/index.css
@@ -9,10 +9,11 @@ body {
 }
 #root {
   max-width: 100vw;
-  margin: 0 auto;
+  width: 100%;
+  min-width: 320px;
+  margin: 0;
   padding: 2rem;
   text-align: center;
-  min-width: 320px;
   min-height: 90vh;
 }
 
@@ -23,6 +24,7 @@ body {
   display: flex;
   flex-direction: column;
   align-items: center;
+  gap: 2rem;
 }
 .header_container {
   display: flex;