This commit is contained in:
Kyle
2019-08-10 15:05:50 -07:00
parent 2e93310500
commit cf2c840133
2 changed files with 26 additions and 5 deletions

View File

@@ -56,6 +56,7 @@ function startGame() {
} }
if ((i == 1 && firstPlayerWide) || (i == playerCount && lastPlayerWide)) {wide = true} if ((i == 1 && firstPlayerWide) || (i == playerCount && lastPlayerWide)) {wide = true}
playerList[i - 1] = new playerBox(i, rotation, wide) playerList[i - 1] = new playerBox(i, rotation, wide)
document.getElementById("inputPlayer").innerHTML += "<option value='" + i + "'>Player " + i + "</option>"
} }
//Determine the grid size //Determine the grid size
if (isFullscreen) { if (isFullscreen) {
@@ -101,20 +102,24 @@ function startGame() {
var tempFontSize = 100 var tempFontSize = 100
context.font = "100pt belerenbsc" context.font = "100pt belerenbsc"
var currentLife = playerList[context.customVarCanvas.customVarID - 1].life 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 var tempCanvasHeight = context.customVarCanvas.height, tempCanvasWidth = context.customVarCanvas.width
if (playerList[context.customVarCanvas.customVarID - 1].rotation == 90 || playerList[context.customVarCanvas.customVarID - 1].rotation == 270) { if (playerList[context.customVarCanvas.customVarID - 1].rotation == 90 || playerList[context.customVarCanvas.customVarID - 1].rotation == 270) {
tempCanvasHeight = tempCanvasWidth tempCanvasHeight = tempCanvasWidth
tempCanvasWidth = context.customVarCanvas.height tempCanvasWidth = context.customVarCanvas.height
} }
context.fillRect(tempCanvasWidth / -2, tempCanvasHeight / -2, tempCanvasWidth, tempCanvasHeight) context.fillRect(tempCanvasWidth / -2, tempCanvasHeight / -2, tempCanvasWidth, tempCanvasHeight)
context.fillStyle = "#eee" context.fillStyle = "white"
while (context.measureText(currentLife).width >= tempCanvasWidth) { while (context.measureText(currentLife).width >= tempCanvasWidth) {
tempFontSize -= 1 tempFontSize -= 1
context.font = tempFontSize + "pt belerenbsc" context.font = tempFontSize + "pt belerenbsc"
} }
var horizontalShift = -1 * parseInt(context.measureText(currentLife).width) / 2 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) context.fillText(currentLife, horizontalShift, 0)
} }
}, 100) }, 100)
} }
@@ -127,6 +132,7 @@ function playerBox(playerBoxID, canvasRotation, wide) {
this.canvas.customVarMouseDown = "false" this.canvas.customVarMouseDown = "false"
this.canvas.customVarMouseDelay = 0 this.canvas.customVarMouseDelay = 0
this.canvas.customVarID = playerBoxID this.canvas.customVarID = playerBoxID
this.canvas.customVarColor = "#222222"
this.canvas.customVarContext = this.canvas.getContext("2d") this.canvas.customVarContext = this.canvas.getContext("2d")
this.canvas.customVarContext.customVarCanvas = this.canvas this.canvas.customVarContext.customVarCanvas = this.canvas
this.canvas.classList.add("playerBox") this.canvas.classList.add("playerBox")
@@ -202,3 +208,9 @@ function resetLife() {
} }
document.getElementById('menu').classList.add('hidden') 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
}

View File

@@ -65,7 +65,13 @@
<img class="menuExitButton" src="data/life/menuExitButton.png" onclick="document.getElementById('menu').classList.add('hidden')"> <img class="menuExitButton" src="data/life/menuExitButton.png" onclick="document.getElementById('menu').classList.add('hidden')">
<div class="menuInterior"> <div class="menuInterior">
<div class="menuOption" onclick="resetLife()">Reset Life Totals</div><br> <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> </div>
<div id="mainGrid" class="mainGrid"></div> <div id="mainGrid" class="mainGrid"></div>
@@ -187,8 +193,11 @@
display: table; display: table;
} }
.menuInterior { .menuInterior {
display: table-cell; margin: 90pt 0px 0px 0px;
vertical-align: middle; padding: 20pt;
overflow-y: scroll;
max-height: calc(100% - 180pt);
border: 1px solid white;
} }
.menuOption { .menuOption {
font-size: 30pt; font-size: 30pt;