Applied new XP System

src/components/tree/XP.js

@@ -1,11 +1,24 @@
 import "./tree.css"
 
+
 export const XP = ({xp}) => {
-  //"#73FF79"
+  const xpTypes = [
+    {type: "Mental", amount: xp.mental, color: "#2F54EB"},
+    {type: "Physical", amount: xp.physical, color: "#6A1B9A"},
+    {type: "Financial", amount: xp.financial, color: "#FF9800"},
+    {type: "Social", amount: xp.social, color: "#CA99A9"},
+    {type: "Spiritual", amount: xp.spiritual, color: "#4CAF50"},
+    {type: "Overall", amount: xp.overall(), color: "#1A4117", class:"xp-text"},
+  ]
   return (
-    <div style={{display: "flex", flexDirection: "row"}}>
-      <span className={"xp-text"} style={{color: "#1A4117"}}>+{xp}</span>
-      <span className={"xp-text"} style={{marginLeft: 5}}>XP</span>
+    <div style={{display: "flex", flexDirection: "column"}}>
+      {xpTypes.map((xpt, index) => (
+        xpt.amount !== 0 &&
+        <div key={index} style={{display: "flex", flexDirection: "row"}}>
+          <span className={xpt.class} style={{color: xpt.color}}>{xpt.type}:</span>
+          <span className={xpt.class} style={{marginLeft: 5}}>+{xpt.amount} XP</span>
+        </div>
+      ))}
     </div>
   )
-}
+}

src/modules/skills.js

@@ -1,3 +1,5 @@
+import { XP } from "../objects/definitions";
+
 export const fetchSkillData = () => {
   return [
     {
@@ -8,7 +10,7 @@ export const fetchSkillData = () => {
       frequency: 1,
       interval: "day",
       timelimit: 3,
-      xp: 50,
+      xp: new XP(25, 0, 0, 0, 25),
       clickable: true,
     },
     {
@@ -19,7 +21,7 @@ export const fetchSkillData = () => {
       frequency: 1,
       interval: "day",
       timelimit: 7,
-      xp: 150,
+      xp: new XP(75, 0, 0, 0, 75),
       clickable: true,
     },
     {
@@ -30,23 +32,23 @@ export const fetchSkillData = () => {
       frequency: 4,
       interval: "week",
       timelimit: 14,
-      xp: 125,
+      xp: new XP(0, 125, 0, 0, 0),
       clickable: true,
     },
     {
       title: "???",
       clickable: false,
     },
     {
-      title: "Discipline",
-      level: 1,
+      title: "Download Now!",
+      level: 0,
       goal: "Download Skilltree and level up IRL",
-      xp: 4200,
+      xp: new XP(840, 840, 840, 840, 840),
       timelimit: 365,
       interval: "day",
       frequency: 1,
-      image: require("../images/skills/discipline.png"),
-      clickable: true,
+      image: require("../images/logos/Gold-Logo.png"),
+      clickable: true
     },
     {
       title: "???",

src/objects/definitions.js

@@ -0,0 +1,14 @@
+export class XP {
+    constructor(mental=0, physical=0, financial=0, social=0, spiritual=0) {
+        this.mental = mental;
+        this.physical = physical;
+        this.financial = financial;
+        this.social = social;
+        this.spiritual = spiritual;
+    }
+
+    // Returns the total XP gained
+    overall() {
+        return this.mental + this.physical + this.financial + this.social + this.spiritual;
+    };
+}