the-obelisk/app/Elements/Classes/AnimationLayer.ts

/// <reference path="../Elements.ts" />
// parseInt(Elements.getStyle(".anims-orcNotStand").style.width.slice(0, -2))
class AnimationLayer {
    private cStep = 0;
    private totalSteps = 9;
    private frameSize = 200;

    private el = document.createElement("a");

    constructor (filename : string, layer? : number) {
        this.el.classList.add("sceneAnimation");
        if (layer != undefined) {
            this.el.style.zIndex = layer.toString();
        }

        let style = Elements.getStyle(".anims-" + filename);
        if (style == undefined || style.width == undefined) {
            console.error("Animation " + filename + " not found.");
        } else {
            let height = (parseInt(style.height.slice(0,-2)));
            this.frameSize = height;
            this.totalSteps = (parseInt(style.width.slice(0,-2)) / height);
        }
        this.el.classList.add("anims-" + filename);
        this.updateSize();
    }

    public updateSize () {
        this.el.style.transform = "scale(" + (Elements.AnimationHandler.spriteSize / this.frameSize) + ")";
        this.el.style.width = this.frameSize + "px";
        this.el.style.height = this.frameSize + "px";
        this.el.style.marginLeft = "-" + this.frameSize/2 + "px";
        this.el.style.marginTop = "-" + this.frameSize/2 + "px";
    }

    public updateSprite (percentage : number) {
        this.cStep = Math.floor(percentage * this.totalSteps);
        this.el.style.backgroundPositionX = "-" + (this.cStep * this.frameSize) + "px";
    }

    public getElement () {
        return this.el;
    }
}

/**
    Planning...

 - Player Spritesheets need to have certain important markers down, set as connect points.
 ----- Top of Head coordinates (used for "stunned" effects, whatever)
 ----- Crotch coordinates
 ----- Facing Direction
 ----- Mouth Coordinates
 These are, of course, connection points.
 **/