Fish selection and events record

cheryllium · Jan 3, 2024 · e767a32 · e767a32
1 parent 3afb887
commit e767a32
Show file tree

Hide file tree

Showing 17 changed files with 197 additions and 13 deletions.
diff --git a/assets/fish/fish1-selected.png b/assets/fish/fish1-selected.png
diff --git a/assets/fish/fish10-selected.png b/assets/fish/fish10-selected.png
diff --git a/assets/fish/fish2-selected.png b/assets/fish/fish2-selected.png
diff --git a/assets/fish/fish3-selected.png b/assets/fish/fish3-selected.png
diff --git a/assets/fish/fish4-selected.png b/assets/fish/fish4-selected.png
diff --git a/assets/fish/fish5-selected.png b/assets/fish/fish5-selected.png
diff --git a/assets/fish/fish6-selected.png b/assets/fish/fish6-selected.png
diff --git a/assets/fish/fish7-selected.png b/assets/fish/fish7-selected.png
diff --git a/assets/fish/fish8-selected.png b/assets/fish/fish8-selected.png
diff --git a/assets/fish/fish9-selected.png b/assets/fish/fish9-selected.png
diff --git a/index.html b/index.html
@@ -1,7 +1,22 @@
 <html>
     <head>
+        <link rel="stylesheet" type="text/css" href="styles.css" />
     </head>
     <body>
+        <div id="game">
+            <div id="sidebar-left" class="sidebar">
+                <h2>Selected Fish</h2>
+                <div id="selected-fish">
+                </div>
+            </div>
+            <main></main>
+            <div id="sidebar-right" class="sidebar">
+                <h2>Records</h2>
+                <div id="records">
+                </div>
+            </div>
+        </div>
+
         <script src="lib/p5.min.js"></script>
         <script src="src/utils.js"></script>
         <script src="src/main.js" type="module"></script>

diff --git a/src/fish.js b/src/fish.js
@@ -17,7 +17,11 @@ export default class Fish {
     this.emotion = null;
     this.action = false;
 
-    this.flipOverride = null; 
+    this.flipOverride = null;
+    this.selected = false;
+
+    // Personal information about this fish
+    this.name = randomFishName(); 
   }
 
   setRandomVelocity() {
@@ -184,22 +188,26 @@ export default class Fish {
     this.x += this.dx * deltaTime / 1000;
     this.y += this.dy * deltaTime / 1000;
 
+    let fishImage = fishImages[this.type-1];
+    if (this.selected) {
+      fishImage = fishImagesSelected[this.type-1]; 
+    }
     if (this.isFlipped()) {
       push();
       translate(this.x, this.y);
       scale(-1, 1);
-      image(fishImages[this.type-1], -fishImages[this.type-1].width, 0);
+      image(fishImage, -fishImage.width, 0);
       if (this.emotion) {
         image(emoteImages[this.emotion],
               -emoteImages[this.emotion].width - fishImages[this.type-1].width + 15,
               -20);
       }
       pop(); 
     } else {
-      image(fishImages[this.type-1], this.x, this.y);
+      image(fishImage, this.x, this.y);
       if (this.emotion) {
         image(emoteImages[this.emotion],
-              this.x - fishImages[this.type-1].width + emoteImages[this.emotion].width/2 + 15,
+              this.x - fishImage.width + emoteImages[this.emotion].width/2 + 15,
               this.y - 20);
       }
     }

diff --git a/src/main.js b/src/main.js
@@ -2,13 +2,15 @@ import Fish from './fish.js';
 import Food from './food.js'; 
 import ActionManager from './actions.js';
 import RoutineManager from './routines.js';
+import UIManager from './ui.js';
 
 window.GAME_HEIGHT = 768;
 window.GAME_WIDTH = 768;
 window.NUM_TYPES_FISH = 10;
 
 window.bg = null; // The aquarium's background image
 window.fishImages = []; // The fish images
+window.fishImagesSelected = []; 
 window.emoteImages = {
   heart: null,
   happy: null,
@@ -24,7 +26,8 @@ window.foodImages = {
 window.fishInTank = []; // Fish currently in the tank
 window.foodInTank = []; 
 window.actionManager = new ActionManager();
-window.routineManager = new RoutineManager(); 
+window.routineManager = new RoutineManager();
+window.uiManager = new UIManager(); 
 
 function preload() {
   // Load background image
@@ -35,8 +38,11 @@ function preload() {
     fishImages.push(
       loadImage(`assets/fish/fish${i}.png`)
     );
+    fishImagesSelected.push(
+      loadImage(`assets/fish/fish${i}-selected.png`)
+    );
   }
-
+  
   // Load emote images
   for(let key of Object.keys(emoteImages)) {
     emoteImages[key] = loadImage(`assets/speech/speech-bubble-${key}.png`)
@@ -78,12 +84,39 @@ function draw() {
   routineManager.update();
 }
 
-function mouseClicked() {
-  let foodKeys = Object.keys(foodImages);
-  let randomFood = foodKeys[randomIntFromInterval(0, foodKeys.length-1)];
-  foodInTank.push(
-    new Food(randomFood, mouseX, mouseY)
-  );
+function mouseClicked(event) {
+  // Do nothing else if mouse is off screen
+  if (mouseX < 0 || mouseX > GAME_WIDTH
+      || mouseY < 0 || mouseY > GAME_HEIGHT) {
+    return; 
+  }
+
+  // Deselect any selected fish
+  for(let fish of fishInTank) {
+    if (fish.selected) {
+      uiManager.updateSelected(fish, false); 
+    }
+  }
+
+  // If you clicked on a fish, select the fish  
+  let spawnFood = true;
+  for(let fish of fishInTank) {
+    if (mouseX > fish.x && mouseX < fish.x + fishImages[fish.type-1].width
+        && mouseY > fish.y && mouseY < fish.y + fishImages[fish.type-1].height) {
+      spawnFood = false;
+      uiManager.updateSelected(fish, true);
+      break; 
+    }
+  }
+
+  // Otherwise, spawn food
+  if (spawnFood) {
+    let foodKeys = Object.keys(foodImages);
+    let randomFood = foodKeys[randomIntFromInterval(0, foodKeys.length-1)];
+    foodInTank.push(
+      new Food(randomFood, mouseX, mouseY)
+    );
+  }
 }
 
 window.preload = preload; 

diff --git a/src/routines.js b/src/routines.js
@@ -85,7 +85,8 @@ export default class RoutineManager {
             {
               fish, script: SCRIPTS.happy,
             }
-          ); 
+          );
+          uiManager.addRecord(`FISH1 ate a delicious ${food.type}!`, fish);
         }
       }); 
     });
@@ -146,6 +147,9 @@ export default class RoutineManager {
       actionManager.fishRoutines.push(
         { fish: filteredFish[indexB], script: scriptB }
       );
+
+      // Add record
+      uiManager.addRecord(`FISH1 and FISH2 are having a nice chat!`, filteredFish[indexA], filteredFish[indexB]);
     }); 
   }
 }
diff --git a/src/ui.js b/src/ui.js
@@ -0,0 +1,85 @@
+export default class UIManager {
+  constructor () {
+    this.records = []; 
+  }
+
+  updateSelected(fish, value) {
+    fish.selected = value;
+
+    // Todo- Update the UI
+    let selectedFish = fishInTank.filter(fish => fish.selected);
+    let selectedFishDiv = document.querySelector("#selected-fish");
+    selectedFishDiv.innerHTML = "";
+
+    selectedFish.forEach(fish => {
+      // Construct the new element
+      let fishDiv = document.createElement("div");
+
+      let fishImage = document.createElement("img");
+      fishImage.src = `assets/fish/fish${fish.type}.png`;
+
+      // Create paragraphs for the name and personality
+      let nameParagraph = document.createElement("p");
+      nameParagraph.innerHTML = `<b>Name: </b>${fish.name}`;
+
+      fishDiv.appendChild(fishImage);
+      fishDiv.appendChild(nameParagraph);
+
+      // Add it to the selected fish div
+      selectedFishDiv.appendChild(fishDiv); 
+    });
+  }
+
+  addRecord(text, fish1, fish2) {
+    this.records.unshift({
+      text, fish1, fish2
+    });
+
+    if (this.records.length > 15) {
+      this.records = this.records.slice(0, 15)
+    }
+
+    // Update the records
+    let recordsDiv = document.querySelector("#records");
+    recordsDiv.innerHTML = "";
+
+    this.records.forEach(record => {
+      let recordDiv = document.createElement("div");
+
+      // Replace placeholders in the text with fish names
+      let formattedText = record.text.replace("FISH1", record.fish1.name);
+      if (record.fish2) {
+        formattedText = formattedText.replace("FISH2", record.fish2.name);
+      }
+
+      // Set the formatted text inside recordDiv
+      recordDiv.textContent = formattedText;
+
+      // Add the "record" class to recordDiv
+      recordDiv.classList.add("record");
+
+      // Add a click handler to recordDiv
+      recordDiv.addEventListener("click", function() {
+        console.log('clicked', record.fish1);
+
+        // Update the selected status of all fishInTank to false
+        fishInTank.forEach(fish => {
+          if (fish.selected) {
+            this.updateSelected(fish, false)
+          }
+        });
+
+        // Update the selected status of fish1 to true
+        this.updateSelected(record.fish1, true);
+
+        // If fish2 is not null, update its selected status to true
+        if (record.fish2) {
+          this.updateSelected(record.fish2, true);
+        }
+      }.bind(this));
+
+      // Append recordDiv to recordsDiv
+      recordsDiv.appendChild(recordDiv);
+    }); 
+  }
+}
diff --git a/src/utils.js b/src/utils.js
@@ -13,3 +13,21 @@ function randomIntFromInterval(min, max) { // min and max included
 function currentTime () {
   return Math.floor(Date.now() / 1000)
 }
+
+function randomFishName() {
+  let one = [
+    "An", "Art",  "Bart", "Cal", "Cor", "Dar", "Dac", "Ell", "Fant", "Fin", "Gin", "Gan", "Gat", "Hol", "Holl", "Heff", "Hid", "Iol", "Is", "Jul", "Lor", "Lun", "Mack", "Nash", "Slart",  "Sol", 
+  ];
+  let two = ["i", "a", "an", "o", "ou", "en"];
+  let three = ["na", "fer", "nol", "nette", "lette", "nice", "nis", "lyr", "la", "rice"];
+
+  randOne = one[randomIntFromInterval(0, one.length-1)];
+  randTwo = two[randomIntFromInterval(0, two.length-1)];
+  randThree = three[randomIntFromInterval(0, three.length-1)];
+
+  if (Math.random() > 0.5) {
+    return randOne + randThree; 
+  } else {
+    return randOne + randTwo + randThree;
+  }
+}
diff --git a/styles.css b/styles.css
@@ -0,0 +1,21 @@
+* {
+  box-sizing: border-box;
+}
+html, body {
+  background-color: #000;
+  font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
+}
+#game {
+  margin-left: auto;
+  margin-right: auto; 
+  display: flex;
+  justify-content: center;
+  width: 1368px;
+  border: 1px solid #03343d;
+  background-color: #7a8d9b;
+}
+.sidebar {
+  padding: 20px;
+  text-align: center;
+  width: 300px;
+}