From 3fa01811c215bc5317cfc2f9bebcbfad8049f99d Mon Sep 17 00:00:00 2001
From: Chisel <chisel@redmeeple.uk>
Date: Wed, 4 Feb 2026 14:20:30 +0000
Subject: [PATCH 1/2] feat: add QR code link to player count site

---
 index.html | 11 ++++++++++-
 script.js  | 29 +++++++++++++++++++++++++++++
 styles.css | 39 +++++++++++++++++++++++++++++++++++++++
 3 files changed, 78 insertions(+), 1 deletion(-)
diff --git a/index.html b/index.html
index c31f036..9fa82eb 100644
--- a/index.html
+++ b/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
@@ -124,6 +124,11 @@
           <span class="label">Demon</span>
           <span id="demonAmount" class="amount">1</span>
         </div>
+        <div id="playerCountQrWrapper" class="character-type player-count-qr">
+          <a id="playerCountQrLink" href="https://count.arcane-scripts.net/?p=10" target="_blank" rel="noopener noreferrer" aria-label="Open player count link">
+            <img id="playerCountQrImg" src="" alt="QR code linking to player count" />
+          </a>
+        </div>
         <div id="travellerDisplay" class="character-type traveller">
           <span class="label">Travellers</span>
           <span id="travellerAmount" class="amount">0</span>
@@ -446,6 +451,10 @@ <h3>Display Settings</h3>
                 <span>Keep Display On</span>
                 <input type="checkbox" id="keepDisplayOn" checked />
               </label>
+              <label>
+                <span>Show player count QR code</span>
+                <input type="checkbox" id="showPlayerCountQr" />
+              </label>
               <label>
                 <span>Background Theme</span>
                 <select id="backgroundTheme" class="background-theme-select">
diff --git a/script.js b/script.js
index 3a85a6f..9e346f4 100644
--- a/script.js
+++ b/script.js
@@ -380,6 +380,7 @@ let soundEffectsVolume = 75; // Default to 75%
 let backgroundTheme = 'medieval-cartoon'; // Default background theme
 let youtubePlaylistUrl = DEFAULT_YOUTUBE_PLAYLIST; // Default playlist
 let keepDisplayOn = true; // Default to true for wake lock
+let showPlayerCountQr = false; // Optional QR linking to count.arcane-scripts.net
 let youtubePlayer = null;
 let endOfDaySound = 'cathedral-bell-v2.mp3'; // Default end of day sound
 let wakeUpSoundFile = 'chisel-bell-01-loud-v2.mp3'; // Default wake up sound
@@ -884,6 +885,13 @@ document.addEventListener('DOMContentLoaded', async () => {
   document
     .getElementById('backgroundTheme')
     .addEventListener('change', updateBackgroundTheme);
+  document.getElementById('showPlayerCountQr').addEventListener('change', (e) => {
+    showPlayerCountQr = e.target.checked;
+    document
+      .getElementById('playerCountQrWrapper')
+      .classList.toggle('visible', showPlayerCountQr);
+    saveSettings();
+  });
 
   // Add keyboard shortcuts event listeners
   document.querySelectorAll('.shortcut-input').forEach((input) => {
@@ -1160,6 +1168,7 @@ function applyParsedSettings(settings) {
   soundEffectsVolume = settings.soundEffectsVolume || 75;
   keepDisplayOn =
     settings.keepDisplayOn === undefined ? true : settings.keepDisplayOn;
+  showPlayerCountQr = settings.showPlayerCountQr === true;
   youtubeVolume = settings.youtubeVolume || 15;
   backgroundTheme = settings.backgroundTheme || 'medieval-cartoon';
   youtubePlaylistUrl = settings.youtubePlaylistUrl || DEFAULT_YOUTUBE_PLAYLIST;
@@ -1220,6 +1229,11 @@ function applySettingsToForm() {
   document.getElementById('gamePace').value = currentPace;
   document.getElementById('playSoundEffects').checked = playSoundEffects;
   document.getElementById('keepDisplayOn').checked = keepDisplayOn;
+  document.getElementById('showPlayerCountQr').checked = showPlayerCountQr;
+  document
+    .getElementById('playerCountQrWrapper')
+    .classList.toggle('visible', showPlayerCountQr);
+  updatePlayerCountQr();
   document.getElementById('playMusic').checked = playMusic;
   document.getElementById('playMusicAtNight').checked = playMusicAtNight;
   document.getElementById('youtubePlaylist').value = youtubePlaylistUrl;
@@ -1403,6 +1417,7 @@ function saveSettings() {
     playSoundEffects,
     soundEffectsVolume,
     keepDisplayOn,
+    showPlayerCountQr,
     youtubeVolume,
     youtubePlaylistUrl,
     backgroundTheme,
@@ -1597,6 +1612,19 @@ function updateClocktowerPresets() {
   });
 }
 
+// Update QR code and link for player count (count.arcane-scripts.net)
+function updatePlayerCountQr() {
+  const url = `https://count.arcane-scripts.net/?p=${playerCount}`;
+  const link = document.getElementById('playerCountQrLink');
+  const img = document.getElementById('playerCountQrImg');
+  if (link) link.href = url;
+  if (img) {
+    img.src =
+      'https://api.qrserver.com/v1/create-qr-code/?size=128x128&data=' +
+      encodeURIComponent(url);
+  }
+}
+
 // Update player count
 function updatePlayerCount() {
   playerCount = Math.min(
@@ -1607,6 +1635,7 @@ function updatePlayerCount() {
   updateCharacterAmounts(playerCount);
   updateClocktowerPresets();
   updateEstimatedGameLength();
+  updatePlayerCountQr();
   saveSettings();
 }
 
diff --git a/styles.css b/styles.css
index 486c9cd..391eb4f 100644
--- a/styles.css
+++ b/styles.css
@@ -1084,6 +1084,7 @@ body[data-pace='blitz'] .info-value {
   flex-wrap: wrap;
   gap: 0.5rem;
   justify-content: center;
+  align-items: stretch;
   padding: 0.5rem;
   width: 100%;
 }
@@ -1294,6 +1295,44 @@ body[data-pace='blitz'] .info-value {
   background: var(--colour-evil);
 }
 
+.character-type.player-count-qr {
+  display: none;
+  flex: 0 0 auto;
+  align-self: center;
+  width: 4.75rem;
+  height: 4.75rem;
+  min-width: auto;
+  padding: 0.25rem;
+  box-sizing: border-box;
+  justify-content: center;
+  background: var(--colour-surface-elevated);
+}
+
+.character-type.player-count-qr.visible {
+  display: flex;
+}
+
+.character-type.player-count-qr a {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+  border-radius: var(--radius-sm);
+  overflow: hidden;
+}
+
+.character-type.player-count-qr img {
+  max-width: 100%;
+  max-height: 100%;
+  width: auto;
+  height: auto;
+  object-fit: contain;
+  border-radius: var(--radius-sm);
+}
+
 .character-type.traveller {
   display: none;
   background: rgba(255, 140, 0, 0.7);

From e9dc85ba8a9a51618f8d5a94e87282e8bf185834 Mon Sep 17 00:00:00 2001
From: Chisel <chisel@redmeeple.uk>
Date: Wed, 4 Feb 2026 14:27:04 +0000
Subject: [PATCH 2/2] chore: refine styling for slightly nicer spacing

---
 styles.css | 103 ++++++++++++++++++++++++++++++++++++++---------------
 1 file changed, 74 insertions(+), 29 deletions(-)

diff --git a/styles.css b/styles.css
index 391eb4f..713d7c6 100644
--- a/styles.css
+++ b/styles.css
@@ -44,8 +44,17 @@ input:focus-visible {
 }
 
 body {
-  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
-    Oxygen, Ubuntu, Cantarell, 'Open Sans', sans-serif;
+  font-family:
+    'DM Sans',
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    Roboto,
+    Oxygen,
+    Ubuntu,
+    Cantarell,
+    'Open Sans',
+    sans-serif;
   min-height: 100vh;
   display: flex;
   flex-direction: column;
@@ -327,7 +336,9 @@ h1 {
   font-weight: 600;
   color: var(--colour-gold);
   font-variant-numeric: tabular-nums;
-  text-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), 0 0 24px rgba(212, 175, 55, 0.15);
+  text-shadow:
+    0 4px 12px rgba(0, 0, 0, 0.4),
+    0 0 24px rgba(212, 175, 55, 0.15);
   line-height: 0.9;
   display: flex;
   flex-direction: row;
@@ -436,8 +447,10 @@ html.fonts-ready .timer-display .time {
   padding: 0.5rem 1rem;
   font-size: 1.2rem;
   min-width: 3rem;
-  transition: background-color var(--transition-fast),
-    transform var(--transition-fast), box-shadow var(--transition-fast);
+  transition:
+    background-color var(--transition-fast),
+    transform var(--transition-fast),
+    box-shadow var(--transition-fast);
 }
 
 .preset-btn:hover {
@@ -479,8 +492,10 @@ html.fonts-ready .timer-display .time {
   cursor: pointer;
   font-size: 1.2rem;
   font-weight: 600;
-  transition: transform var(--transition-fast),
-    box-shadow var(--transition-fast), background-color var(--transition-fast);
+  transition:
+    transform var(--transition-fast),
+    box-shadow var(--transition-fast),
+    background-color var(--transition-fast);
   min-width: 140px;
   min-height: 80px;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
@@ -493,7 +508,9 @@ html.fonts-ready .timer-display .time {
 
 #startBtn:focus-visible {
   outline: none;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25), 0 0 0 3px rgba(76, 175, 80, 0.5);
+  box-shadow:
+    0 4px 12px rgba(0, 0, 0, 0.25),
+    0 0 0 3px rgba(76, 175, 80, 0.5);
 }
 
 #startBtn .button-content {
@@ -516,7 +533,9 @@ html.fonts-ready .timer-display .time {
   font-size: 0.7rem;
   font-weight: 500;
   font-family: monospace;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.2);
+  box-shadow:
+    0 1px 3px rgba(0, 0, 0, 0.3),
+    inset 0 -1px 0 rgba(0, 0, 0, 0.2);
   border: 1px solid rgba(0, 0, 0, 0.3);
   min-width: 24px;
   text-align: center;
@@ -567,8 +586,10 @@ html.fonts-ready .timer-display .time {
   gap: 0.5rem;
   position: relative;
   overflow: hidden;
-  transition: transform var(--transition-fast),
-    box-shadow var(--transition-fast), background-color var(--transition-fast);
+  transition:
+    transform var(--transition-fast),
+    box-shadow var(--transition-fast),
+    background-color var(--transition-fast);
   --progress-width: 0%;
 }
 
@@ -581,7 +602,9 @@ html.fonts-ready .timer-display .time {
 
 #accelerateBtn:focus-visible {
   outline: none;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), 0 0 0 3px rgba(76, 175, 80, 0.4);
+  box-shadow:
+    0 2px 4px rgba(0, 0, 0, 0.2),
+    0 0 0 3px rgba(76, 175, 80, 0.4);
 }
 
 #accelerateBtn::before {
@@ -684,8 +707,10 @@ html.fonts-ready .timer-display .time {
   cursor: pointer;
   color: #ffffff;
   border-radius: var(--radius-md);
-  transition: transform var(--transition-fast),
-    box-shadow var(--transition-fast), background-color var(--transition-fast);
+  transition:
+    transform var(--transition-fast),
+    box-shadow var(--transition-fast),
+    background-color var(--transition-fast);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1033,8 +1058,10 @@ body[data-pace='blitz'] .info-value {
 }
 
 .dialog-buttons button {
-  transition: transform var(--transition-fast),
-    box-shadow var(--transition-fast), background-color var(--transition-fast);
+  transition:
+    transform var(--transition-fast),
+    box-shadow var(--transition-fast),
+    background-color var(--transition-fast);
 }
 
 .dialog-buttons button:hover {
@@ -1087,6 +1114,11 @@ body[data-pace='blitz'] .info-value {
   align-items: stretch;
   padding: 0.5rem;
   width: 100%;
+  /* Fixed height so row is content-sized; QR block can stretch to fill */
+  height: 4.75rem;
+  min-height: 4.75rem;
+  box-sizing: border-box;
+  margin-bottom: 0.5rem;
 }
 
 .pace-indicator {
@@ -1298,9 +1330,8 @@ body[data-pace='blitz'] .info-value {
 .character-type.player-count-qr {
   display: none;
   flex: 0 0 auto;
-  align-self: center;
+  align-self: stretch;
   width: 4.75rem;
-  height: 4.75rem;
   min-width: auto;
   padding: 0.25rem;
   box-sizing: border-box;
@@ -1372,8 +1403,10 @@ body[data-pace='blitz'] .info-value {
   border-radius: var(--radius-sm);
   color: white;
   cursor: pointer;
-  transition: background-color var(--transition-fast),
-    transform var(--transition-fast), box-shadow var(--transition-fast);
+  transition:
+    background-color var(--transition-fast),
+    transform var(--transition-fast),
+    box-shadow var(--transition-fast);
   width: 100%;
 }
 
@@ -1765,7 +1798,9 @@ button:disabled {
   font-size: 0.8rem;
   color: #4caf50;
   text-decoration: none;
-  transition: color 0.2s ease, opacity 0.2s ease;
+  transition:
+    color 0.2s ease,
+    opacity 0.2s ease;
   text-align: right;
   padding-right: 0.5rem;
 }
@@ -1795,7 +1830,9 @@ button:disabled {
   font-size: 0.8rem;
   color: #4caf50;
   text-decoration: none;
-  transition: color 0.2s ease, opacity 0.2s ease;
+  transition:
+    color 0.2s ease,
+    opacity 0.2s ease;
   display: flex;
   align-items: center;
   gap: 0.5rem;
@@ -1850,7 +1887,8 @@ button:disabled {
   display: flex;
   align-items: center;
   justify-content: center;
-  transition: background-color var(--transition-fast),
+  transition:
+    background-color var(--transition-fast),
     transform var(--transition-fast);
 }
 
@@ -1935,7 +1973,9 @@ button:disabled {
   font-size: 0.8rem;
   color: var(--colour-accent);
   text-decoration: none;
-  transition: color var(--transition-fast), opacity var(--transition-fast);
+  transition:
+    color var(--transition-fast),
+    opacity var(--transition-fast);
   display: flex;
   align-items: center;
   gap: 0.35rem;
@@ -2301,8 +2341,10 @@ button:disabled {
   background: var(--colour-button-secondary);
   color: #fff;
   cursor: pointer;
-  transition: transform var(--transition-fast),
-    box-shadow var(--transition-fast), background-color var(--transition-fast);
+  transition:
+    transform var(--transition-fast),
+    box-shadow var(--transition-fast),
+    background-color var(--transition-fast);
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
 }
 
@@ -2633,7 +2675,8 @@ button:disabled {
   padding: 0.5rem 1rem;
   border-radius: var(--radius-sm);
   cursor: pointer;
-  transition: background-color var(--transition-fast),
+  transition:
+    background-color var(--transition-fast),
     color var(--transition-fast);
   font-size: 0.95rem;
 }
@@ -2762,8 +2805,10 @@ button:disabled {
   border-radius: var(--radius-sm);
   color: white;
   cursor: pointer;
-  transition: transform var(--transition-fast),
-    box-shadow var(--transition-fast), background-color var(--transition-fast);
+  transition:
+    transform var(--transition-fast),
+    box-shadow var(--transition-fast),
+    background-color var(--transition-fast);
   min-height: 48px;
   height: 48px;
   display: flex;
