refactor: enhance action handling and introduce ActionResourceButton component

src/App.tsx

@@ -1,18 +1,12 @@
 import { useState, useEffect } from 'react';
-import ClassSelection from './components/ClassSelection';
 import PetDisplay from './components/PetDisplay';
 import InteractionMenu from './components/InteractionMenu';
-import NameModal from './components/modal/NameModal';
-import ConfirmationModal from './components/modal/ConfirmationModal';
-import { Pet, PetClassInfo } from './types/Pet';
-import { fetchPets, createPet } from './services/api/api';
+import PetRegister from './components/PetRegister';
+import { Pet } from './types/Pet';
+import { fetchPets } from './services/api/api';
 
 export default function App() {
   const [pet, setPet] = useState<Pet | null>(null);
-  const [showConfirmation, setShowConfirmation] = useState(false);
-  const [showNameModal, setShowNameModal] = useState(false);
-  const [petName, setPetName] = useState('');
-  const [selectedClass, setSelectedClass] = useState<{ key: string; info: PetClassInfo } | null>(null);
 
   useEffect(() => {
     const loadPets = async () => {
@@ -29,78 +23,6 @@ export default function App() {
     loadPets();
   }, []);
 
-  const handleClassSelect = (classKey: string, classInfo: PetClassInfo) => {
-    setSelectedClass({ key: classKey, info: classInfo });
-    setShowConfirmation(true);
-  };
-
-  const handleConfirm = () => {
-    if (!selectedClass) return;
-    setShowConfirmation(false);
-    setShowNameModal(true);
-    setPetName('');
-  };
-
-  const handleNameSubmit = async () => {
-    if (!selectedClass || !petName.trim()) return;
-
-    try {
-      const newPet = await createPet({
-        name: petName.trim(),
-        class: selectedClass.key,
-      });
-      setPet(newPet);
-      setShowNameModal(false);
-    } catch (error) {
-      console.error('Error creating pet:', error);
-    }
-  };
-
-  const handleFeed = () => {
-    if (!pet) return;
-    const updatedPet = {
-      ...pet,
-      stats: {
-        ...pet.stats,
-        strength: Math.min(100, pet.stats.strength + 5)
-      },
-      resources: {
-        ...pet.resources,
-        food: Math.max(0, pet.resources.food - 10)
-      }
-    };
-    handlePetUpdate(updatedPet);
-  };
-
-  const handlePlay = () => {
-    if (!pet) return;
-    const updatedPet = {
-      ...pet,
-      stats: {
-        ...pet.stats,
-        charisma: Math.min(100, pet.stats.charisma + 5)
-      },
-      resources: {
-        ...pet.resources,
-        wisdom: pet.resources.wisdom + 5
-      }
-    };
-    handlePetUpdate(updatedPet);
-  };
-
-  const handleSleep = () => {
-    if (!pet) return;
-    const updatedPet = {
-      ...pet,
-      stats: {
-        intelligence: Math.min(100, pet.stats.intelligence + 5),
-        strength: Math.min(100, pet.stats.strength + 2),
-        charisma: Math.min(100, pet.stats.charisma + 2)
-      }
-    };
-    handlePetUpdate(updatedPet);
-  };
-
   const handleCustomize = () => {
     console.log('Customize pet');
   };
@@ -110,29 +32,7 @@ export default function App() {
   };
 
   if (!pet) {
-    return (
-      <div className="min-h-screen bg-gray-900 text-white">
-        {showNameModal && selectedClass ? (
-          <NameModal
-            selectedClass={selectedClass}
-            petName={petName}
-            setPetName={setPetName}
-            handleNameSubmit={handleNameSubmit}
-            setShowNameModal={setShowNameModal}
-            setSelectedClass={setSelectedClass}
-          />
-        ) : showConfirmation && selectedClass ? (
-          <ConfirmationModal
-            selectedClass={selectedClass}
-            handleConfirm={handleConfirm}
-            setShowConfirmation={setShowConfirmation}
-            setSelectedClass={setSelectedClass}
-          />
-        ) : (
-          <ClassSelection onSelect={handleClassSelect} />
-        )}
-      </div>
-    );
+    return <PetRegister onPetCreated={setPet} />;
   }
 
   return (
@@ -142,9 +42,6 @@ export default function App() {
         <InteractionMenu
           pet={pet}
           onPetUpdate={handlePetUpdate}
-          onFeed={handleFeed}
-          onPlay={handlePlay}
-          onSleep={handleSleep}
           onCustomize={handleCustomize}
         />
       </div>

src/components/ActionResourceButton.tsx

@@ -0,0 +1,63 @@
+import { LucideIcon } from 'lucide-react';
+import { Pet, Resources } from '../types/Pet';
+import { isActionActive, formatResourceName, getResourceFromAction } from '../utils/petUtils';
+
+const colorClassMap = {
+  amber: 'bg-amber-900/30 hover:bg-amber-800/50 border-amber-500/50',
+  emerald: 'bg-emerald-900/30 hover:bg-emerald-800/50 border-emerald-500/50',
+  red: 'bg-red-900/30 hover:bg-red-800/50 border-red-500/50',
+  green: 'bg-green-900/30 hover:bg-green-800/50 border-green-500/50',
+  blue: 'bg-blue-900/30 hover:bg-blue-800/50 border-blue-500/50',
+  purple: 'bg-purple-900/30 hover:bg-purple-800/50 border-purple-500/50',
+} as const;
+
+const getActionVerb = (actionType: 'gather' | 'explore' | 'battle'): string => {
+  const verbs = {
+    gather: 'Gathering',
+    explore: 'Exploring',
+    battle: 'Battling',
+  };
+  return verbs[actionType];
+};
+
+type ButtonColor = keyof typeof colorClassMap;
+
+interface ActionResourceButtonProps {
+  pet: Pet;
+  icon: LucideIcon;
+  label: string;
+  actionType: 'gather' | 'explore' | 'battle';
+  color: ButtonColor;
+  onActionClick: () => void;
+  onActionComplete: (updatedPet: Pet) => void;
+  onResourcesUpdate: (resources: Resources) => void;
+}
+
+export default function ActionResourceButton({
+  pet,
+  icon: Icon,
+  label,
+  actionType,
+  color,
+  onActionClick
+}: ActionResourceButtonProps) {
+  const isActive = isActionActive(pet.petGatherAction, actionType);
+  const currentResource = getResourceFromAction(pet.petGatherAction);
+
+  return (
+    <button
+      onClick={onActionClick}
+      className={`flex items-center justify-center space-x-2
+        ${colorClassMap[color]}
+        border-2 rounded-lg p-4
+        transition-all duration-300 transform hover:scale-105 w-full`}
+    >
+      <Icon className="w-6 h-6" />
+      <span>
+        {isActive && currentResource
+          ? `${getActionVerb(actionType)} ${formatResourceName(currentResource)}`
+          : label}
+      </span>
+    </button>
+  );
+}

src/components/GatherResourcesButton.tsx

@@ -1,132 +0,0 @@
-import { useState, useEffect } from 'react';
-import { FeatherIcon as GatherIcon } from 'lucide-react';
-import ResourceSelectionModal from './modal/ResourceSelectionModal';
-import CollectResourcesButton from './CollectResourcesButton';
-import { Pet, Resources } from '../types/Pet';
-import { updatePetAction, getPetGatheredResources, putPetCollectResources } from '../services/api/api';
-import { PetAction } from '../types/PetUpdateActionRequest';
-import { isGatheringAction, formatResourceName, getResourceFromAction } from '../utils/petUtils';
-
-interface GatherResourcesButtonProps {
-  pet: Pet;
-  onGatherStart: () => void;
-  onGatherComplete: (updatedPet: Pet) => void;
-}
-
-const resourceToActionMap: Record<string, PetAction> = {
-  wisdom: 'GATHERING_WISDOM',
-  gold: 'GATHERING_GOLD',
-  food: 'GATHERING_FOOD'
-};
-
-export default function GatherResourcesButton({ pet, onGatherStart, onGatherComplete }: GatherResourcesButtonProps) {
-  const [isModalOpen, setIsModalOpen] = useState(false);
-  const [isGathering, setIsGathering] = useState(isGatheringAction(pet.petAction));
-  const [gatheredResources, setGatheredResources] = useState<Resources>({ wisdom: 0, gold: 0, food: 0, junk: 0 });
-
-  // Initialize gathering check if pet is already gathering
-  useEffect(() => {
-    if (isGatheringAction(pet.petAction)) {
-      setIsGathering(true);
-      const resources = getPetGatheredResources(pet.id).then(setGatheredResources);
-      onGatherStart();
-    }
-  }, []);
-
-  useEffect(() => {
-    let interval: number;
-
-    if (isGathering) {
-      interval = setInterval(async () => {
-        try {
-          const resources = await getPetGatheredResources(pet.id);
-          setGatheredResources(resources);
-        } catch (error) {
-          console.error('Failed to check gathered resources:', error);
-        }
-      }, 10000);
-    }
-
-    return () => {
-      if (interval) {
-        clearInterval(interval);
-      }
-    };
-  }, [isGathering, pet.id]);
-
-  useEffect(() => {
-    setIsGathering(isGatheringAction(pet.petAction));
-  }, [pet.petAction]);
-
-  const handleGatherStart = async (resourceType: string) => {
-    if (resourceType === 'stop') {
-      try {
-        await updatePetAction(pet.id, { petActionGather: 'IDLE' });
-        setIsGathering(false);
-        onGatherComplete(pet);
-      } catch (error) {
-        console.error('Failed to stop gathering:', error);
-      }
-      setIsModalOpen(false);
-      return;
-    }
-
-    setIsGathering(true);
-    onGatherStart();
-
-    try {
-      const petAction = resourceToActionMap[resourceType];
-      const updatedPet = await updatePetAction(pet.id, { petActionGather: petAction });
-      onGatherComplete(updatedPet);
-    } catch (error) {
-      console.error('Failed to gather resources:', error);
-    } finally {
-      setIsModalOpen(false);
-    }
-  };
-
-  const handleCollect = async () => {
-    try {
-      const updatedPet = await putPetCollectResources(pet.id);
-      setGatheredResources({ wisdom: 0, gold: 0, food: 0, junk: 0 });
-      onGatherComplete(updatedPet);
-    } catch (error) {
-      console.error('Failed to collect resources:', error);
-    }
-  };
-
-  const currentResource = getResourceFromAction(pet.petAction);
-
-  return (
-    <div>
-      <button
-        onClick={() => setIsModalOpen(true)}
-        className={`flex items-center justify-center space-x-2
-          bg-amber-900/30 hover:bg-amber-800/50
-          border-2 border-amber-500/50 rounded-lg p-4
-          transition-all duration-300 transform hover:scale-105 w-full`}
-      >
-        <GatherIcon className="w-6 h-6" />
-        <span>
-          {isGathering && currentResource
-            ? `Gathering ${formatResourceName(currentResource)}...`
-            : 'Gather Resources'}
-        </span>
-      </button>
-
-      <CollectResourcesButton
-        petId={pet.id}
-        resources={gatheredResources}
-        onCollect={handleCollect}
-      />
-
-      <ResourceSelectionModal
-        isOpen={isModalOpen}
-        onClose={() => setIsModalOpen(false)}
-        onGather={handleGatherStart}
-        pet={pet}
-        isGathering={isGathering}
-      />
-    </div>
-  );
-}

src/components/InteractionMenu.tsx

@@ -1,47 +1,219 @@
-import { Pizza, PlayCircle, Moon, Paintbrush } from 'lucide-react';
-import GatherResourcesButton from './GatherResourcesButton';
-import { Pet } from '../types/Pet';
-import { useState } from 'react';
+import { Pizza, PlayCircle, Moon, Compass, Sword, FeatherIcon } from 'lucide-react';
+import CollectResourcesButton from './CollectResourcesButton';
+import { Pet, Resources } from '../types/Pet';
+import { useState, useEffect } from 'react';
+import { updatePetAction, getPetGatheredResources } from '../services/api/api';
+import { PetBasicAction } from '../types/PetUpdateActionRequest';
+import ActionButton from './button/ActionButton';
+import ActionResourceButton from './ActionResourceButton';
+import ResourceSelectionModal from './modal/ResourceSelectionModal';
+import { PetAction } from '../types/PetUpdateActionRequest';
 
 interface InteractionMenuProps {
   pet: Pet;
   onPetUpdate: (updatedPet: Pet) => void;
-  onFeed: () => void;
-  onPlay: () => void;
-  onSleep: () => void;
   onCustomize: () => void;
 }
 
-export default function InteractionMenu({ pet, onPetUpdate, onFeed, onPlay, onSleep, onCustomize }: InteractionMenuProps) {
+export default function InteractionMenu({ pet, onPetUpdate }: InteractionMenuProps) {
+  const [gatheredResources, setGatheredResources] = useState<Resources>({ wisdom: 0, gold: 0, food: 0, junk: 0 });
+  const [remainingCooldown, setRemainingCooldown] = useState<number | null>(null);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [selectedActionType, setSelectedActionType] = useState<'gather' | 'explore' | 'battle' | null>(null);
+
+  useEffect(() => {
+    const updateCooldown = () => {
+      if (!pet.basicActionCooldown) {
+        setRemainingCooldown(null);
+        return;
+      }
+
+      const cooldownTime = new Date(pet.basicActionCooldown).getTime();
+      const now = new Date().getTime();
+      const remaining = Math.max(0, cooldownTime - now);
+
+      if (remaining === 0) {
+        setRemainingCooldown(null);
+      } else {
+        setRemainingCooldown(remaining);
+      }
+    };
+
+    updateCooldown();
+    const interval = setInterval(updateCooldown, 1000);
+    return () => clearInterval(interval);
+  }, [pet.basicActionCooldown]);
+
+  useEffect(() => {
+    const fetchGatheredResources = async () => {
+      if (pet.petGatherAction === 'IDLE') {
+        return;
+      }
+
+      try {
+        const resources = await getPetGatheredResources(pet.id);
+        setGatheredResources(resources);
+      } catch (error) {
+        console.error('Failed to fetch gathered resources:', error);
+      }
+    };
+
+    fetchGatheredResources();
+    const interval = setInterval(fetchGatheredResources, 10000); // Poll every 10 seconds
+
+    return () => clearInterval(interval);
+  }, [pet.id, pet.petGatherAction]);
+
+  const formatCooldownTime = (ms: number) => {
+    const minutes = Math.floor(ms / 60000);
+    const seconds = Math.floor((ms % 60000) / 1000);
+
+    if (minutes > 0) {
+      return `${minutes} minute${minutes > 1 ? 's' : ''} remaining`;
+    }
+    return `${seconds} second${seconds > 1 ? 's' : ''} remaining`;
+  };
+
   const handleGatherComplete = (updatedPet: Pet) => {
     onPetUpdate(updatedPet);
   };
 
-  const ActionButton = ({ icon: Icon, label, onClick, color }: { icon: any; label: string; onClick: () => void; color: string }) => (
-    <button
-      onClick={onClick}
-      className={`flex items-center justify-center space-x-2 bg-${color}-900/30
-        hover:bg-${color}-800/50 border-2 border-${color}-500/50 rounded-lg p-4
-        transition-all duration-300 transform hover:scale-105 w-full`}
-    >
-      <Icon className="w-6 h-6" />
-      <span>{label}</span>
-    </button>
-  );
+  const handleResourcesUpdate = (resources: Resources) => {
+    setGatheredResources(resources);
+  };
+
+  const handleCollect = () => {
+    setGatheredResources({ wisdom: 0, gold: 0, food: 0, junk: 0 });
+  };
+
+  function performBasicAction(basicAction: PetBasicAction): () => void {
+    return async () => {
+      try {
+        const updatedPet = await updatePetAction(pet.id, { basicAction: basicAction });
+        onPetUpdate(updatedPet);
+      } catch (error) {
+        console.error('Failed to perform basic action:', error);
+      }
+    };
+  }
+
+  const handleActionStart = async (actionType: 'gather' | 'explore' | 'battle') => {
+    if (actionType === 'gather') {
+      setSelectedActionType(actionType);
+      setIsModalOpen(true);
+      return;
+    }
+
+    try {
+      const action: PetAction = actionType === 'explore' ? 'EXPLORING' : 'BATTLE';
+      const updatedPet = await updatePetAction(pet.id, { gatherAction: action });
+      onPetUpdate(updatedPet);
+    } catch (error) {
+      console.error('Failed to start action:', error);
+    }
+  };
+
+  const handleResourceSelect = async (resourceType: string) => {
+    if (resourceType === 'stop') {
+      try {
+        const updatedPet = await updatePetAction(pet.id, { gatherAction: 'IDLE' });
+        onPetUpdate(updatedPet);
+      } catch (error) {
+        console.error('Failed to stop action:', error);
+      }
+      setIsModalOpen(false);
+      return;
+    }
+
+    try {
+      const action: PetAction = `GATHERING_${resourceType.toUpperCase()}` as PetAction;
+      const updatedPet = await updatePetAction(pet.id, { gatherAction: action });
+      onPetUpdate(updatedPet);
+    } catch (error) {
+      console.error('Failed to start gathering:', error);
+    } finally {
+      setIsModalOpen(false);
+    }
+  };
 
   return (
     <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
-      <ActionButton icon={Pizza} label="Feed" onClick={onFeed} color="green" />
-      <ActionButton icon={PlayCircle} label="Play" onClick={onPlay} color="blue" />
-      <ActionButton icon={Moon} label="Sleep" onClick={onSleep} color="purple" />
-      {/* <ActionButton icon={Paintbrush} label="Customize (coming soon...)" onClick={onCustomize} color="pink" /> */}
-      <div className="col-span-2 md:col-span-3">
-        <GatherResourcesButton
+      {remainingCooldown !== null && (
+        <div className="col-span-2 md:col-span-3 text-center p-2 bg-yellow-900/30 border-2 border-yellow-500/50 rounded-lg">
+          <span className="text-yellow-200">Cooldown: {formatCooldownTime(remainingCooldown)}</span>
+        </div>
+      )}
+
+      <ActionButton
+        icon={Pizza}
+        label="Feed"
+        onClick={performBasicAction('FEED')}
+        color="green"
+        disabled={remainingCooldown !== null}
+      />
+      <ActionButton
+        icon={PlayCircle}
+        label="Play"
+        onClick={performBasicAction('PLAY')}
+        color="blue"
+        disabled={remainingCooldown !== null}
+      />
+      <ActionButton
+        icon={Moon}
+        label="Sleep"
+        onClick={performBasicAction('SLEEP')}
+        color="purple"
+        disabled={remainingCooldown !== null}
+      />
+
+      <div className="col-span-2 md:col-span-3 grid grid-cols-3 gap-4">
+        <ActionResourceButton
           pet={pet}
-          onGatherStart={() => console.log('Gathering started')}
-          onGatherComplete={handleGatherComplete}
+          icon={FeatherIcon}
+          label="Gather"
+          actionType="gather"
+          color="amber"
+          onActionClick={() => handleActionStart('gather')}
+          onActionComplete={handleGatherComplete}
+          onResourcesUpdate={handleResourcesUpdate}
+        />
+        <ActionResourceButton
+          pet={pet}
+          icon={Compass}
+          label="Explore"
+          actionType="explore"
+          color="emerald"
+          onActionClick={() => handleActionStart('explore')}
+          onActionComplete={handleGatherComplete}
+          onResourcesUpdate={handleResourcesUpdate}
+        />
+        <ActionResourceButton
+          pet={pet}
+          icon={Sword}
+          label="Battle"
+          actionType="battle"
+          color="red"
+          onActionClick={() => handleActionStart('battle')}
+          onActionComplete={handleGatherComplete}
+          onResourcesUpdate={handleResourcesUpdate}
         />
       </div>
+
+      <div className="col-span-2 md:col-span-3">
+        <CollectResourcesButton
+          petId={pet.id}
+          resources={gatheredResources}
+          onCollect={handleCollect}
+        />
+      </div>
+
+      <ResourceSelectionModal
+        isOpen={isModalOpen}
+        onClose={() => setIsModalOpen(false)}
+        onGather={handleResourceSelect}
+        pet={pet}
+        isGathering={pet.petGatherAction !== 'IDLE'}
+      />
     </div>
   );
 }

src/components/PetDisplay.tsx

@@ -1,5 +1,5 @@
 import { Pet } from '../types/Pet';
-import { Brain, Dumbbell, Heart, Sparkles, Coins, Pizza, Trash2 } from 'lucide-react';
+import { Brain, Dumbbell, Heart, Sparkles, Coins, Pizza, Trash2, Trophy } from 'lucide-react';
 import { PET_CLASSES } from '../data/petClasses';
 
 interface PetDisplayProps {
@@ -7,16 +7,16 @@ interface PetDisplayProps {
 }
 
 export default function PetDisplay({ pet }: PetDisplayProps) {
-  const StatBar = ({ value, label, icon: Icon }: { value: number; label: string; icon: any }) => (
+  const StatBar = ({ value, maxValue, label, icon: Icon }: { value: number; maxValue: number; label: string; icon: any }) => (
     <div className="flex items-center space-x-2">
       <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"
-          style={{ width: `${value}%` }}
+          style={{ width: `${(value / maxValue) * 100}%` }}
         />
       </div>
-      <span className="text-sm">{value}%</span>
+      <span className="text-sm font-medium">{value}/{maxValue}</span>
     </div>
   );
 
@@ -29,19 +29,42 @@ export default function PetDisplay({ pet }: PetDisplayProps) {
   );
 
   return (
-    <div className="bg-gray-900 p-6 rounded-xl">
+    <div className="bg-gray-900 p-6 rounded-xl shadow-xl">
       <div className="text-center mb-8">
         <div className="text-8xl mb-4">{PET_CLASSES[pet.class].emoji}</div>
-        <h2 className="text-2xl font-bold">{pet.name}</h2>
+        <h2 className="text-2xl font-bold mb-2">
+          <span className="bg-gradient-to-r from-blue-500 to-purple-500 text-transparent bg-clip-text">
+            {pet.name}
+          </span>
+        </h2>
+        <div className="flex items-center justify-center gap-2 mb-2">
+          <Trophy className="w-5 h-5 text-yellow-500" />
+          <span className="text-lg font-semibold">Level {pet.level}</span>
+        </div>
         <p className={`text-${PET_CLASSES[pet.class].color}-400`}>
           {PET_CLASSES[pet.class].name}
         </p>
       </div>
 
       <div className="space-y-4 mb-6">
-        <StatBar value={pet.stats.intelligence} label="Intelligence" icon={Brain} />
-        <StatBar value={pet.stats.strength} label="Strength" icon={Dumbbell} />
-        <StatBar value={pet.stats.charisma} label="Charisma" icon={Heart} />
+        <StatBar
+          value={pet.stats.intelligence}
+          maxValue={pet.stats.maxIntelligence}
+          label="Intelligence"
+          icon={Brain}
+        />
+        <StatBar
+          value={pet.stats.strength}
+          maxValue={pet.stats.maxStrength}
+          label="Strength"
+          icon={Dumbbell}
+        />
+        <StatBar
+          value={pet.stats.charisma}
+          maxValue={pet.stats.maxCharisma}
+          label="Charisma"
+          icon={Heart}
+        />
       </div>
 
       <div className="grid grid-cols-2 gap-4">

src/components/PetRegister.tsx

@@ -0,0 +1,67 @@
+import { useState } from 'react';
+import ClassSelection from './ClassSelection';
+import NameModal from './modal/NameModal';
+import ConfirmationModal from './modal/ConfirmationModal';
+import { PetClassInfo } from '../types/Pet';
+import { createPet } from '../services/api/api';
+
+interface PetRegisterProps {
+  onPetCreated: (newPet: any) => void;
+}
+
+export default function PetRegister({ onPetCreated }: PetRegisterProps) {
+  const [showConfirmation, setShowConfirmation] = useState(false);
+  const [showNameModal, setShowNameModal] = useState(false);
+  const [petName, setPetName] = useState('');
+  const [selectedClass, setSelectedClass] = useState<{ key: string; info: PetClassInfo } | null>(null);
+
+  const handleClassSelect = (classKey: string, classInfo: PetClassInfo) => {
+    setSelectedClass({ key: classKey, info: classInfo });
+    setShowConfirmation(true);
+  };
+
+  const handleConfirm = () => {
+    if (!selectedClass) return;
+    setShowConfirmation(false);
+    setShowNameModal(true);
+    setPetName('');
+  };
+
+  const handleNameSubmit = async () => {
+    if (!selectedClass || !petName.trim()) return;
+
+    try {
+      const newPet = await createPet({
+        name: petName.trim(),
+        class: selectedClass.key,
+      });
+      onPetCreated(newPet);
+    } catch (error) {
+      console.error('Error creating pet:', error);
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-gray-900 text-white">
+      {showNameModal && selectedClass ? (
+        <NameModal
+          selectedClass={selectedClass}
+          petName={petName}
+          setPetName={setPetName}
+          handleNameSubmit={handleNameSubmit}
+          setShowNameModal={setShowNameModal}
+          setSelectedClass={setSelectedClass}
+        />
+      ) : showConfirmation && selectedClass ? (
+        <ConfirmationModal
+          selectedClass={selectedClass}
+          handleConfirm={handleConfirm}
+          setShowConfirmation={setShowConfirmation}
+          setSelectedClass={setSelectedClass}
+        />
+      ) : (
+        <ClassSelection onSelect={handleClassSelect} />
+      )}
+    </div>
+  );
+}

src/components/button/ActionButton.tsx

@@ -0,0 +1,25 @@
+import { LucideIcon } from 'lucide-react';
+
+interface ActionButtonProps {
+  icon: LucideIcon;
+  label: string;
+  onClick: () => void;
+  color: string;
+  disabled?: boolean;
+}
+
+export default function ActionButton({ icon: Icon, label, onClick, color, disabled }: ActionButtonProps) {
+  return (
+    <button
+      onClick={onClick}
+      disabled={disabled}
+      className={`flex items-center justify-center space-x-2 bg-${color}-900/30
+        hover:bg-${color}-800/50 border-2 border-${color}-500/50 rounded-lg p-4
+        transition-all duration-300 transform hover:scale-105 w-full
+        ${disabled ? 'opacity-50 cursor-not-allowed' : ''}`}
+    >
+      <Icon className="w-6 h-6" />
+      <span>{label}</span>
+    </button>
+  );
+}

src/components/modal/ResourceSelectionModal.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Brain, Coins, Pizza, X, Loader2, StopCircle } from 'lucide-react';
+import { Brain, Coins, Pizza, X, StopCircle } from 'lucide-react';
 import { Pet } from '../../types/Pet';
 import { formatResourceName, getResourceFromAction } from '../../utils/petUtils';
 
@@ -68,7 +68,7 @@ export default function ResourceSelectionModal({
     return Math.floor(baseStat * multiplier);
   };
 
-  const currentResource = getResourceFromAction(pet.petAction);
+  const currentResource = getResourceFromAction(pet.petGatherAction);
 
   return (
     <div className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center p-4 z-50">

src/services/api/api.ts

@@ -28,7 +28,7 @@ export async function createPet(data: PetCreationRequest): Promise<Pet> {
 
 export async function updatePetAction(petId: string, data: PetUpdateActionRequest): Promise<Pet> {
   try {
-    const response = await api.put<Pet>(`/api/v1/pet/${petId}/action/gather`, data);
+    const response = await api.put<Pet>(`/api/v1/pet/${petId}/action`, data);
     return response.data;
   } catch (error: any) {
     console.error('Failed to update pet action:', error.message);

src/services/api/examples.ts

@@ -1,45 +0,0 @@
-// Example usage of the API service
-import { ApiService } from './index';
-import { Pet } from '../../types/Pet';
-
-// Get API service instance
-const api = ApiService.getInstance();
-
-// Example functions using the API service
-export async function getPet(id: string) {
-  try {
-    const response = await api.get<Pet>(`/pets/${id}`);
-    return response.data;
-  } catch (error: any) {
-    if (api.isNetworkError(error)) {
-      console.error('Network error occurred');
-    } else if (api.isTimeoutError(error)) {
-      console.error('Request timed out');
-    } else if (api.isServerError(error)) {
-      console.error('Server error occurred');
-    }
-    throw error;
-  }
-}
-
-export async function updatePet(id: string, data: Partial<Pet>) {
-  try {
-    const response = await api.put<Pet>(`/pets/${id}`, data);
-    return response.data;
-  } catch (error: any) {
-    console.error('Failed to update pet:', error.message);
-    throw error;
-  }
-}
-
-export async function gatherResources(id: string, resourceType: string) {
-  try {
-    const response = await api.post<{ success: boolean }>(`/pets/${id}/gather`, {
-      resourceType,
-    });
-    return response.data;
-  } catch (error: any) {
-    console.error('Failed to gather resources:', error.message);
-    throw error;
-  }
-}

src/types/Pet.ts

@@ -1,4 +1,4 @@
-import { PetAction } from "./PetUpdateActionRequest";
+import { PetBasicAction, PetGatherAction } from "./PetUpdateActionRequest";
 
 export type PetClass = 'FOREST_SPIRIT' | 'OCEAN_GUARDIAN' | 'FIRE_ELEMENTAL' | 'MYTHICAL_BEAST' | 'SHADOW_WALKER' | 'CYBER_PET' | 'BIO_MECHANICAL';
 
@@ -6,6 +6,9 @@ export interface PetStats {
   intelligence: number;
   strength: number;
   charisma: number;
+  maxIntelligence: number;
+  maxStrength: number;
+  maxCharisma: number;
 }
 
 export interface Resources {
@@ -22,7 +25,9 @@ export interface Pet {
   stats: PetStats;
   resources: Resources;
   level: number;
-  petAction: PetAction;
+  petBasicAction: PetBasicAction;
+  basicActionCooldown: Date;
+  petGatherAction: PetGatherAction;
 }
 
 export interface PetClassInfo {

src/types/PetUpdateActionRequest.ts

@@ -1,5 +1,7 @@
-export type PetAction = 'IDLE' | 'GATHERING_WISDOM' | 'GATHERING_GOLD' | 'GATHERING_FOOD';
+export type PetBasicAction = 'UNKNOWN' | 'FEED' | 'PLAY' | 'SLEEP';
+export type PetGatherAction = 'IDLE' | 'GATHERING_WISDOM' | 'GATHERING_GOLD' | 'GATHERING_FOOD';
 
 export interface PetUpdateActionRequest {
-    petActionGather: PetAction;
-}
+    basicAction?: PetBasicAction;
+    gatherAction?: PetGatherAction;
+}

src/utils/petUtils.ts

@@ -1,14 +1,34 @@
-import { PetAction } from '../types/PetUpdateActionRequest';
+import { PetGatherAction } from '../types/PetUpdateActionRequest';
 
-export function isGatheringAction(action: PetAction): boolean {
+export function isGatheringAction(action: PetGatherAction): boolean {
   return action.startsWith('GATHERING_');
 }
 
-export function getResourceFromAction(action: PetAction): string | null {
-  if (!isGatheringAction(action)) return null;
-  return action.replace('GATHERING_', '').toLowerCase();
+export function getResourceFromAction(action: string): string | null {
+  if (!action) return null;
+
+  const patterns = ['GATHERING_', 'EXPLORING_', 'BATTLE_'];
+  for (const pattern of patterns) {
+    if (action.startsWith(pattern)) {
+      return action.replace(pattern, '').toLowerCase();
+    }
+
+  }
+  return null;
 }
 
 export function formatResourceName(resource: string): string {
   return resource.charAt(0).toUpperCase() + resource.slice(1);
+}
+
+export function isActionActive(action: string, actionType: string): boolean {
+  if (!action) return false;
+
+  const actionMap = {
+    'gather': 'GATHERING_',
+    'explore': 'EXPLORING_',
+    'battle': 'BATTLE_'
+  };
+
+  return action.startsWith(actionMap[actionType] || '');
 }