add species info

src/fish.js

@@ -5,6 +5,46 @@ export const states = {
 };
 let visualRange = 15; // Visual range of a fish
 
+export const FISH_TYPES = [
+  { name: 'Striped Mango',
+    description: "This demure-looking fish is actually quite aggressive, and has teeth sharper than obsidian. Watch out! If you get on its bad side, you might be missing fingers.",
+  },
+  { name: 'Blue Woobler',
+    description: "This fish had big dreams when it was young, but now it contents itself with the small things in life. It loves drifting with the currents, landscaping sand by fin, and jazz.",
+  },
+  { name: 'Finned Dazzler',
+    description: "This glamorous fish takes pride in its scintillating scales. Eyeshadow made from its crushed up scales is a popular commodity.",
+  },
+  {
+    name: "Durid Dart",
+    description: "This intrepid fish is known for bravely darting at its predators in a bid to startle them and escape. It likes to aim between the eyes.",
+  },
+  {
+    name: 'Ruby Brickfish',
+    description: "This industrious fish can often be found drawing blueprints in the sand for fantastical machines. However, it tragically lacks the opposable thumbs to build them.",
+  },
+  {
+    name: 'Mahogany Mackerel',
+    description: "This fish is known for periodically leaping out of streams to smack a tree. Why it does this is a great mystery of science.", 
+  },
+  {
+    name: 'Prismatic Pousse',
+    description: "It's said to be a sign of good luck if you catch one of these gorgeous fish.",
+  },
+  {
+    name: "Goldfish",
+    description: "Just a regular, normal goldfish.",
+  },
+  {
+    name: "Banded Bossfish",
+    description: "Although its genus contains many schooling species of fish, the banded bossfish is, in fact, too cool for school.",
+  },
+  {
+    name: "Plum Verveel",
+    description: "This fish is actually an eel which mysteriously has fins. Rumors are that this species was an abonimation created by man.", 
+  }
+];
+
 export default class Fish {
   constructor (type, x, y) {
     this.type = type;

src/ui.js

@@ -1,3 +1,5 @@
+import { FISH_TYPES } from './fish.js';
+
 export default class UIManager {
   constructor () {
     this.records = [];
@@ -33,6 +35,26 @@ export default class UIManager {
     this.updateFishInfo(); 
   }
 
+  createFishDiv(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 fishInfo = document.createElement("div");
+    fishInfo.innerHTML = `<b><span style='color: ${fish.favoriteColor}'>${fish.name}</span></b>`;
+    fishInfo.innerHTML += ` the ${FISH_TYPES[fish.type-1].name}`;
+    fishInfo.innerHTML += `<br><b>Mood: </b>${fish.mood}`;
+    fishInfo.innerHTML += `<br /><b>Favorite food: </b>${fish.favoriteFood}`;
+    fishInfo.innerHTML += "<br />"; 
+
+    fishDiv.appendChild(fishImage);
+    fishDiv.appendChild(fishInfo);
+
+    return fishDiv; 
+  }
+
   updateFishInfo() {
     // Update the UI
     let selectedFish = fishInTank.filter(fish => fish.selected);
@@ -45,20 +67,9 @@ export default class UIManager {
     }
 
     selectedFish.forEach(fish => {
-      // Construct the new element
-      let fishDiv = document.createElement("div");
-      fishDiv.classList.add("fishinfo"); 
-
-      let fishImage = document.createElement("img");
-      fishImage.src = `assets/fish/fish${fish.type}.png`;
+      let fishDiv = this.createFishDiv(fish);
+      fishDiv.classList.add("fishinfo");
 
-      // Create paragraphs for the name and personality
-      let fishInfo = document.createElement("div");
-      fishInfo.innerHTML = `<b>Name: </b><span style='color: ${fish.favoriteColor}'>${fish.name}</span>`;
-      fishInfo.innerHTML += `<br><b>Mood: </b>${fish.mood}`;
-      fishInfo.innerHTML += `<br /><b>Favorite food: </b>${fish.favoriteFood}`;
-      fishInfo.innerHTML += "<br />"; 
-
       let fishLink = document.createElement("a");
       fishLink.href = "#journal";
       fishLink.innerText = "Go to journal";
@@ -68,9 +79,6 @@ export default class UIManager {
         document.querySelector('#journal').classList.add("active");
         this.setJournalSelected(fish); 
       }.bind(this)); 
-
-      fishDiv.appendChild(fishImage);
-      fishDiv.appendChild(fishInfo);
       fishDiv.appendChild(fishLink); 
 
       // Add it to the selected fish div
@@ -83,24 +91,13 @@ export default class UIManager {
     fishInTank
       .toSorted((a, b) => a.name.localeCompare(b.name))
       .forEach((fish) => {
-        let fishDiv = document.createElement("div");
+        let fishDiv = this.createFishDiv(fish); 
         fishDiv.classList.add("fish");
         fishDiv.classList.add(`${fish.name}${fish.favoriteFood}${fish.type}`);
         if (fish.goodMood) {
           fishDiv.classList.add("good-mood"); 
         }
 
-        let fishImage = document.createElement("img");
-        fishImage.src = `assets/fish/fish${fish.type}.png`;
-
-        let fishInfo = document.createElement("div");
-        fishInfo.innerHTML = `<b>Name: </b><span style='color: ${fish.favoriteColor}'>${fish.name}</span>`;
-        fishInfo.innerHTML += `<br><b>Mood: </b>${fish.mood}`;
-        fishInfo.innerHTML += `<br /><b>Favorite food: </b>${fish.favoriteFood}`;
-
-        fishDiv.appendChild(fishImage);
-        fishDiv.appendChild(fishInfo);
-
         fishDiv.addEventListener("click", function () {
           this.setJournalSelected(fish); 
         }.bind(this)); 
@@ -115,22 +112,17 @@ export default class UIManager {
     let selectedDiv = document.querySelector("#fish-details");
     selectedDiv.innerHTML = ""; 
 
-    let fishImage = document.createElement("img");
-    fishImage.src = `assets/fish/fish${fish.type}.png`;
-
-    let fishInfo = document.createElement("div");
-    fishInfo.innerHTML = `<b>Name: </b><span style='color: ${fish.favoriteColor}'>${fish.name}</span>`;
-    fishInfo.innerHTML += `<br><b>Mood: </b>${fish.mood}`;
-    fishInfo.innerHTML += `<br /><b>Favorite food: </b>${fish.favoriteFood}`;
+    let fishDiv = this.createFishDiv(fish); 
 
+    fishDiv.innerHTML += `<p><i>${FISH_TYPES[fish.type-1].description}</i></p>`;
+
     let fishHistory = document.createElement("div");
     fishHistory.innerHTML = "<br /><b>Mood Journal:</b>";
     for(let history of fish.history) {
       fishHistory.innerHTML += `<br />${history}`;
     }
 
-    selectedDiv.appendChild(fishImage);
-    selectedDiv.appendChild(fishInfo);
+    selectedDiv.appendChild(fishDiv)
     selectedDiv.appendChild(fishHistory); 
   }