47 lines
1.5 KiB
TypeScript
47 lines
1.5 KiB
TypeScript
import { useEffect, useRef, type MutableRefObject } from 'react'
|
|
import Phaser from 'phaser'
|
|
import type { MovementVector } from '../../../input'
|
|
import { BulldromeArenaScene } from './scenes/BulldromeArenaScene'
|
|
import type { Iwt2ArenaState } from '../sim/arenaState'
|
|
|
|
type PhaserArenaProps = {
|
|
movementRef: MutableRefObject<MovementVector>
|
|
selectedPartyIdRef: MutableRefObject<string>
|
|
stateRef: MutableRefObject<Iwt2ArenaState>
|
|
onStep: (movement: MovementVector, dtSeconds: number) => Iwt2ArenaState
|
|
}
|
|
|
|
export function PhaserArena({ movementRef, onStep, selectedPartyIdRef, stateRef }: PhaserArenaProps) {
|
|
const hostRef = useRef<HTMLDivElement | null>(null)
|
|
|
|
useEffect(() => {
|
|
if (!hostRef.current) return undefined
|
|
const initialState = stateRef.current
|
|
const scene = new BulldromeArenaScene({
|
|
getMovement: () => movementRef.current,
|
|
getSelectedPartyId: () => selectedPartyIdRef.current,
|
|
getState: () => stateRef.current,
|
|
step: onStep,
|
|
})
|
|
const game = new Phaser.Game({
|
|
type: Phaser.AUTO,
|
|
parent: hostRef.current,
|
|
width: initialState.bounds.width,
|
|
height: initialState.bounds.height,
|
|
backgroundColor: '#10141b',
|
|
pixelArt: false,
|
|
scale: {
|
|
mode: Phaser.Scale.FIT,
|
|
autoCenter: Phaser.Scale.CENTER_BOTH,
|
|
},
|
|
scene,
|
|
})
|
|
|
|
return () => {
|
|
game.destroy(true)
|
|
}
|
|
}, [movementRef, onStep, selectedPartyIdRef, stateRef])
|
|
|
|
return <div className="iwt2-phaser-host" ref={hostRef} />
|
|
}
|