Updates

js/animate.js

@@ -7,6 +7,7 @@ import lobbyScene from "./scenes/lobby.js";
 export default async function animate() {
   Background.animateClouds();
   Background.animatePlane();
+  Background.animateBlimp();
 
   State.people.forEach((person) => person.animate());
 

js/classes/background.js

@@ -11,10 +11,12 @@ export default class Background {
   static buildings = [];
   static ground = new PIXI.Graphics();
   static dirt = null;
+  static moreDirt = null;
   static fossil = null;
   static plane = null;
   static car = null;
   static dinosaur = null;
+  static blimp = null;
 
   static pivot() {
     this.sky.position.y = this.sky.initialPosition.y + State.app.stage.pivot.y;
@@ -204,18 +206,18 @@ export default class Background {
     this.dirt = this.dirt
       ? this.dirt
       : new PIXI.TilingSprite(
-          PIXI.Texture.from("dirt.png"),
+          PIXI.Texture.from("dirt-1.png"),
           State.app.screen.width,
-          160 * scale
+          320 * scale
         );
 
     this.dirt.width = State.app.screen.width;
-    this.dirt.height = 160 * scale;
+    this.dirt.height = 320 * scale;
 
-    this.dirt.tileScale.x = scale;
-    this.dirt.tileScale.y = scale;
+    this.dirt.tileScale.x = scale * 2;
+    this.dirt.tileScale.y = scale * 2;
 
-    this.dirt.position.set(0, positionY + this.dirt.height);
+    this.dirt.position.set(0, positionY + this.dirt.height / 2);
 
     State.app.stage.addChild(this.dirt);
   }
@@ -353,11 +355,53 @@ export default class Background {
     State.app.ticker.add(animation);
   }
 
+  static renderBlimp() {
+    this.blimp = this.blimp
+      ? this.blimp
+      : new PIXI.AnimatedSprite(State.spritesheets.blimp.animations["blimp"]);
+
+    this.blimp.loop = true;
+    this.blimp.animationSpeed = 0.2;
+    this.blimp.play();
+
+    const scale = State.scale();
+
+    this.blimp.scale.y = scale * 2;
+    this.blimp.scale.x = scale * 2;
+    this.blimp.anchor.set(0.5);
+
+    const positionX = 0 - this.blimp.width;
+    const positionY = this.blimp.height;
+
+    this.blimp.position.set(positionX, positionY);
+    this.blimp.initialPosition = { x: positionX, y: positionY };
+
+    State.app.stage.addChild(this.blimp);
+  }
+
+  static animateBlimp() {
+    this.blimp.flying = true;
+    this.blimp.position.x = 0 - this.blimp.width;
+
+    const animation = (delta) => {
+      this.blimp.position.x += 0.25 * delta;
+
+      if (this.blimp.position.x >= State.app.screen.width + this.blimp.width) {
+        this.blimp.flying = false;
+        this.blimp.position.x = State.app.screen.width + this.blimp.width;
+        State.app.ticker.remove(animation);
+      }
+    };
+
+    State.app.ticker.add(animation);
+  }
+
   static render() {
     this.renderSky();
     this.renderSun();
     this.renderClouds();
     this.renderPlane();
+    this.renderBlimp();
     this.renderBuildings();
     this.renderGround();
     this.renderFossil();

js/classes/elevator.js

@@ -23,8 +23,14 @@ export default class Elevator {
 
   static controls = {
     show: false,
-    downButton: PIXI.Sprite.from(INTERFACE_SPRITES["down-button"].src),
-    upButton: PIXI.Sprite.from(INTERFACE_SPRITES["up-button"].src),
+    upButton: new PIXI.AnimatedSprite([
+      PIXI.Sprite.from(INTERFACE_SPRITES["up"].src),
+      PIXI.Sprite.from(INTERFACE_SPRITES["up-pressed"].src),
+    ]),
+    downButton: new PIXI.AnimatedSprite([
+      PIXI.Sprite.from(INTERFACE_SPRITES["down"].src),
+      PIXI.Sprite.from(INTERFACE_SPRITES["down-pressed"].src),
+    ]),
   };
 
   static {
@@ -78,12 +84,19 @@ export default class Elevator {
       return;
     }
 
+    const goingUp = event.target.id === "up";
+
+    if (goingUp) {
+      this.controls.upButton.gotoAndStop(1);
+    } else {
+      this.controls.downButton.gotoAndStop(1);
+    }
+
     this.moving = true;
     this.wheel.loop = true;
     this.wheel.play();
 
     const animation = (delta) => {
-      const goingUp = event.target.id === "up";
       const amount = (goingUp ? -10 : 10) * delta;
       this.shaft.position.y += amount;
 
@@ -115,6 +128,12 @@ export default class Elevator {
     event.stopPropagation();
     const goingDown = event.target.id === "down";
 
+    if (goingDown) {
+      this.controls.downButton.gotoAndStop(0);
+    } else {
+      this.controls.upButton.gotoAndStop(0);
+    }
+
     this.moving = false;
     this.wheel.loop = false;
     this.wheel.stop();
@@ -154,6 +173,8 @@ export default class Elevator {
       this.controls.show = false;
       const thanks = getRandomElementFromArray(THANKS);
       this.personInside.chatBubble.show(thanks);
+      this.personInside.floor.showIndicator(false);
+
       SoundPlayer.play("character-delivered.wav", true);
       await this.animateDoor();
       await this.personInside.enterRoom(this.elevatorFloorNumber);

js/classes/floor.js

@@ -1,7 +1,7 @@
 import { GREETINGS } from "../constants/chat.js";
 import { FLOORS } from "../constants/floors.js";
 import { DEFAULT_FONT_SIZE, TEXT_STYLES } from "../constants/text.js";
-import { getRandomElementFromArray } from "../utils.js";
+import { getRandomElementFromArray, isMobileSizedScreen } from "../utils.js";
 import { animateCamera } from "../animate.js";
 import Elevator from "./elevator.js";
 import Building from "./building.js";
@@ -198,6 +198,22 @@ export default class Floor {
     this.container.addChild(this.separator);
   }
 
+  showIndicator(show) {
+    const scale = State.scale();
+
+    const positionX =
+      this.room.position.x - this.room.width / 2 - Elevator.width - 35 * scale;
+    const positionY = this.room.position.y + this.indicator.height / 2;
+
+    this.indicator.position.set(positionX, positionY);
+    this.indicator.scale.y = scale;
+    this.indicator.scale.x = scale;
+    this.indicator.anchor.set(0.5);
+    this.indicator.visible = show || false;
+
+    this.container.addChild(this.indicator);
+  }
+
   render() {
     const scale = State.scale();
 
@@ -247,36 +263,23 @@ export default class Floor {
       this.position.x() - this.width() / 2 + Elevator.width;
 
     if (floorNumber < 10 && floorNumber >= 0) {
-      const amount = 20;
+      const amount = 15;
       floorNumberPositionX = floorNumberPositionX + amount * scale;
     } else if (floorNumber < 0) {
       const amount = -10;
       floorNumberPositionX = floorNumberPositionX + amount * scale;
+    } else {
+      if (isMobileSizedScreen()) {
+        const amount = -15;
+        floorNumberPositionX = floorNumberPositionX + amount * scale;
+      }
     }
 
     const floorNumberPositionY = positionY + 85 * scale;
     this.numberText.position.set(floorNumberPositionX, floorNumberPositionY);
     this.container.addChild(this.numberText);
 
-    // Indicator
-    let indicatorPositionY = this.positionYOffset + 85 * scale - 30 * scale;
-    let indicatorPositionX = floorNumberPositionX + 30 * scale;
-
-    if (floorNumber < 10 && floorNumber >= 0) {
-      const amount = -20;
-      indicatorPositionX = indicatorPositionX + amount * scale;
-    } else if (floorNumber < 0) {
-      const amount = 10;
-      indicatorPositionX = indicatorPositionX + amount * scale;
-    }
-
-    this.indicator.position.set(indicatorPositionX, indicatorPositionY);
-    this.indicator.scale.y = scale;
-    this.indicator.scale.x = scale;
-    this.indicator.anchor.set(0.5);
-    this.indicator.visible = false;
-
-    this.container.addChild(this.indicator);
+    this.showIndicator();
 
     State.app.stage.addChild(this.container);
 

js/classes/person.js

@@ -68,6 +68,10 @@ export default class Person {
     );
   }
 
+  get floor() {
+    return Building.allFloors.find((floor) => floor && floor.id === this.name);
+  }
+
   get currentFloor() {
     if (!this.floorNumber) {
       return Building.lobby;

js/constants/colors.js

@@ -9,7 +9,7 @@ export const COLORS = {
   gray: "#c7cfcc",
   lightGray: "#ebede9",
   darkGray: "#10141f",
-  brown: "#3b221c",
+  brown: "#371e1b",
   purple: "#495588",
   lightPurple: "#6272b6",
   darkPurple: "#3b2c4a",

js/constants/sprites.js

@@ -9,15 +9,25 @@ export const INTERFACE_SPRITES = {
     width: 230,
     height: 200,
   },
-  "down-button": {
-    src: "./img/sprites/down-button.png",
+  down: {
+    src: "./img/sprites/down.png",
     width: 300,
-    height: 343,
+    height: 340,
   },
-  "up-button": {
-    src: "./img/sprites/up-button.png",
+  "down-pressed": {
+    src: "./img/sprites/down-pressed.png",
     width: 300,
-    height: 343,
+    height: 340,
+  },
+  up: {
+    src: "./img/sprites/up.png",
+    width: 300,
+    height: 340,
+  },
+  "up-pressed": {
+    src: "./img/sprites/up-pressed.png",
+    width: 300,
+    height: 340,
   },
   apple: {
     src: "./img/icons/apple.png",
@@ -45,6 +55,12 @@ export const SPRITE_METADATA = {
   bruhmanegod: {
     upsideDown: true,
   },
+  roach: {
+    extra: true,
+    loop: true,
+    moves: true,
+    positionX: 800,
+  },
   fishmonger: {
     extra: true,
     loop: true,

js/interval.js

@@ -7,9 +7,14 @@ export default function interval() {
   setInterval(() => {
     lobbyScene();
 
-    const random = Math.random() < 0.5;
-    if (random && !Background.plane.flying) {
+    const flyPlane = Math.random() < 0.5;
+    if (flyPlane && !Background.plane.flying) {
       Background.animatePlane();
     }
+
+    const flyBlimp = Math.random() < 0.25;
+    if (flyBlimp && !Background.blimp.flying) {
+      Background.animateBlimp();
+    }
   }, ONE_MINUTE / 3);
 }

js/scenes/lobby.js

@@ -3,6 +3,7 @@ import Elevator from "../classes/elevator.js";
 import State from "../classes/state.js";
 import Interface from "../classes/interface.js";
 import SoundPlayer from "../classes/sound.js";
+import Building from "../classes/building.js";
 
 export default async function lobbyScene() {
   if (!State.introFinished || Elevator.busy) {
@@ -46,6 +47,7 @@ async function returnToRoomScene(person) {
   SoundPlayer.play("elevator-ready.wav", true);
   State.personWantsToGotoFloor = person.originalFloorNumber;
   Interface.startHighlight(Interface.notification.button, 9999);
+  person.floor.showIndicator(true);
 }
 
 async function sendToLobbyScene(person) {

js/spritesheets/blimp.js

@@ -0,0 +1,38 @@
+export default {
+  frames: {
+    "blimp-1.png": {
+      frame: { x: 0, y: 0, w: 960, h: 600 },
+      rotated: false,
+      trimmed: false,
+      spriteSourceSize: { x: 0, y: 0, w: 960, h: 600 },
+      sourceSize: { w: 960, h: 600 },
+    },
+    "blimp-2.png": {
+      frame: { x: 0, y: 600, w: 960, h: 600 },
+      rotated: false,
+      trimmed: false,
+      spriteSourceSize: { x: 0, y: 0, w: 960, h: 600 },
+      sourceSize: { w: 960, h: 600 },
+    },
+    "blimp-3.png": {
+      frame: { x: 0, y: 1200, w: 960, h: 600 },
+      rotated: false,
+      trimmed: false,
+      spriteSourceSize: { x: 0, y: 0, w: 960, h: 600 },
+      sourceSize: { w: 960, h: 600 },
+    },
+  },
+  animations: {
+    blimp: ["blimp-1.png", "blimp-2.png", "blimp-3.png"],
+  },
+  meta: {
+    app: "https://www.codeandweb.com/texturepacker",
+    version: "1.1",
+    image: "./img/spritesheets/blimp.png",
+    format: "RGBA8888",
+    size: { w: 960, h: 1800 },
+    scale: "1",
+    smartupdate:
+      "$TexturePacker:SmartUpdate:7343fb72149b943665a57ea56473b231:d65727226ac5cd477a7700c1636bf80a:8fe6abe04b1bf6110bd6e32644ab1a90$",
+  },
+};