feat: enhance PetDisplay and SkillTreeModal with resource management and skill allocation logic

2025-02-08 22:46:35 -03:00 · 2025-02-08 22:46:35 -03:00 · c2e5bf92a3
commit c2e5bf92a3
parent 78c0f52c39
4 changed files with 101 additions and 63 deletions
--- a/src/components/PetDisplay.tsx
+++ b/src/components/PetDisplay.tsx
@ -1,5 +1,5 @@
 import { Pet } from '../types/Pet';
-import { Brain, Dumbbell, Heart, Sparkles, Coins, Pizza, Trash2, Trophy } from 'lucide-react';
+import { Brain, Dumbbell, Smile, Sparkles, Coins, Pizza, Trash2, Trophy, Heart, Star } from 'lucide-react';
 import { PET_CLASSES } from '../data/petClasses';
 import { useState } from 'react';
 import InventoryModal from './modal/InventoryModal';
@ -11,12 +11,13 @@ interface PetDisplayProps {
 }

 export default function PetDisplay({ pet, onPetUpdate }: PetDisplayProps) {
-  const StatBar = ({ value, maxValue, label, icon: Icon }: { value: number; maxValue: number; label: string; icon: any }) => (
-    <div className="flex items-center space-x-2">
+  const StatBar = ({ value, maxValue, label, icon: Icon }:
+    { value: number; maxValue: number; label: string; icon: any; }) => (
+    <div className="flex items-center space-x-2" title={label}>
      <Icon className="w-5 h-5" />
      <div className="flex-1 bg-gray-700 rounded-full h-4">
        <div
-          className="bg-blue-500 rounded-full h-4"
+          className={`bg-blue-500 rounded-full h-4`}
          style={{ width: `${(value / maxValue) * 100}%` }}
        />
      </div>
@ -54,6 +55,14 @@ export default function PetDisplay({ pet, onPetUpdate }: PetDisplayProps) {
      </div>

      <div className="space-y-4 mb-6">
+        <div className="space-y-4 mb-6">
+          <StatBar
+            value={pet.health}
+            maxValue={pet.maxHealth}
+            label="Health"
+            icon={Heart}
+          />
+        </div>
        <StatBar
          value={pet.stats.intelligence}
          maxValue={pet.stats.maxIntelligence}
@ -70,7 +79,7 @@ export default function PetDisplay({ pet, onPetUpdate }: PetDisplayProps) {
          value={pet.stats.charisma}
          maxValue={pet.stats.maxCharisma}
          label="Charisma"
-          icon={Heart}
+          icon={Smile}
        />
      </div>

@ -108,6 +117,7 @@ export default function PetDisplay({ pet, onPetUpdate }: PetDisplayProps) {
      {showSkillTreeModal && (
        <SkillTreeModal
          petId={pet.id}
+          petResources={pet.resources}
          onPetUpdate={onPetUpdate}
          onClose={() => setShowSkillTreeModal(false)
          }
--- a/src/components/modal/SkillTreeModal.tsx
+++ b/src/components/modal/SkillTreeModal.tsx
@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { Pet } from '../../types/Pet';
+import { Pet, Resources } from '../../types/Pet';
 import { Skill, PetSkill, SkillType } from '../../types/Skills';
 import { fetchPets, getAllSkills, getPetSkills, postAllocatePetSkill } from '../../services/api/api';
 import { Loader2 } from 'lucide-react';
@ -8,10 +8,11 @@ import styles from './SkillTreeModal.module.css';
 interface SkillTreeModalProps {
  onClose: () => void;
  petId: string;
+  petResources: Resources;
  onPetUpdate: (updatedPet: Pet) => void;
 }

-export default function SkillTreeModal({ onClose, petId, onPetUpdate }: SkillTreeModalProps) {
+export default function SkillTreeModal({ onClose, petId, petResources, onPetUpdate }: SkillTreeModalProps) {
  const [skills, setSkills] = useState<Skill[]>([]);
  const [petSkills, setPetSkills] = useState<PetSkill[]>([]);
  const [loading, setLoading] = useState(true);
@ -55,87 +56,110 @@ export default function SkillTreeModal({ onClose, petId, onPetUpdate }: SkillTre
  };

  const canAllocateSkill = (skill: Skill) => {
-    if (!skill.skillsIdRequired) return true;
-    return petSkills.some(ps => ps.skillId === skill.skillsIdRequired![0]);
+    // check if all required skills are owned, and has all the required resources
+    const requiredSkills = skills.filter(s => skill.skillsIdRequired?.includes(s.id));
+    const requiredSkillIds = requiredSkills.map(s => s.id);
+    const ownedRequiredSkills = petSkills.filter(ps => requiredSkillIds.includes(ps.skillId));
+    const hasAllRequiredSkills = requiredSkills.length === ownedRequiredSkills.length;
+
+    const hasAllResources = skill.skillRequirements.every(req => {
+      const resourceValue = petResources[req.resource.toLowerCase() as keyof Resources];
+      return resourceValue >= req.cost;
+    });
+
+    return hasAllRequiredSkills && hasAllResources;
  };

-  const getRequiredSkillName = (skillId: number[] | null) => {
+  const getRequiredSkillNames = (skillId: number[] | null) => {
    if (!skillId) return null;
-    return skills.find(s => s.id === skillId[0])?.name;
+    return skills.filter(s => skillId.includes(s.id)).map(s => s.name);
+  };
+
+  const getNextTierEffect = (currentTier?: string) => {
+    if (!currentTier) return 'I';
+    if (currentTier === 'I') return 'II';
+    if (currentTier === 'II') return 'III';
+    return null;
  };

  const renderSkillNode = (skill: Skill) => {
-    console.log('Rendering skill:', skill);
-
    const owned = petSkills.some(ps => ps.skillId === skill.id);
    const tier = getSkillTier(skill.id);
-    const canAllocate = canAllocateSkill(skill);
-    const requiredSkillName = getRequiredSkillName(skill.skillsIdRequired);
+    const isMaxTier = tier === 'III';
+    const canAllocate = !isMaxTier && canAllocateSkill(skill);
+    const nextTierEffect = getNextTierEffect(tier);
+    const requiredSkillNames = getRequiredSkillNames(skill.skillsIdRequired);

    return (
      <div
        key={skill.id}
        className={`
-          relative p-4 rounded-lg border-2
-          ${owned ? 'border-green-500 bg-gray-700' : 'border-gray-600 bg-gray-800'}
-          ${!owned && !canAllocate ? 'opacity-50' : ''}
-          hover:border-blue-500 transition-colors
+          relative p-4 rounded-lg border-2 flex flex-col
+          ${isMaxTier ? 'border-green-500 bg-gray-700' :
+            owned ? 'border-blue-500 bg-gray-700' : 'border-gray-600 bg-gray-800'}
+          transition-colors
        `}
      >
-        <div className="flex items-center gap-2 mb-2">
-          {/* <img src={skill.icon} alt={skill.name} className="w-6 h-6" /> */}
-          <span>{skill.icon}</span>
-          <h3 className="font-bold">{skill.name}</h3>
-          {tier && (
-            <span className="px-2 py-1 bg-blue-600 rounded text-xs">
-              Tier {tier}
-            </span>
-          )}
-        </div>
-        <p className="text-sm text-gray-300 mb-2">{skill.description}</p>
-        {!canAllocate && requiredSkillName && (
-          <p className="text-red-500 text-sm mb-2">Required skill: {requiredSkillName}</p>
-        )}
-        <div className="text-xs text-gray-400">
-          {skill.effects.map((effect, idx) => (
-            <div key={idx}>
-              Tier {effect.tier}: {effect.effect} ({effect.value})
-            </div>
-          ))}
-        </div>
-        {!owned && (
-          <button
-            onClick={() => handleAllocateSkill(skill.id)}
-            disabled={!canAllocate || allocating}
-            className={`
-              mt-2 px-3 py-1 rounded text-sm
-              ${canAllocate
-                ? 'bg-blue-600 hover:bg-blue-700'
-                : 'bg-gray-600 cursor-not-allowed'}
-            `}
-          >
-            {allocating ? (
-              <Loader2 className="w-4 h-4 animate-spin" />
-            ) : (
-              `Learn (${skill.pointsCost} SP)`
+        <div className="flex-grow">
+          <div className="flex items-center gap-2 mb-2">
+            <span>{skill.icon}</span>
+            <h3 className="font-bold">{skill.name}</h3>
+            {tier && (
+              <span className={`px-2 py-1 rounded text-xs ${isMaxTier ? 'bg-green-600' : 'bg-blue-600'}`}>
+                Tier {tier}
+              </span>
            )}
-          </button>
-        )}
-        {owned && (
+          </div>
+          <p className="text-sm text-gray-300 mb-2">{skill.description}</p>
+
+          <div className="text-sm space-y-2 mb-3">
+            {!isMaxTier && nextTierEffect && (
+              <div className="text-blue-300">
+                Next: Tier {nextTierEffect}
+              </div>
+            )}
+
+            {!isMaxTier && nextTierEffect && (
+              <div className="space-y-1">
+                <div className="text-gray-400 font-medium">Requirements:</div>
+                {requiredSkillNames && requiredSkillNames.map((name, idx) => (
+                  <div key={idx} className={`text-xs ${canAllocate ? 'text-green-400' : 'text-red-400'}`}>
+                    • Requires: {name}
+                  </div>
+                ))}
+                {skill.skillRequirements.map((req, idx) => (
+                  <div key={idx} className={`text-xs ${petResources[req.resource.toLowerCase() as keyof Resources] >= req.cost
+                    ? 'text-green-400' : 'text-red-400'
+                    }`}>
+                    • {req.resource}: {req.cost}
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+        </div>
+
+        {isMaxTier ? (
+          <div className="mt-auto px-3 py-1 rounded text-sm bg-green-600 text-center">
+            Mastered
+          </div>
+        ) : (
          <button
            onClick={() => handleAllocateSkill(skill.id)}
            disabled={!canAllocate || allocating}
            className={`
-              mt-2 px-3 py-1 rounded text-sm
+              mt-auto px-3 py-1 rounded text-sm
              ${canAllocate
-                ? 'bg-green-600 hover:bg-green-700'
+                ? owned
+                  ? 'bg-blue-600 hover:bg-blue-700'
+                  : 'bg-green-600 hover:bg-green-700'
                : 'bg-gray-600 cursor-not-allowed'}
            `}
          >
            {allocating ? (
              <Loader2 className="w-4 h-4 animate-spin" />
            ) : (
-              `Upgrade (${skill.pointsCost} SP)`
+              owned ? 'Upgrade' : 'Learn'
            )}
          </button>
        )}
--- a/src/types/Pet.ts
+++ b/src/types/Pet.ts
@ -25,7 +25,6 @@ export interface Pet {
  stats: PetStats;
  resources: Resources;
  level: number;
-  experience: number;
  health: number;
  maxHealth: number;
  petGatherAction: PetGatherAction;
--- a/src/types/Skills.ts
+++ b/src/types/Skills.ts
@ -5,12 +5,17 @@ export interface Skill {
    name: string;
    description: string;
    type: SkillType;
-    pointsCost: number;
+    skillRequirements: SkillRequirement[];
    icon: string;
    skillsIdRequired: number[] | null;
    effects: SkillEffect[];
 }

+export interface SkillRequirement {
+    cost: number;
+    resource: string;
+}
+
 export interface SkillEffect {
    id: number;
    skillId: number;