Add a building and organize the media

macrovision.html

@@ -7,6 +7,7 @@
   <link rel="stylesheet" href="reset.css">
   <link rel="stylesheet" href="macrovision.css">
   <script src="math.min.js"></script>
+  <script src="presets/buildings.js"></script>
   <script src="macrovision.js"></script>
   <meta name="theme-color" content="#000000" />
   <meta name="description" content="How big are they anyway?" />

macrovision.js

@@ -18,6 +18,10 @@ const unitChoices = {
         "feet",
         "miles",
     ],
+    area: [
+        "cm^2",
+        "meters^2"
+    ],
     mass: [
         "kilograms"
     ]
@@ -179,35 +183,41 @@ function makeFen() {
                     name: "Height",
                     power: 1,
                     type: "length",
-                    base: math.unit(1, "meter")
+                    base: math.unit(2.2428, "meter")
                 },
                 weight: {
                     name: "Weight",
                     power: 3,
                     type: "mass",
-                    base: math.unit(80, "kg")
+                    base: math.unit(124.738, "kg")
                 }
             },
-            image: "./silhouette.png",
+            image: "./media/characters/fen/back.png",
             name: "Body"
         },
-        pepper: {
+        paw: {
             attributes: {
                 height: {
-                    name: "Height",
+                    name: "Length",
                     power: 1,
                     type: "length",
-                    base: math.unit(50, "centimeter")
+                    base: math.unit(20, "centimeter")
                 },
-                weight: {
-                    name: "Weight",
-                    power: 3,
-                    type: "mass",
-                    base: math.unit(1, "kg")
+                width: {
+                    name: "Length",
+                    power: 1,
+                    type: "length",
+                    base: math.unit(20, "centimeter")
+                },
+                area: {
+                    name: "Area",
+                    power: 2,
+                    type: "area",
+                    base: math.unit(0.04, "meter^2")
                 }
             },
-            image: "./pepper.png",
-            name: "Pepper"
+            image: "./media/characters/generic/paw.svg",
+            name: "Paw"
         }
     };
 
@@ -552,12 +562,15 @@ function displayEntity(entity, view, x, y) {
 }
 
 document.addEventListener("DOMContentLoaded", () => {
-    for (let x = 0; x < 5; x++) {
+    for (let x = 0; x < 1; x++) {
         const entity = makeFen();
         const x = 0.25 + Math.random() * 0.5;
-        const y = 0.25 + Math.random() * 0.5;
+        const y = 1;
         displayEntity(entity, "body", x, y);
+        displayEntity(makeBuilding(), "building", 1 - x, 1);
     }
+
+
     document.querySelector("body").appendChild(testCtx.canvas);
 
     updateSizes();

media/characters/generic/paw.svg

@@ -0,0 +1,65 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="419.14468"
+   height="403.60483"
+   id="svg1650"
+   version="1.1"
+   inkscape:version="0.48+devel rVersion: 0.49~devel+10252+4~lucid1"
+   sodipodi:docname="New document 15">
+  <defs
+     id="defs1652" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="0.69842875"
+     inkscape:cx="253.04816"
+     inkscape:cy="133.69779"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     inkscape:window-width="1280"
+     inkscape:window-height="952"
+     inkscape:window-x="0"
+     inkscape:window-y="24"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata1655">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-118.99908,-256.27405)">
+    <path
+       style="fill:#000000;fill-opacity:1;stroke:none"
+       d="M 281.78125 0 C 280.89861 0.011256107 279.99321 0.05451875 279.09375 0.125 C 243.27015 6.3085 223.57295 44.18935 220.71875 77.59375 C 216.54805 107.90515 229.9058 146.86425 263.1875 153.65625 C 268.015 154.57535 273.0311 154.1553 277.75 152.875 C 317.8269 139.4366 335.76175 91.97195 329.96875 52.65625 C 328.28477 27.263859 309.14316 -0.3489393 281.78125 0 z M 129.90625 1.625 C 107.63131 2.1717807 90.279662 24.7634 86.75 46 C 79.3091 88.0743 98.44834 140.35185 142.28125 153.65625 C 146.38695 154.54915 150.63375 154.6411 154.78125 154 C 184.40765 149.0625 196.95825 115.84615 195.71875 89.03125 C 194.82705 53.65875 176.45285 12.7581 139.71875 2.8125 C 136.36096 1.9220875 133.08838 1.5468885 129.90625 1.625 z M 378.84375 121.125 C 340.30945 123.4304 313.8911 161.87875 310.125 197.78125 C 305.0254 223.67495 318.8299 258.3078 348.375 260.375 C 389.5717 259.8672 417.67605 215.84645 418.84375 177.96875 C 421.44955 152.91745 406.69275 122.5082 378.84375 121.125 z M 41.5625 129.65625 C 25.168497 129.5152 9.0449188 139.33506 3.6875 156 C -10.6052 200.579 18.0964 257.03815 65.3125 266.40625 C 85.0181 269.77835 102.33285 254.6454 107.21875 236.4375 C 117.57335 197.4927 96.3054 152.27225 60.3125 134.59375 C 54.448578 131.30284 47.977544 129.71144 41.5625 129.65625 z M 214.3125 209.59375 C 182.17313 209.66229 149.52974 225.97193 128.71875 250.25 C 106.24135 278.5472 87.8285 311.4765 80.625 347.1875 C 71.8736 372.894 91.70839 402.47795 119.1875 402.65625 C 152.2464 403.57455 180.65825 380.8733 213.53125 379.1875 C 241.42135 374.9358 266.39435 389.4427 291.46875 398.9375 C 312.81805 408.0688 342.31905 404.56945 353.21875 381.59375 C 361.79235 358.17505 349.17285 333.20375 338.71875 312.40625 C 317.39655 278.64925 294.55365 243.17045 259.59375 222.09375 C 245.58084 213.40805 230.00847 209.56028 214.3125 209.59375 z "
+       transform="translate(118.99908,256.27405)"
+       id="path1575" />
+  </g>
+</svg>

presets/buildings.js

@@ -0,0 +1,18 @@
+function makeBuilding() {
+    views = {
+        building: {
+            attributes: {
+                height: {
+                    name: "Height",
+                    power: 1,
+                    type: "length",
+                    base: math.unit(324, "meter")
+                }
+            },
+            image: "./media/buildings/eiffel-tower.svg",
+            name: "Building"
+        },
+    };
+
+    return makeEntity("Eiffel Tower", "Fen", views);
+}