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 = 1) {
        this.name = filename;
        this.layer = layer;
        this.el.classList.add("sceneAnimation");
        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...
 Precise positioning is all out, so let's forget about all that.
 Due to animation limitations, the situations for fucking must be different:
 - Speed according to if someone fucking is going to cum or not. Highest speed is used.
 - Player has two stances only: Standing and On All Fours. Standing is used for combat grabs, generally, and the player is better able to fight back. On All Fours the player is weaker. Either way, doesn't matter here.
 - The complete list of possible fucking positions for enemies:
        * Holding Standing From the Front
        * Holding Standing from the back
        * Fucking Crotch standing from the front
        * Fucking Crotch standing from the back
        * Fucking Mouth standing
        * Fucking Crotch On All Fours
        * Fucking Mouth on All Fours
 - Obviously, enemies only need to implement the things they do. Cockbats, for instance, will only fuck mouth if standing or Mouth/Crotch if on all fours.


 - The player character is moving according to percentages and has a few states.
        * At 25%, the character will slightly move forward as if compensating for fucking
        * At 75%, the character will slightly move backward as if compensating for fucking
 - These should be used as marks for thrusts.
 **/