From aaf8a169dd77070c06fc275e34bc1e2bf3c929f8 Mon Sep 17 00:00:00 2001
From: Fen Dweller <chemicalcrux@gmail.com>
Date: Sun, 31 May 2020 15:52:54 -0400
Subject: [PATCH] Allow brightness to be set. Export order and brightness

---
 macrovision.css  |  6 ++++--
 macrovision.html |  9 ++++++++-
 macrovision.js   | 49 +++++++++++++++++++++++++++++++++++++++++++-----
 3 files changed, 56 insertions(+), 8 deletions(-)

diff --git a/macrovision.css b/macrovision.css
index 3f057e11..ee2310d8 100644
--- a/macrovision.css
+++ b/macrovision.css
@@ -24,6 +24,7 @@ body {
 .entity-box {
     position: absolute;
     --height: 100px;
+    --brightness: 1;
     max-height: var(--height);
     height: var(--height);
     text-align: center;
@@ -45,6 +46,7 @@ body {
     -o-user-drag: none;
     --offset: -100%;
     transform: translate(-50%, var(--offset));
+    filter: brightness(var(--brightness));
 }
 
 .entity-name {
@@ -66,11 +68,11 @@ body.toggle-entity-name .entity-name,
 }
 
 .entity-box.selected > img {
-    filter: drop-shadow(0px 0px 5px gold);
+    filter: brightness(var(--brightness)) drop-shadow(0px 0px 5px gold);
 }
 
 body.toggle-entity-glow .entity-box:not(.selected) > img{
-    filter: drop-shadow(0px 0px 2px white);
+    filter: brightness(var(--brightness)) drop-shadow(0px 0px 2px white);
 }
 
 #main-area {
diff --git a/macrovision.html b/macrovision.html
index f7a6ade2..3388c2f1 100644
--- a/macrovision.html
+++ b/macrovision.html
@@ -176,7 +176,6 @@
         </div>
         <div class="options-two-buttons" id="options-reset-pos">
           <button id="options-reset-pos-x">Reset X</button>
-          <div id="options-order-display"></div>
           <button id="options-reset-pos-y">Reset Y</button>
         </div>
       </div>
@@ -208,6 +207,14 @@
           <div id="options-order-display"></div>
           <button id="options-order-forward">Toward front</button>
         </div>
+        <div class="options-label">
+          Brightness
+        </div>
+        <div class="options-two-buttons" id="options-brightness">
+          <button id="options-brightness-down">Down</button>
+          <div id="options-brightness-display"></div>
+          <button id="options-brightness-up">Up</button>
+        </div>
         <div class="options-label">
           Sizes
         </div>
diff --git a/macrovision.js b/macrovision.js
index 3b184697..d4e5c3c4 100644
--- a/macrovision.js
+++ b/macrovision.js
@@ -280,6 +280,8 @@ function updateEntityElement(entity, element) {
     element.style.setProperty("--height", pixels * bonus + "px");
     element.style.setProperty("--extra", pixels * bonus - pixels + "px");
 
+    element.style.setProperty("--brightness", entity.brightness);
+
     if (entity.views[view].rename)
         element.querySelector(".entity-name").innerText = entity.name == "" ? "" : entity.views[view].name;
     else
@@ -835,6 +837,7 @@ function configEntityOptions(entity, view) {
     });
 
     document.querySelector("#options-order-display").innerText = entity.priority;
+    document.querySelector("#options-brightness-display").innerText = entity.brightness;
     document.querySelector("#options-ordering").style.display = "flex";
 }
 
@@ -843,6 +846,7 @@ function updateEntityOptions(entity, view) {
     setNumericInput(scaleInput, entity.scale);
 
     document.querySelector("#options-order-display").innerText = entity.priority;
+    document.querySelector("#options-brightness-display").innerText = entity.brightness;
 }
 
 function clearEntityOptions() {
@@ -1242,7 +1246,11 @@ function displayEntity(entity, view, x, y, selectEntity = false, refresh = false
     box.dataset.key = entityIndex;
     entity.view = view;
 
-    entity.priority = 0;
+    if (entity.priority === undefined)
+        entity.priority = 0;
+    if (entity.brightness === undefined)
+        entity.brightness = 1;
+
     entities[entityIndex] = entity;
     entity.index = entityIndex;
 
@@ -1878,6 +1886,22 @@ document.addEventListener("DOMContentLoaded", () => {
         updateSizes();
     });
 
+    document.querySelector("#options-brightness-up").addEventListener("click", e => {
+        if (selected) {
+            entities[selected.dataset.key].brightness += 1;
+        }
+        document.querySelector("#options-brightness-display").innerText = entities[selected.dataset.key].brightness;
+        updateSizes();
+    });
+
+    document.querySelector("#options-brightness-down").addEventListener("click", e => {
+        if (selected) {
+            entities[selected.dataset.key].brightness = Math.max(entities[selected.dataset.key].brightness -1, 0);
+        }
+        document.querySelector("#options-brightness-display").innerText = entities[selected.dataset.key].brightness;
+        updateSizes();
+    });
+
     const sceneChoices = document.querySelector("#scene-choices");
 
     Object.entries(scenes).forEach(([id, scene]) => {
@@ -2951,8 +2975,6 @@ function fitEntities(manual = false, factor = 1.1) {
         let width = image.width;
         let height = image.height;
 
-        console.log(width, height);
-
         // only really relevant if the images haven't loaded in yet
         if (height == 0) {
             height = 100;
@@ -2960,6 +2982,7 @@ function fitEntities(manual = false, factor = 1.1) {
         if (width == 0) {
             width = height;
         }
+
         const xBottom = x - entity.views[view].height.toNumber("meters") * width / height / 2;
         const xTop = x + entity.views[view].height.toNumber("meters") * width / height / 2;
 
@@ -3067,7 +3090,9 @@ function exportScene() {
             scale: entity.scale,
             view: entity.view,
             x: element.dataset.x,
-            y: element.dataset.y
+            y: element.dataset.y,
+            priority: entity.priority,
+            brightness: entity.brightness
         });
     });
 
@@ -3155,6 +3180,18 @@ const migrationDefs = [
     data => {
         data.world.x = 0;
         data.world.y = 0;
+    },
+    /*
+    Migration: 1 -> 2
+
+    Adds priority and brightness to each entity
+    */
+
+    data => {
+        data.entities.forEach(entity => {
+            entity.priority = 0;
+            entity.brightness = 1;
+        });
     }
 ]
     
@@ -3178,7 +3215,9 @@ function importScene(data) {
 
     data.entities.forEach(entityInfo => {
         const entity = findEntity(entityInfo.name).constructor();
-        entity.scale = entityInfo.scale
+        entity.scale = entityInfo.scale;
+        entity.priority = entityInfo.priority;
+        entity.brightness = entityInfo.brightness;
         displayEntity(entity, entityInfo.view, entityInfo.x, entityInfo.y);
     });