refactor: reorganize pet action types and update related components for improved resource management

src/components/ActionResourceButton.tsx

@@ -1,5 +1,5 @@
 import { LucideIcon } from 'lucide-react';
-import { Pet, Resources } from '../types/Pet';
+import { Pet } from '../types/Pet';
 import { isActionActive, formatResourceName, getResourceFromAction } from '../utils/petUtils';
 
 const colorClassMap = {
@@ -11,6 +11,15 @@ const colorClassMap = {
   purple: 'bg-purple-900/30 hover:bg-purple-800/50 border-purple-500/50',
 } as const;
 
+const activeColorClassMap = {
+  amber: 'bg-amber-700/50 border-amber-400',
+  emerald: 'bg-emerald-700/50 border-emerald-400',
+  red: 'bg-red-700/50 border-red-400',
+  green: 'bg-green-700/50 border-green-400',
+  blue: 'bg-blue-700/50 border-blue-400',
+  purple: 'bg-purple-700/50 border-purple-400',
+} as const;
+
 const getActionVerb = (actionType: 'gather' | 'explore' | 'battle'): string => {
   const verbs = {
     gather: 'Gathering',
@@ -30,7 +39,6 @@ interface ActionResourceButtonProps {
   color: ButtonColor;
   onActionClick: () => void;
   onActionComplete: (updatedPet: Pet) => void;
-  onResourcesUpdate: (resources: Resources) => void;
 }
 
 export default function ActionResourceButton({
@@ -44,20 +52,31 @@ export default function ActionResourceButton({
   const isActive = isActionActive(pet.petGatherAction, actionType);
   const currentResource = getResourceFromAction(pet.petGatherAction);
 
+  const getButtonText = () => {
+    if (!isActive) return label;
+
+    if (actionType === 'explore' && pet.petGatherAction === 'EXPLORE') {
+      return 'Exploring';
+    }
+    if (actionType === 'battle' && pet.petGatherAction === 'BATTLE') {
+      return 'Battling';
+    }
+    if (currentResource) {
+      return `${getActionVerb(actionType)} ${formatResourceName(currentResource)}`;
+    }
+    return label;
+  };
+
   return (
     <button
       onClick={onActionClick}
       className={`flex items-center justify-center space-x-2
-        ${colorClassMap[color]}
+        ${isActive ? activeColorClassMap[color] : 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>
+      <span>{getButtonText()}</span>
-        {isActive && currentResource
-          ? `${getActionVerb(actionType)} ${formatResourceName(currentResource)}`
-          : label}
-      </span>
     </button>
   );
 }

src/components/CollectResourcesButton.tsx

@@ -1,20 +1,23 @@
-import { Resources } from '../types/Pet';
 import { putPetCollectResources } from '../services/api/api';
+import { PetActionGathered } from '../types/PetAction';
+import { Pet } from '../types/Pet';
 
 interface CollectResourcesButtonProps {
   petId: string;
-  resources: Resources;
+  resources: PetActionGathered[];
   onCollect: () => void;
+  onPetUpdate: (pet: Pet) => void;
 }
 
-export default function CollectResourcesButton({ petId, resources, onCollect }: CollectResourcesButtonProps) {
+export default function CollectResourcesButton({ petId, resources, onCollect, onPetUpdate }: CollectResourcesButtonProps) {
-  const hasResources = Object.values(resources).some(value => value > 0);
+  const hasResources = Object.values(resources).length > 0;
 
   if (!hasResources) return null;
 
   const handleCollect = async () => {
     try {
-      await putPetCollectResources(petId);
+      const updatedPet = await putPetCollectResources(petId);
+      onPetUpdate(updatedPet);
       onCollect();
     } catch (error) {
       console.error('Failed to collect resources:', error);
@@ -24,17 +27,20 @@ export default function CollectResourcesButton({ petId, resources, onCollect }:
   return (
     <button
       onClick={handleCollect}
-      className="flex items-center justify-center space-x-2
+      className="flex flex-col items-center justify-center
         bg-green-900/30 hover:bg-green-800/50
         border-2 border-green-500/50 rounded-lg p-4
         transition-all duration-300 transform hover:scale-105 w-full mt-2"
     >
-      <span>
+      <span className="font-bold mb-1">Collect:</span>
-        Collect: {Object.entries(resources)
+      {resources.map((item, index) => (
-          .filter(([_, value]) => value > 0)
+        <span key={index}>
-          .map(([key, value]) => `${value} ${key}`)
+          {item.gameItem
-          .join(', ')}
+            ? item.gameItem.name
-      </span>
+            : `${item.resource} x${item.amount}`
+          }
+        </span>
+      ))}
     </button>
   );
 }

src/components/InteractionMenu.tsx

@@ -1,13 +1,12 @@
 import { Pizza, PlayCircle, Moon, Compass, Sword, FeatherIcon } from 'lucide-react';
 import CollectResourcesButton from './CollectResourcesButton';
-import { Pet, Resources } from '../types/Pet';
+import { Pet } from '../types/Pet';
 import { useState, useEffect } from 'react';
 import { updatePetAction, getPetGatheredResources } from '../services/api/api';
-import { PetBasicAction } from '../types/PetUpdateActionRequest';
+import { PetActionGathered, PetBasicAction, PetGatherAction } from '../types/PetAction';
 import ActionButton from './button/ActionButton';
 import ActionResourceButton from './ActionResourceButton';
 import ResourceSelectionModal from './modal/ResourceSelectionModal';
-import { PetAction } from '../types/PetUpdateActionRequest';
 
 interface InteractionMenuProps {
   pet: Pet;
@@ -16,10 +15,9 @@ interface InteractionMenuProps {
 }
 
 export default function InteractionMenu({ pet, onPetUpdate }: InteractionMenuProps) {
-  const [gatheredResources, setGatheredResources] = useState<Resources>({ wisdom: 0, gold: 0, food: 0, junk: 0 });
+  const [gatheredResources, setGatheredResources] = useState<PetActionGathered[]>([]);
   const [remainingCooldown, setRemainingCooldown] = useState<number | null>(null);
   const [isModalOpen, setIsModalOpen] = useState(false);
-  const [selectedActionType, setSelectedActionType] = useState<'gather' | 'explore' | 'battle' | null>(null);
 
   useEffect(() => {
     const updateCooldown = () => {
@@ -78,14 +76,6 @@ export default function InteractionMenu({ pet, onPetUpdate }: InteractionMenuPro
     onPetUpdate(updatedPet);
   };
 
-  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 {
@@ -99,13 +89,12 @@ export default function InteractionMenu({ pet, onPetUpdate }: InteractionMenuPro
 
   const handleActionStart = async (actionType: 'gather' | 'explore' | 'battle') => {
     if (actionType === 'gather') {
-      setSelectedActionType(actionType);
       setIsModalOpen(true);
       return;
     }
 
     try {
-      const action: PetAction = actionType === 'explore' ? 'EXPLORING' : 'BATTLE';
+      const action: PetGatherAction = actionType === 'explore' ? 'EXPLORE' : 'BATTLE';
       const updatedPet = await updatePetAction(pet.id, { gatherAction: action });
       onPetUpdate(updatedPet);
     } catch (error) {
@@ -126,7 +115,7 @@ export default function InteractionMenu({ pet, onPetUpdate }: InteractionMenuPro
     }
 
     try {
-      const action: PetAction = `GATHERING_${resourceType.toUpperCase()}` as PetAction;
+      const action: PetGatherAction = `GATHERING_${resourceType.toUpperCase()}` as PetGatherAction;
       const updatedPet = await updatePetAction(pet.id, { gatherAction: action });
       onPetUpdate(updatedPet);
     } catch (error) {
@@ -136,6 +125,10 @@ export default function InteractionMenu({ pet, onPetUpdate }: InteractionMenuPro
     }
   };
 
+  const handleCollect = () => {
+    setGatheredResources([]);
+  }
+
   return (
     <div className="grid grid-cols-2 md:grid-cols-3 gap-4 bg-gray-900 p-6 rounded-xl shadow-xl">
       {remainingCooldown !== null && (
@@ -175,7 +168,6 @@ export default function InteractionMenu({ pet, onPetUpdate }: InteractionMenuPro
           color="amber"
           onActionClick={() => handleActionStart('gather')}
           onActionComplete={handleGatherComplete}
-          onResourcesUpdate={handleResourcesUpdate}
         />
         <ActionResourceButton
           pet={pet}
@@ -185,7 +177,6 @@ export default function InteractionMenu({ pet, onPetUpdate }: InteractionMenuPro
           color="emerald"
           onActionClick={() => handleActionStart('explore')}
           onActionComplete={handleGatherComplete}
-          onResourcesUpdate={handleResourcesUpdate}
         />
         <ActionResourceButton
           pet={pet}
@@ -195,7 +186,6 @@ export default function InteractionMenu({ pet, onPetUpdate }: InteractionMenuPro
           color="red"
           onActionClick={() => handleActionStart('battle')}
           onActionComplete={handleGatherComplete}
-          onResourcesUpdate={handleResourcesUpdate}
         />
       </div>
 
@@ -204,6 +194,7 @@ export default function InteractionMenu({ pet, onPetUpdate }: InteractionMenuPro
           petId={pet.id}
           resources={gatheredResources}
           onCollect={handleCollect}
+          onPetUpdate={onPetUpdate}
         />
       </div>
 

src/services/api/api.ts

@@ -1,7 +1,7 @@
 import { ApiService } from './index';
 import { InvItemInteraction, Pet, Resources } from '../../types/Pet';
 import { PetCreationRequest } from '../../types/PetCreationRequest';
-import { PetUpdateActionRequest } from '../../types/PetUpdateActionRequest';
+import { PetActionGathered, PetUpdateActionRequest } from '../../types/PetAction';
 import { PetSkill, Skill } from '../../types/Skills';
 
 // Get API service instance
@@ -22,8 +22,8 @@ export async function updatePetAction(petId: string, data: PetUpdateActionReques
   return response.data;
 }
 
-export async function getPetGatheredResources(petId: string): Promise<Resources> {
+export async function getPetGatheredResources(petId: string): Promise<PetActionGathered[]> {
-  const response = await api.get<Resources>(`/api/v1/pet/${petId}/resources/gathered`);
+  const response = await api.get<PetActionGathered[]>(`/api/v1/pet/${petId}/resources/gathered`);
   return response.data;
 }
 

src/types/Pet.ts

@@ -1,4 +1,4 @@
-import { PetBasicAction, PetGatherAction } from "./PetUpdateActionRequest";
+import { PetBasicAction, PetGatherAction } from "./PetAction";
 
 export type PetClass = 'FOREST_SPIRIT' | 'OCEAN_GUARDIAN' | 'FIRE_ELEMENTAL' | 'MYTHICAL_BEAST' | 'SHADOW_WALKER' | 'CYBER_PET' | 'BIO_MECHANICAL';
 

src/types/PetAction.ts

@@ -0,0 +1,22 @@
+export type PetBasicAction = 'UNKNOWN' | 'FEED' | 'PLAY' | 'SLEEP';
+export type PetGatherAction = 'IDLE' | 'GATHERING_WISDOM' | 'GATHERING_GOLD' | 'GATHERING_FOOD' | 'EXPLORE' | 'BATTLE';
+
+export interface PetUpdateActionRequest {
+    basicAction?: PetBasicAction;
+    gatherAction?: PetGatherAction;
+}
+
+export interface PetActionGathered {
+    petId: string;
+    resource: string;
+    itemId: number;
+    amount: number;
+    gameItem: PetGatheredItem;
+}
+
+export interface PetGatheredItem {
+    id: number;
+    name: number;
+    type: string;
+    rarity: string;
+}

src/types/PetUpdateActionRequest.ts

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

src/utils/petUtils.ts

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