Spaces:
Running
Running
<html lang="en"> | |
<head> | |
<title>ITSC - Cuckoosweepers</title> | |
<meta charset="UTF-8" /> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
<meta name="apple-mobile-web-app-capable" content="yes" /> | |
<link rel="apple-touch-icon" href="/icon.jpg" /> | |
<link rel="manifest" href="/manifest.json" /> | |
<style type="text/css"> | |
body { | |
font-family: AppleColorEmoji, 'Exo 2', sans-serif; | |
font-size: 15px; | |
text-align: center; | |
padding: 20px 0; | |
font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif; | |
} | |
span, input, a, div, button { | |
box-sizing: border-box; | |
} | |
.btn, .input { | |
padding: 12px 15px; | |
font-size: 0.65em; | |
border-radius: 3px; | |
color: #666; | |
font-weight: bold; | |
display: inline-block; | |
} | |
.btn { | |
background: #f7f7f7; | |
text-decoration: none; | |
text-transform: uppercase; | |
border: 0; | |
cursor: pointer; | |
margin-bottom: 10px; | |
letter-spacing: 1px; | |
} | |
.flex { | |
display: flex; | |
} | |
.flex-cell { | |
flex: 1 1 auto; | |
} | |
.action-btn { | |
margin-bottom: 10px; | |
background-color: transparent; | |
width: 100%; | |
display: block; | |
font-size: 1.2em; | |
padding: 10px; | |
border: 1px solid #eee; | |
text-decoration: none; | |
border-radius: 5px; | |
} | |
.action-btn:hover { | |
background-color: #f4f4f4; | |
} | |
.action-btn .emoji { | |
width: 20px; | |
height: 20px; | |
} | |
input[type=radio] { | |
margin: 0 5px 0 0; | |
} | |
input[type=number] { | |
padding-right: 5px; | |
} | |
.input { | |
border: 1px solid #e0e0e0; | |
} | |
.input-select { | |
width: 100%; | |
height: 40px; | |
padding: 12px; | |
font-size: 1em; | |
margin-bottom: 10px; | |
background: transparent; | |
} | |
.divider { | |
align-self: center; | |
flex: 0; | |
padding: 0 10px; | |
color: #999; | |
font-size: 0.65em; | |
} | |
.prepend-input { | |
padding: 7px 8px 6px 10px; | |
margin: 5px 0; | |
border-right: 1px solid #e0e0e0; | |
line-height: 1; | |
position: absolute; | |
} | |
.prepend-input + input { | |
width: 100%; | |
padding-left: 45px; | |
margin-bottom: 10px; | |
} | |
code { | |
display: none; | |
margin-top: 10px; | |
text-transform: none; | |
background-color: #fff; | |
padding: 2px 4px; | |
max-width: 400px; | |
text-align: left; | |
} | |
.cell .emoji { | |
width: 100%; | |
} | |
.cell { | |
-webkit-touch-callout: none; | |
width: 25px; | |
height: 25px; | |
font-size: 20px; | |
background-color: transparent; | |
border: 0; | |
display: inline-block; | |
position: relative; | |
padding: 2px 3px; | |
vertical-align: middle; | |
cursor: pointer; | |
} | |
.unmasked { | |
cursor: default; | |
} | |
#map { | |
white-space: nowrap; | |
} | |
.wrapper { | |
padding: 10px; | |
position: relative; | |
-webkit-user-select: none; | |
user-select: none; | |
border-radius: 10px; | |
margin-top: 10px; | |
border: 5px solid #f4f4f4; | |
display: inline-block; | |
min-width: 250px; | |
} | |
.won .default-emoji, | |
.lost .default-emoji { | |
display: none; | |
} | |
.won #map, | |
.lost #map { | |
pointer-events: none; | |
} | |
.lost { | |
box-shadow: 0 0 1px #f00; | |
} | |
.won { | |
box-shadow: 0 0 1px #1a1; | |
} | |
.bar { | |
margin: 10px -10px -10px; | |
background-color: #f4f4f4; | |
} | |
.stat { | |
width: 33.3%; | |
font-size: 0.85em; | |
padding: 8px 10px 5px; | |
text-align: center; | |
} | |
.small-text { | |
display: block; | |
color: #999; | |
margin-top: 5px; | |
font-size: 0.7em; | |
letter-spacing: 1px; | |
} | |
.settings { | |
position: absolute; | |
width: 40px; | |
height: 40px; | |
top: -20px; | |
right: -20px; | |
background-color: #f4f4f4; | |
text-align: center; | |
border-radius: 25px; | |
padding: 2px 8px; | |
border: 5px solid #fff; | |
cursor: pointer; | |
z-index: 1; | |
} | |
.s { | |
position: absolute; | |
width: 40px; | |
height: 40px; | |
top: -20px; | |
right: 250px; | |
background-color: #f4f4f4; | |
text-align: center; | |
border-radius: 25px; | |
padding: 2px 8px; | |
border: 5px solid #fff; | |
cursor: pointer; | |
z-index: 1; | |
} | |
.settings .emoji { | |
width: 15px; | |
margin: 6px 0; | |
} | |
.settings-popup { | |
margin-right: 10px; | |
display: none; | |
position: absolute; | |
} | |
.settings-popup button { | |
width: 100%; | |
margin: 0; | |
} | |
.settings-popup .flex { | |
margin-bottom: 10px; | |
} | |
.show { | |
display: block; | |
} | |
.settings-popup.show ~ * { | |
visibility: hidden; | |
} | |
.feedback { | |
font-size: 1px; | |
width: 1px; | |
height: 1px; | |
overflow: hidden; | |
position: absolute; | |
left: -1px; | |
top: -1px; | |
} | |
h1 { | |
margin: 0; | |
line-height: 1; | |
padding: 10px; | |
color: #251b19; | |
} | |
p { | |
margin: 0; | |
padding: 10px; | |
color: #251b19; | |
font-size: 1.2em; | |
} | |
a { | |
color: #e56633; | |
} | |
a:hover { | |
text-decoration: none; | |
} | |
/* the grid */ | |
.grid-1 { | |
display: grid; | |
width: 100%; | |
max-width: 770px; | |
margin: 10% auto; | |
grid-template-columns: 1fr; | |
grid-template-rows: auto 200px 200px auto 200px 200px 200px auto 200px 200px auto; | |
grid-gap: 25px; | |
} | |
/* panels */ | |
.panel { | |
color: white; | |
background-repeat: no-repeat; | |
background-position: center center; | |
background-size: cover; | |
box-shadow: 0 0px 0px 5px #251b19; | |
} | |
/* individual panels */ | |
.panel-title { | |
box-shadow: none; | |
} | |
.panel-1 { | |
background-image: url(/assets/1.svg); | |
box-shadow: none; | |
} | |
.panel-2 { | |
background-image: url(/assets/2.svg); | |
} | |
.panel-3 { | |
box-shadow: none; | |
} | |
.panel-4 { | |
background-image: url(/assets/3.svg); | |
} | |
.panel-5 { | |
background-image: url(/assets/4.svg); | |
} | |
.panel-6 { | |
background-image: url(/assets/5.svg); | |
} | |
.panel-7 { | |
box-shadow: none; | |
} | |
.panel-8 { | |
background-image: url(/assets/6.svg); | |
} | |
.panel-9 { | |
background-image: url(/assets/7.svg); | |
box-shadow: none; | |
} | |
.panel-copyright { | |
box-shadow: none; | |
font-size: .75em; | |
} | |
/* media query 1 */ | |
@media only screen and (min-width: 400px) { | |
.grid-1 { | |
grid-template-columns: repeat(2, 1fr); | |
grid-template-rows: auto 200px auto 200px 200px auto 200px auto; | |
} | |
.panel-title, | |
.panel-3, | |
.panel-6, | |
.panel-7, | |
.panel-copyright { | |
grid-column: span 2; | |
} | |
.panel-copyright { | |
text-align: right; | |
} | |
.panel-7 { | |
text-align: center; | |
} | |
h1 { | |
font-size: 3em; | |
} | |
} | |
/* media query 2 */ | |
@media only screen and (min-width: 600px) { | |
.grid-1 { | |
grid-template-columns: repeat(3, 1fr); | |
grid-template-rows: auto 200px 200px 200px auto; | |
} | |
.panel-title, | |
.panel-copyright { | |
grid-column: span 3; | |
} | |
.panel-3, | |
.panel-6 { | |
grid-column: auto; | |
} | |
.panel-8 { | |
grid-column: span 2; | |
} | |
h1 { | |
font-size: 3.5em; | |
} | |
p { | |
font-size: 1.3em; | |
} | |
/* flexbox centering */ | |
.panel-3 { | |
display: flex; | |
align-items: center; | |
} | |
/* layering */ | |
.panel-7 { | |
grid-column: 1; | |
grid-row: 4; | |
z-index: 1; | |
margin: -5px 0 0 -10px; | |
transform: rotate(-2deg); | |
} | |
.panel-7 p { | |
background: #f8f7f2; | |
box-shadow: 0 0px 0px 5px #251b19; | |
text-align: left; | |
} | |
.panel-8 { | |
grid-column: 1 / span 2; | |
grid-row: 4; | |
background-size: 70%; | |
background-position: right; | |
} | |
} | |
</style> | |
</head> | |
<body> | |
<div class="wrapper"> | |
<button type="button" class="settings" aria-haspopup="true" aria-expanded="false" aria-label="Settings" id="show-introduction">❓</button> | |
<button type="button" class="s" aria-haspopup="true" aria-expanded="false" aria-label="s" id="showpopup">📖</button> | |
<div class="js-settings-popup settings-popup"> | |
<div class="flex"> | |
<label class="btn flex-cell" aria-label="Use Twitter Emoji"><input type="radio" name="emoji" id="twemoji" > Twemoji</label> | |
<label class="btn flex-cell" aria-label="Use Native Emoji"><input type="radio" name="emoji" id="emoji"> Native emoji</label> | |
</div> | |
<div class="flex"> | |
<input id="cols" class="input flex-cell" type="number" value="10" min="1" max="500" aria-label="Columns"> | |
<div class="flex-cell divider">×</div> | |
<input id="rows" class="input flex-cell" type="number" value="10" min="1" max="500" aria-label="Rows"><br> | |
</div> | |
<div class="prepend-input">💣</div> | |
<input id="bombs" class="input" type="number" value="10" min="1" max="2500" aria-label="Number of bombs"> | |
<select id="emojiset" class="input input-select" aria-label="Change emoji set"> | |
<option value="🐣 🐦⬛ 🧹 ◻️">🐣 🐦⬛ 🧹</option> | |
<option value="⭐ 💣 🚩 ◻️">⭐ 💣 🚩</option> | |
</select> | |
<button class="js-popup-new-game btn" type="button">Save and restart game</button> | |
</div> | |
<button type="button" class="action-btn js-new-game" aria-label="New game"> | |
<span class="default-emoji"></span> | |
<span id="result" class="result-emoji"></span> | |
</button> | |
<div id="map" role="grid" aria-label="Mine field"></div> | |
<div class="bar flex"> | |
<div class="stat flex-cell"><div id="bombs-left">10</div><span class="small-text">BOMBS</span></div> | |
<div class="stat flex-cell"><div id="moves"></div><span class="small-text">MOVES</span></div> | |
<div class="stat flex-cell"><div id="timer"></div><span class="small-text">TIME</span></div> | |
</div> | |
</div> | |
<div aria-live="assertive" class="feedback"></div> | |
<script src="/game.js"></script> | |
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script> | |
<script > | |
let emojiset = document.getElementById('emojiset').value.split(' '); | |
let cols = document.getElementById('cols'); | |
let rows = document.getElementById('rows'); | |
let bombs = document.getElementById('bombs'); | |
let game = new Game(cols.value, rows.value, bombs.value, emojiset, document.getElementById('twemoji').checked); | |
document.querySelector('.js-new-game').addEventListener('click', restart); | |
document.querySelector('.js-popup-new-game').addEventListener('click', restart); | |
document.querySelector('.js-settings').addEventListener('click', function() { | |
const list = document.querySelector('.js-settings-popup').classList; | |
list.contains('show') ? list.remove('show') : list.add('show'); | |
this.setAttribute('aria-expanded', list.contains('show')); | |
}); | |
function restart() { | |
clearInterval(game.timer); | |
emojiset = document.getElementById('emojiset').value.split(' '); | |
game = new Game(cols.value, rows.value, bombs.value, emojiset, document.getElementById('twemoji').checked); | |
document.querySelector('.js-settings-popup').classList.remove('show'); | |
return false; | |
} | |
</script> | |
<script> | |
if ('serviceWorker' in navigator) { | |
window.addEventListener('load', () => { | |
navigator.serviceWorker.register('sw.js') | |
.then(registration => { | |
console.log('Service Worker registered with scope:', registration.scope); | |
}) | |
.catch(error => { | |
console.error('Service Worker registration failed:', error); | |
}); | |
}); | |
} | |
</script> | |
</body> | |
</html> |