Add Character page

src/data/levels.js

@@ -12,28 +12,29 @@ const levels = [
           {
             folder_id: "xdVnM5YTVFEewTje",
             name: "Maitre des lames",
-            description: "assassin",
+            description: "Assassin redoutable",
           },
           {
             folder_id: "A0uWlUA0R29NFyzt", //Mauvaise organisation des dossiers => liste des Taïjutsu et non liste des tech. de MDT
             name: "Maitre du Taîjutsu",
-            description: "combattant",
+            description: "Combattant au corps à corps",
           },
           {
             folder_id: "iu3QsWHoalitMfaF",
             name: "Maitre du chakra",
-            description: "mage",
+            description: "Puissant manipulateurs des éléments",
           },
           {
             folder_id: "6ugsJPZf1DtuJKcF",
             name: "Maitre des 1000 objets",
-            description: "Bricoleur",
+            description: "Bricoleurs de génie",
           },
         ],
       },
       {
         name: "Jutsus",
         type: "mandatory",
+        abilityType: "action",
         options: [
           {
             folder_id: "kQxG5RFU69FLBPr1",
@@ -53,11 +54,38 @@ const levels = [
           },
         ],
       },
+      {
+        name: "Techniques secrètes",
+        type: "choice",
+        folder_id: "Vpz6mBEc10DHh6lT",
+        abilityType: "choiceDependent",
+      },
+      {
+        name: "Attaque à deux armes",
+        type: "mandatory",
+        item_id: "h3zlLt2yebORkfwU",
+        abilityType: "passive",
+      },
     ],
   },
   {
     _id: "2",
     name: "2",
+    unlocks: [
+      {
+        name: "Ruse",
+        type: "mandatory",
+        item_id: "hLeouAsaMvRQTbUQ",
+        abilityType: "bAction",
+      },
+      {
+        name: "Style de combat",
+        item_id: "6HB0Shhw6cUZNlX7",
+        type: "choice",
+        folder: "k6WTAkLIwEsTtyM6",
+        abilityType: "passive",
+      },
+    ],
   },
   {
     _id: "3",

src/layouts/Body/index.js

@@ -0,0 +1,8 @@
+import "./styles.css";
+
+const Body = (props) => {
+  console.log(props); //Object { level: 0 }
+  return <div className="body">lvl: {props.level}</div>;
+};
+
+export default Body;

src/layouts/Body/styles.css

@@ -0,0 +1 @@
+.footer {}

src/pages/Admin/index.js

@@ -70,14 +70,34 @@ const Admin = () => {
     console.log(itemId);
     console.log(e.target.parentNode.querySelector("textarea").value);
     let newDesc = e.target.parentNode.querySelector("textarea").value;
-    // allData.map((item) => {
+    allData.map((item) => {
-    //   if (item._id === itemId) {
+      if (item._id === itemId) {
-    //     item.system.description.value = newDesc;
+        item.system.description.value = newDesc;
-    //   }
+      }
-    // });
+    });
-    // console.log(allData.filter((item) => item._id === itemId)); // check if the name has been changed
+    console.log(allData.filter((item) => item._id === itemId)); // check if the name has been changed
   };
 
+  // const getItem = (itemId) => {
+  //   console.log(allData.filter((item) => item._id === itemId));
+  // };
+
+  // const getFolder = (folderId) => {
+  //   console.log(allData.filter((item) => item.folder === folderId));
+  //   return allData.filter((item) => item.folder === folderId);
+  // };
+
+  // const getItemsInFolder = (folderId) => {
+  //   let d = [];
+  //   let folder = getFolder(folderId);
+  //   for (let i = 0; i < folder.length; i++) {
+  //     if (getFolder(folder[i]._id).length !== 0)
+  //       getItemsInFolder(folder[i]._id);
+  //     else d.push(getItem(folder[i]._id));
+  //   }
+  //   console.log(d);
+  // };
+
   const renderSubItems = (subItems) => {
     if (subItems?.length === 0) {
       return subItems?.length !== 0 ? (
@@ -175,6 +195,7 @@ const Admin = () => {
   );
 };
 
+// Example object for seeing the data structure and what to set changeable
 // {
 //   _id: "kLHR7GDjdqHOA4bl",
 //   name: "Billes explosives",

src/pages/Character/index.js

@@ -2,13 +2,14 @@ import "./styles.css";
 
 import { useEffect, useState } from "react";
 
+import Body from "../../../src/layouts/Body/index.js";
 import Container from "../../layouts/Container/index.js";
 import allData from "../../data/dataFiltered.js";
 import levels from "../../data/levels.js";
 
 const Character = () => {
   const [data, setData] = useState();
-
+  var selectedLevel = 0;
   useEffect(() => {
     const filterDataByFolder = (folderId) => {
       const filteredData = allData.filter((item) => item.folder === folderId);
@@ -34,6 +35,19 @@ const Character = () => {
     setData(filteredData);
   }, [setData]);
 
+  let levelDom = document.getElementsByClassName("level");
+
+  for (let i = 0; i < levelDom.length; i++) {
+    levelDom[i].addEventListener("click", () => {
+      for (let j = 0; j < levelDom.length; j++) {
+        levelDom[j].classList.remove("selected");
+      }
+      levelDom[i].classList.add("selected");
+      selectedLevel = i + 1;
+      Body({ level: selectedLevel });
+    });
+  }
+
   const renderSubItems = (subItems) => {
     if (subItems?.length === 0) {
       return subItems?.length !== 0 ? (
@@ -82,7 +96,7 @@ const Character = () => {
           }}
         >
           {levels.map((item, id) => (
-            <div key={`level-${id}`}>
+            <div className={`level level-${id}`} key={`level-${id}`}>
               <h2>{item?.name}</h2>
             </div>
           ))}
@@ -97,6 +111,7 @@ const Character = () => {
             {renderSubItems(item?.subItems)}
           </div>
         ))} */}
+        <Body level={selectedLevel} />
       </Container>
     </div>
   );