GGJ22/Engine/src/states/Menu.ts

183 lines
5.2 KiB
TypeScript
Raw Normal View History

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-30 14:19:20 -08:00
import { bodyTextStyle, buttonBlurStyle, buttonHoverStyle } from '../styles'
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
2022-01-30 14:19:20 -08:00
container.addChild(scaryBoi.container)
container.addChild(scaryBun.container)
2022-01-30 14:43:55 -08:00
let logoSprite: SpriteInstance = new SpriteInstance('ui.menu.logo.default.0')
logoSprite.container.scale.set(3, 3)
container.addChild(logoSprite.container)
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,
2022-01-30 08:26:49 -08:00
fill: ['#ffffff'],
2022-01-30 04:56:44 -08:00
}))
s.interactive = true
s.on('pointerdown', () => {
selectedSegmentName = v
selectedSegmentItem.filters = []
2022-01-30 08:26:49 -08:00
selectedSegmentItem.style.fill = ['#ffffff']
2022-01-30 04:56:44 -08:00
selectedSegmentItem = s
selectedSegmentItem.filters = [
new OutlineFilter(2, 0x99ff99)
]
2022-01-30 08:26:49 -08:00
selectedSegmentItem.style.fill = ['#000000']
2022-01-30 04:56:44 -08:00
})
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 08:26:49 -08:00
selectedSegmentItem.style.fill = ['#000000']
2022-01-30 04:56:44 -08:00
2022-01-30 14:19:20 -08:00
let selectedText = new PIXI.Text(selectedAnimalName, bodyTextStyle())
2022-01-29 01:37:01 -08:00
2022-01-30 14:43:55 -08:00
let text = new PIXI.Text('Global Game Jam 2022', new PIXI.TextStyle({
2022-01-29 01:37:01 -08:00
fontFamily: 'Arial',
2022-01-30 14:43:55 -08:00
fontSize: 16,
2022-01-29 01:37:01 -08:00
dropShadow: true,
fill: ['#ffffff'],
stroke: '#000000',
}))
let menuItems: PIXI.Text[] = []
{
2022-01-30 15:13:18 -08:00
let el = new PIXI.Text('Begin the Hunt', buttonBlurStyle())
2022-01-29 01:37:01 -08:00
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', () => {
2022-01-30 14:19:20 -08:00
el.style = buttonHoverStyle()
2022-01-29 01:37:01 -08:00
})
el.on('pointerout', () => {
2022-01-30 14:19:20 -08:00
el.style = buttonHoverStyle()
2022-01-29 01:37:01 -08:00
})
menuItems.push(el)
container.addChild(el)
}
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) => {
2022-01-30 14:43:55 -08:00
let yPos = logoSprite.height * 2
2022-01-29 01:37:01 -08:00
// Eh... this isn't too expensive.
2022-01-30 04:09:54 -08:00
let maxWidth = 0
let maxX = 0
2022-01-30 14:43:55 -08:00
logoSprite.container.x = ctx.app.view.width / 2
logoSprite.container.y = yPos
yPos += logoSprite.height + 32
2022-01-29 01:37:01 -08:00
text.x = ctx.app.view.width / 2 - text.width / 2
2022-01-30 14:43:55 -08:00
text.y = yPos
2022-01-29 01:37:01 -08:00
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 08:26:49 -08:00
scaryBoi.container.y = 0
scaryBoi.container.x = ctx.app.view.width - scaryBoi.container.width/3
scaryBun.container.y = 0
scaryBun.container.x = -scaryBun.container.width/2
2022-01-29 01:37:01 -08:00
}
return {
enter,
leave,
update,
}
}