GithubMirrors/cardconjurer
1
0
Fork 1
mirror of https://github.com/Investigamer/cardconjurer.git synced 2025-07-27 13:21:41 -05:00
Code Issues Actions Packages Projects Releases Wiki Activity

life

Browse Source
This commit is contained in:
Kyle
2019-08-10 13:46:51 -07:00
parent 70c507abde
commit 451ecabcc7
4 changed files with 69 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
data/life/life.js
View File

@@ -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')
}

BIN
data/life/menuButton.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 810 B

BIN
data/life/menuExitButton.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

73
life.html
View File

@@ -50,7 +50,7 @@
<body>
<div id="settings">
<div id="settings" class="settings">
Number of Players:<br>
<input id="inputPlayerCount" class="input" type="number" min="2" value="6" max="16"><br>
Starting Life Total:<br>
@@ -58,8 +58,16 @@
<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 id="gridShell">
<img id="menuButton" class="menuButton" src="data/life/menuButton.png" onclick="document.getElementById('menu').classList.remove('hidden')">
<div id="menu" class="menu hidden">
<img class="menuExitButton" src="data/life/menuExitButton.png" onclick="document.getElementById('menu').classList.add('hidden')">
<div class="menuInterior">
<div class="menuOption" onclick="resetLife()">Reset Life Totals</div><br>
<div class="menuOption" onclick="location.reload()">Change Player Count</div>
</div>
</div>
<div id="mainGrid" class="mainGrid"></div>
</div>
</body>
@@ -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;
}
</style>