From 63b43587431d492ee250bf3c45a5f2e56af7a565 Mon Sep 17 00:00:00 2001
From: zyl <z@zyl.gay>
Date: Tue, 25 Jun 2024 00:42:10 -0700
Subject: [PATCH] add status messages

---
 site/pages/pet.md   |  8 ++++++++
 site/root/js/pet.js | 33 +++++++++++++++++++++++++++++++++
 site/sass/pet.scss  |  4 ++++
 3 files changed, 45 insertions(+)

diff --git a/site/pages/pet.md b/site/pages/pet.md
index 07b413c..962d653 100644
--- a/site/pages/pet.md
+++ b/site/pages/pet.md
@@ -9,6 +9,14 @@ styles: ["pet.css"]
 <div id="pet-display">
 	<h2 class="pet-name"></h2>
 	<div class="the-pet"></div>
+	<div class="status">
+		<p name="hungry" class="hidden"><span class="pet-name"></span> looks hungry..</p>
+		<p name="starving" class="hidden"><span class="pet-name"></span> is starving!! you need to feed them!!</p>
+		<p name="unhappy" class="hidden"><span class="pet-name"></span> looks at you with wide eyes..</p>
+		<p name="messy-1" class="hidden"><span class="pet-name"></span> has left a bit of a mess! time to clean!</p>
+		<p name="messy-2" class="hidden">there's even more mess in here.. shouldn't you clean it for <span class="pet-name"></span>?</p>
+		<p name="messy-3" class="hidden">what a mess!! <span class="pet-name"></span> can't be happy.. you've gotta clean in here</p>
+	</div>
 </div>
 
 <div id="egg">
diff --git a/site/root/js/pet.js b/site/root/js/pet.js
index ab7d3a4..f637d0f 100644
--- a/site/root/js/pet.js
+++ b/site/root/js/pet.js
@@ -73,6 +73,15 @@
 
   const petDisplay = document.querySelector("#pet-display");
   const thePet = petDisplay.querySelector(".the-pet");
+
+  const status = petDisplay.querySelector(".status");
+  const statusHungry = status.querySelector("[name=hungry]");
+  const statusStarving = status.querySelector("[name=starving]");
+  const statusUnhappy = status.querySelector("[name=unhappy]");
+  const statusMessy1 = status.querySelector("[name=messy-1]");
+  const statusMessy2 = status.querySelector("[name=messy-2]");
+  const statusMessy3 = status.querySelector("[name=messy-3]");
+
   const petName = document.querySelectorAll(".pet-name");
   const eggDiv = document.querySelector("div#egg");
   const petSetup = document.querySelector("#pet-setup");
@@ -231,6 +240,13 @@
       thePet.classList.remove("elder");
       thePet.classList.remove("dead");
 
+      statusHungry.classList.add("hidden");
+      statusStarving.classList.add("hidden");
+      statusUnhappy.classList.add("hidden");
+      statusMessy1.classList.add("hidden");
+      statusMessy2.classList.add("hidden");
+      statusMessy3.classList.add("hidden");
+
       let width = 0;
       let height = 0;
 
@@ -280,6 +296,22 @@
         thePet.classList.add("dead");
       } else if (this.lifeStage !== LIFE_STAGE_EGG) {
         thePet.classList.add(this.type);
+
+        if (this.food <= MAX_FOOD / 10) {
+          statusStarving.classList.remove("hidden");
+        } else if (this.food <= MAX_FOOD / 2) {
+          statusHungry.classList.remove("hidden");
+        }
+        if (this.happiness <= MAX_HAPPINESS / 3) {
+          statusUnhappy.classList.remove("hidden");
+        }
+        if (this.messCounter >= MAX_MESS) {
+          statusMessy3.classList.remove("hidden");
+        } else if (this.messCounter >= MAX_MESS / 2) {
+          statusMessy2.classList.remove("hidden");
+        } else if (this.messCounter > 0) {
+          statusMessy1.classList.remove("hidden");
+        }
       }
 
       if (this.paused) {
@@ -488,6 +520,7 @@
 
   if (document.body.classList.contains("debug")) {
     debug.classList.remove("hidden");
+    document.pet = pet;
   }
 
   pet.updateDom();
diff --git a/site/sass/pet.scss b/site/sass/pet.scss
index 3d3fa50..983f3d7 100644
--- a/site/sass/pet.scss
+++ b/site/sass/pet.scss
@@ -30,6 +30,10 @@
         clip-path: polygon(50% 0, 100% 100%, 0 100%);
       }
     }
+
+    .status {
+      font-style: italic;
+    }
   }
 
   #debug-section [name] {