2022-01-29 01:37:01 -08:00
|
|
|
import { ContextI } from '../ContextI'
|
|
|
|
import { StateI } from './StateI'
|
2022-01-30 04:09:54 -08:00
|
|
|
import { OutlineFilter } from '@pixi/filter-outline'
|
2022-01-29 01:37:01 -08:00
|
|
|
import * as PIXI from 'pixi.js'
|
|
|
|
import { GameState } from './Game'
|
2022-01-30 04:09:54 -08:00
|
|
|
import { SpriteInstance } from '../shared/sprites'
|
|
|
|
import { animals } from '../data/animals'
|
2022-01-30 04:56:44 -08:00
|
|
|
import { segments } from '../shared/segments'
|
2022-01-29 01:37:01 -08:00
|
|
|
|
|
|
|
interface MenuItem {
|
|
|
|
text: PIXI.Text,
|
|
|
|
}
|
|
|
|
|
|
|
|
export function MenuState(ctx: ContextI): StateI {
|
|
|
|
let container = new PIXI.Container()
|
2022-01-30 04:09:54 -08:00
|
|
|
let scaryBoi = new SpriteInstance('ui.menu.decorative.scary-boi.0')
|
|
|
|
let scaryBun = new SpriteInstance('ui.menu.decorative.scary-bun.0')
|
2022-01-30 04:56:44 -08:00
|
|
|
|
|
|
|
// Animal Selections
|
2022-01-30 04:09:54 -08:00
|
|
|
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)
|
|
|
|
]
|
|
|
|
|
2022-01-30 04:56:44 -08:00
|
|
|
// Segment Selections
|
|
|
|
let segmentItems: PIXI.Text[] = Object.keys(segments).map(v => {
|
|
|
|
let s = new PIXI.Text(v, new PIXI.TextStyle({
|
|
|
|
fontFamily: 'Arial',
|
|
|
|
fontSize: 30,
|
|
|
|
fill: ['#000000'],
|
|
|
|
}))
|
|
|
|
s.interactive = true
|
|
|
|
s.on('pointerdown', () => {
|
|
|
|
selectedSegmentName = v
|
|
|
|
selectedSegmentItem.filters = []
|
|
|
|
selectedSegmentItem = s
|
|
|
|
selectedSegmentItem.filters = [
|
|
|
|
new OutlineFilter(2, 0x99ff99)
|
|
|
|
]
|
|
|
|
})
|
|
|
|
container.addChild(s)
|
|
|
|
return s
|
|
|
|
})
|
|
|
|
let selectedSegmentItem: PIXI.Text = segmentItems.find(v=>v.text==='world') ?? segmentItems[0]
|
|
|
|
let selectedSegmentName = 'world'
|
|
|
|
selectedSegmentItem.filters = [
|
|
|
|
new OutlineFilter(2, 0x99ff99)
|
|
|
|
]
|
|
|
|
|
|
|
|
|
2022-01-30 04:09:54 -08:00
|
|
|
let selectedText = new PIXI.Text(selectedAnimalName, new PIXI.TextStyle({
|
|
|
|
fontFamily: 'Arial',
|
|
|
|
fontSize: 30,
|
|
|
|
dropShadow: true,
|
|
|
|
fill: ['#ffffff'],
|
|
|
|
stroke: '#99ff99',
|
|
|
|
}))
|
2022-01-29 01:37:01 -08:00
|
|
|
|
|
|
|
let text = new PIXI.Text('GGJ22', new PIXI.TextStyle({
|
|
|
|
fontFamily: 'Arial',
|
2022-01-30 04:09:54 -08:00
|
|
|
fontSize: 80,
|
2022-01-29 01:37:01 -08:00
|
|
|
dropShadow: true,
|
|
|
|
fill: ['#ffffff'],
|
|
|
|
stroke: '#000000',
|
|
|
|
}))
|
|
|
|
|
|
|
|
let hoverStyle = new PIXI.TextStyle({
|
|
|
|
fontFamily: 'Arial',
|
2022-01-30 04:09:54 -08:00
|
|
|
fontSize: 50,
|
2022-01-29 01:37:01 -08:00
|
|
|
dropShadow: true,
|
|
|
|
stroke: '#ffffff',
|
|
|
|
fill: '#9999dd',
|
|
|
|
})
|
|
|
|
let blurStyle = new PIXI.TextStyle({
|
|
|
|
fontFamily: 'Arial',
|
2022-01-30 04:09:54 -08:00
|
|
|
fontSize: 50,
|
2022-01-29 01:37:01 -08:00
|
|
|
dropShadow: true,
|
|
|
|
fill: ['#ffffff'],
|
|
|
|
stroke: '#000000',
|
|
|
|
})
|
|
|
|
|
|
|
|
let menuItems: PIXI.Text[] = []
|
|
|
|
|
|
|
|
{
|
|
|
|
let el = new PIXI.Text('Start Game', blurStyle)
|
|
|
|
el.interactive = true
|
|
|
|
el.on('pointerdown', () => {
|
2022-01-30 04:56:44 -08:00
|
|
|
ctx.push(GameState(ctx, selectedAnimalName, selectedSegmentName))
|
2022-01-29 01:37:01 -08:00
|
|
|
})
|
|
|
|
el.on('pointerover', () => {
|
|
|
|
el.style = hoverStyle
|
|
|
|
})
|
|
|
|
el.on('pointerout', () => {
|
|
|
|
el.style = blurStyle
|
|
|
|
})
|
|
|
|
menuItems.push(el)
|
|
|
|
container.addChild(el)
|
|
|
|
}
|
|
|
|
|
2022-01-30 04:09:54 -08:00
|
|
|
container.addChild(scaryBoi.container)
|
|
|
|
container.addChild(scaryBun.container)
|
|
|
|
|
2022-01-29 01:37:01 -08:00
|
|
|
container.addChild(text)
|
2022-01-30 04:09:54 -08:00
|
|
|
container.addChild(selectedText)
|
2022-01-29 01:37:01 -08:00
|
|
|
|
|
|
|
let enter = () => {
|
|
|
|
console.log('MenuState.enter')
|
|
|
|
ctx.app.stage.addChild(container)
|
|
|
|
}
|
|
|
|
let leave = () => {
|
|
|
|
console.log('MenuState.leave')
|
|
|
|
ctx.app.stage.removeChild(container)
|
|
|
|
}
|
|
|
|
let update = (delta: number) => {
|
|
|
|
let yPos = 32
|
|
|
|
// Eh... this isn't too expensive.
|
2022-01-30 04:09:54 -08:00
|
|
|
let maxWidth = 0
|
|
|
|
let maxX = 0
|
2022-01-29 01:37:01 -08:00
|
|
|
text.x = ctx.app.view.width / 2 - text.width / 2
|
|
|
|
text.y = 32
|
|
|
|
yPos += text.height + 32
|
2022-01-30 04:09:54 -08:00
|
|
|
|
|
|
|
//
|
|
|
|
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
|
|
|
|
|
2022-01-30 04:56:44 -08:00
|
|
|
// Draw our segment selections.
|
|
|
|
for (let item of segmentItems) {
|
|
|
|
item.x = ctx.app.view.width / 2 - item.width / 2
|
|
|
|
if (item.width > maxWidth) {
|
|
|
|
maxWidth = item.width
|
|
|
|
}
|
|
|
|
item.y = yPos
|
|
|
|
yPos += item.height + 8
|
|
|
|
}
|
|
|
|
yPos += 32
|
|
|
|
|
|
|
|
// Draw rest of the garbage.
|
2022-01-29 01:37:01 -08:00
|
|
|
for (let item of menuItems) {
|
|
|
|
item.x = ctx.app.view.width / 2 - item.width / 2
|
2022-01-30 04:09:54 -08:00
|
|
|
if (item.width > maxWidth) {
|
|
|
|
maxWidth = item.width
|
|
|
|
}
|
2022-01-29 01:37:01 -08:00
|
|
|
item.y = yPos
|
|
|
|
yPos += item.height + 8
|
|
|
|
}
|
2022-01-30 04:09:54 -08:00
|
|
|
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
|
2022-01-29 01:37:01 -08:00
|
|
|
}
|
|
|
|
|
|
|
|
return {
|
|
|
|
enter,
|
|
|
|
leave,
|
|
|
|
update,
|
|
|
|
}
|
|
|
|
}
|