finished build of skills page

src/components/levels/Levels.js

@@ -8,9 +8,9 @@ export const Levels = () => {
     const [levelList, setLevelList] = useState([])
     const {characterId} = useParams()
 
-    useEffect(() => { LevelRepository.getAll(characterId).then(setLevelList) }, [])
+    useEffect(() => { LevelRepository.getAll(parseInt(characterId)).then(setLevelList) }, [])
     const syncLevels = () => {
-        LevelRepository.getAll(characterId).then(setLevelList)
+        LevelRepository.getAll(parseInt(characterId)).then(setLevelList)
     }
 
     return (
@@ -27,7 +27,7 @@ export const Levels = () => {
                             <div className="levelgridColumn5">HP Total</div>
                         </div>
                         {levelList.map(level =>{
-                            return <LevelRow level={level} updater={syncLevels} characterId={characterId} last={levelList.length}/>
+                            return <LevelRow level={level} updater={syncLevels} characterId={parseInt(characterId)} last={levelList.length}/>
                         })}
                     </section>
                     <h3>special</h3>

src/components/skills/CharacterSelect.css

@@ -12,8 +12,30 @@ section, h3{
     display: flex;
     overflow-x: scroll;
 }
-.detailColumn1{width:8rem}
-.detailColumn2{width:3rem}
-.detailColumn3{width:3rem}
-.detailColumn4{width:3rem}
-.detailColumn5{width:3rem}
+.detailColumn1{
+    width:8rem;
+    height: 5rem;
+    display: flex;
+    align-items: center;}
+.detailColumn2{
+    width:3rem;
+    height: 5rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;}
+.crossClassSkill{
+    color:red;
+    background-color: black;
+    height: 5rem;
+    font-size: 24px;
+}
+.classSkill{
+    color:greenyellow;
+    background-color: black;
+    height: 5rem;
+    font-size: 24px;
+}
+
+.detailColumn{
+    height: 5rem;
+}

src/components/skills/SkillColumn.js

@@ -0,0 +1,50 @@
+import react, { useEffect, useState } from "react";
+import CharacterRepository from "../../repositories/CharacterRepository";
+import SkillsRepository from "../../repositories/SkillsRepository";
+
+export const SkillColumn = ({ level, classSkills, updater }) => {
+    const [skillPointsMax, setSkillPointsMax] = useState(0)
+    const [classsSkills, setClassSkills] = useState([])
+    const [levelSkills, setLevelSkills] = useState([])
+    const [spentPoints, setSpentPoints] = useState(0)
+
+    useEffect(() => {
+        CharacterRepository.get(level.characterId).then(res => setSkillPointsMax(
+            Math.floor((res["int"] - 10) / 2) + level?.class?.skillPoints))
+        setClassSkills(classSkills)
+        setLevelSkills(level.levelSkills.sort((a,b)=> a.skillId - b.skillId))
+        calcSpentPoints()
+    }, [level])
+
+    useEffect(()=> {
+        updater()
+    },[])
+
+    const spendPoints = (evt,levelSkill) => {
+        const copy = { ...levelSkill }
+        copy.points = parseInt(evt.target.value)
+        SkillsRepository.updateLevelSkill(copy)
+        updater()
+    }
+
+    const calcSpentPoints = () => {
+        let spent = 0
+        levelSkills.forEach(levelSkill => {
+            spent += parseInt(document.querySelector(`#classLevel--${level.id}--skill${levelSkill.skillId}`)?.value)
+        })
+        setSpentPoints(spent)
+    }
+
+    return <>
+        <div className="flexdown">
+            <h3>{level.characterLevel}</h3>
+            <h3>{skillPointsMax - spentPoints}</h3>
+            <input className="classSkill"/>
+            {levelSkills?.map(levelSkill =>
+                <input id={`classLevel--${level.characterLevel}--skill${levelSkill.skillId}`}
+                    defaultValue={levelSkill.points} 
+                    onBlur={(evt)=>spendPoints(evt,levelSkill)} 
+                    className={classsSkills&&classsSkills[levelSkill.skillId]?.classSkillProf?"classSkill":"crossClassSkill"}/>)}
+        </div>
+    </>
+}

src/components/skills/SkillDetails.js

@@ -1,13 +1,36 @@
-import react from "react";
+import React, { useEffect, useState, useRef } from "react";
+
+export const SkillDetails = ({skill, characterSkills, levels}) => {
+    const [characterSkillss, setCharacterSkillss] = useState(characterSkills)
+    const [ranks, setRanks] = useState(0)
+    const [rankFlag, setRankFlag] = useState(false)
+    const firstRef = useRef()
+    const maxRanks = () => {
+        levels.forEach((l,i) => {
+            const identifier = document.querySelector(`#classLevel--${i+1}--skill${skill.id}`)
+            if(identifier?.className==="classSkill") setRankFlag(true) 
+        })
+    }
+    const totalRanks = () => {
+        let total = 0
+        levels.forEach((l,i) => {
+            const identifier = document.querySelector(`#classLevel--${i+1}--skill${skill.id}`)
+            identifier?.className==="crossClassSkill" ? total += parseInt(identifier?.value)/2 : total += parseInt(identifier?.value) 
+        })
+        setRanks(total)
+    }
+    useEffect(()=>{
+        totalRanks()
+        maxRanks()
+    },[levels])
 
-export const SkillDetails = ({skill}) => {
     return <>
         <div className="flexside">
             <div className="detailColumn1">{skill.name}</div>
             <div className="detailColumn2">Total</div>
-            <div className="detailColumn3">{skill.attribute}</div>
-            <div className="detailColumn4">Ranks</div>
-            <div className="detailColumn5">Max Ranks</div>
+            <div className="detailColumn2">{skill.attribute}</div>
+            <div className="detailColumn2">{ranks}</div>
+            <div className="detailColumn2">{rankFlag?levels.length+3:(levels.length+3)/2}</div>
         </div>
     </>
 

src/components/skills/Skills.js

@@ -4,28 +4,44 @@ import { SkillDetails } from "./SkillDetails"
 import SkillsRepository from "../../repositories/SkillsRepository";
 import LevelRepository from "../../repositories/LevelRepository";
 import "./CharacterSelect.css"
+import { SkillColumn } from "./SkillColumn";
 
 export const Skills = () => {
     const [skills, setSkills] = useState([])
     const { characterId } = useParams()
     const [levels, setLevels] = useState([])
+    const [classSkills, setClassSkills] = useState([])
+    const [characterSkills, setCharacterSkills] = useState([])
 
-
+    const syncLevels = () => {
+        LevelRepository.getComplicated(parseInt(characterId)).then(setLevels)
+    }
+    const syncClassSkills = () => {
+        setClassSkills(
+            levels.map(level => level.class.classSkills)
+        )
+    }
+    const syncCharacterSkills = () => {
+        SkillsRepository.getCharacterSkills(setCharacterSkills)
+    }
 
     useEffect(() => {
         SkillsRepository.getAll().then(setSkills)
-        LevelRepository.getComplicated(characterId).then(setLevels)
+        syncLevels()
+        syncCharacterSkills()
     }, [])
+    useEffect(()=> {
+        syncClassSkills()
+    },[levels])
 
     return (
         <>
             <article>
                 <h1>Skills</h1>
-                <h2>Currently Selected character is {"placeholder to call a reference to the current character. should be changed through filepath"}</h2>
                 <section className="flexside">
                     <section className="flexdown">
-                        <h3>Level <br /> Row</h3>
-                        <h3>Available <br />skill <br />points</h3>
+                        <h3>Level</h3>
+                        <h3>Points</h3>
                         <div className="flexside">
                             <div className="detailColumn1">Skill name</div>
                             <div className="detailColumn2">Total</div>
@@ -34,31 +50,12 @@ export const Skills = () => {
                             <div className="detailColumn5">Max Ranks</div>
                         </div>
                         <div className="flexdown">
-                            {skills.map(skill => <SkillDetails skill={skill} />)}
+                            {skills.map(skill => <SkillDetails skill={skill} characterSkills={characterSkills} levels={levels} />)}
                         </div>
                     </section>
                     <section className="flexsidescroll">
-                        <div className="flexdown">
-                            <h3>Level<br />#</h3>
-                            <h3>Skill points <br />with <br />live updates</h3>
-                            <h3>double space <br />for consistency</h3>
-                            <h3>Column of skills. All 3 of these are going to be in an indiviudal element that will map through vertically, then that element will be mapped horizonally for multiple levels</h3>
-                        </div>
-                        <div className="flexdown">
-                            <h3>Level<br />#</h3>
-                            <h3>Skill points <br />with <br />live updates</h3>
-                            <h3>double space <br />for consistency</h3>
-                            <h3>Column of skills. All 3 of these are going to be in an indiviudal element that will map through vertically, then that element will be mapped horizonally for multiple levels</h3>
-                        </div>
-                        <div className="flexdown">
-                            <h3>Level<br />#</h3>
-                            <h3>Skill points <br />with <br />live updates</h3>
-                            <h3>double space <br />for consistency</h3>
-                            <h3>Column of skills. All 3 of these are going to be in an indiviudal element that will map through vertically, then that element will be mapped horizonally for multiple levels</h3>
-                        </div>
-
+                        {levels.map(levell=> <SkillColumn level={levell} classSkills={classSkills[levell.characterLevel-1]} updater={syncLevels}/>)}
                     </section>
-
                 </section>
             </article>
         </>

src/repositories/LevelRepository.js

@@ -17,11 +17,11 @@ import SkillsRepository from "./SkillsRepository"
 //     return animal
 // }
 
-const expandClassSkills = ( level, classSkills ) => {
-        classSkills = classSkills.sort((a,b) => a.skillId - b.skillId) //need to make sure that the array is in skill order for future iteration
-        level.class.classSkills = classSkills
-        return level
-    }
+// const expandClassSkills = (level, classSkills) => {
+//     classSkills = classSkills.sort((a, b) => a.skillId - b.skillId) //need to make sure that the array is in skill order for future iteration
+//     level.class.classSkills = classSkills
+//     return level
+// }
 
 const addComplications = (level) => {
     SkillsRepository.getAll().then(res => {
@@ -91,13 +91,13 @@ export default {
         )
     },
     async getComplicated(id) {
-
-        return await fetchIt(`${Settings.remoteURL}/levels?characterId=${id}&_embed=levelSkills&_expand=class`)
-            .then(levels => {
-                levels.forEach(level => {
-                    SkillsRepository.getClassSkills(level.classId).then(classSkills => expandClassSkills(level, classSkills))})
-                return levels
-            })
+        let levels = await fetchIt(`${Settings.remoteURL}/levels?characterId=${id}&_embed=levelSkills&_expand=class`)
+        const classSkills = await Promise.all(levels.map(level => SkillsRepository.getClassSkills(level.classId).then(res=> res)))
+        classSkills.forEach(chunk => chunk.sort((a, b) => a.skillId - b.skillId)) //need to make sure that the array is in skill order for future iteration
+        levels.forEach(level =>
+            {level.class.classSkills = classSkills.find(classSkill => classSkill[0].classId === level.class.id)}//all elements of a classSkills subarray share the same classId
+        )
+        return levels
     }
 
     // async addAnimalCaretaker(newAnimalCaretaker) { //added function to add caretakers

src/repositories/SkillsRepository.js

@@ -47,6 +47,9 @@ export default {
             JSON.stringify(characterSkill)
         )
     },
+    async getCharacterSkills(id){
+        return await fetchIt(`${Settings.remoteURL}/characterSkills/${id}`)
+    },
     async addLevelSkills(levelSkill) {
         return await fetchIt(
             `${Settings.remoteURL}/levelSkills`,
@@ -61,6 +64,13 @@ export default {
             JSON.stringify(classSkill)
         )
     },
+    async updateLevelSkill(levelSkill) {
+        return await fetchIt(
+            `${Settings.remoteURL}/levelSkills/${levelSkill.id}`,
+            "PUT",
+            JSON.stringify(levelSkill)
+        )
+    },
     async getClassSkills(id){
         return await fetchIt(`${Settings.remoteURL}/classSkills?classId=${id}`)
     }