Build a Digital Pet Game - Build a Digital Pet Game

[royrudro032]

Tell us what’s happening:

I’m stuck on test #4

Before submit: the form is rendered.
After submit: setHasStarted(true) is called and the game view is rendered.

Your code so far

<!-- file: index.html -->

/* file: styles.css */

/* file: index.tsx */
const { useState, useEffect } = React;

enum Action {
  EAT = "EAT",
  PLAY = "PLAY",
  SLEEP = "SLEEP",
}

export enum PetMood {
  HAPPY = "Happy",
  EXCITED = "Excited",
  CONTENT = "Content",
  SAD = "Sad",
  TIRED = "Tired",
  SICK = "Sick",
  HUNGRY = "Hungry",
}


const petMoodEmoji: Record<PetMood, string> = {
  [PetMood.HAPPY]: "😊",
  [PetMood.EXCITED]: "🤩",
  [PetMood.CONTENT]: "😌",
  [PetMood.SAD]: "😢",
  [PetMood.TIRED]: "😴",
  [PetMood.SICK]: "🤒",
  [PetMood.HUNGRY]: "🍖",
};

export const PetGame = () => {
  const [petName, setPetName] = useState("");
  const [hasStarted, setHasStarted] = useState(false);
  const [hunger, setHunger] = useState(0);
  const [energy, setEnergy] = useState(100);
  const [happiness, setHappiness] = useState(100);

  const getPetMood = (): PetMood => {
    if (hunger > 90 && energy < 20) {
      return PetMood.SICK;
    }

    if (hunger > 70) {
      return PetMood.HUNGRY;
    }

    if (energy < 30) {
      return PetMood.TIRED;
    }

    if (happiness < 30) {
      return PetMood.SAD;
    }

    if (happiness > 80 && energy > 70) {
      return PetMood.EXCITED;
    }

    if (happiness > 60) {
      return PetMood.HAPPY;
    }

    return PetMood.CONTENT;
  };

  const handleEat = () => {
    setHunger((prev) => (prev > 0 ? prev - 10 : prev));
    setEnergy((prev) => (prev < 100 ? prev + 10 : prev));
  };

  const handlePlay = () => {
    setEnergy((prev) => (prev > 0 ? prev - 10 : prev));
    setHappiness((prev) => (prev < 100 ? prev + 10 : prev));
  };

  const handleSleep = () => {
    setHunger((prev) => (prev < 100 ? prev + 10 : prev));
    setEnergy((prev) => (prev < 100 ? prev + 10 : prev));
  };
  const handleAction = (action: Action) => {
    switch (action) {
      case Action.EAT:
        handleEat();
        break;

      case Action.PLAY:
        handlePlay();
        break;

      case Action.SLEEP:
        handleSleep();
        break;
    }
  };
  const currentMood = getPetMood();

  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    if (!petName.trim()) return;
    setHasStarted(true);
  };
  useEffect(() => {
    if (!hasStarted) return;

    const timer = setInterval(() => {
      setHunger((prev) => Math.min(prev + 10, 100));
      setEnergy((prev) => Math.min(prev + 10, 100));
      setHappiness((prev) => Math.max(prev - 10, 0));
    }, 1000);

    return () => clearInterval(timer);
  }, [hasStarted]);

  return (
    <main>
      {!hasStarted && (
        <form className="base-container" id="pet-form" onSubmit={handleSubmit}>
         
            <label htmlFor="pet-name">What is your pet's name?</label>

            <input
              id="pet-name"
              name="pet-name"
              type="text"
              value={petName}
              onChange={(e) => setPetName(e.target.value)}
            />

            <button type="submit" id="start-game">
              Start Game
            </button>
          </form>
      )}
      {hasStarted && (
        <section className="game-container">
          <div className="pet-mood">
            {petMoodEmoji[currentMood]}
            <p className="mood-text">{currentMood}</p>
          </div>
          <h2 className="pet-name">{petName}</h2>

          <div className="pet-buttons">
            <button
              type="button"
              className="pet-button"
              id="eat-action"
              onClick={() => handleAction(Action.EAT)}
            >
              EAT
            </button>

            <button
              type="button"
              className="pet-button"
              id="play-action"
              onClick={() => handleAction(Action.PLAY)}
            >
              PLAY
            </button>

            <button
              type="button"
              className="pet-button"
              id="sleep-action"
              onClick={() => handleAction(Action.SLEEP)}
            >
              SLEEP
            </button>
          </div>

          <div className="stats-grid">
            <div className="stat">
              Hunger
              <span className="stat-value">{hunger}</span>
            </div>

            <div className="stat">
              Energy
              <span className="stat-value">{energy}</span>
            </div>

            <div className="stat">
              Happiness
              <span className="stat-value">{happiness}</span>
            </div>
          </div>
        </section>
      )}
    </main>
  );
};

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/149.0.0.0 Safari/537.36

Challenge Information:

Build a Digital Pet Game - Build a Digital Pet Game

freeCodeCamp.org

GitHub Link: freeCodeCamp/curriculum/challenges/english/blocks/lab-digital-pet-game/68c362b379059c388d3874f2.md at main · freeCodeCamp/freeCodeCamp · GitHub