Initial work on animations

The Obelisk.haml

@@ -75,6 +75,8 @@
             .topBottomFlex
               #mapTab.growingFlex.scrollbar
                 #mapTarget
+              #sceneAnimation
+                %a.sceneAnimation#orcAnim
               #roomExitsHolder
                 %p.roomExitsHeader="Exits:"
                 #roomExits

config.rb

@@ -2,12 +2,13 @@ require 'compass/import-once/activate'
 # Require any additional compass plugins here.
 
 # Set this to the root of your project when deployed:
-http_path = "/"
+http_path = "dist"
 css_dir = "stylesheets"
 sass_dir = "sass"
 images_dir = "images"
 javascripts_dir = "js"
-generated_images_dir = "/dist/images/"
+generated_images_dir = "dist/images"
+http_generated_images_path  = "images"
 
 # You can select your preferred output style here (can be overridden via the command line):
 # output_style = :expanded or :nested or :compact or :compressed
@@ -15,7 +16,7 @@ generated_images_dir = "/dist/images/"
 output_style = :expanded
 
 # To enable relative paths to assets via compass helper functions. Uncomment:
-# relative_assets = true
+#relative_assets = false
 
 # To disable debugging comments that display the original location of your selectors. Uncomment:
 line_comments = true

content/main.ts

@@ -301,4 +301,17 @@ spitroast.addUnit()
     .addUnit()
     .setFucker(OrcDebugger)
     .setHole(HumanoidHead)
-    .setStick(HumanoidPenis);
+    .setStick(HumanoidPenis);
+
+
+let orcAnim = document.getElementById("orcAnim");
+let step = 1;
+let direction = 1;
+setInterval(() => {
+    for (let i = 1; i <= 3; i++) {
+        orcAnim.classList.remove("anims-Orc-" + i);
+    }
+    orcAnim.classList.add("anims-Orc-" + step);
+    direction = step == 3 ? -1 : step == 1 ? 1 : direction;
+    step += direction;
+}, 500);

sass/_animations.scss

@@ -0,0 +1,11 @@
+// Notes:
+/** Utilize JS getStyle to read width of spritesheet
+ ** Calculate amount of steps from that
+ ** Profit
+ **/
+
+@import "compass/utilities/sprites";
+$anims-layout:vertical;
+$anims-sprite-dimensions: true;
+@import "anims/*/**.png";
+@include all-anims-sprites;

sass/_page.scss

@@ -222,10 +222,27 @@ body {
   padding: 0.8rem;
 }
 
+#sceneAnimation {
+  @extend .noshrinkFlex;
+  height: 200px;
+  position: relative;
+  background: linear-gradient(to top left, rgba(0,0,0, $dark1) 0%, rgba(0,0,0, $dark2) 50%,rgba(0,0,0, $dark3) 100%);
+}
+
+
+.sceneAnimation {
+  display: block;
+  position: absolute;
+  height: 200px;
+  width: 200px;
+  left: 50%;
+  margin-left: -100px;
+}
+
 // #mainPage.mobile
 #roomExitsHolder {
   @extend .noshrinkFlex;
-  background: linear-gradient(to top left, rgba(0,0,0, $dark1) 0%, rgba(0,0,0, $dark2) 50%,rgba(0,0,0, $dark3) 100%);
+  background: linear-gradient(to bottom left, rgba(0,0,0, $dark1) 0%, rgba(0,0,0, $dark2) 50%,rgba(0,0,0, $dark3) 100%);
   padding: 2ex;
   padding-top: 0px;
 }

sass/animations.scss

@@ -1,4 +0,0 @@
-@import "compass/utilities/sprites";
-$anims-layout:smart;
-@import "anims/*/**.png";
-@include all-anims-sprites;

sass/images.scss

@@ -1,3 +1,5 @@
+@import "_animations";
+
 #mainPage.mobile .contentImage {
   height: 10ex; // It's a good idea to make these smaller on mobile.
 }

stylesheets/screen.css

@@ -107,7 +107,7 @@ body {
 }
 
 /* line 89, ../sass/_page.scss */
-#statusLine, .noshrinkFlex, #roomExitsHolder {
+#statusLine, .noshrinkFlex, #sceneAnimation, #roomExitsHolder {
   flex: 0 0 auto;
   align-self: stretch;
   height: auto;
@@ -268,14 +268,31 @@ body {
   padding: 0.8rem;
 }
 
-/* line 226, ../sass/_page.scss */
-#roomExitsHolder {
+/* line 225, ../sass/_page.scss */
+#sceneAnimation {
+  height: 200px;
+  position: relative;
   background: linear-gradient(to top left, rgba(0, 0, 0, 0.12) 0%, rgba(0, 0, 0, 0.09) 50%, rgba(0, 0, 0, 0.06) 100%);
+}
+
+/* line 233, ../sass/_page.scss */
+.sceneAnimation {
+  display: block;
+  position: absolute;
+  height: 200px;
+  width: 200px;
+  left: 50%;
+  margin-left: -100px;
+}
+
+/* line 243, ../sass/_page.scss */
+#roomExitsHolder {
+  background: linear-gradient(to bottom left, rgba(0, 0, 0, 0.12) 0%, rgba(0, 0, 0, 0.09) 50%, rgba(0, 0, 0, 0.06) 100%);
   padding: 2ex;
   padding-top: 0px;
 }
 
-/* line 233, ../sass/_page.scss */
+/* line 250, ../sass/_page.scss */
 #exitsTab {
   overflow: hidden;
   background-color: rgba(0, 0, 0, 0.03);