Merge pull request #7 from TheCodeRaccoons/te-taking-project

Te taking project

Author: JorchCortez

src/Components/AchieveTabs/Cooking.tsx

@@ -5,7 +5,7 @@ interface dishesCookedType {
     cookedItems: generalFormatedItemType[];
 }
 
-const Food = ( {cookedItems}  : dishesCookedType) => {
+const Food = ( {cookedItems} : dishesCookedType) => {
     const [dishesCooked, setDishesCooked] = useState(0);
     if(!cookedItems) return <div>No cooking data available.</div>;
 

src/Components/Skills/SkillContainer/SkillContainer.css

@@ -54,6 +54,28 @@
 
 .skill-container__stats-line {
     margin: 0.2rem 0;
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+}
+
+.skill-container__progress-bar {
+    width: 100%;
+    height: 12px;
+    background-color: #3a3a3a;
+    border-radius: 6px;
+    overflow: hidden;
+    border: 2px solid #8b4513;
+    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
+}
+
+.skill-container__progress-fill {
+    height: 100%;
+    background: linear-gradient(90deg, #4caf50, #81c784);
+    border-radius: 4px;
+    transition: width 0.3s ease;
+    min-width: 2px;
+    box-shadow: 0 0 8px rgba(76, 175, 80, 0.5);
 }
 
 .skill-container__icon {

src/Components/Skills/SkillContainer/SkillContainer.tsx

@@ -16,9 +16,22 @@ const Skills = ({
     xp,
     levelInfo
 }: SkillProps) => {
-    const currentLevel = (xp > levelInfo.val) ? levelInfo.id : levelInfo.id - 1;
-    const xpToNextLevel = (xp > 15000) ? 0 : (levelInfo.val - xp);
-    const xpToMax = (xp > 15000) ? "Maxed" : 15000 - xp;
+    const currentLevel = (xp >= levelInfo.val) ? levelInfo.id : levelInfo.id - 1;
+    const xpToNextLevel = (xp >= 15000) ? 0 : (levelInfo.val - xp);
+    const xpToMax = (xp >= 15000) ? "Maxed" : 15000 - xp;
+    
+    // Calculate progress within current level
+    const currentLevelXpRequirement = levelInfo.id > 1 ? Math.floor(levelInfo.val * 0.85) : 0;
+    const nextLevelXpRequirement = levelInfo.val;
+    const xpInCurrentLevel = Math.max(0, xp - currentLevelXpRequirement);
+    const xpNeededForLevel = nextLevelXpRequirement - currentLevelXpRequirement;
+    
+    let progressPercentage = 0;
+    if (xp >= 15000) {
+        progressPercentage = 100; // Max level
+    } else if (xpNeededForLevel > 0) {
+        progressPercentage = Math.min(100, (xpInCurrentLevel / xpNeededForLevel) * 100);
+    }
 
     return (
         <div className="skill-container">
@@ -27,13 +40,16 @@ const Skills = ({
             </p>
             <div className="skill-container__stats">
                 <div className="skill-container__stats-line">
-                    Current XP: {xp}
-                </div>
-                <div className="skill-container__stats-line">
-                    Level Up in: {xpToNextLevel}
-                </div>
-                <div className="skill-container__stats-line">
-                    Max level in: {xpToMax}
+                    <div className="skill-container__progress-bar">
+                        <div 
+                            className="skill-container__progress-fill"
+                            style={{
+                                width: `${progressPercentage}%`
+                            }}
+                        ></div>
+                    </div>
+                    {xpToNextLevel > 0 ? `XP to next level: ${xpToNextLevel}` : "Max Level Reached"}
+                    {/* {xp} / {levelInfo.val} */}
                 </div>
             </div>
             <img