Allow characters to extend below the 0 meter line.

macrovision.css

@@ -39,7 +39,8 @@ body {
     -khtml-user-drag: none;
     -moz-user-drag: none;
     -o-user-drag: none;
-    transform: translate(-50%, -100%);
+    --offset: -100%;
+    transform: translate(-50%, var(--offset));
 }
 
 .entity-name {

macrovision.js

@@ -531,7 +531,14 @@ function displayEntity(entity, view, x, y) {
     box.appendChild(img);
     box.appendChild(nameTag);
 
-    img.src = entity.views[view].image.source;
+    const image = entity.views[view].image;
+    img.src = image.source;
+
+    if (image.bottom) {
+        img.style.setProperty("--offset", ((-1 + image.bottom) * 100) + "%")
+    }
+
+    
 
     box.dataset.x = x;
     box.dataset.y = y;
@@ -616,7 +623,13 @@ document.addEventListener("DOMContentLoaded", () => {
 
     document.querySelector("#entity-view").addEventListener("input", e => {
         selected.dataset.view = e.target.value
-        selected.querySelector(".entity-image").src = entities[selected.dataset.key].views[e.target.value].image.source;
+        const image = entities[selected.dataset.key].views[e.target.value].image
+        selected.querySelector(".entity-image").src = image.source;
+        
+
+        if (image.bottom) {
+            selected.querySelector(".entity-image").style.setProperty("--offset", ((-1 + image.bottom) * 100) + "%")
+        }
         updateSizes();
         updateEntityOptions(entities[selected.dataset.key], e.target.value);
         updateViewOptions(entities[selected.dataset.key], e.target.value);

media/characters/sofia/front.svg

@@ -1,9 +1,9 @@
 <?xml version="1.0" encoding="utf-8"?>
 <!-- Generator: Adobe Illustrator 23.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 1427.82 3690.54" style="enable-background:new 0 0 1427.82 3690.54;" xml:space="preserve">
+	 viewBox="0 0 1363.57 3568.21" style="enable-background:new 0 0 1363.57 3568.21;" xml:space="preserve">
 <g>
-	<path d="M580.84,2098.91c-4.06,0-7.26,0-10.37,0c-4.47,4.63-7.11,9.87-8.4,15.87c-2.74,12.79-3.27,13.24-15.91,14.55
+	<path d="M544.62,2038.85c-4.06,0-7.26,0-10.37,0c-4.47,4.63-7.11,9.87-8.4,15.87c-2.74,12.79-3.27,13.24-15.91,14.55
 		c-0.63,0.07-1.22,0.49-2.55,1.05c-0.38,1.75-1.18,3.92-1.25,6.11c-0.21,6.55-3.17,10.65-9.73,11.98c-0.96,0.19-1.84,0.76-3.45,1.45
 		c-1.78,4.79-3.3,10.24-5.77,15.23c-6,12.14-16.58,21.53-21.17,34.57c-6.64,4.79-7.02,12.32-8.63,19.38
 		c-5.86,25.75-14.47,50.46-27.82,73.38c-0.84,1.43-1.61,2.92-2.58,4.26c-7.87,10.82-11.11,12.96-25.69,16.8
@@ -109,7 +109,7 @@
 		c4.01-32.27,7.75-64.57,12.27-96.77c3.13-22.33,7.74-44.45,11-66.76c2.92-20,5.22-40.11,7.23-60.22c2.77-27.7,4.64-55.5,7.67-83.17
 		c1.11-10.16,4.28-20.12,6.8-30.1c2.51-9.97,5.59-19.8,7.98-29.79c0.82-3.43,1.26-7.45,0.3-10.74c-5.39-18.32-2.66-36.22,2.33-53.96
 		c2.15-7.63,1.59-14.65-0.36-22.32c-5.88-23.16-11.64-46.41-15.93-69.9c-4.05-22.16-6.12-44.67-9.14-67.02
-		c-2.89-21.35-6-42.67-8.79-64.04c-1.8-13.8-3.18-27.65-4.81-41.47C582.08,2103.93,581.52,2102.05,580.84,2098.91z M338.25,1231.05
+		c-2.89-21.35-6-42.67-8.79-64.04c-1.8-13.8-3.18-27.65-4.81-41.47C545.86,2043.87,545.3,2041.99,544.62,2038.85z M302.03,1170.99
 		c7.06,3.67,12.15,9.26,15.84,16.16c4.54,8.51,9.32,16.9,13.54,25.56c7,14.37,14.29,28.45,25.08,40.51
 		c5.78,6.46,8.58,14.43,6.44,23.11c-0.92,3.73-0.05,6.53,1.64,9.38c2.2,3.71,4.46,7.42,7.06,10.85
 		c19.81,26.23,39.61,52.48,59.65,78.53c7.28,9.46,15.08,18.53,22.86,27.59c8.87,10.34,17.94,20.51,27.04,30.64
@@ -121,6 +121,6 @@
 		c-9.19-10.83-14.25-23.86-19.21-36.9c-6.02-15.83-11.75-31.76-17.84-47.57c-2.39-6.2-5.43-6.99-11.79-4.2
 		c-7.65,3.36-12.61,8.93-16.51,16.41c-7.46,14.32-17.3,26.97-32,34.63c-7.71,4.02-14.79,8.79-21.81,13.87
 		c-19.5,14.12-36.33,31.07-52.82,48.42c-4.81,5.05-9.38,10.35-13.76,15.79c-10,12.43-19.92,24.92-29.65,37.56
-		c-9.76,12.68-22.61,20.21-38.02,23.78c-2.53,0.59-5.01,1.38-8.28,2.3C336.43,1221.19,337.31,1225.97,338.25,1231.05z"/>
+		c-9.76,12.68-22.61,20.21-38.02,23.78c-2.53,0.59-5.01,1.38-8.28,2.3C300.21,1161.13,301.09,1165.91,302.03,1170.99z"/>
 </g>
 </svg>

presets/characters.js

@@ -19,8 +19,6 @@ function makeFen() {
             },
             image: {
                 source: "./media/characters/fen/back.svg",
-                bottom: 0.01,
-                top: 0.93
             },
             name: "Body"
         },
@@ -154,7 +152,8 @@ function makeNoir() {
                 }
             },
             image: {
-                source: "./media/characters/noir/front.svg"
+                source: "./media/characters/noir/front.svg",
+                bottom: 0.01
             },
             name: "Front"
         }
@@ -301,7 +300,8 @@ function makeAdake() {
                 }
             },
             image: {
-                source: "./media/characters/adake/front-2.svg"
+                source: "./media/characters/adake/front-2.svg",
+                bottom: 0.005
             },
             name: "Front (Alt)"
         },
@@ -321,7 +321,7 @@ function makeAdake() {
                 }
             },
             image: {
-                source: "./media/characters/adake/back.svg"
+                source: "./media/characters/adake/back.svg",
             },
             name: "Back"
         },
@@ -341,7 +341,8 @@ function makeAdake() {
                 }
             },
             image: {
-                source: "./media/characters/adake/kneel.svg"
+                source: "./media/characters/adake/kneel.svg",
+                bottom: 0.05
             },
             name: "Kneeling"
         },