Skip to content

Commit

Permalink
add species info
Browse files Browse the repository at this point in the history
  • Loading branch information
cheryllium committed Jan 6, 2024
1 parent 651ee6a commit a8c1f63
Show file tree
Hide file tree
Showing 2 changed files with 69 additions and 37 deletions.
40 changes: 40 additions & 0 deletions src/fish.js
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
66 changes: 29 additions & 37 deletions src/ui.js
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import { FISH_TYPES } from './fish.js';

export default class UIManager {
constructor () {
this.records = [];
Expand Down Expand Up @@ -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);
Expand All @@ -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";
Expand All @@ -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
Expand All @@ -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));
Expand All @@ -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);
}

Expand Down

0 comments on commit a8c1f63

Please sign in to comment.