ivanch/pet-companion-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: update pet action handling and restructure pet types for better clarity

Browse Source
This commit is contained in:
José Henrique 2025-02-01 15:33:42 -03:00
parent 8875eb75af
commit a85a80938b
11 changed files with 226 additions and 216 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

111
src/App.tsx
View File

@ -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>

47
src/components/GatherResourcesButton.tsx
View File

@ -1,34 +1,35 @@
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 { updatePetAction, getPetGatheredResources } from '../services/api/api';
import { PetGatherAction } from '../types/PetUpdateActionRequest';
import { isGatheringAction, formatResourceName, getResourceFromAction } from '../utils/petUtils';
interface GatherResourcesButtonProps {
pet: Pet;
onGatherStart: () => void;
onGatherComplete: (updatedPet: Pet) => void;
onResourcesUpdate: (resources: Resources) => void;
}
const resourceToActionMap: Record<string, PetAction> = {
const resourceToActionMap: Record<string, PetGatherAction> = {
wisdom: 'GATHERING_WISDOM',
gold: 'GATHERING_GOLD',
food: 'GATHERING_FOOD'
};
export default function GatherResourcesButton({ pet, onGatherStart, onGatherComplete }: GatherResourcesButtonProps) {
export default function GatherResourcesButton({ pet, onGatherStart, onGatherComplete, onResourcesUpdate }: 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 });
const [isGathering, setIsGathering] = useState(isGatheringAction(pet.petGatherAction));
// Initialize gathering check if pet is already gathering
useEffect(() => {
if (isGatheringAction(pet.petAction)) {
if (isGatheringAction(pet.petGatherAction)) {
setIsGathering(true);
const resources = getPetGatheredResources(pet.id).then(setGatheredResources);
getPetGatheredResources(pet.id).then(resources => {
onResourcesUpdate(resources);
});
onGatherStart();
}
}, []);
@ -40,7 +41,7 @@ export default function GatherResourcesButton({ pet, onGatherStart, onGatherComp
interval = setInterval(async () => {
try {
const resources = await getPetGatheredResources(pet.id);
setGatheredResources(resources);
onResourcesUpdate(resources);
} catch (error) {
console.error('Failed to check gathered resources:', error);
}
@ -55,13 +56,13 @@ export default function GatherResourcesButton({ pet, onGatherStart, onGatherComp
}, [isGathering, pet.id]);
useEffect(() => {
setIsGathering(isGatheringAction(pet.petAction));
}, [pet.petAction]);
setIsGathering(isGatheringAction(pet.petGatherAction));
}, [pet.petGatherAction]);
const handleGatherStart = async (resourceType: string) => {
if (resourceType === 'stop') {
try {
await updatePetAction(pet.id, { petActionGather: 'IDLE' });
await updatePetAction(pet.id, { gatherAction: 'IDLE' });
setIsGathering(false);
onGatherComplete(pet);
} catch (error) {
@ -76,7 +77,7 @@ export default function GatherResourcesButton({ pet, onGatherStart, onGatherComp
try {
const petAction = resourceToActionMap[resourceType];
const updatedPet = await updatePetAction(pet.id, { petActionGather: petAction });
const updatedPet = await updatePetAction(pet.id, { gatherAction: petAction });
onGatherComplete(updatedPet);
} catch (error) {
console.error('Failed to gather resources:', error);
@ -85,17 +86,7 @@ export default function GatherResourcesButton({ pet, onGatherStart, onGatherComp
}
};
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);
const currentResource = getResourceFromAction(pet.petGatherAction);
return (
<div>
@ -114,12 +105,6 @@ export default function GatherResourcesButton({ pet, onGatherStart, onGatherComp
</span>
</button>
<CollectResourcesButton
petId={pet.id}
resources={gatheredResources}
onCollect={handleCollect}
/>
<ResourceSelectionModal
isOpen={isModalOpen}
onClose={() => setIsModalOpen(false)}

118
src/components/InteractionMenu.tsx
View File

@ -1,45 +1,119 @@
import { Pizza, PlayCircle, Moon, Paintbrush } from 'lucide-react';
import { Pizza, PlayCircle, Moon } from 'lucide-react';
import GatherResourcesButton from './GatherResourcesButton';
import { Pet } from '../types/Pet';
import { useState } from 'react';
import CollectResourcesButton from './CollectResourcesButton';
import { Pet, Resources } from '../types/Pet';
import { useState, useEffect } from 'react';
import { updatePetAction } from '../services/api/api';
import { PetBasicAction } from '../types/PetUpdateActionRequest';
import ActionButton from './button/ActionButton';
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);
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]);
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);
}
};
}
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" /> */}
{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">
<GatherResourcesButton
pet={pet}
onGatherStart={() => console.log('Gathering started')}
onGatherComplete={handleGatherComplete}
onResourcesUpdate={handleResourcesUpdate}
/>
<CollectResourcesButton
petId={pet.id}
resources={gatheredResources}
onCollect={handleCollect}
/>
</div>
</div>

67
src/components/PetRegister.tsx Normal file
View File

@ -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>
);
}

25
src/components/button/ActionButton.tsx Normal file
View File

@ -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>
);
}

4
src/components/modal/ResourceSelectionModal.tsx
View File

@ -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">

2
src/services/api/api.ts
View File

@ -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);

45
src/services/api/examples.ts
View File

@ -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;
}
}

9
src/types/Pet.ts
View File

@ -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 {

8
src/types/PetUpdateActionRequest.ts
View File

@ -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;
}

6
src/utils/petUtils.ts
View File

@ -1,10 +1,10 @@
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 {
export function getResourceFromAction(action: PetGatherAction): string | null {
if (!isGatheringAction(action)) return null;
return action.replace('GATHERING_', '').toLowerCase();
}