Upload 7 files

docker-compose.yml

@@ -0,0 +1,8 @@
+version: '3'
+services:
+  web:
+    build: .
+    ports:
+      - "7860:80"
+    volumes:
+      - ./:/usr/share/nginx/html

dockerfile

@@ -0,0 +1,9 @@
+FROM nginx:alpine
+
+RUN rm -rf /usr/share/nginx/html/*
+
+COPY ./ /usr/share/nginx/html
+
+EXPOSE 7860
+
+CMD ["nginx", "-g", "daemon off;"]

game.js

@@ -0,0 +1,285 @@
+let isMacOS = false;
+const isBrowser = typeof window !== 'undefined' && typeof document !== 'undefined';
+
+let iDevice = false;
+if (isBrowser && navigator.platform) {
+  iDevice = navigator.platform.match(/^iP/); 
+}
+
+if (isBrowser) {
+  const os = navigator.platform.toLowerCase();
+  isMacOS = os.includes('mac');
+  console.log(isMacOS ? "Running on macOS or iOS." : "Running in a browser environment.");
+}
+
+const numbers = ['1️⃣', '2️⃣', '3️⃣', '4️⃣', '5️⃣', '6️⃣', '7️⃣', '8️⃣'];
+
+let feedback;
+if (isBrowser) {
+  feedback = document.querySelector('.feedback');
+}
+
+class Game {
+  constructor(cols, rows, number_of_bombs, set) {
+    this.cols = Number(cols);
+    this.rows = Number(rows);
+    this.number_of_bombs = Number(number_of_bombs);
+    this.number_of_cells = this.cols * this.rows;
+
+    this.map = isBrowser ? document.getElementById('map') : null;
+
+    if (this.number_of_cells > 2500 || this.number_of_bombs >= this.number_of_cells) {
+      alert('Invalid game size or bomb count');
+      return;
+    }
+
+    this.emojiset = set;
+    this.numbermoji = [this.emojiset[0]].concat(numbers);
+    this.usetwemoji = false;
+    this.init();
+  }
+
+  init() {
+    if (!isBrowser) return;
+
+    this.prepareEmoji();
+    this.map.innerHTML = '';
+    const grid_data = this.bomb_array();
+
+    let row = document.createElement('div');
+    row.classList.add('row');
+
+    grid_data.forEach((isBomb, i) => {
+      const cell = this.createCell(i, isBomb, grid_data);
+      row.appendChild(cell);
+
+      if ((i + 1) % this.cols === 0) {
+        this.map.appendChild(row);
+        row = document.createElement('div');
+        row.classList.add('row');
+      }
+    });
+
+    this.resetMetadata();
+    this.bindEvents();
+    this.updateBombsLeft();
+  }
+
+  createCell(i, isBomb, grid_data) {
+    const cellWrapper = document.createElement('span');
+    cellWrapper.classList.add('cell-wrapper');
+
+    const x = (i % this.cols) + 1;
+    const y = Math.ceil((i + 1) / this.cols);
+    const neighbors_coords = this.getNeighbors(x, y);
+
+    const mine = this.mine(isBomb, neighbors_coords, grid_data, x, y);
+    cellWrapper.appendChild(mine);
+
+    return cellWrapper;
+  }
+
+  getNeighbors(x, y) {
+    return [
+      [x, y - 1], [x, y + 1],
+      [x - 1, y - 1], [x - 1, y], [x - 1, y + 1],
+      [x + 1, y - 1], [x + 1, y], [x + 1, y + 1]
+    ];
+  }
+
+  mine(isBomb, neighbors_coords, grid_data, x, y) {
+    const mine = document.createElement('button');
+    mine.type = 'button';
+    mine.className = `cell x${x} y${y}`;
+    mine.isMasked = true;
+    mine.isBomb = isBomb;
+    mine.isFlagged = false;
+
+    if (!isBomb) {
+      const neighbors = neighbors_coords.map(([nx, ny]) => this.getIndex(nx, ny) !== -1 ? grid_data[this.getIndex(nx, ny)] : false);
+      mine.mine_count = neighbors.filter(Boolean).length;
+    }
+
+    mine.reveal = this.reveal.bind(this, mine);
+    mine.appendChild(document.createTextNode(this.emojiset[3]));
+
+    return mine;
+  }
+
+  reveal(mine, won = false) {
+    const emoji = mine.isBomb ? (won ? this.emojiset[2] : this.emojiset[1]) : this.numbermoji[mine.mine_count];
+    const text = mine.isBomb ? (won ? "Bomb discovered" : "Boom!") : (mine.mine_count === 0 ? "Empty field" : `${mine.mine_count} bombs nearby`);
+
+    mine.innerHTML = emoji;
+    mine.setAttribute('aria-label', text);
+    mine.isMasked = false;
+    mine.classList.add('unmasked');
+
+    if (mine.mine_count === 0 && !mine.isBomb) {
+      this.revealNeighbors(mine);
+    }
+  }
+
+  getIndex(x, y) {
+    return x > this.cols || x <= 0 || y > this.rows || y <= 0 ? -1 : this.cols * (y - 1) + (x - 1);
+  }
+
+  revealNeighbors(mine) {
+    const x = parseInt(mine.classList[1].substring(1));  
+    const y = parseInt(mine.classList[2].substring(1));  
+
+    const neighbors_coords = this.getNeighbors(x, y);
+
+    neighbors_coords.forEach(([nx, ny]) => {
+      const neighbor = document.querySelector(`.x${nx}.y${ny}`);
+      if (neighbor && neighbor.isMasked && !neighbor.isFlagged) {
+        neighbor.reveal();
+      }
+    });
+  }
+
+  bindEvents() {
+    if (!isBrowser) return;
+
+    Array.from(document.getElementsByClassName('cell')).forEach(cell => {
+      cell.addEventListener('click', evt => this.onClick(cell, evt));
+      cell.addEventListener('dblclick', () => this.onDoubleClick(cell));
+      cell.addEventListener('contextmenu', evt => this.onRightClick(cell, evt));
+
+      if (iDevice) {
+        cell.addEventListener('touchstart', () => {
+          this.holding = setTimeout(() => cell.dispatchEvent(new Event('contextmenu')), 500);
+        });
+        cell.addEventListener('touchend', () => clearTimeout(this.holding));
+      }
+    });
+
+    window.addEventListener('keydown', evt => {
+      if (evt.key === 'r' || evt.key === 'R') {
+        this.restart();
+      }
+    });
+  }
+
+  onClick(cell, evt) {
+    if (!cell.isMasked || cell.isFlagged) return;
+    if (document.getElementsByClassName('unmasked').length === 0) {
+      this.startTimer();
+    }
+
+    if (cell.isBomb) {
+      this.reveal(cell);
+      this.checkGameStatus();
+      return;
+    }
+
+    cell.reveal();
+    this.updateFeedback(cell.getAttribute('aria-label'));
+    if (cell.mine_count === 0 && !cell.isBomb) this.revealNeighbors(cell);
+    this.checkGameStatus();
+  }
+
+  onDoubleClick(cell) {
+    if (cell.isFlagged) return;
+    this.moveIt();
+    cell.reveal();
+    this.revealNeighbors(cell);
+    this.checkGameStatus();
+  }
+
+  onRightClick(cell, evt) {
+    evt.preventDefault();
+    if (!cell.isMasked) return;
+    cell.isFlagged = !cell.isFlagged;
+    const emoji = cell.isFlagged ? this.emojiset[2] : this.emojiset[3];
+    const label = cell.isFlagged ? 'Flagged as potential bomb' : 'Field';
+
+    cell.innerHTML = emoji;
+    cell.setAttribute('aria-label', label);
+    this.updateFeedback(cell.isFlagged ? 'Flagged as potential bomb' : 'Unflagged as potential bomb');
+    this.updateBombsLeft();
+  }
+
+  checkGameStatus() {
+    const cells = document.getElementsByClassName('cell');
+    const masked = Array.from(cells).filter(cell => cell.isMasked);
+    const bombs = Array.from(cells).filter(cell => cell.isBomb && !cell.isMasked);
+
+    if (bombs.length > 0) {
+      masked.forEach(cell => cell.reveal());
+      this.endGame('lost');
+    } else if (masked.length === this.number_of_bombs) {
+      masked.forEach(cell => cell.reveal(true));
+      this.endGame('won');
+    }
+  }
+
+  endGame(result) {
+    this.result = result;
+    this.showMessage();
+    clearInterval(this.timer);
+  }
+
+  bomb_array() {
+    const data = Array(this.number_of_cells).fill(false);
+    for (let i = 0; i < this.number_of_bombs; i++) data[i] = true;
+    return data.sort(() => Math.random() - 0.5);
+  }
+
+  resetMetadata() {
+    document.getElementById('timer').textContent = '0.00';
+    document.getElementById('bombs').textContent = this.number_of_bombs;
+    document.getElementById('moves').textContent = '0';
+    document.querySelector('.wrapper').classList.remove('won', 'lost');
+    document.querySelector('.result-emoji').textContent = '';
+    document.querySelector('.default-emoji').textContent = 'Cuckoosweepers 🐦‍⬛🧹';
+    document.querySelector('.js-settings').style.display = 'none';
+  }
+
+  updateBombsLeft() {
+    const bombsLeft = this.number_of_bombs - document.querySelectorAll('.cell[aria-label="Flagged as potential bomb"]').length;
+    document.getElementById('bombs').textContent = bombsLeft;
+  }
+
+  updateFeedback(text) {
+    if (feedback) {
+      feedback.textContent = text;
+    }
+  }
+
+  prepareEmoji() {
+  }
+
+  restart() {
+    clearInterval(this.timer);
+    this.timer = null;
+    this.result = null;
+    this.init();
+  }
+
+  showMessage() {
+    const wrapper = document.querySelector('.wrapper');
+    const resultEmoji = document.querySelector('.result-emoji');
+    wrapper.classList.add(this.result);
+    resultEmoji.textContent = this.result === 'won' ? 'You won!!! 😎' : 'You lost... 😵';
+  }
+
+  moveIt() {
+    this.moves = (this.moves || 0) + 1;
+    document.getElementById('moves').textContent = this.moves;
+  }
+
+  startTimer() {
+    if (this.timer) return;
+    this.startTime = new Date();
+    this.timer = setInterval(() => {
+      const elapsed = ((new Date() - this.startTime) / 1000).toFixed(2);
+      document.getElementById('timer').textContent = elapsed;
+    }, 100);
+  }
+}
+
+// document.addEventListener('DOMContentLoaded', () => {
+//   const emojiSet = ['🐣', '🐦‍⬛', '🧹', '⬜']; 
+//   const game = new Game(10, 10, 10, emojiSet); 
+// });

index.html

@@ -1,19 +1,329 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>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;
+      }
+
+      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;
+      }
+
+      .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;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="wrapper">
+      <button type="button" class="settings js-settings" aria-haspopup="true" aria-expanded="false" aria-label="Settings"></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" checked> 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 >
+      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>

manifest.json

@@ -0,0 +1,23 @@
+{
+  "short_name": "Cuckoosweepers",
+  "name": "Cuckoosweepers",
+  "start_url": "/",
+  "display": "standalone",
+  "background_color": "#ffffff",
+  "theme_color": "#000000",
+  "icons": [
+    {
+      "src": "/icon.jpg",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "/icon.jpg",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "scope": "/",
+  "orientation": "portrait-primary",
+  "description": "A fun Minesweeper-like game for all devices."
+}

sw.js

@@ -0,0 +1,50 @@
+const CACHE_NAME = 'cuckoosweepers-v2'; 
+const urlsToCache = [
+  '/',
+  '/index.html',
+  '/game.js',      
+  '/icon.jpg', 
+  '/manifest.json',
+];
+
+self.addEventListener('install', event => {
+  event.waitUntil(
+    caches.open(CACHE_NAME).then(cache => {
+      console.log('Opened cache');
+      return cache.addAll(urlsToCache).catch(error => {
+        console.error('Failed to cache resources:', error);
+      });
+    })
+  );
+});
+
+self.addEventListener('fetch', event => {
+  event.respondWith(
+    caches.match(event.request).then(response => {
+      if (response) {
+        console.log('Serving from cache:', event.request.url);
+        return response;
+      }
+      console.log('Fetching from network:', event.request.url);
+      return fetch(event.request);
+    }).catch(error => {
+      console.error('Fetch failed:', error);
+    })
+  );
+});
+
+self.addEventListener('activate', event => {
+  const cacheWhitelist = [CACHE_NAME];
+  event.waitUntil(
+    caches.keys().then(cacheNames => {
+      return Promise.all(
+        cacheNames.map(cacheName => {
+          if (!cacheWhitelist.includes(cacheName)) {
+            console.log('Deleting old cache:', cacheName);
+            return caches.delete(cacheName);
+          }
+        })
+      );
+    })
+  );
+});