This commit is contained in:
Kyle
2019-08-18 16:27:07 -07:00
parent 3101179d9e
commit c6d9fd82bb
3 changed files with 213 additions and 13 deletions

192
data/life/NoSleep.js Normal file

File diff suppressed because one or more lines are too long

View File

@@ -2,7 +2,13 @@
// Card Conjurer, by Kyle Burton // // Card Conjurer, by Kyle Burton //
//============================================// //============================================//
//define variables //define variables
var playerCount, startingLifeTotal, firstPlayerWide = false, lastPlayerWide = false, playerList = [], rowHeight = 0, columnWidth = 0, rowCount = 0, isFullscreen = true, mouseClickId = 0 var playerCount, startingLifeTotal, firstPlayerWide = false, lastPlayerWide = false, playerList = [], rowHeight = 0, columnWidth = 0, rowCount = 0, isFullscreen = true, mouseClickId = 0, noSleep = new NoSleep()
//Setup the enabler for no sleep
document.addEventListener("click", enableNoSleep, false);
function enableNoSleep() {
document.removeEventListener("click", enableNoSleep, false);
noSleep.enable();
}
//This function sets everything up //This function sets everything up
function fullscreen() { function fullscreen() {
//Full screen! //Full screen!
@@ -265,14 +271,7 @@ function moveTouch() {
touchY[i] = event.touches[i].clientY touchY[i] = event.touches[i].clientY
} }
} }
//Attempt at getting past webkit's really annoying double tap zoom. Because it's been five years and they haven't added support for css's touch-action. Because I'm sure they have a really good excuse...
var lastTouchEnd = 0
function endTouch() { function endTouch() {
var now = (new Date()).getTime()
if (now - lastTouchEnd <= 300) {
event.preventDefault()
}
lastTouchEnd = now
for (var i = 1; i <= playerList.length; i++) { for (var i = 1; i <= playerList.length; i++) {
if (playerList[i - 1].touchId == event.changedTouches[0].identifier) { if (playerList[i - 1].touchId == event.changedTouches[0].identifier) {
playerList[i - 1].touchId = 0.5 playerList[i - 1].touchId = 0.5

View File

@@ -53,7 +53,8 @@
<input id="inputPlayerCount" class="input" type="number" min="2" value="4" max="16"><br> <input id="inputPlayerCount" class="input" type="number" min="2" value="4" 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><br><br> <button id="buttonStartGame" class="input" onclick="startGame()">Game On!</button><br>
<input type="checkbox" id="inputWakeLock" checked="true">Enable Wake Lock</input><br><br>
For an optimal experience, save this website to your home screen and open it from there.<br><br><div style="font-size: 0.75em">Check out my other website, <a style="font-size: inherit" href="https://cardconjurer.com">Card Conjurer</a>, to easily create custom Magic cards!</div> For an optimal experience, save this website to your home screen and open it from there.<br><br><div style="font-size: 0.75em">Check out my other website, <a style="font-size: inherit" href="https://cardconjurer.com">Card Conjurer</a>, to easily create custom Magic cards!</div>
</div> </div>
</div> </div>
@@ -124,6 +125,7 @@
body { body {
background-color: #333; background-color: #333;
color: white; color: white;
touch-action: manipulation;
} }
.mainGrid { .mainGrid {
display: grid; display: grid;
@@ -131,7 +133,7 @@
grid-auto-rows: 1fr; grid-auto-rows: 1fr;
width: 100%; width: 100%;
height: 100%; height: 100%;
/*align-items: center;*/ touch-action: manipulation;
} }
.mainGrid { .mainGrid {
/*position: fixed; /*position: fixed;
@@ -140,6 +142,7 @@
} }
#gridShell { #gridShell {
display: none; display: none;
touch-action: manipulation;
} }
#gridShell:fullscreen { #gridShell:fullscreen {
display: inline-block; display: inline-block;
@@ -225,6 +228,13 @@
input { input {
width: 7.5em; width: 7.5em;
} }
#inputWakeLock {
position: relative;
top: -0.2em;
margin: 0.25em;
height: auto;
width: auto;
}
.smallInput { .smallInput {
width: 3em; width: 3em;
} }
@@ -242,9 +252,8 @@
a { a {
color: white; color: white;
} }
/*a:hover {
color: grey;
}*/
</style> </style>
<script src="data/life/NoSleep.js"></script>
<script src="https://gist.github.com/lucasdidthis/8a2ecf406634e9ad9ca1.js"></script>
<script src="data/life/life.js"></script> <script src="data/life/life.js"></script>
<html> <html>