Add UPTIME favicon, add mobile PWA meta, tags and manifest links

games/uptime/favicon/favicon.svg

@@ -0,0 +1,39 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+  <defs>
+    <linearGradient id="bg" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0" stop-color="#0b0f0d"/>
+      <stop offset="1" stop-color="#030705"/>
+    </linearGradient>
+    <filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
+      <feGaussianBlur stdDeviation="1.4" result="blur"/>
+      <feMerge>
+        <feMergeNode in="blur"/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+    </filter>
+  </defs>
+
+  <!-- background -->
+  <rect x="0" y="0" width="64" height="64" rx="10" fill="url(#bg)"/>
+  <rect x="1.5" y="1.5" width="61" height="61" rx="9" fill="none" stroke="#173a2a" stroke-width="1.5"/>
+
+  <!-- rack unit 1 (nominal) -->
+  <rect x="12" y="12" width="40" height="9" rx="1.5" fill="none" stroke="#22c55e" stroke-width="2"/>
+  <circle cx="17.5" cy="16.5" r="1.6" fill="#22c55e" filter="url(#glow)"/>
+  <line x1="24" y1="16.5" x2="46" y2="16.5" stroke="#1c4a34" stroke-width="1.6"/>
+
+  <!-- rack unit 2 (incident / alert, red glow) -->
+  <rect x="12" y="24.5" width="40" height="9" rx="1.5" fill="#3a0a0a" stroke="#ff3b3b" stroke-width="2.2" filter="url(#glow)"/>
+  <circle cx="17.5" cy="29" r="1.8" fill="#ff3b3b" filter="url(#glow)"/>
+  <line x1="24" y1="29" x2="46" y2="29" stroke="#7a1414" stroke-width="1.6"/>
+
+  <!-- rack unit 3 (nominal) -->
+  <rect x="12" y="37" width="40" height="9" rx="1.5" fill="none" stroke="#22c55e" stroke-width="2"/>
+  <circle cx="17.5" cy="41.5" r="1.6" fill="#22c55e" filter="url(#glow)"/>
+  <line x1="24" y1="41.5" x2="46" y2="41.5" stroke="#1c4a34" stroke-width="1.6"/>
+
+  <!-- uptime pulse line across the bottom -->
+  <polyline points="8,54 20,54 24,47 28,58 32,50 36,54 56,54"
+            fill="none" stroke="#39ff88" stroke-width="2.2"
+            stroke-linecap="round" stroke-linejoin="round" filter="url(#glow)"/>
+</svg>

games/uptime/manifest.webmanifest

@@ -0,0 +1,33 @@
+{
+  "name": "UPTIME: Incident Response",
+  "short_name": "UPTIME",
+  "description": "Survive a datacenter night shift by choosing the right incident response.",
+  "id": "uptime-incident-response.html",
+  "start_url": "uptime-incident-response.html",
+  "scope": "./",
+  "display": "standalone",
+  "orientation": "landscape",
+  "background_color": "#04060c",
+  "theme_color": "#04060c",
+  "categories": ["games"],
+  "icons": [
+    {
+      "src": "favicon/favicon.svg",
+      "sizes": "any",
+      "type": "image/svg+xml",
+      "purpose": "any"
+    },
+    {
+      "src": "favicon/favicon-192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "favicon/favicon-512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "any"
+    }
+  ]
+}

games/uptime/uptime-incident-response.html

@@ -4,6 +4,18 @@
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>UPTIME: Incident Response</title>
+<meta name="theme-color" content="#04060c">
+<meta name="mobile-web-app-capable" content="yes">
+<meta name="apple-mobile-web-app-capable" content="yes">
+<meta name="apple-mobile-web-app-title" content="UPTIME">
+<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+<link rel="manifest" href="manifest.webmanifest">
+<link rel="icon" href="favicon/favicon.svg" type="image/svg+xml">
+<link rel="icon" href="favicon/favicon.ico" sizes="any">
+<link rel="icon" href="favicon/favicon-16.png" type="image/png" sizes="16x16">
+<link rel="icon" href="favicon/favicon-32.png" type="image/png" sizes="32x32">
+<link rel="icon" href="favicon/favicon-192.png" type="image/png" sizes="192x192">
+<link rel="apple-touch-icon" href="favicon/favicon-180.png" sizes="180x180">
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap" rel="stylesheet">
 <style>
@@ -1234,6 +1246,12 @@ function endGame(won=false){
 state = freshState();
 render();
 setDifficulty(selectedDifficulty);
+
+if ('serviceWorker' in navigator) {
+  window.addEventListener('load', () => {
+    navigator.serviceWorker.register('../../sw.js');
+  });
+}
 </script>
 </body>
 </html>

index.html

@@ -4,6 +4,18 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>SysAdmin Arcade</title>
+  <meta name="theme-color" content="#030712">
+  <meta name="mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-title" content="SysAdmin Arcade">
+  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+  <link rel="manifest" href="manifest.webmanifest">
+  <link rel="icon" href="games/uptime/favicon/favicon.svg" type="image/svg+xml">
+  <link rel="icon" href="games/uptime/favicon/favicon.ico" sizes="any">
+  <link rel="icon" href="games/uptime/favicon/favicon-16.png" type="image/png" sizes="16x16">
+  <link rel="icon" href="games/uptime/favicon/favicon-32.png" type="image/png" sizes="32x32">
+  <link rel="icon" href="games/uptime/favicon/favicon-192.png" type="image/png" sizes="192x192">
+  <link rel="apple-touch-icon" href="games/uptime/favicon/favicon-180.png" sizes="180x180">
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap" rel="stylesheet">
@@ -666,6 +678,12 @@
         gameCount.textContent = '?';
         gameGrid.innerHTML = '<div class="empty-state">Could not load <code>games.json</code>. Serve this directory over HTTP and check the manifest path.</div>';
       });
+
+    if ('serviceWorker' in navigator) {
+      window.addEventListener('load', () => {
+        navigator.serviceWorker.register('sw.js');
+      });
+    }
   </script>
 </body>
 </html>

manifest.webmanifest

@@ -0,0 +1,33 @@
+{
+  "name": "SysAdmin Arcade",
+  "short_name": "Arcade",
+  "description": "A browser arcade for sysadmins, with installable games for quick maintenance-window breaks.",
+  "id": "./",
+  "start_url": "./",
+  "scope": "./",
+  "display": "standalone",
+  "orientation": "any",
+  "background_color": "#030712",
+  "theme_color": "#030712",
+  "categories": ["games", "entertainment"],
+  "icons": [
+    {
+      "src": "games/uptime/favicon/favicon.svg",
+      "sizes": "any",
+      "type": "image/svg+xml",
+      "purpose": "any"
+    },
+    {
+      "src": "games/uptime/favicon/favicon-192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "games/uptime/favicon/favicon-512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "any"
+    }
+  ]
+}

sw.js

@@ -0,0 +1,79 @@
+const CACHE_NAME = 'sysadmin-arcade-v1';
+
+const PRECACHE_URLS = [
+  './',
+  './index.html',
+  './games.json',
+  './manifest.webmanifest',
+  './games/uptime/uptime-incident-response.html',
+  './games/uptime/manifest.webmanifest',
+  './games/uptime/favicon/favicon.svg',
+  './games/uptime/favicon/favicon.ico',
+  './games/uptime/favicon/favicon-16.png',
+  './games/uptime/favicon/favicon-32.png',
+  './games/uptime/favicon/favicon-180.png',
+  './games/uptime/favicon/favicon-192.png',
+  './games/uptime/favicon/favicon-512.png'
+];
+
+const cacheUrl = (path) => new URL(path, self.registration.scope).href;
+
+self.addEventListener('install', (event) => {
+  event.waitUntil(
+    caches.open(CACHE_NAME)
+      .then((cache) => cache.addAll(PRECACHE_URLS.map(cacheUrl)))
+      .then(() => self.skipWaiting())
+  );
+});
+
+self.addEventListener('activate', (event) => {
+  event.waitUntil(
+    caches.keys()
+      .then((keys) => Promise.all(
+        keys
+          .filter((key) => key !== CACHE_NAME)
+          .map((key) => caches.delete(key))
+      ))
+      .then(() => self.clients.claim())
+  );
+});
+
+self.addEventListener('fetch', (event) => {
+  const { request } = event;
+  const url = new URL(request.url);
+
+  if (request.method !== 'GET' || url.origin !== self.location.origin) return;
+
+  if (request.mode === 'navigate') {
+    event.respondWith(
+      fetch(request)
+        .then((response) => {
+          const responseCopy = response.clone();
+          caches.open(CACHE_NAME).then((cache) => cache.put(request, responseCopy));
+          return response;
+        })
+        .catch(async () => {
+          const fallback = url.pathname.includes('/games/uptime/')
+            ? './games/uptime/uptime-incident-response.html'
+            : './index.html';
+
+          return await caches.match(request) || await caches.match(cacheUrl(fallback));
+        })
+    );
+    return;
+  }
+
+  event.respondWith(
+    caches.match(request).then((cachedResponse) => {
+      if (cachedResponse) return cachedResponse;
+
+      return fetch(request).then((response) => {
+        if (!response || response.status !== 200 || response.type !== 'basic') return response;
+
+        const responseCopy = response.clone();
+        caches.open(CACHE_NAME).then((cache) => cache.put(request, responseCopy));
+        return response;
+      });
+    })
+  );
+});