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> |