Dev

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 = () => {
                 <div className="card-details text-center">
                   <h4 className="card-title">{name}</h4>
                   <p className="card-description p2" style={{ height: "auto" }}>
-                    {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}
                   </p>
                 </div>
               </div>

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<string | null>(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 = () => {
       )}
 
       <div className="grid gap-4">
-        <div className="card">
-          <img src={actionImage} alt="Pet" />
+        <div className="card relative">
+          {actionImage && <img src={actionImage} alt="Pet Action" style={{ position: "absolute", top: 0, left: 0 }} />}
+          <img src={petImage} alt="Pet" />
         </div>
 
         <div className="card text-center">

client/src/constants.ts

@@ -1,89 +1,131 @@
+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: "Puppy",
+  },
+  teen: {
+    ...teen,
+    petDescription: "Teen Dog",
+  },
+  adult: {
+    ...adult,
+    petDescription: "Adult Dog",
+  },
+};
+
+const cat = {
+  baby: {
+    ...baby,
+    petDescription: "Kitten",
+  },
+  teen: {
+    ...teen,
+    petDescription: "Teen Cat",
+  },
+  adult: {
+    ...adult,
+    petDescription: "Adult Cat",
+  },
+};
+
+export const petData = { dragon, penguin, unicorn, dog, cat };
 
 export const pets = [
   {
     id: 0,
     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`,
   },
 ];
 
@@ -111,6 +153,7 @@ export const petNames = [
   "Riley",
   "Ziggy",
   "Rex",
+  "Bob",
 ];
 
 export const petColors = [

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;

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