This commit is contained in:
Kyle
2019-08-10 11:12:56 -07:00
parent 59324356f4
commit f258ffa252
2 changed files with 8 additions and 7 deletions

View File

@@ -39,12 +39,12 @@ function startGame() {
playerList[i - 1] = new playerBox(i, rotation, wide) playerList[i - 1] = new playerBox(i, rotation, wide)
} }
//Determine the grid size //Determine the grid size
columnWidth = parseInt(getComputedStyle(document.querySelector(".mainGrid")).width) / 2 columnWidth = window.innerWidth / 2 - 2
rowCount = (playerCount - playerCount % 2) / 2 + 1 rowCount = (playerCount - playerCount % 2) / 2 + 1
if (playerCount == 2 || playerCount == 4) { if (playerCount == 2 || playerCount == 4) {
rowCount -= 1 rowCount -= 1
} }
rowHeight = parseInt(getComputedStyle(document.querySelector(".mainGrid")).height) / rowCount rowHeight = window.innerHeight / rowCount - 2
//Now that all the player boxes are made, they must be configured //Now that all the player boxes are made, they must be configured
for (var i = 1; i <= playerCount; i++) { for (var i = 1; i <= playerCount; i++) {
configurePlayerBox(i) configurePlayerBox(i)
@@ -114,7 +114,7 @@ function configurePlayerBox(playerBoxID) {
var context = currentPlayer.canvas.customVarContext var context = currentPlayer.canvas.customVarContext
currentPlayer.canvas.width = columnWidth currentPlayer.canvas.width = columnWidth
if (playerList[playerBoxID - 1].canvas.classList.contains("widePlayerBox")) { if (playerList[playerBoxID - 1].canvas.classList.contains("widePlayerBox")) {
currentPlayer.canvas.width *= 2 currentPlayer.canvas.width = columnWidth * 2 + 2
} }
currentPlayer.canvas.height = rowHeight currentPlayer.canvas.height = rowHeight
context.translate(currentPlayer.canvas.width / 2, currentPlayer.canvas.height / 2) context.translate(currentPlayer.canvas.width / 2, currentPlayer.canvas.height / 2)

View File

@@ -46,9 +46,9 @@
<body> <body>
<div id="settings"> <div id="settings">
Number of Players<br> Number of Players:<br>
<input id="inputPlayerCount" class="input" type="number" min="2" value="6" max="16"><br> <input id="inputPlayerCount" class="input" type="number" min="2" value="6" max="16"><br>
Starting Life Total<br> Starting Life Total:<br>
<input id="inputStartingLife" class="input" type="number" min="0" value="40"><br> <input id="inputStartingLife" class="input" type="number" min="0" value="40"><br>
<button id="buttonStartGame" class="input" onclick="startGame()">Game On!</button> <button id="buttonStartGame" class="input" onclick="startGame()">Game On!</button>
</div> </div>
@@ -102,6 +102,7 @@
user-select: none; user-select: none;
font-family: belerenbsc; font-family: belerenbsc;
font-size: 20pt; font-size: 20pt;
margin: 0px;
} }
body { body {
background-color: #333; background-color: #333;
@@ -117,8 +118,8 @@
.playerBox { .playerBox {
/*background-color: #454;*/ /*background-color: #454;*/
border: 1px solid white; border: 1px solid white;
width: 100%; width: auto;
height: 100%; height: auto;
} }
.widePlayerBox { .widePlayerBox {
grid-column: 1 / span 2; grid-column: 1 / span 2;