From fde22ee9c26396397fb8ad03932b190069be738b Mon Sep 17 00:00:00 2001
From: zyl <z@zyl.gay>
Date: Mon, 24 Jun 2024 23:21:00 -0700
Subject: [PATCH] pet logic is implemented!!

---
 site/pages/pet.md   |  42 ++++++--
 site/root/js/pet.js | 255 ++++++++++++++++++++++++++++++++++++++++----
 site/sass/pet.scss  |  16 ++-
 3 files changed, 279 insertions(+), 34 deletions(-)

diff --git a/site/pages/pet.md b/site/pages/pet.md
index 8c24bf6..7fa0eb4 100644
--- a/site/pages/pet.md
+++ b/site/pages/pet.md
@@ -4,22 +4,50 @@ scripts: ["js/pet.js"]
 styles: ["pet.css"]
 ---
 
+<div id="pet">
+<noscript><p>javascript is required for the pet game!!</p></noscript>
 <div id="pet-display">
+	<h2 class="pet-name"></h2>
 	<p>--pet placeholder here--</p>
 	<!-- TODO: make pets interactable -->
 </div>
 
 <div id="egg">
-	<p>whoa! you just found an egg somewhere! maybe you should watch it and see what happens..</p>
+	<p>whoa! you just found a weird egg! maybe you should watch it and see what happens..</p>
 </div>
 
-<div id="pet-setup" class="hidden">
+<div id="adult-info" class="hidden">
+	<p><span class="pet-name"></span> has grown up to be an adult!! what will they do with their life now....</p>
+	<button class="advance">okay!</button>
+</div>
+
+<div id="elder-info" class="hidden">
+	<p>oh? <span class="pet-name"></span> has aged and is now an elder creature! they may not have much left in their life.... hopefully it's been a good life!</p>
+	<button class="advance">hopefully!!</button>
+</div>
+
+<div id="passed-away-info" class="hidden">
+	<p>oh... <span class="pet-name"></span> has finally gone and kicked the bucket. its story comes to an end....</p>
+	<button>but what's this egg lying here about..?</button>
+</div>
+
+<form id="pet-setup" class="hidden">
 	<p>whoa! your egg just hatched into a new creature! what should you name it?</p>
-	<input type="text" name="pet-name" max-length="50">
-	<button>name it!</button>
+		<input type="text" name="pet-name" min-length="3" max-length="50">
+		<button type="submit">name it!</button>
+</form>
+
+<div id="pet-actions">
+	<div name="hatched-actions" class="hidden">
+		<button name="feed">feed</button>
+		<button name="pet">pet</button>
+		<button name="clean">clean</button>
+	</div>
+	<button name="pause">pause</button>
 </div>
 
-<div id="debug-section">
-	<button id="force-update">force update</button>
-	<p>LS: <span name="ls"></span> A: <span name="a"></span> F: <span name="f"></span> B: <span name="b"></span> P: <span name="p"></span></p>
+<div id="debug-section" class="hidden">
+	<button id="force-update">force update</button> <button id="reset">reset</button>
+	<p>LS: <span name="ls"></span> A: <span name="a"></span> F: <span name="f"></span> B: <span name="b"></span> P: <span name="p"></span> MC: <span name="mc"></span> H: <span name="h"></span></p>
+</div>
 </div>
diff --git a/site/root/js/pet.js b/site/root/js/pet.js
index 125f176..aa1e4f9 100644
--- a/site/root/js/pet.js
+++ b/site/root/js/pet.js
@@ -1,6 +1,10 @@
 (function () {
   "use strict";
 
+  const UPDATES_PER_MINUTE = 2;
+  const UPDATES_PER_HOUR = UPDATES_PER_MINUTE * 60;
+  const UPDATES_PER_DAY = UPDATES_PER_HOUR * 24;
+
   /** the current pet version.. */
   const CURRENT_PET_VERSION = 1;
   /** the max food a pet will eat */
@@ -8,11 +12,37 @@
   /** the amount of time it takes for a pet to have to GO */
   const POTTY_TIME = 100;
   /** how fast a pet's food value decays */
-  const FOOD_DECAY = 5;
+  const FOOD_DECAY = MAX_FOOD / (UPDATES_PER_HOUR * 8); // to stay on top should be fed roughly once every 8 hours?
   /** the rate at which a pet ages */
   const AGING_RATE = 1;
   /** how fast a pet's potty need decays */
-  const POTTY_DECAY = 5;
+  const POTTY_DECAY = FOOD_DECAY / 2; // roughly every 4 hours?
+  /** how much mess can be in a pet's space at once */
+  const MAX_MESS = 5;
+  /** how fast a pet's happiness decays */
+  const HAPPINESS_DECAY = FOOD_DECAY;
+  /** a pet's maximum happiness */
+  const MAX_HAPPINESS = 100;
+  /** how quickly a pet's happiness will be reduced by when hungry */
+  const HAPPINESS_EMPTY_STOMACH_MODIFIER = -10 / UPDATES_PER_HOUR;
+  /** how quickly a pet's happiness will be reduced by when their space is messy, per piece of mess */
+  const HAPPINESS_MESS_MODIFIER = -5 / UPDATES_PER_HOUR;
+
+  /** the amount of happiness gained when the pet is fed (excluding when the pet doesn't yet need food) */
+  const FEED_HAPPINESS = 5;
+  /** the amount of happiness gained when the pet is pet */
+  const PET_HAPPINESS = 20;
+  /** the amount of happiness gained when the pet's space is cleaned */
+  const CLEAN_HAPPINESS = 1;
+
+  /** the minimum amount of time between feedings */
+  const FEED_TIMER = 5000;
+  /** the minimum amount of time between pets */
+  const PET_TIMER = 2000;
+  /** the minimum amount of time between cleans */
+  const CLEAN_TIMER = 5000;
+
+  const PET_SAVE_KEY = "pet-game";
 
   /** life stage for an egg */
   const LIFE_STAGE_EGG = 1;
@@ -23,25 +53,45 @@
   /** life stage for an elder pet */
   const LIFE_STAGE_ELDER = 4;
   /** the time it takes for a pet to grow past the egg phase */
-  const EGG_TIME = 2;
+  const EGG_TIME = UPDATES_PER_MINUTE;
   /** the time it takes for a pet to grow past the pup phase */
-  const PUP_TIME = 300;
+  const PUP_TIME = UPDATES_PER_DAY * 7;
   /** the time it takes for a pet to grow past the adult phase */
-  const ADULT_TIME = 900;
+  const ADULT_TIME = UPDATES_PER_DAY * 15;
   /** the time it takes for a pet to grow past the elder phase */
-  const ELDER_TIME = 300;
+  const ELDER_TIME = UPDATES_PER_DAY * 7;
 
+  const petDisplay = document.querySelector("#pet-display");
+  const petName = document.querySelectorAll(".pet-name");
   const eggDiv = document.querySelector("div#egg");
-  const petSetup = document.querySelector("div#pet-setup");
+  const petSetup = document.querySelector("#pet-setup");
+  const adultInfo = document.querySelector("div#adult-info");
+  const elderInfo = document.querySelector("div#elder-info");
+  const passedAwayInfo = document.querySelector("div#passed-away-info");
   const name = petSetup.querySelector("input[name=pet-name]");
   const nameItButton = petSetup.querySelector("button");
+
+  const petActions = document.querySelector("div#pet-actions");
+  const pauseButton = petActions.querySelector("button[name=pause]");
+  const hatchedActions = petActions.querySelector("div[name=hatched-actions]");
+  const feedButton = hatchedActions.querySelector("button[name=feed]");
+  const petButton = hatchedActions.querySelector("button[name=pet]");
+  const cleanButton = hatchedActions.querySelector("button[name=clean]");
+
   const debug = document.querySelector("div#debug-section");
   const debugLifeStage = debug.querySelector("span[name=ls]");
   const debugAge = debug.querySelector("span[name=a]");
   const debugFood = debug.querySelector("span[name=f]");
   const debugBehavior = debug.querySelector("span[name=b]");
   const debugPotty = debug.querySelector("span[name=p]");
+  const debugMessCounter = debug.querySelector("span[name=mc]");
+  const debugHappiness = debug.querySelector("span[name=h]");
   const forceUpdateButton = debug.querySelector("button#force-update");
+  const resetButton = debug.querySelector("button#reset");
+
+  let canFeed = true;
+  let canPet = true;
+  let canClean = true;
 
   /**
    * class containing information about a pet
@@ -55,6 +105,8 @@
     alive = true;
     /** whether the pet simulation is paused */
     paused = false;
+    /** whether the pet simulation needs an interactive advancement */
+    needsAdvancement = false;
     /** the pet's current life stage */
     lifeStage = LIFE_STAGE_EGG;
     /** the pet's name */
@@ -67,6 +119,10 @@
     behavior = 0;
     /** how long until the pet needs to go potty */
     pottyTimer = POTTY_TIME;
+    /** how much mess the pet has made */
+    messCounter = 0;
+    /** the pet's current happiness */
+    #happiness = MAX_HAPPINESS;
     /** the time the pet was last updated */
     lastUpdate = Date.now();
     /** the time the egg was found */
@@ -78,50 +134,55 @@
      * updates a pet
      */
     update() {
-      if (!this.alive || this.paused) {
+      if (!this.alive || this.paused || this.needsAdvancement) {
         return;
       }
       console.log("update");
 
+      this.lastUpdate = Date.now();
       this.age += AGING_RATE;
 
       if (this.lifeStage !== LIFE_STAGE_EGG) {
         this.food -= FOOD_DECAY;
         this.pottyTimer -= POTTY_DECAY;
+        this.happiness -= HAPPINESS_DECAY;
 
         if (this.food < 0) {
+          this.happiness += HAPPINESS_EMPTY_STOMACH_MODIFIER;
+          this.food = 0;
           if (this.canDie) {
             // TODO: pet dies
-          } else {
-            this.food = 0;
           }
         }
 
         if (this.pottyTimer < 0) {
           this.goPotty();
         }
+        for (let i = 0; i < this.messCounter; i++) {
+          this.happiness += HAPPINESS_MESS_MODIFIER;
+        }
       }
 
       if (this.lifeStage === LIFE_STAGE_EGG && this.age >= EGG_TIME) {
-        this.paused = true;
+        this.needsAdvancement = true;
         this.lifeStage = LIFE_STAGE_PUP;
         this.age = 0;
       } else if (this.lifeStage === LIFE_STAGE_PUP && this.age >= PUP_TIME) {
-        this.paused = true;
+        this.needsAdvancement = true;
         this.lifeStage = LIFE_STAGE_ADULT;
         this.age = 0;
       } else if (
         this.lifeStage === LIFE_STAGE_ADULT &&
         this.age >= ADULT_TIME
       ) {
-        this.paused = true;
+        this.needsAdvancement = true;
         this.lifeStage = LIFE_STAGE_ELDER;
         this.age = 0;
       } else if (
         this.lifeStage === LIFE_STAGE_ELDER &&
         this.age >= ELDER_TIME
       ) {
-        this.paused = true;
+        this.needsAdvancement = true;
         this.alive = false;
         // TODO: DEATH
       }
@@ -134,15 +195,27 @@
     updateDom() {
       eggDiv.classList.add("hidden");
       petSetup.classList.add("hidden");
+      hatchedActions.classList.remove("hidden");
 
       if (this.lifeStage === LIFE_STAGE_EGG) {
         eggDiv.classList.remove("hidden");
+        hatchedActions.classList.add("hidden");
       } else if (this.lifeStage === LIFE_STAGE_PUP) {
-        if (this.paused && this.name === "") {
+        if (this.needsAdvancement) {
           petSetup.classList.remove("hidden");
         }
       } else if (this.lifeStage === LIFE_STAGE_ADULT) {
+        if (this.needsAdvancement) {
+          adultInfo.classList.remove("hidden");
+        }
       } else if (this.lifeStage === LIFE_STAGE_ELDER) {
+        if (this.needsAdvancement) {
+          if (this.alive) {
+            elderInfo.classList.remove("hidden");
+          } else {
+            passedAwayInfo.classList.remove("hidden");
+          }
+        }
       }
 
       debugLifeStage.innerText = this.lifeStage;
@@ -150,6 +223,10 @@
       debugFood.innerText = this.food;
       debugBehavior.innerText = this.behavior;
       debugPotty.innerText = this.pottyTimer;
+      debugMessCounter.innerText = this.messCounter;
+      debugHappiness.innerText = this.happiness;
+
+      this.save();
     }
 
     /**
@@ -161,6 +238,10 @@
         return;
       }
       this.food += amount;
+      if (this.food <= MAX_FOOD) {
+        this.happiness += FEED_HAPPINESS;
+      }
+      this.updateDom();
     }
 
     /**
@@ -170,34 +251,164 @@
       if (this.behavior > 15) {
         // go potty properly
       } else {
-        // make a mess of that shit
+        this.messCounter += 1;
+        if (this.messCounter > MAX_MESS) {
+          this.messCounter = MAX_MESS;
+        }
       }
       this.pottyTimer = POTTY_TIME;
+      pet.updateDom();
+    }
+
+    /**
+     * pets the pet
+     */
+    pet() {
+      this.behavior += 0.5;
+      this.happiness += PET_HAPPINESS;
+      pet.updateDom();
+    }
+
+    /**
+     * cleans the pet's space
+     */
+    clean() {
+      if (this.messCounter > 0) {
+        this.messCounter -= 1;
+        this.happiness += CLEAN_HAPPINESS;
+      } else {
+        this.behavior += 1;
+        this.happiness -= CLEAN_HAPPINESS;
+      }
+      pet.updateDom();
+    }
+
+    /**
+     * saves the pet
+     */
+    save() {
+      localStorage.setItem(PET_SAVE_KEY, JSON.stringify(this));
+    }
+
+    /**
+     * loads the pet
+     */
+    load() {
+      const item = localStorage.getItem(PET_SAVE_KEY);
+      if (item != undefined) {
+        const loaded = JSON.parse(localStorage.getItem(PET_SAVE_KEY));
+        for (let k of Object.keys(loaded)) {
+          this[k] = loaded[k];
+        }
+        this.version = CURRENT_PET_VERSION;
+        this.updateDom();
+      }
+    }
+
+    /** whether the pet can be updated */
+    get canUpdate() {
+      return !this.paused && !this.needsAdvancement;
+    }
+
+    /** the pet's happiness */
+    get happiness() {
+      return this.#happiness;
+    }
+
+    set happiness(amount) {
+      if (amount < 0) {
+        amount = 0;
+      } else if (amount > MAX_HAPPINESS) {
+        amount = MAX_HAPPINESS;
+      }
+      this.#happiness = amount;
     }
   }
 
   let pet = new Pet();
-  pet.updateDom();
 
-  nameItButton.addEventListener("click", () => {
+  petSetup.addEventListener("submit", (e) => {
+    e.preventDefault();
     const newName = name.value;
-    console.log(newName);
     if (newName.trim().length === 0) {
       return;
     }
     pet.name = newName;
-    pet.paused = false;
+    for (let name of petName) {
+      name.innerText = pet.name;
+    }
+    pet.hatched = Date.now();
+    pet.needsAdvancement = false;
     pet.updateDom();
   });
 
+  feedButton.addEventListener("click", () => {
+    if (!canFeed || !pet.canUpdate) {
+      return;
+    }
+    canFeed = false;
+    setTimeout(() => {
+      canFeed = true;
+    }, FEED_TIMER);
+
+    pet.feed(38);
+  });
+
+  petButton.addEventListener("click", () => {
+    if (!canPet || !pet.canUpdate) {
+      return;
+    }
+    canPet = false;
+    setTimeout(() => {
+      canPet = true;
+    }, PET_TIMER);
+
+    pet.pet();
+  });
+
+  cleanButton.addEventListener("click", () => {
+    if (!canClean || !pet.canUpdate) {
+      return;
+    }
+    canClean = false;
+    setTimeout(() => {
+      canClean = true;
+    }, CLEAN_TIMER);
+
+    pet.clean();
+  });
+
+  const advance = () => {
+    pet.needsAdvancement = false;
+    pet.updateDom();
+  };
+  for (let btn of document.querySelectorAll("button.advancement")) {
+    btn.addEventListener("click", advance);
+  }
+
   const update = () => {
     pet.update();
   };
 
-  // update the pet every 30 seconds?
-  setInterval(update, 30000);
+  setInterval(update, 60000 / UPDATES_PER_MINUTE);
 
   forceUpdateButton.addEventListener("click", update);
+  resetButton.addEventListener("click", () => {
+    pet = new Pet();
+    pet.updateDom();
+  });
+
+  pet.load();
+
+  for (let name of petName) {
+    name.innerText = pet.name;
+  }
+
+  if (document.body.classList.contains("debug")) {
+    debug.classList.remove("hidden");
+  }
+
+  pet.updateDom();
 
   console.log(pet);
 })();
diff --git a/site/sass/pet.scss b/site/sass/pet.scss
index e7eb919..13bafd6 100644
--- a/site/sass/pet.scss
+++ b/site/sass/pet.scss
@@ -1,7 +1,13 @@
-.hidden {
-  display: none;
-}
+#pet {
+  .hidden {
+    display: none;
+  }
 
-#debug-section [name] {
-  font-weight: bold;
+  #debug-section [name] {
+    font-weight: bold;
+  }
+
+  button {
+    margin-bottom: 4px;
+  }
 }