tuxman/client/js/gfx/graphics.js

import { Sprite } from './sprite.js'
import { ItemType, Rotation } from '../logic.js'


const draw_players = (data, players, sprites) => {
    for (let id of players) {
        let pos = data.players[id].pos
        sprites[id].move(pos[0], pos[1])
        switch (data.players[id].move_rot) {
            case Rotation.NORTH:
                sprites[id].rotate(270)
                break
            case Rotation.EAST:
                sprites[id].rotate(0)
                break
            case Rotation.SOUTH:
                sprites[id].rotate(90)
                break
            case Rotation.WEST:
                sprites[id].rotate(180)
                break
        }
    }
}

const update_player_sprites = (data, players, sprites) => {
    for (const sprite of sprites) {
        if (sprite !== undefined) {
            sprite.destroy()
        }
    }

    let new_sprites = Array(players)
    new_sprites.fill(undefined)

    for (let id of players) {
        let sprite = new Sprite("/img/pac.png", data.map)
        sprite.layer(3)
        sprite.resize(1,1)
        sprite.show()
        new_sprites[id] = sprite
    }

    return new_sprites
}

const create_map_dot = (data, x, y) => {
    let dot = new Sprite("/img/dot.png", data.map)
    dot.move(x, y)
    dot.resize(.2,.2)
    dot.show()
    dot.type = ItemType.DOT
    return dot
}

const draw_sprites = (data, item_sprites) => {
    let items = data.map.items

    let to_remove = []
    // remove rendered but non existing items
    for (const item_key in item_sprites) {

        let sprite = item_sprites[item_key]
        if (!items[item_key]) {
            sprite.destroy()
            to_remove.push(item_key)
        }

    }

    for (const id of to_remove) {
        delete item_sprites[id]
    }
    
    // add not rendered sprites
    for (const item_key in items) {

        /** @type {import('../logic.js').Item} */
        let item = items[item_key]
        let sprite = item_sprites[item_key]

        if (sprite) {
            if (item.type === sprite.type)
                continue
            sprite.destroy()
        }

        switch (item.type) {
            case ItemType.DOT:
                sprite = create_map_dot(data, ...item.pos)
                break;
        }

        item_sprites[item_key] = sprite
    }

}

export const startGraphicsUpdater = () => {
    
    let player_sprites = []
    let item_sprites = {}

    /**
	 * @type {(data: import("../logic.js").GameState) => void}
	 */
    return (data) => {

        if (!data.map || !data.map.visible) return

        let players = Object.keys(data.players).filter(k => data.players[k] !== undefined)

        if (player_sprites.length !== players.length) {
            player_sprites = update_player_sprites(data, players, player_sprites)
            console.log("updating player sprites")
        }

        draw_sprites(data, item_sprites)
        draw_players(data, players, player_sprites)

    }
}