Skip to content

Link to player count #28

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
chizmeeple merged 2 commits into from
Feb 4, 2026
Merged

Link to player count #28

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3fa0181
feat: add QR code link to player count site
chizmeeple Feb 4, 2026
e9dc85b
chore: refine styling for slightly nicer spacing
chizmeeple Feb 4, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 10 additions & 1 deletion index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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">
Expand Down
29 changes: 29 additions & 0 deletions script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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) => {
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -1403,6 +1417,7 @@ function saveSettings() {
playSoundEffects,
soundEffectsVolume,
keepDisplayOn,
showPlayerCountQr,
youtubeVolume,
youtubePlaylistUrl,
backgroundTheme,
Expand Down Expand Up @@ -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(
Expand All @@ -1607,6 +1635,7 @@ function updatePlayerCount() {
updateCharacterAmounts(playerCount);
updateClocktowerPresets();
updateEstimatedGameLength();
updatePlayerCountQr();
saveSettings();
}

Expand Down
138 changes: 111 additions & 27 deletions styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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);
Expand All @@ -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 {
Expand All @@ -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;
Expand Down Expand Up @@ -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%;
}

Expand All @@ -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 {
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -1084,8 +1111,14 @@ body[data-pace='blitz'] .info-value {
flex-wrap: wrap;
gap: 0.5rem;
justify-content: center;
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 {
Expand Down Expand Up @@ -1294,6 +1327,43 @@ body[data-pace='blitz'] .info-value {
background: var(--colour-evil);
}

.character-type.player-count-qr {
display: none;
flex: 0 0 auto;
align-self: stretch;
width: 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);
Expand Down Expand Up @@ -1333,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%;
}

Expand Down Expand Up @@ -1726,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;
}
Expand Down Expand Up @@ -1756,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;
Expand Down Expand Up @@ -1811,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);
}

Expand Down Expand Up @@ -1896,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;
Expand Down Expand Up @@ -2262,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);
}

Expand Down Expand Up @@ -2594,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;
}
Expand Down Expand Up @@ -2723,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;
Expand Down