Cuckoosweepers / index.html
Zok213
fix
90c9e35
<!DOCTYPE html>
<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">&times;</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>