From 2ef3dd51557def25035b2bab9403823aa8e47292 Mon Sep 17 00:00:00 2001
From: Roland Rytz <roland.rytz@gmail.com>
Date: Wed, 5 Apr 2017 03:47:36 +0200
Subject: [PATCH] Mask the already charted areas in draw mode

---
 web/_css/style.css | 22 ++++++++++++++++++++
 web/_js/draw.js    | 51 ++++++++++++++++++++++++++++++++++++++++++++--
 web/index.html     |  1 +
 3 files changed, 72 insertions(+), 2 deletions(-)

diff --git a/web/_css/style.css b/web/_css/style.css
index 6694fe95..9030bb17 100644
--- a/web/_css/style.css
+++ b/web/_css/style.css
@@ -258,6 +258,28 @@ #drawControls > * > *:last-child{
 	margin-right: 0px;
 }
 
+.checkboxLabel{
+	background-color: #666666;
+	padding: 3px;
+	cursor: pointer;
+}
+
+.checkboxLabel:hover{
+	background-color: #777777;
+}
+
+#drawControls .checkboxLabel{
+	display: inline-block;
+}
+
+input[type="checkbox"]{
+	margin: 3px;
+	vertical-align: middle;
+	display: inline-block;
+	width: 15px;
+	height: 15px;
+}
+
 #hint{
 	display: block;
 }
diff --git a/web/_js/draw.js b/web/_js/draw.js
index c2cc7bde..9f03423d 100644
--- a/web/_js/draw.js
+++ b/web/_js/draw.js
@@ -41,13 +41,22 @@ function initDraw(){
 	var exportOverlay = document.getElementById("exportOverlay");
 	var exportCloseButton = document.getElementById("exportCloseButton");
 
+	var backgroundCanvas = document.createElement("canvas");
+	backgroundCanvas.width = 1000;
+	backgroundCanvas.height = 1000;
+	var backgroundContext = backgroundCanvas.getContext("2d");
+
+	var highlightUncharted = true;
+
+	renderBackground();
+
 	container.style.cursor = "crosshair";
 	
 	var path = [];
 	var drawing = true;
 
 	var undoHistory = [];
-  var _global_key_status = {"L_SHIFT":0, "R_SHIFT":0, buff:{}};
+	var _global_key_status = {"L_SHIFT":0, "R_SHIFT":0, buff:{}};
 
 	var lastPos = [0, 0];
 
@@ -197,6 +206,11 @@ function initDraw(){
 		exportOverlay.style.display = "none";
 	});
 
+	document.getElementById("highlightUncharted").addEventListener("click", function(e){
+		highlightUncharted = this.checked;
+		render(path);
+	});
+
 	function exportJson(){		
 		var exportObject = {
 			 id: 0
@@ -307,12 +321,45 @@ function initDraw(){
 		document.getElementById("subredditField").value = "";
 	}
 
+	function renderBackground(){
+
+		backgroundContext.clearRect(0, 0, canvas.width, canvas.height);
+			
+		backgroundContext.fillStyle = "rgba(0, 0, 0, 0.8)";
+		//backgroundContext.fillRect(0, 0, canvas.width, canvas.height);
+		
+		for(var i = 0; i < atlas.length; i++){
+
+			var path = atlas[i].path;
+			
+			backgroundContext.beginPath();
+
+			if(path[0]){
+				backgroundContext.moveTo(path[0][0], path[0][1]);
+			}
+			
+			for(var p = 1; p < path.length; p++){
+				backgroundContext.lineTo(path[p][0], path[p][1]);
+			}
+
+			backgroundContext.closePath();
+			
+			backgroundContext.fill();
+		}
+	}
+
 	function render(path){
 
 		context.globalCompositeOperation = "source-over";
 		context.clearRect(0, 0, canvas.width, canvas.height);
 		
-		context.fillStyle = "rgba(0, 0, 0, 0.6)";
+		if(highlightUncharted){
+			context.drawImage(backgroundCanvas, 0, 0);
+			context.fillStyle = "rgba(0, 0, 0, 0.4)";
+		} else {
+			context.fillStyle = "rgba(0, 0, 0, 0.6)";
+		}
+		
 		context.fillRect(0, 0, canvas.width, canvas.height);
 
 		context.beginPath();
diff --git a/web/index.html b/web/index.html
index 213970cb..276f544a 100644
--- a/web/index.html
+++ b/web/index.html
@@ -69,6 +69,7 @@ <h1>The /r/place Atlas</h1>
 			</div>
 			<button disabled id="finishButton">Finish (Enter)</button>
 			<button id="resetButton">Reset</button>
+			<label title="Highlight uncharted areas of the map" class="checkboxLabel"><input type="checkbox" id="highlightUncharted" checked> Highlight Empty</label>
 			<span id="hint">
 				<p>Click anywhere on the image to start drawing a shape.</p>
 				<p>When you're happy with the result, click the "Finish" button above or press the Enter key.</p>