I don't know why I was trying to make a shadow system, I mean it'd be cool and stuff but I'm far too sleep deprived to figure out the math because of how the scaling affects it and I no longer care abgout it

app/Elements/Classes/AnimationLayer.ts

@@ -1,13 +1,21 @@
 /// <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();
@@ -26,11 +34,28 @@ class AnimationLayer {
     }
 
     public updateSize () {
-        this.el.style.transform = "scale(" + (Elements.AnimationHandler.spriteSize / this.frameSize) + ")";
+        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";
+        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) {
@@ -38,6 +63,32 @@ class AnimationLayer {
         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;
     }

app/Elements/Modules/AnimationHandler.ts

@@ -38,12 +38,17 @@ module Elements.AnimationHandler {
     export function addAnimations (...names : Array<AnimationInstruction>) {
         fixVerticalPosition();
         for (let i = 0; i < names.length; i++) {
-            let newAnim = new AnimationLayer(names[i].name, names[i].layer);
-            container.appendChild(newAnim.getElement());
-            animations.push(newAnim);
+            addAnimation(names[i].name);
         }
     }
 
+    export function addAnimation (name : string, layer = 0) {
+        let newAnim = new AnimationLayer(name, layer);
+        container.appendChild(newAnim.getElement());
+        animations.push(newAnim);
+        return newAnim;
+    }
+
     export function beginAnimate (targetAnimationSpeed? : number) {
         animationSpeed = targetAnimationSpeed == undefined ? 1500 : targetAnimationSpeed;
         lastTime = (new Date()).getTime();

dist/The Obelisk.html

@@ -1673,47 +1673,41 @@ THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  ** Calculate amount of steps from that
  ** Profit
  **/
-.anims-sprite, .anims-pixelPrecisionTest, .anims-winner, .anims-biggusOrcus, .anims-numbersAnimated, .anims-orcStand, .anims-smolOrc {
-  background-image: url('images/anims-s8cdeedb00a.png');
+.anims-sprite, .anims-hairdoTest, .anims-pixelPrecisionTest, .anims-winner, .anims-orcNoShadow, .anims-orcStand {
+  background-image: url('images/anims-s5a53e44850.png');
   background-repeat: no-repeat;
 }
 
-.anims-pixelPrecisionTest {
+.anims-hairdoTest {
   background-position: 0 0;
+  height: 200px;
+  width: 400px;
+}
+
+.anims-pixelPrecisionTest {
+  background-position: 0 -200px;
   height: 327px;
   width: 327px;
 }
 
 .anims-winner {
-  background-position: 0 -327px;
+  background-position: 0 -527px;
   height: 200px;
   width: 400px;
 }
 
-.anims-biggusOrcus {
-  background-position: 0 -527px;
-  height: 600px;
-  width: 2400px;
-}
-
-.anims-numbersAnimated {
-  background-position: 0 -1127px;
+.anims-orcNoShadow {
+  background-position: 0 -727px;
   height: 200px;
-  width: 6000px;
+  width: 800px;
 }
 
 .anims-orcStand {
-  background-position: 0 -1327px;
+  background-position: 0 -927px;
   height: 200px;
   width: 800px;
 }
 
-.anims-smolOrc {
-  background-position: 0 -1527px;
-  height: 100px;
-  width: 400px;
-}
-
 #mainPage.mobile .contentImage {
   height: 10ex;
 }

sass/_page.scss

@@ -244,6 +244,7 @@ body {
   position: absolute;
   top: 50%;
   left: 50%;
+
 }
 
 // #mainPage.mobile
@@ -258,4 +259,4 @@ body {
   overflow: hidden;
   background-color: rgba(0,0,0, $dark4);
   padding: 0.8rem;
-}
+}

stylesheets/images.css

@@ -2,47 +2,41 @@
  ** Calculate amount of steps from that
  ** Profit
  **/
-.anims-sprite, .anims-pixelPrecisionTest, .anims-winner, .anims-biggusOrcus, .anims-numbersAnimated, .anims-orcStand, .anims-smolOrc {
-  background-image: url('images/anims-s8cdeedb00a.png');
+.anims-sprite, .anims-hairdoTest, .anims-pixelPrecisionTest, .anims-winner, .anims-orcNoShadow, .anims-orcStand {
+  background-image: url('images/anims-s5a53e44850.png');
   background-repeat: no-repeat;
 }
 
-.anims-pixelPrecisionTest {
+.anims-hairdoTest {
   background-position: 0 0;
+  height: 200px;
+  width: 400px;
+}
+
+.anims-pixelPrecisionTest {
+  background-position: 0 -200px;
   height: 327px;
   width: 327px;
 }
 
 .anims-winner {
-  background-position: 0 -327px;
+  background-position: 0 -527px;
   height: 200px;
   width: 400px;
 }
 
-.anims-biggusOrcus {
-  background-position: 0 -527px;
-  height: 600px;
-  width: 2400px;
-}
-
-.anims-numbersAnimated {
-  background-position: 0 -1127px;
+.anims-orcNoShadow {
+  background-position: 0 -727px;
   height: 200px;
-  width: 6000px;
+  width: 800px;
 }
 
 .anims-orcStand {
-  background-position: 0 -1327px;
+  background-position: 0 -927px;
   height: 200px;
   width: 800px;
 }
 
-.anims-smolOrc {
-  background-position: 0 -1527px;
-  height: 100px;
-  width: 400px;
-}
-
 #mainPage.mobile .contentImage {
   height: 10ex;
 }

stylesheets/screenRelative.css

@@ -295,12 +295,9 @@ body {
 
 #sceneAnimation {
   display: none;
-  width: 200px;
-  height: 200px;
   position: fixed;
   bottom: 0px;
   left: 50%;
-  margin-left: -100px;
   z-index: 1;
   pointer-events: none;
 }
@@ -948,47 +945,41 @@ p.turnStart::before, p.turnStart::after {
  ** Calculate amount of steps from that
  ** Profit
  **/
-.anims-sprite, .anims-pixelPrecisionTest, .anims-winner, .anims-biggusOrcus, .anims-numbersAnimated, .anims-orcStand, .anims-smolOrc {
-  background-image: url('images/anims-s8cdeedb00a.png');
+.anims-sprite, .anims-hairdoTest, .anims-pixelPrecisionTest, .anims-winner, .anims-orcNoShadow, .anims-orcStand {
+  background-image: url('images/anims-s5a53e44850.png');
   background-repeat: no-repeat;
 }
 
-.anims-pixelPrecisionTest {
+.anims-hairdoTest {
   background-position: 0 0;
+  height: 200px;
+  width: 400px;
+}
+
+.anims-pixelPrecisionTest {
+  background-position: 0 -200px;
   height: 327px;
   width: 327px;
 }
 
 .anims-winner {
-  background-position: 0 -327px;
+  background-position: 0 -527px;
   height: 200px;
   width: 400px;
 }
 
-.anims-biggusOrcus {
-  background-position: 0 -527px;
-  height: 600px;
-  width: 2400px;
-}
-
-.anims-numbersAnimated {
-  background-position: 0 -1127px;
+.anims-orcNoShadow {
+  background-position: 0 -727px;
   height: 200px;
-  width: 6000px;
+  width: 800px;
 }
 
 .anims-orcStand {
-  background-position: 0 -1327px;
+  background-position: 0 -927px;
   height: 200px;
   width: 800px;
 }
 
-.anims-smolOrc {
-  background-position: 0 -1527px;
-  height: 100px;
-  width: 400px;
-}
-
 #mainPage.mobile .contentImage {
   height: 10ex;
 }