design

new/data/site/other/life/life.js

@@ -0,0 +1,332 @@
+//============================================//
+//       Card Conjurer, by Kyle Burton        //
+//============================================//
+//define variables
+var playerCount, startingLifeTotal, firstPlayerWide = false, lastPlayerWide = false, playerList = [], rowHeight = 0, columnWidth = 0, rowCount = 0, isFullscreen = true, mouseClickId = 0, noSleep = new NoSleep(), canEnableNoSleep = false
+//Setup the enabler for no sleep
+document.addEventListener("click", enableNoSleep, false);
+function enableNoSleep() {
+    if (canEnableNoSleep) {
+        document.removeEventListener("click", enableNoSleep, false);
+        noSleep.enable();
+    }
+}
+//This function sets everything up
+function fullscreen() {
+	//Full screen!
+	grid = document.getElementById("gridShell")
+	if (grid.requestFullscreen) {
+    	grid.requestFullscreen()
+  	} else if (grid.mozRequestFullScreen) {
+    	grid.mozRequestFullScreen()
+  	} else if (grid.webkitRequestFullscreen) {
+    	grid.webkitRequestFullscreen()
+  	} else if (grid.msRequestFullscreen) {
+    	grid.msRequestFullscreen()
+  	} else {
+  		isFullscreen = false
+  		document.getElementById("return").classList.add("permaHidden")
+  		document.getElementById("gridShell").classList.add("fullscreenUnavailable")
+  	}
+}
+function startGame() {
+    canEnableNoSleep = document.getElementById("inputWakeLock").checked
+	fullscreen()
+	document.getElementById("return").classList.remove("hidden")
+	//hide the settings and grab player count and starting life total
+	document.getElementById("settings").classList.add("hidden")
+	playerCount = parseInt(document.getElementById("inputPlayerCount").value)
+	startingLifeTotal = parseInt(document.getElementById("inputStartingLife").value)
+	//determine the layout based on player count
+	if (playerCount % 2 == 0) {
+		if (playerCount >= 6) {
+			firstPlayerWide = true
+			lastPlayerWide = true
+		}
+	} else {
+		lastPlayerWide = true
+	}
+	//Make all the player boxes
+	for (var i = 1; i <= playerCount; i ++) {
+		//determine if the current box is rotated or widened
+		var rotation, wide = false
+		var orientationIndexAdjust = 0
+		if (firstPlayerWide) {
+			orientationIndexAdjust += 1
+		}
+		if (i == 1 && firstPlayerWide) {
+			rotation = 180
+		} else if (i == playerCount && lastPlayerWide) {
+			rotation = 0
+		} else if ((i + orientationIndexAdjust) % 2 == 0) {
+			rotation = 270
+		} else {
+			rotation = 90
+		}
+		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) {
+		columnWidth = screen.width / 2 - 2
+	} else {
+		columnWidth = window.innerWidth / 2 - 2
+	}
+	rowCount = (playerCount - playerCount % 2) / 2 + 1
+	if (playerCount == 2 || playerCount == 4) {
+		rowCount -= 1
+	}
+	if (isFullscreen) {
+		rowHeight = screen.height / rowCount - 2
+	} else {
+		rowHeight = window.innerHeight / rowCount - 2
+	}
+	//Now that all the player boxes are made, they must be configured
+	for (var i = 1; i <= playerCount; i++) {
+		configurePlayerBox(i)
+	}
+	drawAllPlayerBoxes()
+}
+function playerBox(playerBoxID, canvasRotation, wide) {
+	//Actually needed vars
+	this.id = playerBoxID
+	this.rotation = canvasRotation
+	this.life = startingLifeTotal
+	this.canvas = document.createElement("canvas")
+	this.direction = 0
+	this.holdTime = 0
+    this.touchId = 0.5
+	this.color = "#222222"
+	this.textColor = "#ffffff"
+	this.image = new Image()
+	this.image.customVarID = playerBoxID
+	this.image.onload = function() {drawPlayerBox(this.customVarID)}
+	//vars to make navigation easier
+	this.canvas.customVarID = playerBoxID
+	this.canvas.customVarContext = this.canvas.getContext("2d")
+	this.canvas.customVarContext.customVarCanvas = this.canvas
+	//css classes
+	this.canvas.classList.add("playerBox")
+	if (wide) {
+		this.canvas.classList.add("widePlayerBox")
+	}
+	//add it to the html
+	document.getElementById("mainGrid").appendChild(this.canvas)
+}
+function configurePlayerBox(playerBoxID) {
+	//All of this configures the size/shape/orientation of the player boxes
+	var currentPlayer = playerList[playerBoxID - 1]
+	var context = currentPlayer.canvas.customVarContext
+	currentPlayer.canvas.width = columnWidth
+	if (playerList[playerBoxID - 1].canvas.classList.contains("widePlayerBox")) {
+		currentPlayer.canvas.width = columnWidth * 2 + 2
+	}
+	currentPlayer.canvas.height = rowHeight
+	context.translate(currentPlayer.canvas.width / 2, currentPlayer.canvas.height / 2)
+	context.rotate(Math.PI / 180 * currentPlayer.rotation)
+}
+
+function resetLife() {
+	for (var i = 1; i <= playerCount; i++) {
+		playerList[i - 1].life = startingLifeTotal
+	}
+	document.getElementById('menu').classList.add('hidden')
+	drawAllPlayerBoxes()
+}
+function updateColorSelector() {
+	document.getElementById("inputPlayerColor").value = playerList[parseInt(document.getElementById("inputPlayer").value) - 1].color
+	document.getElementById("inputTextColor").value = playerList[parseInt(document.getElementById("inputPlayer").value) - 1].textColor
+}
+function updateBackgroundColor(color) {
+	playerList[parseInt(document.getElementById("inputPlayer").value) - 1].color = color
+	drawPlayerBox(parseInt(document.getElementById("inputPlayer").value))
+}
+function updateTextColor(color) {
+	playerList[parseInt(document.getElementById("inputPlayer").value) - 1].textColor = color
+	drawPlayerBox(parseInt(document.getElementById("inputPlayer").value))
+}
+function loadImage(event, destination) {
+	var input = event.target
+	var reader = new FileReader()
+	reader.onload = function() {
+		var dataURL = reader.result
+		destination.src = dataURL
+	}
+	reader.readAsDataURL(input.files[0])
+}
+var savedArtList = [], cardArtUrlList = [], cardArtArtistList = []
+function inputCardArtName(cardArtNameInput) {
+	var xhttp = new XMLHttpRequest()
+	xhttp.onreadystatechange = function() {
+		if (this.readyState == 4 && this.status == 200) {
+			savedArtList = this.responseText.split('"art_crop":"')
+			savedArtList.splice(0, 1)
+			document.getElementById("inputCardArtNameNumber").max = savedArtList.length
+			document.getElementById("inputCardArtNameNumber").value = 1
+			for (i = 0; i < savedArtList.length; i ++) {
+				cardArtUrlList[i] = savedArtList[i].split('","border_crop":')[0]
+			}
+			for (i = 0; i < savedArtList.length; i ++) {
+				cardArtArtistList[i] = savedArtList[i].slice(savedArtList[i].indexOf('"artist":"') + 10, savedArtList[i].indexOf('","border_color":'))
+			}
+			inputCardArtNameNumber(1)
+		}
+	}
+	xhttp.open("GET", "https://api.scryfall.com/cards/search?order=released&unique=art&q=name%3D" + cardArtNameInput.replace(/ /g, "_"), true)
+	xhttp.send()
+}
+function inputCardArtNameNumber(cardArtNameNumberInput) {
+	playerList[parseInt(document.getElementById('inputPlayer').value) - 1].image.src = cardArtUrlList[cardArtNameNumberInput - 1]
+}
+document.getElementById("mainGrid").addEventListener("touchmove", function(event) {
+	event.preventDefault()
+}, false)
+function rollRNG() {
+	document.getElementById("rngOutput").innerHTML = Math.floor(Math.random() * (parseInt(document.getElementById("inputRNGMax").value) - parseInt(document.getElementById("inputRNGMin").value) + 1) + parseInt(document.getElementById("inputRNGMin").value))
+}
+function drawPlayerBox(playerBoxID) {
+	var currentPlayerBox = playerList[playerBoxID - 1]
+	var context = currentPlayerBox.canvas.customVarContext
+	context.textBaseline = "middle"
+	var tempFontSize = 100
+	context.font = "100pt belerenbsc"
+	context.fillStyle = currentPlayerBox.color
+	var tempCanvasHeight = currentPlayerBox.canvas.height, tempCanvasWidth = currentPlayerBox.canvas.width
+	if (playerList[playerBoxID - 1].rotation == 90 || playerList[playerBoxID - 1].rotation == 270) {
+		tempCanvasHeight = tempCanvasWidth
+		tempCanvasWidth = currentPlayerBox.canvas.height
+	}
+	context.fillRect(tempCanvasWidth / -2, tempCanvasHeight / -2, tempCanvasWidth, tempCanvasHeight)
+	if (currentPlayerBox.image.src != "") {
+		var imageToDraw = currentPlayerBox.image
+		if (imageToDraw.width / imageToDraw.height > tempCanvasWidth / tempCanvasHeight) {
+			//The image is wider and should be fitted to its height
+			context.drawImage(imageToDraw, tempCanvasHeight / imageToDraw.height * imageToDraw.width / -2, tempCanvasHeight / -2, tempCanvasHeight / imageToDraw.height * imageToDraw.width, tempCanvasHeight)
+		} else {
+			//The image is taller and should be fitted to its width
+			context.drawImage(imageToDraw, tempCanvasWidth / -2, tempCanvasWidth / imageToDraw.width * imageToDraw.height / -2, tempCanvasWidth, tempCanvasWidth / imageToDraw.width * imageToDraw.height)
+		}
+	}
+	if (currentPlayerBox.life < 1) {
+		context.fillStyle = "#0008"
+		context.fillRect(tempCanvasWidth / -2, tempCanvasHeight / -2, tempCanvasWidth, tempCanvasHeight)
+		context.fillStyle = "#800"
+	} else {
+		context.fillStyle = playerList[playerBoxID - 1].textColor
+	}
+	while (context.measureText(currentPlayerBox.life).width >= tempCanvasWidth) {
+		tempFontSize -= 1
+		context.font = tempFontSize + "pt belerenbsc"
+	}
+	var horizontalShift = -1 * parseInt(context.measureText(currentPlayerBox.life).width) / 2
+	context.strokeStyle = "black"
+	context.lineWidth = 5
+	context.strokeText(currentPlayerBox.life, horizontalShift, 0)
+	context.fillText(currentPlayerBox.life, horizontalShift, 0)
+}
+function drawAllPlayerBoxes() {
+	for (var i = 1; i <= playerList.length; i ++) {
+		drawPlayerBox(i)
+	}
+}
+//Event Listener magic! (always records mouse/touch positions so the loop can work without events)
+var touchX = [], touchY = []
+document.getElementById("mainGrid").addEventListener("mousedown", startMouseCoordinates, true)
+window.addEventListener("mousemove", updateMouseCoordinates, true)
+window.addEventListener("mouseup", endMouseCoordinates, true)
+function startMouseCoordinates() {
+	mouseClickId += 1
+    playerList[event.target.customVarID - 1].touchId = mouseClickId
+	singleTap(event.target)
+}
+function updateMouseCoordinates() {
+	touchX[0] = event.clientX
+	touchY[0] = event.clientY}
+function endMouseCoordinates() {
+    for (var i = 1; i <= playerList.length; i++) {
+        playerList[i - 1].touchId = 0.5
+    }
+}
+window.addEventListener("touchstart", switchToTouchEvents, true)
+function switchToTouchEvents() {
+	window.removeEventListener("touchstart", switchToTouchEvents, true)
+	document.getElementById("mainGrid").removeEventListener("mousedown", startMouseCoordinates, true)
+	window.removeEventListener("mousemove", updateMouseCoordinates, true)
+	window.removeEventListener("mouseup", endMouseCoordinates, true)
+	document.getElementById("mainGrid").addEventListener("touchstart", startTouch, true)
+	window.addEventListener("touchmove", moveTouch, true)
+	window.addEventListener("touchend", endTouch, true)
+}
+function startTouch() {
+    playerList[event.changedTouches[0].target.customVarID - 1].touchId = event.changedTouches[0].identifier
+	moveTouch()
+    singleTap(event.changedTouches[0].target)
+}
+function moveTouch() {
+	touchX = [], touchY = []
+	for (var i = 0; i < event.touches.length; i ++) {
+		touchX[i] = event.touches[i].clientX
+		touchY[i] = event.touches[i].clientY
+	}
+}
+function endTouch() {
+    for (var i = 1; i <= playerList.length; i++) {
+        if (playerList[i - 1].touchId == event.changedTouches[0].identifier) {
+            playerList[i - 1].touchId = 0.5
+        }
+    }
+	moveTouch()
+}
+//Tap (and click) functions
+function singleTap(targetPlayerBox) {
+	var playerBoxBounds = targetPlayerBox.getBoundingClientRect()
+	var tappedPlayerBox = playerList[targetPlayerBox.customVarID - 1]
+	var lifeAdjust = 0
+	if (tappedPlayerBox.rotation == 0 || tappedPlayerBox.rotation == 180) {
+		if (touchX[touchX.length - 1] > playerBoxBounds.width / 2 + playerBoxBounds.x) {
+			lifeAdjust = 1
+		} else {
+			lifeAdjust = -1
+		}
+	} else {
+		if (touchY[touchY.length - 1] > playerBoxBounds.height / 2 + playerBoxBounds.y) {
+			lifeAdjust = 1
+		} else {
+			lifeAdjust = -1
+		}
+	}
+	if (tappedPlayerBox.rotation == 180 || tappedPlayerBox.rotation == 270) {
+		lifeAdjust *= -1
+	}
+	tappedPlayerBox.direction = lifeAdjust
+	tappedPlayerBox.life += lifeAdjust
+	drawPlayerBox(tappedPlayerBox.id)
+    setTimeout(clockCheck.bind(null, tappedPlayerBox, tappedPlayerBox.touchId), 500)
+}
+function clockCheck(tappedPlayerBox, lastTapID) {
+    if (tappedPlayerBox.touchId == lastTapID) {
+        tappedPlayerBox.life += tappedPlayerBox.direction
+        drawPlayerBox(tappedPlayerBox.id)
+        if (tappedPlayerBox.holdTime >= 150) {
+            setTimeout(clockCheck.bind(null, tappedPlayerBox, tappedPlayerBox.touchId), 10)
+        } else if (tappedPlayerBox.holdTime >= 50) {
+            setTimeout(clockCheck.bind(null, tappedPlayerBox, tappedPlayerBox.touchId), 50)
+        } else {
+            setTimeout(clockCheck.bind(null, tappedPlayerBox, tappedPlayerBox.touchId), 100)
+        }
+        tappedPlayerBox.holdTime += 1
+    } else {
+        tappedPlayerBox.holdTime = 0
+    }
+}
+//Hopefully stops the pesky double-tap zoom:
+var doubleTouchStartTimestamp = 0
+document.getElementById("mainGrid").addEventListener("touchstart", function() {
+    var now = +(new Date())
+    if (doubleTouchStartTimestamp + 500 > now){
+        event.preventDefault()
+    }
+    doubleTouchStartTimestamp = now
+})
+//Updated :D

new/data/site/styles.css

@@ -43,8 +43,8 @@
 }
 footer {
 	background-color: var(--dark-color);
-	padding: 25pt;
+	padding: 2.5em;
-	font: 13pt gothammedium;
+	font: 1.3em gothammedium;
 	color: var(--light-color);
 }
 body {
@@ -61,63 +61,44 @@ html {
 	-moz-user-select: none;
 	-ms-user-select: none;
 	user-select: none;
+	font-size: 6pt;
 }
 canvas {
-	width: calc(100% - 10pt);
+	width: calc(100%);
 	height: auto;
+	max-width: 750px;
+	max-height: 1050px;
 }
 .canvasContainer {
 	text-align: center;
 }
 .mainGrid {
-	padding: 5pt;
+	padding: 0.3em;
 	display: grid;
-	grid-gap: 25pt;
+	grid-gap: 1.5em;
 	grid-template-columns: auto;
-	font: 16pt mplantin;
+	font: 1.6em mplantin;
 }
 .imageGrid {
 	display: grid;
-	grid-template-columns: auto 143pt;
+	grid-template-columns: auto 9em;
-	min-height: 200pt;
+	min-height: 12.5em;
-}
-.layer {
-	padding: 50pt;
-	color: black;
-	font: 24pt belerenbsc;
-	text-align: center;
-}
-.layer:nth-child(even) {
-	background-color: var(--light-color);
-	background-image: url(images/layerBackground.png);
-	background-position: center;
-	background-repeat: no-repeat;
 }
 .imgPreview {
 	width: 100%;
 }
-@media screen and (min-width: 306pt) {
-	.imgPreview {
-		max-width: 143pt;
-		max-height: 200pt;
-	}
-}
-.cardMenu > div {
-	/*border: 1px solid red;*/
-	/*margin-bottom: 5pt;*/
-}
 .bar {
 	background-image: url(../images/manaSymbols/63.png);
 	background-position: center;
 	background-repeat: no-repeat;
 	background-size: 100% 2px;
 	width: 100%;
-	height: 20pt;
+	height: 1em;
 }
 .cardMenu > div > div:nth-child(1) {
 	/*border: 1px solid blue;*/
 	text-align: center;
-	font: 24pt belerenbsc;
+	font: 1.5em belerenbsc;
 }
 .twoGrid {
 	display: grid;
@@ -149,30 +130,6 @@ canvas {
 .input.file {
 	padding: 0px;
 }
-@media screen and (min-width: 994pt) {
-	.mainGrid {
-		padding: 25pt;
-		grid-template-columns: calc(750px + 2px) auto;
-	}
-}
-@media screen and (min-width: calc(750px + 30pt)) {
-	canvas {
-		width: 750px;
-		height: 1050px;
-	}
-}
-@media screen and (min-width: 1024px) {
-	.tooltip:hover .tooltiptext {
-	  	visibility: visible;
-	  	opacity: 1;
-	}
-}
-@media screen and (max-width: 1023px) {
-	.tooltip:focus .tooltiptext, div.tooltip > input:focus + .tooltiptext, div.tooltip > textarea:focus + .tooltiptext {
-	  	visibility: visible;
-	  	opacity: 1;
-	}
-}
 .tooltip {
 	position: relative;
 }
@@ -215,10 +172,90 @@ a {
 a:hover {
 	color: var(--dark-color);
 }
+footer a {
+	color: white;
+}
+footer a:hover {
+	color: var(--shifting-color-1-light);
+}
 .hidden {
 	display: none;
 }
 .footerGrid {
 	display: grid;
-	grid-template-columns: repeat(auto-fit, minmax(0px, 1fr));
+	grid-template-columns: auto;
+	grid-gap: 2em;
+}
+.layer {
+	padding: 2em 2em;
+	color: black;
+	font-size: 2em;
+	text-align: center;
+}
+.layer:nth-child(even) {
+	background-color: var(--light-color);
+	background-image: url(images/layerBackground.png);
+	background-position: center;
+	background-repeat: no-repeat;
+}
+.title {
+	font: 1.5em belerenbsc;
+}
+.pageTitle {
+	font: 5em belerenbsc;
+	text-align: center;
+	padding-top: 0.3em;
+}
+.paragraph {
+	font: 1em mplantin;
+	text-align: left;
+}
+.indent {
+	text-indent: 2em;
+}
+.leftMargin {
+	margin-left: 2em;
+}
+
+/*Controls the area taken by the canvas*/
+@media screen and (min-width: 888pt) {
+	/*Makes room for the canvas and controls to be side by side*/
+	.mainGrid {
+		padding: 1.5em;
+		grid-template-columns: calc(750px + 2px) auto;
+	}
+}
+@media screen and (min-width: calc(750px + 2em)) {
+	/*The canvas can be full size and doesn't have to scale anymore*/
+	canvas {
+		width: 750px;
+		height: 1050px;
+	}
+}
+/*The screen is big enough (larger than phone, likely) to use a larger font*/
+@media screen and (min-width: 263pt) {
+	html {
+		font-size: 10pt;
+	}
+}
+/*These control tooltips for mobile devices vs. desktops/laptops*/
+@media screen and (min-width: 1024px) {
+	.tooltip:hover .tooltiptext {
+	  	visibility: visible;
+	  	opacity: 1;
+	}
+}
+@media screen and (max-width: 1023px) {
+	.tooltip:focus .tooltiptext, div.tooltip > input:focus + .tooltiptext, div.tooltip > textarea:focus + .tooltiptext {
+	  	visibility: visible;
+	  	opacity: 1;
+	}
+}
+/*The footer can now fit horizontally!*/
+@media screen and (min-width: 375pt) {
+	.footerGrid {
+		display: grid;
+		grid-template-columns: repeat(auto-fit, minmax(0px, 1fr));
+		grid-gap: 1em;
+	}
 }

new/disclaimer.html

@@ -0,0 +1,57 @@
+<!DOCTYPE html5>
+<html>
+<head>
+	<title>CC — Terms of Use</title>
+	<!-- Other things -->
+	<link rel="stylesheet" href="data/site/styles.css">
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+</head>
+<body>
+	<div class="mainDiv">
+		<div class="layer">
+			<div class="title">
+				Disclaimer:
+			</div>
+		</div>
+		<div class="layer">
+			<div class="paragraph indent">
+				Card Conjurer is in no way affiliated with, sponsored by, or endorsed by Wizards of the Coast. Mana symbols and other related images are trademarks and copyrights of Wizards of the Coast, LLC, a subsidiary of Hasbro, Inc.
+			</div>
+		</div>
+		<div class="layer">
+			<div class="paragraph">
+				Some fonts and/or images used in this program have been gathered from the following sources under the <a target="blank" href="https://creativecommons.org/licenses/by-nc-sa/2.5/">Creative Commons BY-NC-SA 2.5 License</a>:<br>
+				<a target="blank" href="https://mtg.gamepedia.com/Main_Page" class="leftMargin">MTG Gamepedia</a><br>
+				<a target="blank" href="http://magicseteditor.boards.net/" class="leftMargin">Magic Set Editor</a><br>
+				Changes have been made to some of the images. Card Conjurer is not endorsed by these sources.
+			</div>
+		</div>
+		<div class="layer">
+			<div class="paragraph">
+				Any other uploaded artwork is property of the original artist, and it is at the discretion of the users that these images are properly credited.
+			</div>
+		</div>
+	</div>
+</body>
+<footer>
+	<div class="footerGrid">
+		<div>
+			Card Conjurer By Kyle Burton<br>
+			<input type="checkbox" checked="true" onchange="toggleTooltips(this.checked)" id="tooltipToggler"> Display tooltips<br>
+			Happy Card Conjuring!
+		</div>
+		<div>
+			Navigation:<br>
+			<a href="index.html">Card Creator</a><br>
+			<a href="life.html">Life Counter</a>
+		</div>
+		<div>
+			Legal:<br>
+			<a href="disclaimer.html">Disclaimer</a><br>
+			<a href="termsOfUse.html">Terms of Use</a>
+		</div>
+	</div>
+</footer>
+<script src="data/scripts/colors.js"></script>
+<html>

new/index.html

@@ -8,6 +8,9 @@
 	<meta name="viewport" content="width=device-width, initial-scale=1">
 </head>
 <body>
+	<div class="pageTitle">
+		Card Conjurer
+	</div>
 	<div class="mainDiv">
 		<div class="mainGrid">
 			<div class="canvasContainer">
@@ -45,19 +48,17 @@
 						Art
 					</div>
 					<div class="autoGrid">
-						<div class="twoGrid">
+						<div>
-							<div>
+							<div class="tooltip"><input type="file" class="input file" accept="image/*" onchange="uploadImage(event, cardArt)" placeholder="Via File Upload"><span class="tooltiptext">Upload an image for the card art</span></div>
-								<div class="tooltip"><input type="file" class="input file" accept="image/*" onchange="uploadImage(event, cardArt)" placeholder="Via File Upload"><span class="tooltiptext">Upload an image for the card art</span></div>
+							<div class="tooltip"><input type="text" class="input text" placeholder="Via URL" onchange="cardArt.src = 'https://cors-anywhere.herokuapp.com/' + this.value"><span class="tooltiptext">Enter a URL for the card art</span></div>
-								<div class="tooltip"><input type="text" class="input text" placeholder="Via URL" onchange="cardArt.src = 'https://cors-anywhere.herokuapp.com/' + this.value"><span class="tooltiptext">Enter a URL for the card art</span></div>
+							<div class="tooltip"><input type="text" class="input text" id="inputCardArtName" onchange="inputCardArtName(this.value)" placeholder="Via Card Name"><span class="tooltiptext">Enter a card name to use its art</span></div>
-								<div class="tooltip"><input type="text" class="input text" id="inputCardArtName" onchange="inputCardArtName(this.value)" placeholder="Via Card Name"><span class="tooltiptext">Enter a card name to use its art</span></div>
+							<div class="tooltip"><input type="number" class="input number" id="inputCardArtNameNumber" onchange="inputCardArtNameNumber(this.value)" value="" min="1" max="1" placeholder="Which Art From Card Name"><span class="tooltiptext">Select which art to use (from the entered card name)</span></div>
-								<div class="tooltip"><input type="number" class="input number" id="inputCardArtNameNumber" onchange="inputCardArtNameNumber(this.value)" value="" min="1" max="1" placeholder="Which Art From Card Name"><span class="tooltiptext">Select which art to use (from the entered card name)</span></div>
+						</div>
-							</div>
+						<div>
-							<div>
+							<div style="text-align: center; margin: 0.18em 0px">Placement & Zoom:</div>
-								<div style="text-align: center; margin: 0.18em 0px">Placement & Zoom:</div>
+							<div class="tooltip"><input type="number" class="input number" value="0" id="inputCardArtX" oninput="updateCardCanvas()"><span class="tooltiptext">Shift art to the right</span></div>
-								<div class="tooltip"><input type="number" class="input number" value="0" id="inputCardArtX" oninput="updateCardCanvas()"><span class="tooltiptext">Shift art to the right</span></div>
+							<div class="tooltip"><input type="number" class="input number" value="0" id="inputCardArtY" oninput="updateCardCanvas()"><span class="tooltiptext">Shift art down</span></div>
-								<div class="tooltip"><input type="number" class="input number" value="0" id="inputCardArtY" oninput="updateCardCanvas()"><span class="tooltiptext">Shift art down</span></div>
+							<div class="tooltip"><input type="number" class="input number" value="100" step="0.1" min="0" id="inputCardArtZoom" oninput="updateCardCanvas()"><span class="tooltiptext">Art zoom level</span></div>
-								<div class="tooltip"><input type="number" class="input number" value="100" step="0.1" min="0" id="inputCardArtZoom" oninput="updateCardCanvas()"><span class="tooltiptext">Art zoom level</span></div>
-							</div>
 						</div>
 					</div>
 					<div class="bar"></div>
@@ -108,11 +109,18 @@
 	<div class="footerGrid">
 		<div>
 			Card Conjurer By Kyle Burton<br>
-			<input type="checkbox" checked="true" onchange="toggleTooltips(this.checked)" id="tooltipToggler"> Display tooltips
+			<input type="checkbox" checked="true" onchange="toggleTooltips(this.checked)" id="tooltipToggler"> Display tooltips<br>
+			Happy Card Conjuring!
 		</div>
 		<div>
-			Here's some stuff<br>
+			Navigation:<br>
-			And here's some more stuff!
+			<a href="index.html">Card Creator</a><br>
+			<a href="life.html">Life Counter</a>
+		</div>
+		<div>
+			Legal:<br>
+			<a href="disclaimer.html">Disclaimer</a><br>
+			<a href="termsOfUse.html">Terms of Use</a>
 		</div>
 	</div>
 </footer>

new/life.html

@@ -0,0 +1,222 @@
+<!DOCTYPE html5>
+<html>
+<head>
+	<title>Life Counter</title>
+	<!-- Other things -->
+	<meta charset="UTF-8">
+	<meta name="apple-mobile-web-app-title" content="LifeCounter">
+	<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1, maximum-scale=1, user-scalable=no">
+	<meta name="apple-mobile-web-app-capable" content="yes">
+	<meta name="mobile-web-app-capable" content="yes">
+	<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+</head>
+<body autocomplete="off">
+	<div id="settings" class="settings">
+		<div class="innerSettings">
+			Number of Players:<br>
+			<input id="inputPlayerCount" class="input" type="number" min="2" value="4" max="16"><br>
+			Starting Life Total:<br>
+			<input id="inputStartingLife" class="input" type="number" min="0" value="40"><br>
+			<button id="buttonStartGame" class="input" onclick="startGame()">Game On!</button><br>
+            <input type="checkbox" id="inputWakeLock" checked="true">Enable Wake Lock</input><br><br>
+            For an optimal experience, save this website to your home screen and open it from there.<br><br><div style="font-size: 0.75em">Check out my other website, <a style="font-size: inherit" href="index.html">Card Conjurer</a>, to easily create custom Magic cards!</div>
+		</div>
+	</div>
+	<div onclick="fullscreen()" class="hidden" id="return">CLICK ANYWHERE TO RETURN TO FULLSCREEN</div>
+	<div id="gridShell">
+		<img id="menuButton" class="menuButton" src="data/site/other/life/menuButton.png" onclick="document.getElementById('menu').classList.remove('hidden')">
+		<div id="menu" class="menu hidden">
+			<img class="menuExitButton" src="data/site/other/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><br>
+				<div class="menuOption">
+					Change Background:<br>
+					<select id="inputPlayer" onchange="updateColorSelector()"></select><br>
+					Color:<br>
+					<input type="color" class="colorInput" value="#222222" id="inputPlayerColor" onchange="updateBackgroundColor(this.value)"><br>
+					<button onclick="updateBackgroundColor('#222222')">Default</button><br>
+					Image:<br>
+					<input type="file" accept="image/*" onchange="loadImage(event, playerList[parseInt(document.getElementById('inputPlayer').value) - 1].image)" placeholder="Via File Upload"><br>
+					<input type="text" placeholder="Via URL" onchange="playerList[parseInt(document.getElementById('inputPlayer').value) - 1].image.src = this.value"><br>
+					<input id="inputCardArtName" onchange="inputCardArtName(this.value)" type="text" placeholder="Via Card Name"><br>
+					<input id="inputCardArtNameNumber" onchange="inputCardArtNameNumber(this.value)" type="number" value="1" min="1" max="1"><br><br>
+					Text Color:<br>
+					<input type="color" class="colorInput" value="#ffffff" id="inputTextColor" onchange="updateTextColor(this.value)"><br>
+				</div><br>
+				<div class="menuOption">
+					RNG<br>
+					Min <input class="smallInput" type="number" id="inputRNGMin" min="0" value="1"><br>
+					Max <input class="smallInput" type="number" id="inputRNGMax" min="0" value="20"><br>
+					<div onclick="rollRNG()" class="rng"><div class="rngNumber" id="rngOutput"><div style="font-size: 30pt; margin-top: 0.75em;">Tap Me<br>To Roll</div></div></div>
+				</div>
+			</div>
+		</div>
+		<div id="mainGrid" class="mainGrid"></div>
+	</div>
+</body>
+<style>
+	@font-face {
+		font-family: belerenbsc;
+		src: url("data/fonts/beleren-bsc.ttf");
+	}
+    .settings {
+        overflow-y: auto;
+        touch-action: pan-y;
+        -webkit-overflow-scrolling: touch;
+        height: 100%
+    }
+	.innerSettings {
+        margin: 10pt;
+	}
+	* {
+		font-family: belerenbsc;
+		font-size: 24pt;
+		margin: 0px;
+        touch-action: manipulation;
+	}
+	image, div, canvas {
+		user-select: none;
+		-webkit-user-select: none;
+		-moz-user-select: none;
+		-ms-user-select: none;
+	}
+	html, body {
+		/*position: fixed;
+		top: 0px;
+		left: 0px;
+		width: 100%;
+		height: 100%;
+		overflow: hidden;*/
+	}
+	body {
+		background-color: #333;
+		color: white;
+	}
+	.mainGrid {
+		display: grid;
+		grid-template-columns: auto auto;
+		grid-auto-rows: 1fr;
+		width: 100%;
+		height: 100%;
+	}
+	.mainGrid {
+		/*position: fixed;
+		top: 0;
+		left: 0;*/
+	}
+	#gridShell {
+		display: none;
+	}
+    #gridShell:fullscreen {
+		display: inline-block;
+	}
+    #gridShell:-webkit-full-screen {
+        display: inline-block;
+    }
+	#gridShell.fullscreenUnavailable {
+		display: inline-block;
+	}
+	.playerBox {
+		border: 1px solid white;
+		width: auto;
+		height: auto;
+	}
+	.widePlayerBox {
+		grid-column: 1 / span 2;
+	}
+	#return {
+		width: 100%;
+		height: 100%;
+		color: white;
+		font-size: 3vw;
+	}
+	.menuButton {
+		position: fixed;
+		top: calc(50% - 7.5vw);
+		left: calc(50% - 7.5vw);
+		width: 15vw;
+		height: 15vw;
+		border: 2px solid white;
+	}
+	.menuExitButton {
+		position: fixed;
+		top: 5pt;
+		right: 5pt;
+		width: 50pt;
+		height: 50pt;
+	}
+	.menu {
+		position: fixed;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		background-color: #000a;
+		text-align: center;
+		display: table;
+	}
+	.menuInterior {
+		margin: 60pt 0px 0px 0px;
+		padding: 10pt;
+		overflow-y: auto;
+		max-width: calc(100vw - 23pt);
+		height: calc(100% - 60pt);
+		border: 2px solid white;
+		touch-action: pan-y;
+		-webkit-overflow-scrolling: touch;
+	}
+	.menuOption {
+		font-size: 20pt;
+		background-color: #333;
+		border-radius: 1em;
+		display: inline-block;
+		margin-bottom: 10pt;
+		padding: 8pt;
+		max-width: calc(100% - 16pt);
+		overflow-x: hidden;
+	}
+	.colorInput {
+		border: 0px;
+		padding: 0px;
+		width: 4.5em;
+		height: 2em;
+	}
+	.hidden {
+		display: none;
+	}
+	.permaHidden {
+		display: none;
+	}
+	input {
+		width: 7.5em;
+	}
+    #inputWakeLock {
+        /*position: relative;
+        top: -0.2em;*/
+        margin: 0.25em;
+        height: auto;
+        width: auto;
+    }
+	.smallInput {
+		width: 3em;
+	}
+	.rng {
+		margin-top: 6pt;
+		border: 1px solid white;
+		height: 5em;
+		min-width: 5em;
+		border-radius: 1em;
+		background-color: #222;
+	}
+	.rngNumber {
+		font-size: 4em;
+	}
+	a {
+		color: white;
+	}
+</style>
+<script src="data/site/other/life/NoSleep.js"></script>
+<script src="data/site/other/life/life.js"></script>
+<html>

new/termsOfUse.html

@@ -0,0 +1,49 @@
+<!DOCTYPE html5>
+<html>
+<head>
+	<title>CC — Disclaimer</title>
+	<!-- Other things -->
+	<link rel="stylesheet" href="data/site/styles.css">
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+</head>
+<body>
+	<div class="mainDiv">
+		<div class="layer">
+			<div class="title">
+				Terms of Use:
+			</div>
+		</div>
+		<div class="layer">
+			<div class="paragraph indent">
+				This program is for creative purposes only. It is intended only to be used for personal reasons, and not for commercial production or sale.
+			</div>
+		</div>
+		<div class="layer">
+			<div class="paragraph">
+				Users must properly credit any artwork that they upload to the program.
+			</div>
+		</div>
+	</div>
+</body>
+<footer>
+	<div class="footerGrid">
+		<div>
+			Card Conjurer By Kyle Burton<br>
+			<input type="checkbox" checked="true" onchange="toggleTooltips(this.checked)" id="tooltipToggler"> Display tooltips<br>
+			Happy Card Conjuring!
+		</div>
+		<div>
+			Navigation:<br>
+			<a href="index.html">Card Creator</a><br>
+			<a href="life.html">Life Counter</a>
+		</div>
+		<div>
+			Legal:<br>
+			<a href="disclaimer.html">Disclaimer</a><br>
+			<a href="termsOfUse.html">Terms of Use</a>
+		</div>
+	</div>
+</footer>
+<script src="data/scripts/colors.js"></script>
+<html>