PWA polish and keyboard shortcuts help

index.html

@@ -10,7 +10,7 @@
     <link rel="icon" href="img/icon-144x144.png" />
     <link rel="manifest" href="manifest.json" />
     <link rel="stylesheet" href="src/style.css" />
-    <meta name="theme-color" content="#3d5b88" />
+    <meta name="theme-color" content="#000000" />
     <meta
       name="description"
       content="Explore infinite fractals in the Mandelbrot set. Discover beautiful downloadable images and share locations with friends—all with simple, fun controls."
@@ -34,7 +34,7 @@
     <header>
       <div class="header-brand-row">
         <h1>Fractious</h1>
-        <span class="version">v20260924a</span>
+        <span class="version">v20260924b</span>
         <div class="header-links">
           <a href="https://rowan.fyi" aria-label="Website rowan.fyi"
             ><span aria-hidden="true">🌐</span> rowan.fyi</a
@@ -317,10 +317,47 @@ <h1>Fractious</h1>
                 ><span aria-hidden="true">🔁</span></a
               >
             </fieldset>
+            <fieldset class="help">
+              <button
+                type="button"
+                popovertarget="shortcuts"
+                title="Keyboard shortcuts (?)"
+                aria-label="Keyboard shortcuts"
+                id="btn-help"
+              >
+                <span aria-hidden="true">⌨️</span>
+              </button>
+            </fieldset>
           </div>
         </form>
       </nav>
     </footer>
+    <div id="shortcuts" popover aria-labelledby="shortcuts-title">
+      <h2 id="shortcuts-title">Keyboard shortcuts</h2>
+      <dl>
+        <dt>
+          <kbd>W</kbd> <kbd>A</kbd> <kbd>S</kbd> <kbd>D</kbd> / <kbd>←</kbd>
+          <kbd>↑</kbd> <kbd>→</kbd> <kbd>↓</kbd>
+        </dt>
+        <dd>Move</dd>
+        <dt><kbd>Q</kbd> <kbd>E</kbd> / <kbd>-</kbd> <kbd>+</kbd></dt>
+        <dd>Zoom out / in</dd>
+        <dt><kbd>Z</kbd> <kbd>X</kbd></dt>
+        <dd>Rotate anticlockwise / clockwise</dd>
+        <dt><kbd>R</kbd> <kbd>T</kbd></dt>
+        <dd>Shift colours left / right</dd>
+        <dt><kbd>F</kbd> <kbd>G</kbd></dt>
+        <dd>Decrease / increase colour cycling</dd>
+        <dt>Scroll</dt>
+        <dd>Zoom at cursor</dd>
+        <dt>Double-click</dt>
+        <dd>Zoom in at cursor (<kbd>Shift</kbd> to zoom out)</dd>
+        <dt><kbd>Shift</kbd> + drag / scroll</dt>
+        <dd>Rotate</dd>
+        <dt><kbd>?</kbd></dt>
+        <dd>Show / hide this help</dd>
+      </dl>
+    </div>
     <script type="module" src="src/main.js"></script>
   </body>
 </html>

public/manifest.json

@@ -6,8 +6,8 @@
   "scope": ".",
   "display": "standalone",
   "start_url": ".",
-  "background_color": "#3d5b88",
-  "theme_color": "#3d5b88",
+  "background_color": "#000000",
+  "theme_color": "#000000",
   "description": "Explore infinite fractals in the Mandelbrot set. Discover beautiful downloadable images and share locations with friends—all with simple, fun controls.",
   "categories": ["education", "entertainment"],
   "orientation": "any",
@@ -36,7 +36,7 @@
       "src": "./img/icon-144x144.png",
       "sizes": "144x144",
       "type": "image/png",
-      "purpose": "any maskable"
+      "purpose": "any"
     },
     {
       "src": "./img/icon-152x152.png",
@@ -48,19 +48,31 @@
       "src": "./img/icon-192x192.png",
       "sizes": "192x192",
       "type": "image/png",
-      "purpose": "any maskable"
+      "purpose": "any"
     },
     {
       "src": "./img/icon-384x384.png",
       "sizes": "384x384",
       "type": "image/png",
-      "purpose": "any maskable"
+      "purpose": "any"
+    },
+    {
+      "src": "./img/icon-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "./img/icon-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "maskable"
     },
     {
       "src": "./img/icon-512x512.png",
       "sizes": "512x512",
       "type": "image/png",
-      "purpose": "any maskable"
+      "purpose": "maskable"
     }
   ],
   "screenshots": [

src/InteractionManager.js

@@ -400,6 +400,7 @@ export class InteractionManager {
       ['t', hueInc],
       ['f', hueStepDec],
       ['g', hueStepInc],
+      ['?', () => this.el.shortcuts?.togglePopover?.()],
     ]);
   }
 

src/InteractionManager.test.js

@@ -92,6 +92,17 @@ describe('InteractionManager updateUI', () => {
     expect(elements.inputs.c_re.value).toBe('1.5');
   });
 
+  it('should toggle the shortcuts popover on ? without interacting with the fractal', () => {
+    elements.shortcuts = { togglePopover: vi.fn() };
+    const preventDefault = vi.fn();
+
+    interactionManager.handleKeyDown({ key: '?', preventDefault });
+
+    expect(elements.shortcuts.togglePopover).toHaveBeenCalledTimes(1);
+    expect(preventDefault).toHaveBeenCalled();
+    expect(callbacks.onInteract).not.toHaveBeenCalled();
+  });
+
   it('should normalize negative rotation angles into [0, 360) degrees', () => {
     config.rotation = -Math.PI / 4; // -45 degrees -> 315.0
     interactionManager.updateUI();

src/main.js

@@ -13,6 +13,7 @@ const elements = {
   bgCanvas: document.getElementById('fractal-bg'),
   crosshair: document.getElementById('crosshair'),
   iterIcon: document.getElementById('iter-icon'),
+  shortcuts: document.getElementById('shortcuts'),
   inputs: {
     c_re: document.getElementById('c_re'),
     c_im: document.getElementById('c_im'),

src/style.css

@@ -301,3 +301,50 @@ footer {
     display: none; /* Hide verbose link text but keep the visual icons visible */
   }
 }
+
+#shortcuts {
+  color: #cbd5e1;
+  background-color: rgba(10, 10, 15, 0.85);
+  backdrop-filter: blur(8px);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 12px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
+  padding: 0.75rem 1rem;
+  font-size: calc(var(--font-size) * 1.3);
+}
+
+#shortcuts::backdrop {
+  background: rgba(0, 0, 0, 0.3);
+}
+
+#shortcuts h2 {
+  font-size: inherit;
+  margin: 0 0 0.5rem;
+  color: #fff;
+}
+
+#shortcuts dl {
+  display: grid;
+  grid-template-columns: auto auto;
+  gap: 0.35rem 1rem;
+  margin: 0;
+}
+
+#shortcuts dd {
+  margin: 0;
+}
+
+kbd {
+  font-family: monospace;
+  padding: 0 0.3em;
+  border: 1px solid rgba(255, 255, 255, 0.25);
+  border-radius: 3px;
+  background: rgba(255, 255, 255, 0.08);
+}
+
+/* No keyboard shortcuts to show on touch-only devices */
+@media (hover: none) and (pointer: coarse) {
+  .controls .help {
+    display: none;
+  }
+}

vite.config.js

@@ -14,6 +14,9 @@ export default defineConfig({
         skipWaiting: true,
         clientsClaim: true,
         globPatterns: ['**/*.{js,css,html,ico,png,jpg,svg,wasm,wgsl}'],
+        // Screenshots, social preview and install icons are only fetched by the
+        // browser/OS on demand; don't make every visitor download them upfront.
+        globIgnores: ['**/img/**'],
       },
     }),
   ],