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

/// <reference path="../Elements.ts" />
// parseInt(Elements.getStyle(".anims-orcNotStand").style.width.slice(0, -2))
class AnimationLayer {
    private name = "unknown";
    private layer = 0;
    private cStep = 0;
    private totalSteps = 9;
    private frameSize = 200;
    private heightMult = 1; // used to create shadows
    private feetHeight = 0; // used to move shadows up and down

    private filters = ["hue-rotate(0deg)", "brightness(1)"];

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

    constructor (filename : string, layer? : number) {
        this.name = filename;
        this.layer = layer;
        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.heightMult * (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";
        if (this.heightMult != 1) {
            let realHeight = this.heightMult * (Elements.AnimationHandler.spriteSize / this.frameSize) * this.frameSize;
            this.el.style.top = "100%";
            this.el.style.marginTop = (- (this.feetHeight - (this.feetHeight * this.heightMult))) + "px";
            //this.el.style.top = "100%";
            //this.el.style.marginTop = "-" + (realHeight + this.feetHeight);
            console.log("finalHeight: ", realHeight, "feetHeight:", this.feetHeight, "target:" , 130, this.el.style.marginTop);
            // Originally top: 50%;
        }
    }

    public addShadow (feetHeight : number) {
        let shadow = Elements.AnimationHandler.addAnimation(this.name, this.layer - 1);
        shadow.heightMult = 0.15;
        shadow.feetHeight = feetHeight;
        shadow.updateSize();
        shadow.brightify(0);
    }

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

    /**
     * Turn refers to how much we turn the hue wheel, in degres.
     * Anything that's colorizable begins at red, so:
     * RED = 0
     * YELLOW = 60
     * GEREN = 120
     * BLUE = 240
     * RED = 360
     *
     * So pink is between RED and BLUE. 300 can be pink.
     * @param degrees
     */
    public colorize (degrees : number) {
        this.filters[0] = "hue-rotate(" + degrees + "deg)";
        this.updateFilter();
    }

    public brightify (percent : number) {
        this.filters[1] = "brightness(" + percent + ")";
        this.updateFilter();
    }

    public updateFilter () {
        this.el.style.filter = this.filters.join(" ");
    }

    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.
 **/