Allow selection of player animal

Engine/src/states/Game.ts

@@ -32,7 +32,7 @@ export interface Layer {
   colorMatrix: PIXIMissingColorMatrix
 }
 
-export function GameState(ctx: ContextI): StateI {
+export function GameState(ctx: ContextI, selectedAnimal: string): StateI {
   //disableSound()
   let isNight = false
   let modeTimer = 0
@@ -183,7 +183,7 @@ export function GameState(ctx: ContextI): StateI {
       let x = bounds[0] + Math.floor(Math.random() * bounds[2])
       let y = bounds[1] + Math.floor(Math.random() * bounds[3])
       // Add player entity
-      player = new AnimalEntity(animals.deer)
+      player = new AnimalEntity(animals[selectedAnimal])
       player.isPlayer = true
       addEntity(player, 'objects', x, y)
     }

Engine/src/states/Menu.ts

@@ -1,7 +1,10 @@
 import { ContextI } from '../ContextI'
 import { StateI } from './StateI'
+import { OutlineFilter } from '@pixi/filter-outline'
 import * as PIXI from 'pixi.js'
 import { GameState } from './Game'
+import { SpriteInstance } from '../shared/sprites'
+import { animals } from '../data/animals'
 
 interface MenuItem {
   text: PIXI.Text,
@@ -9,10 +12,44 @@ interface MenuItem {
 
 export function MenuState(ctx: ContextI): StateI {
   let container = new PIXI.Container()
+  let scaryBoi = new SpriteInstance('ui.menu.decorative.scary-boi.0')
+  let scaryBun = new SpriteInstance('ui.menu.decorative.scary-bun.0')
+  let animalSprites: SpriteInstance[] = Object.keys(animals).map(v => {
+    let s = new SpriteInstance(`${v}.animal.stand.west.0`)
+    s.container.interactive = true
+    s.container.on('pointerdown', () => {
+      if (selectedAnimalSprite) {
+        selectedAnimalSprite.container.filters = []
+      }
+      selectedAnimalName = v
+      selectedText.text = v
+      selectedAnimalSprite = s
+      selectedAnimalSprite.container.filters = [
+        new OutlineFilter(2, 0x99ff99)
+      ]
+    })
+    s.container.scale.set(3, 3)
+    container.addChild(s.container)
+    return s
+  })
+  let animalIndex = Math.floor(Math.random() * Object.keys(animals).length)
+  let selectedAnimalName = Object.keys(animals)[animalIndex]
+  let selectedAnimalSprite: SpriteInstance = animalSprites[animalIndex]
+  selectedAnimalSprite.container.filters = [
+    new OutlineFilter(2, 0x99ff99)
+  ]
+
+  let selectedText = new PIXI.Text(selectedAnimalName, new PIXI.TextStyle({
+    fontFamily: 'Arial',
+    fontSize: 30,
+    dropShadow: true,
+    fill: ['#ffffff'],
+    stroke: '#99ff99',
+  }))
 
   let text = new PIXI.Text('GGJ22', new PIXI.TextStyle({
     fontFamily: 'Arial',
-    fontSize: 40,
+    fontSize: 80,
     dropShadow: true,
     fill: ['#ffffff'],
     stroke: '#000000',
@@ -20,14 +57,14 @@ export function MenuState(ctx: ContextI): StateI {
 
   let hoverStyle = new PIXI.TextStyle({
     fontFamily: 'Arial',
-    fontSize: 20,
+    fontSize: 50,
     dropShadow: true,
     stroke: '#ffffff',
     fill: '#9999dd',
   })
   let blurStyle = new PIXI.TextStyle({
     fontFamily: 'Arial',
-    fontSize: 20,
+    fontSize: 50,
     dropShadow: true,
     fill: ['#ffffff'],
     stroke: '#000000',
@@ -39,7 +76,7 @@ export function MenuState(ctx: ContextI): StateI {
     let el = new PIXI.Text('Start Game', blurStyle)
     el.interactive = true
     el.on('pointerdown', () => {
-      ctx.push(GameState(ctx))
+      ctx.push(GameState(ctx, selectedAnimalName))
     })
     el.on('pointerover', () => {
       el.style = hoverStyle
@@ -51,7 +88,11 @@ export function MenuState(ctx: ContextI): StateI {
     container.addChild(el)
   }
 
+  container.addChild(scaryBoi.container)
+  container.addChild(scaryBun.container)
+
   container.addChild(text)
+  container.addChild(selectedText)
 
   let enter = () => {
     console.log('MenuState.enter')
@@ -64,14 +105,41 @@ export function MenuState(ctx: ContextI): StateI {
   let update = (delta: number) => {
     let yPos = 32
     // Eh... this isn't too expensive.
+    let maxWidth = 0
+    let maxX = 0
     text.x = ctx.app.view.width / 2 - text.width / 2
     text.y = 32
     yPos += text.height + 32
+    
+    //
+    selectedText.y = yPos
+    selectedText.x = ctx.app.view.width / 2 - selectedText.width / 2
+    yPos += selectedText.height
+
+    // draw our animal selections.
+    let spritesWidth = animalSprites.reduce((p,v)=>{
+      return p + v.container.width
+    }, 0)
+    let xPos = ctx.app.view.width / 2 - spritesWidth*0.7
+    for (let s of animalSprites) {
+      xPos += s.container.width
+      s.container.x = xPos
+      s.container.y = yPos
+    }
+    yPos += animalSprites[0].container.height + 32
+
     for (let item of menuItems) {
       item.x = ctx.app.view.width / 2 - item.width / 2
+      if (item.width > maxWidth) {
+        maxWidth = item.width
+      }
       item.y = yPos
       yPos += item.height + 8
     }
+    scaryBoi.container.y = scaryBoi.container.height
+    scaryBoi.container.x = ctx.app.view.width + scaryBoi.container.width/1.6
+    scaryBun.container.y = scaryBun.container.height
+    scaryBun.container.x = scaryBun.container.width/1.75
   }
 
   return {