Merge pull request #16 from nathannlu/vindennt/feature/hunger

Vindennt/feature/hunger

js/comfy/comfy.js

@@ -89,7 +89,10 @@ export class ComfyNode extends LiteGraph.LGraphNode {
   }
 
   onMouseDown() {
-    const [mouseX, mouseY] = this.getRelativeMouseWithinNode()
+    const [mouseX, mouseY] = this.getRelativeMouseWithinNode();
+    // Adjust mouse hitbox as necessary
+    const mouse = { x: mouseX, y: mouseY, width: 5, height: 5 };
+
 
     for (let i = 0; i < this.buttons.length; i++) {
       const button = this.buttons[i]
@@ -103,9 +106,6 @@ export class ComfyNode extends LiteGraph.LGraphNode {
       const gameObjects = this.gameObjectArrays[i]
       for (let j = 0; j < gameObjects.length; j++) {
         const gameObject = gameObjects[j]
-
-        // Adjust mouse hitbox as necessary
-        const mouse = { x: mouseX, y: mouseY, width: 5, height: 5 }
         if (gameObject.isTouching(mouse)) {
           gameObject.onClick()
         }

js/game/pet.js

@@ -55,6 +55,10 @@ export class Pet extends GameObject {
     this.talk = false
     this.talkText = ''
 
+    this.hungerPoints = 10;
+    this.lastHungerDepletionTime = Date.now(); // ms; sets the last time the pet's hunger dropped 1 point
+    this.hungerDepletionRate = 43200000; // ms; how often the pet's hunger drops 1 point. This is 1/10 of 5 days
+
     // Properties here tell when the
     // pet to change directions. Right now
     // the pet will randomly change directions
@@ -155,6 +159,28 @@ export class Pet extends GameObject {
     this.setTalk('Woof!')
   }
 
+  updateHunger() {
+    const timeElapsed = Date.now() - this.lastHungerDepletionTime;
+
+    if (timeElapsed > this.hungerDepletionRate) {
+      // calculate amount of points to deplete
+      const pointsToDeplete = Math.floor(
+        timeElapsed / this.hungerDepletionRate
+      );
+
+      this.hungerPoints -= pointsToDeplete;
+      this.lastHungerDepletionTime = Date.now();
+
+      // Check death condition
+      if (this.hungerPoints <= 0) {
+        this.hungerPoints = 0;
+      }
+
+      return this.hungerPoints;
+    }
+    return null;
+  }
+
   move(ctx, renderCount) {
     switch (this.currentDirection) {
       case 'right':

js/game/stage.js

@@ -13,20 +13,19 @@ import {
 import { MediumButton } from './buttons.js'
 import { FlappyGame } from './flappy_game/index.js'
 import { events, EARN_COINS } from '../events.js'
+import { PointBar } from "./ui/pointBar.js";
+
 
 /**
  * Describes the main game environment
  */
 export class ComfyPetsStage extends ComfyNode {
   constructor() {
     super()
-    ;(this.title = 'Comfy Pet'),
-      (this.feedButton = this.addButton('Feed pet', {}, () => {
-        this.addFood()
-        addFoodEvent()
-      }))
-    this.feedButton.x = 8
-    this.feedButton.y = 8
+
+    this.gutter = 8;
+    this.feedButton.x = this.gutter;
+    this.feedButton.y = this.gutter;
     this.feedButton.fontSize = 14
     this.feedButton.fontWeight = 'bold'
     this.feedButton.fontFamily = 'Courier New'
@@ -53,44 +52,53 @@ export class ComfyPetsStage extends ComfyNode {
     // Endless Runner Game
     this.gameButtonEndlessRunner = this.addButton('Play Hop Dog', {}, () => {
       //const { canvas, endGame } = startGame()
-      const game = new EndlessRunnerGame()
+      const game = new EndlessRunnerGame();
+
+      gameDialog.close = () => game.endGame();
+      gameDialog.show(game.canvas);
+      startGameEvent();
+    });
+    this.gameButtonEndlessRunner.x = this.gutter + this.feedButton.width + 8;
+    this.gameButtonEndlessRunner.y = this.gutter;
+    this.gameButtonEndlessRunner.backgroundColor = "#0d47a1";
+    this.gameButtonEndlessRunner.fontSize = 14;
+    this.gameButtonEndlessRunner.fontWeight = "bold";
+    this.gameButtonEndlessRunner.fontFamily = "Courier New";
+    this.gameButtonEndlessRunner.width = 150;
 
-      gameDialog.close = () => game.endGame()
-      gameDialog.show(game.canvas)
-      startGameEvent()
-    })
-    this.gameButtonEndlessRunner.x = 8 + this.feedButton.width + 8
-    this.gameButtonEndlessRunner.y = 8
-    this.gameButtonEndlessRunner.backgroundColor = '#0d47a1'
-    this.gameButtonEndlessRunner.fontSize = 14
-    this.gameButtonEndlessRunner.fontWeight = 'bold'
-    this.gameButtonEndlessRunner.fontFamily = 'Courier New'
-    this.gameButtonEndlessRunner.width = 150
 
     // Flappy Game
     this.gameButtonFlappyGame = this.addButton('Play Flappy Dog', {}, () => {
       //const { canvas, endGame } = startGame()
-      const game = new FlappyGame()
+      const game = new FlappyGame();
+
+      gameDialog.close = () => game.endGame();
+      gameDialog.show(game.canvas);
+      startGameEvent();
+    });
+    this.gameButtonFlappyGame.x =
+      this.gutter + this.feedButton.width + this.gutter;
+    this.gameButtonFlappyGame.y =
+      this.gutter + this.gameButtonFlappyGame.height + this.gutter;
+    this.gameButtonFlappyGame.backgroundColor = "#0d47a1";
+    this.gameButtonFlappyGame.fontSize = 14;
+    this.gameButtonFlappyGame.fontWeight = "bold";
+    this.gameButtonFlappyGame.fontFamily = "Courier New";
+    this.gameButtonFlappyGame.width = 150;
+
+    this.size = [400, 200];
 
-      gameDialog.close = () => game.endGame()
-      gameDialog.show(game.canvas)
-      startGameEvent()
-    })
-    this.gameButtonFlappyGame.x = 8 + this.feedButton.width + 8
-    this.gameButtonFlappyGame.y = 8 + this.gameButtonFlappyGame.height + 8
-    this.gameButtonFlappyGame.backgroundColor = '#0d47a1'
-    this.gameButtonFlappyGame.fontSize = 14
-    this.gameButtonFlappyGame.fontWeight = 'bold'
-    this.gameButtonFlappyGame.fontFamily = 'Courier New'
-    this.gameButtonFlappyGame.width = 150
 
-    this.size = [400, 200]
 
     // Stage objects
     this.pets = []
     this.foods = []
     this.gameObjectArrays.push(this.pets)
 
+    // GUI Elements
+    this.guiElements = [];
+    this.gameObjectArrays.push(this.guiElements);
+
     // Assets
     this.backgroundImage = new Image()
     this.backgroundImage.src =
@@ -116,7 +124,19 @@ export class ComfyPetsStage extends ComfyNode {
       height: petHeight,
     })
 
-    this.pets.push(pet)
+    this.pets.push(pet);
+
+    this.hungerPointsBar = this.addPointBar({
+      x: this.feedButton.x + this.feedButton.width / 4,
+      y: this.feedButton.y + this.feedButton.height + this.gutter,
+      width: 50,
+      height: 75,
+      maxPoints: 10,
+      label: "Hunger",
+      colour: "#aa00ee",
+      associatedId: pet.id,
+    });
+    this.guiElements.push(this.hungerPointsBar);
   }
 
   addFood() {
@@ -207,6 +227,58 @@ export class ComfyPetsStage extends ComfyNode {
     }
   }
 
+  addPointBar({
+    x,
+    y,
+    width,
+    height,
+    maxPoints,
+    label,
+    colour,
+    fontSize = 14,
+    fontFamily = "Courier New",
+    fontWeight = "bold",
+    associatedId = null,
+    initialPoints = maxPoints,
+  }) {
+    const pb = new PointBar({
+      x: x,
+      y: y,
+      width: width,
+      height: height,
+      maxPoints: maxPoints,
+      colour: colour,
+      label: label,
+      fontSize: fontSize,
+      fontFamily: fontFamily,
+      fontWeight: fontWeight,
+      associatedId: associatedId,
+      initialPoints: initialPoints,
+    });
+    this.guiElements.push(pb);
+
+    return pb;
+  }
+
+  renderGUIElements(ctx) {
+    for (let i = 0; i < this.guiElements.length; i++) {
+      const guiElement = this.guiElements[i];
+      guiElement.render(ctx);
+    }
+  }
+
+  updatePointBars(value, associatedId) {
+    for (let i = 0; i < this.guiElements.length; i++) {
+      const guiElement = this.guiElements[i];
+      if (guiElement.associatedId == associatedId) {
+        guiElement.setPoints(value);
+      }
+    }
+
+    // clear inactive associated GUI elements
+    // this.guiElements = this.guiElements.filter((el) => el.objectId !== associatedId);
+  }
+
   renderPets(ctx) {
     const [width] = this.size
 
@@ -218,6 +290,15 @@ export class ComfyPetsStage extends ComfyNode {
         this.pets.splice(i, 1)
       }
 
+      // update hunger
+      const hungerUpdateValue = pet.updateHunger();
+      if (hungerUpdateValue !== null) {
+        this.updatePointBars(hungerUpdateValue, pet.id);
+        if (hungerUpdateValue === 0) {
+          pet.isActive = false;
+        }
+      }
+
       // choose directions
       pet.chooseDirection(this.foods)
 
@@ -273,7 +354,8 @@ export class ComfyPetsStage extends ComfyNode {
     this.renderUserCoins(ctx)
     this.renderTextCenter(ctx)
     //this.renderButtons(ctx)
-    this.renderFoods(ctx)
-    this.renderPets(ctx) // render pet onto canvas
+    this.renderFoods(ctx);
+    this.renderPets(ctx); // render pet onto canvas
+    this.renderGUIElements(ctx);
   }
 }

js/game/ui/pointBar.js

@@ -0,0 +1,87 @@
+import { GameObject } from "../core.js";
+import { darkenHexColor } from "../../utils.js";
+
+export class PointBar extends GameObject {
+  constructor({
+    x,
+    y,
+    width,
+    height,
+    maxPoints,
+    colour,
+    label,
+    fontSize = 14,
+    fontFamily = "Courier New",
+    fontWeight = "bold",
+    associatedId = null,
+    initialPoints = maxPoints,
+  }) {
+    super(x, y, width, height);
+    this.maxPoints = maxPoints;
+    this.currentPoints = initialPoints;
+    this.colour = colour;
+    this.label = label;
+    this.fontSize = fontSize;
+    this.fontFamily = fontFamily;
+    this.fontWeight = fontWeight;
+    // id of gameObject to be associated with i.e. the pet
+    this.associatedId = associatedId;
+  }
+
+  addPoints(points) {
+    this.currentPoints += points;
+    if (this.currentPoints > this.maxPoints) {
+      this.currentPoints = this.maxPoints;
+    }
+  }
+
+  removePoints(points) {
+    this.currentPoints -= points;
+    if (this.currentPoints < 0) {
+      this.currentPoints = 0;
+    }
+  }
+
+  setPoints(points) {
+    this.currentPoints = points;
+    if (this.currentPoints > this.maxPoints) {
+      this.currentPoints = this.maxPoints;
+    } else if (this.currentPoints < 0) {
+      this.currentPoints = 0;
+    }
+  }
+
+  render(ctx) {
+    // Fill background box
+    const padding = 15;
+    ctx.fillStyle = darkenHexColor(this.colour, 50);
+    ctx.beginPath();
+    ctx.roundRect(
+      this.x - padding,
+      this.y,
+      this.width + 2 * padding,
+      this.height + 2 * padding,
+      4
+    );
+    ctx.fill();
+
+    // fill each line per point
+    const lineSpacing = this.height / this.maxPoints;
+    ctx.fillStyle = this.colour;
+    for (let i = 0; i < this.currentPoints; i++) {
+      const lineY = this.y + this.height - i * lineSpacing;
+      ctx.fillRect(this.x, lineY, this.width, lineSpacing * 0.75);
+    }
+
+    // fill label
+    ctx.font = `${this.fontWeight} ${this.fontSize}px ${this.fontFamily} `;
+    ctx.fillStyle = "white";
+    ctx.textAlign = "center";
+    ctx.textBaseline = "middle";
+    ctx.fillText(
+      this.label,
+      this.x + this.width / 2,
+      this.y + this.height + lineSpacing * 0.75 + 12
+    );
+  }
+}