A lot was done:

- Animations can now have backgrounds
- Some fixes to animations

app/Elements/Classes/AnimationLayer.ts

@@ -13,13 +13,11 @@ class AnimationLayer {
 
     private el = document.createElement("a");
 
-    constructor (filename : string, layer? : number) {
+    constructor (filename : string, layer = 1) {
         this.name = filename;
         this.layer = layer;
         this.el.classList.add("sceneAnimation");
-        if (layer != undefined) {
-            this.el.style.zIndex = layer.toString();
-        }
+        this.el.style.zIndex = layer.toString();
 
         let style = Elements.getStyle(".anims-" + filename);
         if (style == undefined || style.width == undefined) {
@@ -96,11 +94,23 @@ class AnimationLayer {
 
 /**
     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.
+
 
- - 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.
+ - 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.
  **/

app/Elements/Modules/AnimationHandler.ts

@@ -9,7 +9,7 @@
 // The idea is to have the base animation look "ok" without anything going on, but to also have things going on just fit mathmagically.
 // Support to animations that contain the WHOLE of the events should be possible as to make it so we can make special animations for special circumstances. e.g. only encounter with the ogre
 enum AnimationLayerLevel {
-    BACKGROUND = 0,
+    BACKGROUND = 1,
     MIDDLE = 150,
     FRONT = 300
 }
@@ -21,6 +21,7 @@ interface AnimationInstruction {
 
 module Elements.AnimationHandler {
     var container = document.getElementById("sceneAnimation");
+    var background = document.createElement("a");
     var stop = true;
     export var spriteSize = 200;
     export var animations : Array<AnimationLayer> = [];
@@ -42,20 +43,30 @@ module Elements.AnimationHandler {
         }
     }
 
-    export function addAnimation (name : string, layer = 0) {
+    export function addAnimation (name : string, layer = 1) {
         let newAnim = new AnimationLayer(name, layer);
         container.appendChild(newAnim.getElement());
         animations.push(newAnim);
         return newAnim;
     }
 
+    export function setBackground (name : string) {
+        background.className = "";
+
+        background.classList.add("bg-" + name);
+        background.classList.add("sceneAnimation");
+        background.style.zIndex = "0";
+
+        container.appendChild(background);
+    }
+
     export function beginAnimate (targetAnimationSpeed? : number) {
         animationSpeed = targetAnimationSpeed == undefined ? 1500 : targetAnimationSpeed;
         lastTime = (new Date()).getTime();
         percentage = 0;
-        fixVerticalPosition();
-
         container.style.display = "";
+
+        fixVerticalPosition();
         stop = false;
         animate();
     }
@@ -76,7 +87,7 @@ module Elements.AnimationHandler {
         }
     }
 
-    function fixVerticalPosition () {
+    export function fixVerticalPosition () {
         spriteSize = getSize(true);
         //container.style.marginBottom = (availHeight - 200) + "px";
         container.style.width = spriteSize + "px";
@@ -85,7 +96,18 @@ module Elements.AnimationHandler {
 
         animations.forEach((anim) => {
             anim.updateSize();
-        })
+        });
+
+        if (background.parentElement == container) {
+            background.style.transform = "";
+            let height = background.offsetHeight;
+            let width = background.offsetWidth;
+            if (height != 0 && width != 0) {
+                background.style.transform = "scale(" + (spriteSize / height) + ")";
+                background.style.marginLeft = (-width / 2) + "px";
+                background.style.marginTop = (-height / 2) + "px";
+            }
+        }
     }
 
     export function getSize (fixMin = true) {
@@ -103,4 +125,6 @@ module Elements.AnimationHandler {
         getSize(false);
     }
     stopAnimate();
-}
+}
+
+window.addEventListener("resize", () => { Elements.AnimationHandler.fixVerticalPosition(); });

app/World/Classes/ContentPicker/Fucking/FuckingMarker.ts

@@ -14,6 +14,19 @@
  * Mandatory if present - These may all appear at once or separatedly! Multiples is always rarer, so you can get away with less descriptions
  * FuckingState.PENETRATING
  * FuckingState.REMOVING
+ *
+ * Mandatory if present - Only one of these is ever active
+ * FuckeePosition.STANDING
+ * FuckeePosition.ALLFOURS
+ *
+ * Mandatory if present - Only one of these is ever Active, and they only appear if the Fuckee is standing and being fucke in the crotch
+ * FuckerPosition.STANDINDFRONT
+ * FuckerPosition.STANDINFBACK
+ *
+ * Examples:
+ * {
+ *     Fucking Unit: Orc is Fucker, Player is Fuckee, Orc Penis is Stick, Player Vagina is Hole, Markers: FuckingStyle.GENTLE - FuckeePosition.STANDING - FuckerPosition.STANDINGFRONT
+ * }
  */
 
 class FuckingStyle extends ContentMarker {
@@ -30,4 +43,23 @@ class FuckingState extends ContentMarker {
     public static CUM_END = new FuckingState("Finished Cumming", true);
     public static CUM_INSIDE = new FuckingState("Cum Inside", true);
     public static CUM_OUTSIDE = new FuckingState("Cum Outside", true);
+}
+
+class FuckeePosition extends ContentMarker {
+    public static STANDING = new FuckingStyle("Standing");
+    public static ALLFOURS = new FuckingStyle("On All Fours");
+}
+
+class FuckerPosition extends ContentMarker {
+    public static STANDINDFRONT = new FuckingStyle("Fucking from the front");
+    public static STANDINFBACK = new FuckingStyle("Fucking from the back");
+}
+
+class FuckingSpecial extends ContentMarker {
+    public static BUTTSLAP = new FuckingStyle("Slapping the butt", false);
+    public static BUTTSCARESS = new FuckingStyle("Caressing the butt", false);
+    public static BUTTGRAB = new FuckingStyle("Grabbing the butt", false);
+    public static BREASTCARESS = new FuckingStyle("Caressing the breast", false);
+    public static BREASTGRAB = new FuckingStyle("Grabbing the breast", false);
+    public static BREASTSLAP = new FuckingStyle("Slapping the breast", false);
 }

dist/The Obelisk.html

@@ -882,26 +882,6 @@ body {
   padding: 0.8rem;
 }
 
-#sceneAnimation {
-  display: none;
-  position: fixed;
-  bottom: 0px;
-  left: 50%;
-  z-index: 1;
-  pointer-events: none;
-}
-
-#mainPage.turn #sceneAnimation {
-  display: block;
-}
-
-.sceneAnimation {
-  display: block;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-}
-
 #roomExitsHolder {
   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%);
   padding: 2ex;
@@ -961,6 +941,13 @@ body.modal #modalWindow {
   transition: filter .3s ease-in-out;
 }
 
+#sceneAnimation {
+  transition: opacity  .3s ease-in-out;
+}
+
+#mainPage.turn #sceneAnimation {
+  opacity: 1;
+}
 #mainPage.turn #leftWindow, #mainPage.turn #rightWindow, #mainPage.turn #currentRoomTab, #mainPage.turn #hyperlinksTab, #mainPage.turn #fakeparserTab, #mainPage.turn #statusLine {
   pointer-events: none;
   filter: blur(2px);
@@ -1673,8 +1660,8 @@ THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  ** Calculate amount of steps from that
  ** Profit
  **/
-.anims-sprite, .anims-hairdoTest, .anims-pixelPrecisionTest, .anims-winner, .anims-orcNoShadow, .anims-orcStand {
-  background-image: url('images/anims-s5a53e44850.png');
+.anims-sprite, .anims-hairdoTest, .anims-pixelPrecisionTest, .anims-winner, .anims-orcNoShadow, .anims-orcStand, .anims-playerBody {
+  background-image: url('images/anims-s024dfdce19.png');
   background-repeat: no-repeat;
 }
 
@@ -1708,6 +1695,36 @@ THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
   width: 800px;
 }
 
+.anims-playerBody {
+  background-position: 0 -1127px;
+  height: 100px;
+  width: 100px;
+}
+
+.bg-Forest {
+  background-image: url("images/Forest.png");
+  width: 400px;
+  height: 200px;
+}
+
+#sceneAnimation {
+  display: block;
+  position: fixed;
+  bottom: 0px;
+  left: 50%;
+  z-index: 1;
+  pointer-events: none;
+  opacity: 0;
+}
+
+.sceneAnimation {
+  display: block;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  image-rendering: pixelated;
+}
+
 #mainPage.mobile .contentImage {
   height: 10ex;
 }

sass/_animations.scss

@@ -8,4 +8,25 @@
 $anims-layout:vertical;
 $anims-sprite-dimensions: true;
 @import "anims/*/**.png";
-@include all-anims-sprites;
+@include all-anims-sprites;
+
+@import "_animationsBG";
+
+
+#sceneAnimation {
+  display: block;
+  position: fixed;
+  bottom: 0px;
+  left: 50%;
+  z-index: 1;
+  pointer-events: none;
+  opacity: 0;
+}
+
+.sceneAnimation {
+  display: block;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  image-rendering: pixelated;
+}

sass/_animationsBG.scss

@@ -0,0 +1,5 @@
+.bg-Forest {
+  background-image: url("images/Forest.png");
+  width: 400px;
+  height: 200px;
+}

sass/_page.scss

@@ -226,24 +226,6 @@ body {
   padding: 0.8rem;
 }
 
-#sceneAnimation {
-  display: block;
-  position: fixed;
-  bottom: 0px;
-  left: 50%;
-  z-index: 1;
-  pointer-events: none;
-  opacity: 0;
-}
-
-.sceneAnimation {
-  display: block;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-
-}
-
 // #mainPage.mobile
 #roomExitsHolder {
   @extend .noshrinkFlex;

stylesheets/images.css

@@ -2,8 +2,8 @@
  ** Calculate amount of steps from that
  ** Profit
  **/
-.anims-sprite, .anims-hairdoTest, .anims-pixelPrecisionTest, .anims-winner, .anims-orcNoShadow, .anims-orcStand {
-  background-image: url('images/anims-s5a53e44850.png');
+.anims-sprite, .anims-hairdoTest, .anims-pixelPrecisionTest, .anims-winner, .anims-orcNoShadow, .anims-orcStand, .anims-playerBody {
+  background-image: url('images/anims-s024dfdce19.png');
   background-repeat: no-repeat;
 }
 
@@ -37,6 +37,36 @@
   width: 800px;
 }
 
+.anims-playerBody {
+  background-position: 0 -1127px;
+  height: 100px;
+  width: 100px;
+}
+
+.bg-Forest {
+  background-image: url("images/Forest.png");
+  width: 400px;
+  height: 200px;
+}
+
+#sceneAnimation {
+  display: block;
+  position: fixed;
+  bottom: 0px;
+  left: 50%;
+  z-index: 1;
+  pointer-events: none;
+  opacity: 0;
+}
+
+.sceneAnimation {
+  display: block;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  image-rendering: pixelated;
+}
+
 #mainPage.mobile .contentImage {
   height: 10ex;
 }

stylesheets/screen.css

@@ -230,26 +230,6 @@ body {
   padding: 0.8rem;
 }
 
-#sceneAnimation {
-  display: none;
-  position: fixed;
-  bottom: 0px;
-  left: 50%;
-  z-index: 1;
-  pointer-events: none;
-}
-
-#mainPage.turn #sceneAnimation {
-  display: block;
-}
-
-.sceneAnimation {
-  display: block;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-}
-
 #roomExitsHolder {
   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%);
   padding: 2ex;
@@ -309,6 +289,13 @@ body.modal #modalWindow {
   transition: filter .3s ease-in-out;
 }
 
+#sceneAnimation {
+  transition: opacity  .3s ease-in-out;
+}
+
+#mainPage.turn #sceneAnimation {
+  opacity: 1;
+}
 #mainPage.turn #leftWindow, #mainPage.turn #rightWindow, #mainPage.turn #currentRoomTab, #mainPage.turn #hyperlinksTab, #mainPage.turn #fakeparserTab, #mainPage.turn #statusLine {
   pointer-events: none;
   filter: blur(2px);

stylesheets/screenInline.css

@@ -234,26 +234,6 @@ body {
   padding: 0.8rem;
 }
 
-#sceneAnimation {
-  display: none;
-  position: fixed;
-  bottom: 0px;
-  left: 50%;
-  z-index: 1;
-  pointer-events: none;
-}
-
-#mainPage.turn #sceneAnimation {
-  display: block;
-}
-
-.sceneAnimation {
-  display: block;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-}
-
 #roomExitsHolder {
   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%);
   padding: 2ex;
@@ -313,6 +293,13 @@ body.modal #modalWindow {
   transition: filter .3s ease-in-out;
 }
 
+#sceneAnimation {
+  transition: opacity  .3s ease-in-out;
+}
+
+#mainPage.turn #sceneAnimation {
+  opacity: 1;
+}
 #mainPage.turn #leftWindow, #mainPage.turn #rightWindow, #mainPage.turn #currentRoomTab, #mainPage.turn #hyperlinksTab, #mainPage.turn #fakeparserTab, #mainPage.turn #statusLine {
   pointer-events: none;
   filter: blur(2px);

stylesheets/screenRelative.css

@@ -293,26 +293,6 @@ body {
   padding: 0.8rem;
 }
 
-#sceneAnimation {
-  display: none;
-  position: fixed;
-  bottom: 0px;
-  left: 50%;
-  z-index: 1;
-  pointer-events: none;
-}
-
-#mainPage.turn #sceneAnimation {
-  display: block;
-}
-
-.sceneAnimation {
-  display: block;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-}
-
 #roomExitsHolder {
   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%);
   padding: 2ex;
@@ -372,6 +352,13 @@ body.modal #modalWindow {
   transition: filter .3s ease-in-out;
 }
 
+#sceneAnimation {
+  transition: opacity  .3s ease-in-out;
+}
+
+#mainPage.turn #sceneAnimation {
+  opacity: 1;
+}
 #mainPage.turn #leftWindow, #mainPage.turn #rightWindow, #mainPage.turn #currentRoomTab, #mainPage.turn #hyperlinksTab, #mainPage.turn #fakeparserTab, #mainPage.turn #statusLine {
   pointer-events: none;
   filter: blur(2px);
@@ -945,8 +932,8 @@ p.turnStart::before, p.turnStart::after {
  ** Calculate amount of steps from that
  ** Profit
  **/
-.anims-sprite, .anims-hairdoTest, .anims-pixelPrecisionTest, .anims-winner, .anims-orcNoShadow, .anims-orcStand {
-  background-image: url('images/anims-s5a53e44850.png');
+.anims-sprite, .anims-hairdoTest, .anims-pixelPrecisionTest, .anims-winner, .anims-orcNoShadow, .anims-orcStand, .anims-playerBody {
+  background-image: url('images/anims-s024dfdce19.png');
   background-repeat: no-repeat;
 }
 
@@ -980,6 +967,36 @@ p.turnStart::before, p.turnStart::after {
   width: 800px;
 }
 
+.anims-playerBody {
+  background-position: 0 -1127px;
+  height: 100px;
+  width: 100px;
+}
+
+.bg-Forest {
+  background-image: url("images/Forest.png");
+  width: 400px;
+  height: 200px;
+}
+
+#sceneAnimation {
+  display: block;
+  position: fixed;
+  bottom: 0px;
+  left: 50%;
+  z-index: 1;
+  pointer-events: none;
+  opacity: 0;
+}
+
+.sceneAnimation {
+  display: block;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  image-rendering: pixelated;
+}
+
 #mainPage.mobile .contentImage {
   height: 10ex;
 }

tools/FuckingDescription.html

@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+</head>
+<body>
+<script type="text/javascript">
+    // (new FuckingDescription("Specific Orc Starts Cumming in Vagina"))
+    //     .setDescription(new Say("Specific Orc Starts Cumming in Vagina"))
+    //     .addUnit()
+    //     .setFucker(randomOrc)
+    //     .setHole(WorldState.player.getPart(HumanoidVagina))
+    //     .addMarker(FuckingState.CUM_START)
+    //     .setStick(randomOrc.getPart(HumanoidPenis));
+    FuckedTarget -> WorldState.player
+    Fucker -> Person
+    SetStick -> SexStick
+    SetHole -> SexHole
+
+
+</script>
+</body>
+</html>