tuxman/client/js/gfx/sprite.js

export class Sprite {
    
    constructor(image_src, map) {
        this.element = document.createElement("img")
        this.element.src = image_src
        this.element.className = "sprite"
        document.getElementById("container").appendChild(this.element)

        this.map = map
        this.x = 0
        this.y = 0
        this.w = 1
        this.h = 1
        this.z = 1
        this.d = 0
        this.hide()
    }

    #update_pos() {
        let width = 100 / this.map.width * this.w
        let height = 100 / this.map.height * this.h
        let left = 100 / this.map.width * (this.x + (1 - this.w) / 2)
        let top = 100 / this.map.height * (this.y + (1 - this.h) / 2)

        this.element.style.width = `${width}%`
        this.element.style.height = `${height}%`
        this.element.style.left = `${left}%`
        this.element.style.top = `${top}%`
        this.element.style.transform = `rotate(${this.d}deg)`
        this.element.style.zIndex = `${this.z}`
    }

    move(x, y) {
        this.x = x
        this.y = y
        this.#update_pos()
    }

    resize(w, h) {
        this.w = w
        this.h = h
        this.#update_pos()
    }

    layer(z) {
        this.z = z
        this.#update_pos()
    }

    rotate(d) {
        this.d = d
        this.#update_pos()
    }

    hide() {
        this.element.style.display = "none"
    }

    show() {
        this.element.style.display = "initial"
    }

    destroy() {
        this.element.remove()
    }

}