Overhauled Level Color Analysis

Colors are now clickable, whoa!

api/analyze.js

@@ -185,6 +185,14 @@ Object.keys(data[0]).forEach(x => {
             if (colorObj.copiedChannel > 1000) delete colorObj.copiedChannel;
             if (colorObj.pColor == "-1") delete colorObj.pColor
             if (colorObj.blending) colorObj.blending = true
+            if (colorObj.copiedHSV) {
+                let hsv = colorObj.copiedHSV.split("a")
+                colorObj.copiedHSV = {}
+                hsv.forEach((x, y) => { colorObj.copiedHSV[colorStuff.hsv[y]] = x })
+                colorObj.copiedHSV['s-checked'] = colorObj.copiedHSV['s-checked'] == 1
+                colorObj.copiedHSV['v-checked'] = colorObj.copiedHSV['v-checked'] == 1
+            if (colorObj.copyOpacity == 1) colorObj.copyOpacity = true
+            }
             colorObj.opacity = +Number(colorObj.opacity).toFixed(2)
             colorList[y] = colorObj
 

assets/css/browser.css

@@ -769,6 +769,70 @@ input::-webkit-inner-spin-button {
     font-size: 3vh;
 }
 
+.color {
+    cursor: pointer;
+}
+
+.color:hover {
+    transform:scale(1.1);
+    transition-duration: 0.1s;
+    transition-timing-function: ease-in-out;
+}
+
+.colorBox {
+    position: absolute;
+    height: 22vh;
+    width: 22vh;
+    border-radius: 2vh;
+    border: 0.75vh solid;
+    margin: 2.5% auto;
+    right: 20%;
+    top: 34%;
+}
+
+.colorSection {
+    display: inline-block;
+    width: 30%;
+    margin: 3% 0;
+}
+
+.colorSection h1 {
+    font-size: 4vh;
+}
+
+.colorSection p {
+    font-size: 3.2vh;
+    margin: 3% auto;
+    padding: 0.5% 0;
+    background-color: rgba(0, 0, 0, 0.2);
+    border-color: rgba(0, 0, 0, 0.2);
+    border-radius: 1vh;
+    max-width: 80%;
+}
+
+.colorCheckbox {
+    text-align: left;
+    margin: 3% 0 0.5% 7%;
+}
+
+.colorCheckbox label {
+    height: 7%;
+    padding-right: 17%;
+}
+
+.colorSection2 {
+    width: 55%;
+    text-align: left;
+    display: inline-block;
+    vertical-align: top;
+}
+
+.copyDetails {
+    text-align: center;
+    width: 48%;
+    margin: 3% 0;
+}
+
 .blendingDot {
     text-align: left;
     margin-left: 9%;
@@ -785,6 +849,10 @@ input::-webkit-inner-spin-button {
     user-select: none;
 }
 
+.copiedHSV {
+    font-size: 2vh !important;
+}
+
 .codeFont {
     font-size: 1.5vh;
     white-space: normal;

html/analyze.html

@@ -19,6 +19,11 @@
 		<img class="spin noSelect" src="../assets/loading.png" height="25%" style="margin-top: 7%">
 	</div>
 
+	<div class="popup" id="colorInfo">
+		<div id="colorStuff" class="brownbox bounce center supercenter" style="height: 60%; width: 90vh">
+		</div>
+	</div>
+
 	<div id="analysisDiv" style="margin-top: 2%; display:none">
 		<h2 id="levelName"></h2>
 		<h3 id="objectCount"></h3>
@@ -181,8 +186,10 @@ appendPortals()
 
 	colorList.forEach((x, y) => {
 		let c = res.colors[x]
-		$('#colorDiv').append(`${y % 8 == 0 ? "<brr>" : ""}<div class="inline aColor"><div style="background-color: rgba(${c.r}, ${c.g}, ${c.b}, ${c.opacity}); border: 0.4vh solid rgb(${c.r}, ${c.g}, ${c.b})">
+
+		$('#colorDiv').append(`${y % 8 == 0 ? "<brr>" : ""}<div class="inline aColor"><div class="color" channel="${c.channel}" style="background-color: rgba(${c.cr || c.r}, ${c.cg || c.g}, ${c.cb || c.b}, ${c.opacity}); border: 0.4vh solid rgb(${c.r}, ${c.g}, ${c.b})">
 		${c.copiedChannel ? `<h3 class='copiedColor'>C:${c.copiedChannel}</h3>` : c.pColor ? `<h3 class='copiedColor'>P${c.pColor}</h3>` : c.blending ? "<h3 class='blendingDot'>•</h3>" : ""}	
+		${c.copiedChannel && c.copiedHSV ? `<h3 class='copiedColor copiedHSV'> +HSV</h3>` : ""}
 		${c.opacity != "1" ? `<h3 class='copiedColor'>${c.opacity}%</h3>` : ""}
 		</div><h3 style="padding-top: 7%">${c.channel > 0 ? "Col " + c.channel : c.channel}</h3></div>`)
 	})
@@ -218,6 +225,60 @@ appendPortals()
 		$('#levelCode').focus().select()
 	})
 
+	$(document).on('click', '.color', function() {
+		let col = res.colors.find(x => x.channel == $(this).attr('channel'))
+		let hsv = col.copiedHSV
+		if (hsv) {
+			hsv.s = Number(hsv.s).toFixed(2)
+			hsv.v = Number(hsv.v).toFixed(2)
+		}
+		let hex = "#" + ((1 << 24) + (+col.r << 16) + (+col.g << 8) + +col.b).toString(16).slice(1)
+		$('#colorStuff').html(`
+		<h2 class="slightlySmaller">${isNaN(col.channel) ? col.channel : "Color " + col.channel}</h2>
+			<div class="colorSection">
+				<h3>Hex Code</h3>
+				<p>${hex}</p>
+			</div>
+			<div class="colorSection">
+				<h3>RGB</h3>
+				<p>${col.r}, ${col.g}, ${col.b}</p>
+			</div>
+			<div class="colorSection">
+				<h3>Opacity</h3>
+				<p>${Number(col.opacity).toFixed(2)}</p>
+			</div>
+			<br>
+			<div class="colorSection2" style="width: 40%; ${col.copiedChannel ? "" : "margin-right:55.4%"}">
+				<div class="colorCheckbox"><h3><input ${col.pColor == 1 ? "checked" : ""} type="checkbox"> <label class="gdcheckbox gdButton"></label>Player 1</h3></div>
+				<div class="colorCheckbox"><h3><input ${col.pColor == 2 ? "checked" : ""} type="checkbox"> <label class="gdcheckbox gdButton"></label>Player 2</h3></div>
+				<div class="colorCheckbox"><h3><input ${col.blending ? "checked" : ""} type="checkbox"> <label class="gdcheckbox gdButton"></label>Blending</h3></div>
+				<div class="colorCheckbox"><h3><input ${col.copiedChannel ? "checked" : ""} type="checkbox"> <label class="gdcheckbox gdButton"></label>Copy Color</h3></div>
+				<div class="colorCheckbox"><h3><input ${col.copyOpacity ? "checked" : ""} type="checkbox"> <label class="gdcheckbox gdButton"></label>Copy Opacity</h3></div>
+			</div>
+			${col.copiedChannel ? `
+			<div class="colorSection2">
+				<div class="colorSection copyDetails">
+					<h3>Copied</h3>
+					<p>${isNaN(col.copiedChannel) ? col.copiedChannel : "Col " + col.copiedChannel}</p>
+				</div>
+				<div class="colorSection copyDetails">
+					<h3>Hue</h3>
+					<p>${!hsv ? 0 : hsv.h > 0 ? "+" + hsv.h : hsv.h}</p>
+				</div>
+				<div class="colorSection copyDetails">
+					<h3>Saturation</h3>
+					<p>${!hsv ? "x1.00" : !hsv['s-checked'] ? "x" + hsv.s : hsv.s > 0 ? "+" + hsv.s : hsv.s}</p>
+				</div>
+				<div class="colorSection copyDetails">
+					<h3>Brightness</h3>
+					<p>${!hsv ? "x1.00" : !hsv['v-checked'] ? "x" + hsv.v : hsv.v > 0 ? "+" + hsv.v : hsv.v}</p>
+				</div>
+			</div>`
+			: `<div class="colorBox" style="background-color: rgba(${col.r}, ${col.g}, ${col.b}, ${col.opacity}); border-color: ${hex}"></div>`}
+			<br><img src="../assets/ok.png" width=14%; style="margin-top: 4%" class="gdButton center" onclick="$('.popup').hide()">`)
+	$('#colorInfo').show()
+	})
+
 	$('#loadingDiv').hide()
 	$('#analysisDiv').show()
 

misc/colorProperties.json

@@ -7,7 +7,9 @@
         "5": "blending",
         "6": "channel",
         "7": "opacity",
-        "9": "copiedChannel"
+        "9": "copiedChannel",
+        "10": "copiedHSV",
+        "17": "copyOpacity"
     },
     
     "channels": {
@@ -17,5 +19,7 @@
         "1003": "Obj",
         "1004": "3DL",
         "1009": "G2"
-    }
+    },
+
+    "hsv": ["h", "s", "v", "s-checked", "v-checked"]
 }