Allow entities to be flipped (not saved yet)

macrovision.css

@@ -49,6 +49,10 @@ body {
     filter: brightness(var(--brightness));
 }
 
+.entity-image.flipped {
+    transform: translate(-50%, var(--offset)) scale(-1, 1);
+}
+
 .entity-name {
     display: none;
     position: absolute;
@@ -1028,4 +1032,5 @@ button {
     left: 0%;
     z-index: 1;
     user-select: none;
-}
+}
+

macrovision.html

@@ -210,6 +210,9 @@
         <div class="options-label">
           Brightness
         </div>
+        <div class="options-row">
+          <button class="options-button" id="options-flip">Flip</button>
+        </div>
         <div class="options-two-buttons" id="options-brightness">
           <button id="options-brightness-down">Down</button>
           <div id="options-brightness-display"></div>

macrovision.js

@@ -2035,6 +2035,14 @@ document.addEventListener("DOMContentLoaded", () => {
         updateSizes();
     });
 
+    document.querySelector("#options-flip").addEventListener("click", e => {
+        if (selected) {
+            selected.querySelector(".entity-image").classList.toggle("flipped");
+        }
+        document.querySelector("#options-brightness-display").innerText = entities[selected.dataset.key].brightness;
+        updateSizes();
+    });
+
     const sceneChoices = document.querySelector("#scene-choices");
 
     Object.entries(scenes).forEach(([id, scene]) => {