1-// GameMap.tsx — new Pixi-based component
1+import { useEffect, useRef } from 'react'
2+import { Application, Sprite, Texture, Container, Ticker } from 'pixi.js'
6+ units: { id: string; x: number; y: number; textureUrl: string }[]
9+export function GameMap({ mapId, units }: Props) {
10+ const containerRef = useRef<HTMLDivElement>(null)
13+ if (!containerRef.current) return
15+ const app = new Application({ width: 1024, height: 768 })
16+ containerRef.current.appendChild(app.view as HTMLCanvasElement)
18+ const unitContainer = new Container()
19+ app.stage.addChild(unitContainer)
21+ units.forEach((u) => {
22+ const texture = Texture.from(u.textureUrl)
23+ const sprite = new Sprite(texture)
26+ unitContainer.addChild(sprite)
29+ const tickerFn = (delta: number) => {
30+ unitContainer.children.forEach((sprite) => {
31+ sprite.rotation += 0.01 * delta
34+ Ticker.shared.add(tickerFn)
36+ window.addEventListener('resize', () => {
37+ app.renderer.resize(window.innerWidth, window.innerHeight)
41+ return <div ref={containerRef} />
