From cf2c840133b606c61d32dbdb6fa60f9fe3b27e14 Mon Sep 17 00:00:00 2001
From: Kyle <41976328+ImKyle4815@users.noreply.github.com>
Date: Sat, 10 Aug 2019 15:05:50 -0700
Subject: [PATCH] life

---
 data/life/life.js | 16 ++++++++++++++--
 life.html         | 15 ++++++++++++---
 2 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/data/life/life.js b/data/life/life.js
index c0ca7a85..0ed5bf1e 100644
--- a/data/life/life.js
+++ b/data/life/life.js
@@ -56,6 +56,7 @@ function startGame() {
 		}
 		if ((i == 1 && firstPlayerWide) || (i == playerCount && lastPlayerWide)) {wide = true}
 		playerList[i - 1] = new playerBox(i, rotation, wide)
+		document.getElementById("inputPlayer").innerHTML += "<option value='" + i + "'>Player " + i + "</option>"
 	}
 	//Determine the grid size
 	if (isFullscreen) {
@@ -101,20 +102,24 @@ function startGame() {
 			var tempFontSize = 100
 			context.font = "100pt belerenbsc"
 			var currentLife = playerList[context.customVarCanvas.customVarID - 1].life
-			context.fillStyle = "#222"
+			context.fillStyle = context.customVarCanvas.customVarColor
 			var tempCanvasHeight = context.customVarCanvas.height, tempCanvasWidth = context.customVarCanvas.width
 			if (playerList[context.customVarCanvas.customVarID - 1].rotation == 90 || playerList[context.customVarCanvas.customVarID - 1].rotation == 270) {
 				tempCanvasHeight = tempCanvasWidth
 				tempCanvasWidth = context.customVarCanvas.height
 			}
 			context.fillRect(tempCanvasWidth / -2, tempCanvasHeight / -2, tempCanvasWidth, tempCanvasHeight)
-			context.fillStyle = "#eee"
+			context.fillStyle = "white"
 			while (context.measureText(currentLife).width >= tempCanvasWidth) {
 				tempFontSize -= 1
 				context.font = tempFontSize + "pt belerenbsc"
 			}
 			var horizontalShift = -1 * parseInt(context.measureText(currentLife).width) / 2
+			context.strokeStyle = "black"
+			context.lineWidth = 5
+			context.strokeText(currentLife, horizontalShift, 0)
 			context.fillText(currentLife, horizontalShift, 0)
+			
 		}
 	}, 100)
 }
@@ -127,6 +132,7 @@ function playerBox(playerBoxID, canvasRotation, wide) {
 	this.canvas.customVarMouseDown = "false"
 	this.canvas.customVarMouseDelay = 0
 	this.canvas.customVarID = playerBoxID
+	this.canvas.customVarColor = "#222222"
 	this.canvas.customVarContext = this.canvas.getContext("2d")
 	this.canvas.customVarContext.customVarCanvas = this.canvas
 	this.canvas.classList.add("playerBox")
@@ -201,4 +207,10 @@ function resetLife() {
 		playerList[i - 1].life = startingLifeTotal
 	}
 	document.getElementById('menu').classList.add('hidden')
+}
+function updateColorSelector() {
+	document.getElementById("inputPlayerColor").value = playerList[parseInt(document.getElementById("inputPlayer").value) - 1].canvas.customVarColor
+}
+function updateBackgroundColor(color) {
+	playerList[parseInt(document.getElementById("inputPlayer").value) - 1].canvas.customVarColor = color
 }
\ No newline at end of file
diff --git a/life.html b/life.html
index 470dd0cc..cfe9dcad 100644
--- a/life.html
+++ b/life.html
@@ -65,7 +65,13 @@
 			<img class="menuExitButton" src="data/life/menuExitButton.png" onclick="document.getElementById('menu').classList.add('hidden')">
 			<div class="menuInterior">
 				<div class="menuOption" onclick="resetLife()">Reset Life Totals</div><br>
-				<div class="menuOption" onclick="location.reload()">Change Player Count</div>
+				<div class="menuOption" onclick="location.reload()">Change Player Count</div><br>
+				<div class="menuOption">
+					Change Background Color:<br>
+					<select id="inputPlayer" onchange="updateColorSelector()"></select><br>
+					<input type=color value="#222222" id="inputPlayerColor" onchange="updateBackgroundColor(this.value)"><br>
+					<button onclick="updateBackgroundColor('#222222')">Default</button>
+				</div><br>
 			</div>
 		</div>
 		<div id="mainGrid" class="mainGrid"></div>
@@ -187,8 +193,11 @@
 		display: table;
 	}
 	.menuInterior {
-		display: table-cell;
-		vertical-align: middle;
+		margin: 90pt 0px 0px 0px;
+		padding: 20pt;
+		overflow-y: scroll;
+		max-height: calc(100% - 180pt);
+		border: 1px solid white;
 	}
 	.menuOption {
 		font-size: 30pt;