diff --git a/data/life/life.js b/data/life/life.js index 03828e71..e678446b 100644 --- a/data/life/life.js +++ b/data/life/life.js @@ -6,7 +6,7 @@ var playerCount, startingLifeTotal, firstPlayerWide = false, lastPlayerWide = fa //This function sets everything up function fullscreen() { //Full screen! - grid = document.getElementById("mainGrid") + grid = document.getElementById("gridShell") if (grid.requestFullscreen) { grid.requestFullscreen() } else if (grid.mozRequestFullScreen) { @@ -18,7 +18,7 @@ function fullscreen() { } else { // alert("Unfortunately fullscreen is unavailable for your device. If it's an iPhone, I'd recommend tapping the share button and selecting 'Add to Home Screen.' Running it from your home screen should provide a much better experience.") document.getElementById("return").classList.add("permaHidden") - document.getElementById("mainGrid").classList.add("fullscreenUnavailable") + document.getElementById("gridShell").classList.add("fullscreenUnavailable") } } function startGame() { @@ -187,4 +187,10 @@ function mouseUpPlayerBox() { playerList[i - 1].canvas.customVarMouseDown = "false" playerList[i - 1].canvas.customVarMouseDelay = 0 } +} +function resetLife() { + for (var i = 1; i <= playerCount; i++) { + playerList[i - 1].life = startingLifeTotal + } + document.getElementById('menu').classList.add('hidden') } \ No newline at end of file diff --git a/data/life/menuButton.png b/data/life/menuButton.png new file mode 100644 index 00000000..012267b9 Binary files /dev/null and b/data/life/menuButton.png differ diff --git a/data/life/menuExitButton.png b/data/life/menuExitButton.png new file mode 100644 index 00000000..707a98c2 Binary files /dev/null and b/data/life/menuExitButton.png differ diff --git a/life.html b/life.html index eefa2933..4bef77fc 100644 --- a/life.html +++ b/life.html @@ -50,7 +50,7 @@ -
+
Number of Players:

Starting Life Total:
@@ -58,8 +58,16 @@
-
- +
+ + +
@@ -103,7 +111,9 @@ src: url("data/fonts/goudy-medieval.ttf"); } - + .settings { + margin: 2vw; + } * { user-select: none; font-family: belerenbsc; @@ -121,12 +131,14 @@ width: 100%; height: 100%; align-items: center; + } + #gridShell { display: none; } - .mainGrid:fullscreen { + #gridShell:fullscreen { display: inline-block; } - .mainGrid.fullscreenUnavailable { + #gridShell.fullscreenUnavailable { display: inline-block; } .playerBox { @@ -139,18 +151,55 @@ .widePlayerBox { grid-column: 1 / span 2; } - .hidden { - display: none; - } - .permaHidden { - display: none; - } #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: 1px solid white; + } + .menuExitButton { + position: fixed; + top: 1vw; + right: 1vw; + width: 15vw; + height: 15vw; + } + .menu { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: #000a; + text-align: center; + display: table; + } + .menuInterior { + display: table-cell; + vertical-align: middle; + } + .menuOption { + font-size: 4vw; + background-color: #333; + border-radius: 1em; + display: inline-block; + margin-bottom: 1vw; + padding: 1vw; + } + .hidden { + display: none; + } + .permaHidden { + display: none; + }