This commit is contained in:
Kyle
2019-08-10 11:40:49 -07:00
parent a83b43d1a2
commit ab8b345b68
2 changed files with 31 additions and 4 deletions

View File

@@ -4,7 +4,22 @@
//define variables
var playerCount, startingLifeTotal, firstPlayerWide = false, lastPlayerWide = false, playerList = [], rowHeight = 0, columnWidth = 0, rowCount = 0
//This function sets everything up
function fullscreen() {
//Full screen!
grid = document.getElementById("mainGrid")
if (grid.requestFullscreen) {
grid.requestFullscreen()
} else if (grid.mozRequestFullScreen) {
grid.mozRequestFullScreen()
} else if (grid.webkitRequestFullscreen) {
grid.webkitRequestFullscreen()
} else if (grid.msRequestFullscreen) {
grid.msRequestFullscreen()
}
}
function startGame() {
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)
@@ -39,12 +54,12 @@ function startGame() {
playerList[i - 1] = new playerBox(i, rotation, wide)
}
//Determine the grid size
columnWidth = window.innerWidth / 2 - 2
columnWidth = screen.width / 2 - 2
rowCount = (playerCount - playerCount % 2) / 2 + 1
if (playerCount == 2 || playerCount == 4) {
rowCount -= 1
}
rowHeight = window.innerHeight / rowCount - 2
rowHeight = screen.height / rowCount - 2
//Now that all the player boxes are made, they must be configured
for (var i = 1; i <= playerCount; i++) {
configurePlayerBox(i)

View File

@@ -46,12 +46,13 @@
<body>
<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>
Starting Life Total<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>
</div>
<div onclick="fullscreen()" class="hidden" id="return">CLICK ANYWHERE TO RETURN TO FULLSCREEN</div>
<div id="mainGrid" class="mainGrid">
</div>
@@ -114,6 +115,11 @@
width: 100%;
height: 100%;
align-items: center;
display: none;
}
.mainGrid:fullscreen {
cursor: crosshair;
display: inline-block;
}
.playerBox {
/*background-color: #454;*/
@@ -128,6 +134,12 @@
.hidden {
display: none;
}
#return {
width: 100%;
height: 100%;
color: white;
font-size: 3vw;
}
</style>