diff --git a/Engine/src/states/Game.ts b/Engine/src/states/Game.ts index c422c25..89f665d 100644 --- a/Engine/src/states/Game.ts +++ b/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) } diff --git a/Engine/src/states/Menu.ts b/Engine/src/states/Menu.ts index c1b6c62..1acebb2 100644 --- a/Engine/src/states/Menu.ts +++ b/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 {