Add bikes of different colors

frontend/prebuild/src/app/entity/player.ts

@@ -1,6 +1,7 @@
 import { Bitmap, Container } from 'createjs-module';
 import { PlayerTooltip } from './player.tooltip';
 import { Assets } from '../game/assets';
+import { Constants } from '../game/constants';
 
 export class Player {
   static audioLoaded = false;
@@ -38,9 +39,26 @@ export class Player {
       this.tooltip = new PlayerTooltip(this);
       this.displayObject.addChild(this.tooltip.tooltipShape);
 
-      this.image = Assets.PLAYER_BITMAP.clone();
-      this.image.scaleX = 1 / 60;
-      this.image.scaleY = 1 / 60;
+      switch (this.color.toLowerCase()) {
+        case Constants.GREEN_COLOR:
+          this.image = Assets.PLAYER_GREEN_BITMAP.clone();
+          break;
+        case Constants.BLUE_COLOR:
+          this.image = Assets.PLAYER_BLUE_BITMAP.clone();
+          break;
+        case Constants.ORANGE_COLOR:
+          this.image = Assets.PLAYER_ORANGE_BITMAP.clone();
+          break;
+        case Constants.PURPLE_COLOR:
+          this.image = Assets.PLAYER_PURPLE_BITMAP.clone();
+          break;
+        default:
+          console.warn("Player color did not match available images. Defaulting to green.");
+          this.image = Assets.PLAYER_GREEN_BITMAP.clone();
+          break;
+      }
+      this.image.scaleX = 5 / 6;
+      this.image.scaleY = 5 / 6;
       // Set the center point of the player image to be the front 1/3 of the area
       this.image.regX = this.image.getBounds().width / 2;
       this.image.regY = this.image.getBounds().height / 3;

frontend/prebuild/src/app/game/assets.ts

@@ -4,7 +4,10 @@ export class Assets {
   // According to EaselJS, "When a string path or image tag that is not yet loaded is used,
   // the stage may need to be redrawn before the Bitmap will be displayed."
   // For this reason, we need to pre-load an instance of the image (this copy never gets used)
-  static readonly PLAYER_BITMAP = new Bitmap('../../assets/images/bike_full.png');
+  static readonly PLAYER_GREEN_BITMAP = new Bitmap('../../assets/images/bike_green.png');
+  static readonly PLAYER_BLUE_BITMAP = new Bitmap('../../assets/images/bike_blue.png');
+  static readonly PLAYER_ORANGE_BITMAP = new Bitmap('../../assets/images/bike_orange.png');
+  static readonly PLAYER_PURPLE_BITMAP = new Bitmap('../../assets/images/bike_purple.png');
   static readonly PLAYER_DEAD_BITMAP = new Bitmap('../../assets/images/status_dead.png');
   static readonly BAM = new Audio('../../assets/sound/bam.wav');
 }

frontend/prebuild/src/app/game/constants.ts

@@ -1,4 +1,14 @@
 export class Constants {
   static readonly BOX_SIZE = 10;
   static readonly BOARD_SIZE = 1200;
+
+  static readonly GREEN_COLOR = '#abd155';
+  static readonly BLUE_COLOR = '#6fc3df';
+  static readonly ORANGE_COLOR = '#f28415';
+  static readonly PURPLE_COLOR = '#c178c9';
+
+  static readonly GREEN_FILENAME = 'bike_green.png';
+  static readonly BLUE_FILENAME = 'bike_blue.png';
+  static readonly ORANGE_FILENAME = 'bike_orange.png';
+  static readonly PURPLE_FILENAME = 'bike_purple.png';
 }

frontend/prebuild/src/app/game/player/player.component.ts

@@ -1,5 +1,7 @@
 import { Component, OnInit, Input } from '@angular/core';
 import { Player } from '../../entity/player';
+import { Constants } from '../constants';
+import { Assets } from '../assets';
 
 @Component({
   selector: 'app-player',
@@ -42,7 +44,26 @@ export class PlayerComponent implements OnInit {
     }
 
     if (status === 'alive') {
-      return `/assets/images/bike_full.png`;
+      let filename: string;
+      switch (this.player.color.toLowerCase()) {
+        case Constants.GREEN_COLOR:
+          filename = Constants.GREEN_FILENAME;
+          break;
+        case Constants.BLUE_COLOR:
+          filename = Constants.BLUE_FILENAME;
+          break;
+        case Constants.ORANGE_COLOR:
+          filename = Constants.ORANGE_FILENAME;
+          break;
+        case Constants.PURPLE_COLOR:
+          filename = Constants.PURPLE_FILENAME;
+          break;
+        default:
+          console.warn("Player color did not match available images. Defaulting to green.");
+          filename = Constants.GREEN_FILENAME;
+          break;
+      }
+      return `/assets/images/${filename}`;
     } else {
       return `/assets/images/status_${status}.png`;
     }