From 88a9c6507ca7122d7cefbb232531c57cbcb61876 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jos=C3=A9=20Henrique?= Date: Sun, 9 Feb 2025 21:23:07 -0300 Subject: [PATCH] refactor: reorganize pet action types and update related components for improved resource management --- src/components/ActionResourceButton.tsx | 35 +++++++++++++++----- src/components/CollectResourcesButton.tsx | 30 ++++++++++------- src/components/InteractionMenu.tsx | 29 ++++++----------- src/services/api/api.ts | 6 ++-- src/types/Pet.ts | 2 +- src/types/PetAction.ts | 22 +++++++++++++ src/types/PetUpdateActionRequest.ts | 7 ---- src/utils/petUtils.ts | 39 ++++++++++------------- 8 files changed, 98 insertions(+), 72 deletions(-) create mode 100644 src/types/PetAction.ts delete mode 100644 src/types/PetUpdateActionRequest.ts diff --git a/src/components/ActionResourceButton.tsx b/src/components/ActionResourceButton.tsx index 43645f1..50751b8 100644 --- a/src/components/ActionResourceButton.tsx +++ b/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 ( ); } diff --git a/src/components/CollectResourcesButton.tsx b/src/components/CollectResourcesButton.tsx index 4a37418..6b9173d 100644 --- a/src/components/CollectResourcesButton.tsx +++ b/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) { - const hasResources = Object.values(resources).some(value => value > 0); +export default function CollectResourcesButton({ petId, resources, onCollect, onPetUpdate }: CollectResourcesButtonProps) { + 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 ( ); } diff --git a/src/components/InteractionMenu.tsx b/src/components/InteractionMenu.tsx index cf2e1ef..d2beb75 100755 --- a/src/components/InteractionMenu.tsx +++ b/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({ wisdom: 0, gold: 0, food: 0, junk: 0 }); + const [gatheredResources, setGatheredResources] = useState([]); const [remainingCooldown, setRemainingCooldown] = useState(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 (
{remainingCooldown !== null && ( @@ -175,7 +168,6 @@ export default function InteractionMenu({ pet, onPetUpdate }: InteractionMenuPro color="amber" onActionClick={() => handleActionStart('gather')} onActionComplete={handleGatherComplete} - onResourcesUpdate={handleResourcesUpdate} /> handleActionStart('explore')} onActionComplete={handleGatherComplete} - onResourcesUpdate={handleResourcesUpdate} /> handleActionStart('battle')} onActionComplete={handleGatherComplete} - onResourcesUpdate={handleResourcesUpdate} />
@@ -204,6 +194,7 @@ export default function InteractionMenu({ pet, onPetUpdate }: InteractionMenuPro petId={pet.id} resources={gatheredResources} onCollect={handleCollect} + onPetUpdate={onPetUpdate} /> diff --git a/src/services/api/api.ts b/src/services/api/api.ts index 5d9f6fb..92a2c6c 100644 --- a/src/services/api/api.ts +++ b/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 { - const response = await api.get(`/api/v1/pet/${petId}/resources/gathered`); +export async function getPetGatheredResources(petId: string): Promise { + const response = await api.get(`/api/v1/pet/${petId}/resources/gathered`); return response.data; } diff --git a/src/types/Pet.ts b/src/types/Pet.ts index c146560..a805102 100755 --- a/src/types/Pet.ts +++ b/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'; diff --git a/src/types/PetAction.ts b/src/types/PetAction.ts new file mode 100644 index 0000000..88b295d --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/src/types/PetUpdateActionRequest.ts b/src/types/PetUpdateActionRequest.ts deleted file mode 100644 index ca5d305..0000000 --- a/src/types/PetUpdateActionRequest.ts +++ /dev/null @@ -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; -} diff --git a/src/utils/petUtils.ts b/src/utils/petUtils.ts index 57782c0..2723da3 100644 --- a/src/utils/petUtils.ts +++ b/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 { - if (!action) return null; - - const patterns = ['GATHERING_', 'EXPLORING_', 'BATTLE_']; - for (const pattern of patterns) { - if (action.startsWith(pattern)) { - return action.replace(pattern, '').toLowerCase(); - } +export function isActionActive(currentAction: PetGatherAction, actionType: 'gather' | 'explore' | 'battle'): boolean { + if (actionType === 'gather') { + return currentAction.startsWith('GATHERING_'); + } + if (actionType === 'explore') { + return currentAction === 'EXPLORE'; + } + 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); -} - -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] || ''); + return resource.charAt(0).toUpperCase() + resource.slice(1).toLowerCase(); } \ No newline at end of file