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 //define variables
var playerCount, startingLifeTotal, firstPlayerWide = false, lastPlayerWide = false, playerList = [], rowHeight = 0, columnWidth = 0, rowCount = 0 var playerCount, startingLifeTotal, firstPlayerWide = false, lastPlayerWide = false, playerList = [], rowHeight = 0, columnWidth = 0, rowCount = 0
//This function sets everything up //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() { function startGame() {
fullscreen()
document.getElementById("return").classList.remove("hidden")
//hide the settings and grab player count and starting life total //hide the settings and grab player count and starting life total
document.getElementById("settings").classList.add("hidden") document.getElementById("settings").classList.add("hidden")
playerCount = parseInt(document.getElementById("inputPlayerCount").value) playerCount = parseInt(document.getElementById("inputPlayerCount").value)
@@ -39,12 +54,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 = window.innerWidth / 2 - 2 columnWidth = screen.width / 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 = window.innerHeight / rowCount - 2 rowHeight = screen.height / 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)

View File

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