From 5377c4022e0dd5218d21731b88f72296654e25f6 Mon Sep 17 00:00:00 2001 From: Lina Date: Thu, 26 Feb 2026 14:51:41 -0800 Subject: [PATCH 1/3] add dogs, cats, and actions --- client/src/components/VirtualPet.tsx | 19 +++--- client/src/constants.ts | 98 ++++++++++++++++++++-------- client/src/context/constants.ts | 2 +- client/src/utils/getPetData.ts | 4 +- 4 files changed, 83 insertions(+), 40 deletions(-) diff --git a/client/src/components/VirtualPet.tsx b/client/src/components/VirtualPet.tsx index 6beb27f..7493e02 100644 --- a/client/src/components/VirtualPet.tsx +++ b/client/src/components/VirtualPet.tsx @@ -45,11 +45,12 @@ export const VirtualPet = () => { const [petState, setPetState] = useState(initialPetState); const { petDescription } = getPetData( petAge as "baby" | "teen" | "adult", - petType as "dragon" | "penguin" | "unicorn", + petType as "dragon" | "penguin" | "unicorn" | "dog" | "cat", ); const [actionStatus, setActionStatus] = useState("DEFAULT"); - const [actionImage, setActionImage] = useState(`${getS3URL()}/assets/${petType}/normal/${petAge}-color-${color}.png`); + const [petImage, setPetImage] = useState(`${getS3URL()}/assets/${petType}/normal/${petAge}-color-${color}.png`); + const [actionImage, setActionImage] = useState(null); const [selectedColor, setSelectedColor] = useState(color ? petColors[color] : petColors[0]); const [selectedName, setSelectedName] = useState(name || petNames[0]); @@ -99,7 +100,7 @@ export const VirtualPet = () => { }, [actionStatus]); useEffect(() => { - setActionImage(`${getS3URL()}/assets/${petType}/normal/${petAge}-color-${color}.png`); + setPetImage(`${getS3URL()}/assets/${petType}/normal/${petAge}-color-${color}.png`); }, [petAge, color, petType]); const handleSpawnPet = async () => { @@ -240,6 +241,7 @@ export const VirtualPet = () => { }) => { resetErrors(); const { timestamp: rawTimestamp, setActionState, setIsNotReady, action } = actionConfig[actionType]; + console.log("🚀 ~ VirtualPet.tsx:244 ~ actionType:", actionType); const timestamp = rawTimestamp ? Number(rawTimestamp) : 0; const currentTime = Date.now(); @@ -263,13 +265,11 @@ export const VirtualPet = () => { .then((response) => { setGameState(dispatch, response.data); setActionState(true); - setActionImage( - `${getS3URL()}/assets/${petType}/normal/doing-action/${petAge}-color-${color}-${actionType.toLowerCase()}.png`, - ); + setActionImage(`${getS3URL()}/assets/actions/${actionType}.gif`); setTimeout(() => { setActionState(false); - setActionImage(`${getS3URL()}/assets/${petType}/normal/${petAge}-color-${color}.png`); + setActionImage(null); updatePetState({ isLoading: false }); onAnimationEnd(); }, DELAY); @@ -309,8 +309,9 @@ export const VirtualPet = () => { )}
-
- Pet +
+ {actionImage && Pet Action} + Pet
diff --git a/client/src/constants.ts b/client/src/constants.ts index c2e5e10..1af9257 100644 --- a/client/src/constants.ts +++ b/client/src/constants.ts @@ -1,67 +1,95 @@ +import { getS3URL } from "@/utils"; export { defaultPetStatus } from "../../shared/constants.js"; -import dragonImg from "@/assets/dragon/normal/baby.png"; -import penguinImg from "@/assets/penguin/normal/baby.png"; -import unicornImg from "@/assets/unicorn/normal/baby.png"; +const baby = { + beingFedMessage: "So Yummy!!", + notHungryMessage: "I'm not hungry.", +}; +const teen = { + beingFedMessage: "Yum! Thanks for feeding me!!", + notHungryMessage: "I don't want to eat right now.", +}; +const adult = { + beingFedMessage: "So great! Thanks!", + notHungryMessage: "I'm not hungry right now.", +}; const dragon = { baby: { - beingFedMessage: "So Yummy!!", - notHungryMessage: "I'm not hungry.", + ...baby, petDescription: "Baby Dragon", }, - teen: { - beingFedMessage: "Yum! Thanks for feeding me!!", - notHungryMessage: "I don't want to eat right now.", + ...teen, petDescription: "Teen Dragon", }, adult: { - beingFedMessage: "So great! Thanks!", - notHungryMessage: "I'm not hungry right now.", + ...adult, petDescription: "Adult Dragon", }, }; const penguin = { baby: { - beingFedMessage: "So Yummy!!", - notHungryMessage: "I'm not hungry.", + ...baby, petDescription: "Baby Penguin", }, - teen: { - beingFedMessage: "Yum! Thanks for feeding me!!", - notHungryMessage: "I don't want to eat right now.", + ...teen, petDescription: "Teen Penguin", }, adult: { - beingFedMessage: "So great! Thanks!", - notHungryMessage: "I'm not hungry right now.", + ...adult, petDescription: "Adult Penguin", }, }; const unicorn = { baby: { - beingFedMessage: "So Yummy!!", - notHungryMessage: "I'm not hungry.", + ...baby, petDescription: "Baby Unicorn", }, - teen: { - beingFedMessage: "Yum! Thanks for feeding me!!", - notHungryMessage: "I don't want to eat right now.", + ...teen, petDescription: "Teen Unicorn", }, adult: { - beingFedMessage: "So great! Thanks!", - notHungryMessage: "I'm not hungry right now.", + ...adult, petDescription: "Adult Unicorn", }, }; -export const petData = { dragon, penguin, unicorn }; +const dog = { + baby: { + ...baby, + petDescription: "Baby Dog", + }, + teen: { + ...teen, + petDescription: "Teen Dog", + }, + adult: { + ...adult, + petDescription: "Adult Dog", + }, +}; + +const cat = { + baby: { + ...baby, + petDescription: "Baby Cat", + }, + teen: { + ...teen, + petDescription: "Teen Cat", + }, + adult: { + ...adult, + petDescription: "Adult Cat", + }, +}; + +export const petData = { dragon, penguin, unicorn, dog, cat }; export const pets = [ { @@ -69,21 +97,35 @@ export const pets = [ name: "Dragon", petType: "dragon", description: "A mystical, fire-breathing creature that soars through the skies.", - image: dragonImg, + image: `${getS3URL()}/assets/dragon/normal/baby-color-0.png`, }, { id: 1, name: "Penguin", petType: "penguin", description: "A playful bird with striking patterns that swims but does not fly!", - image: penguinImg, + image: `${getS3URL()}/assets/penguin/normal/baby-color-0.png`, }, { id: 2, name: "Unicorn", petType: "unicorn", description: "A magical and majestic creature that is difficult to catch.", - image: unicornImg, + image: `${getS3URL()}/assets/unicorn/normal/baby-color-0.png`, + }, + { + id: 3, + name: "Dog", + petType: "dog", + description: "A loyal and friendly companion that loves to play fetch.", + image: `${getS3URL()}/assets/dog/normal/baby-color-0.png`, + }, + { + id: 4, + name: "Cat", + petType: "cat", + description: "A graceful and independent companion that enjoys both play and relaxation.", + image: `${getS3URL()}/assets/cat/normal/baby-color-0.png`, }, ]; diff --git a/client/src/context/constants.ts b/client/src/context/constants.ts index c47096f..db6c0e4 100644 --- a/client/src/context/constants.ts +++ b/client/src/context/constants.ts @@ -26,4 +26,4 @@ export const SLEEP = "SLEEP"; export const PLAY = "PLAY"; export const TRAIN = "TRAIN"; -export const DELAY = 6000; +export const DELAY = 5000; diff --git a/client/src/utils/getPetData.ts b/client/src/utils/getPetData.ts index 408295f..eb4fbe8 100644 --- a/client/src/utils/getPetData.ts +++ b/client/src/utils/getPetData.ts @@ -1,7 +1,7 @@ import { petData } from "@/constants"; type PetData = { - [key in "dragon" | "penguin" | "unicorn"]: { + [key in "dragon" | "penguin" | "unicorn" | "dog" | "cat"]: { [key in "baby" | "teen" | "adult"]: { beingFedMessage: string; notHungryMessage: string; @@ -12,7 +12,7 @@ type PetData = { export const getPetData = ( petAge: "baby" | "teen" | "adult" = "baby", - petType: "dragon" | "penguin" | "unicorn" = "dragon", + petType: "dragon" | "penguin" | "unicorn" | "dog" | "cat" = "dragon", ) => { return (petData as PetData)[petType][petAge]; }; From 147f430863d5038bf6ce362d7392fd57d4852a82 Mon Sep 17 00:00:00 2001 From: Lina Date: Fri, 27 Feb 2026 10:42:12 -0800 Subject: [PATCH 2/3] update pet names --- client/src/constants.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/client/src/constants.ts b/client/src/constants.ts index 1af9257..2bf9201 100644 --- a/client/src/constants.ts +++ b/client/src/constants.ts @@ -62,7 +62,7 @@ const unicorn = { const dog = { baby: { ...baby, - petDescription: "Baby Dog", + petDescription: "Puppy", }, teen: { ...teen, @@ -77,7 +77,7 @@ const dog = { const cat = { baby: { ...baby, - petDescription: "Baby Cat", + petDescription: "Kitten", }, teen: { ...teen, @@ -153,6 +153,7 @@ export const petNames = [ "Riley", "Ziggy", "Rex", + "Bob", ]; export const petColors = [ From de53834dead3c51aec308ff40b6a9cacdbc62d89 Mon Sep 17 00:00:00 2001 From: Lina Date: Fri, 27 Feb 2026 11:01:28 -0800 Subject: [PATCH 3/3] update select pet description --- client/src/components/SelectPet.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/client/src/components/SelectPet.tsx b/client/src/components/SelectPet.tsx index e0568da..98a5d42 100644 --- a/client/src/components/SelectPet.tsx +++ b/client/src/components/SelectPet.tsx @@ -7,7 +7,7 @@ import { PageFooter } from "./PageFooter"; import { GlobalDispatchContext, GlobalStateContext } from "@/context/GlobalContext"; // utils -import { getS3URL } from "@/utils"; +import { getPetData, getS3URL } from "@/utils"; import { SET_SELECTED_PET } from "@/context/types"; import CreatePet from "./CreatePet"; @@ -45,8 +45,7 @@ export const SelectPet = () => {

{name}

- {petAge && petAge.charAt(0).toUpperCase() + petAge.slice(1)}{" "} - {petType && petType.charAt(0).toUpperCase() + petType.slice(1)} + {getPetData(petAge as "baby" | "teen" | "adult", petType as "dragon" | "penguin" | "unicorn" | "dog" | "cat").petDescription}