From 71bb415d5f19523773ae480afefde67d6b3d7c33 Mon Sep 17 00:00:00 2001 From: Stephanie Gredell Date: Mon, 1 Sep 2025 19:57:43 -0700 Subject: [PATCH] add countdown --- src/main.js | 79 +++++++++++++++++++++++++++++ style.css | 141 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 220 insertions(+) diff --git a/src/main.js b/src/main.js index 0303987..b2f2141 100644 --- a/src/main.js +++ b/src/main.js @@ -233,6 +233,26 @@ root.go = function(nextId) { function initializeGame() { const urlParams = new URLSearchParams(window.location.search); const screenParam = urlParams.get('screen'); + const dev = urlParams.get('dev'); + + // Check if it's ThePrimeagen's birthday yet (September 9, 2025) + // Skip countdown if ?dev=true is in URL + const now = new Date(); + const birthday = new Date('2025-09-09T00:00:00'); + + console.log('Current date:', now); + console.log('Birthday date:', birthday); + console.log('Before birthday?', now < birthday); + console.log('Dev mode?', dev); + + if (now < birthday && dev !== 'true') { + console.log('Showing countdown!'); + showCountdown(birthday); + return; + } else { + console.log('Showing game - either past birthday or dev mode'); + } + if (screenParam) { setupMockData(); @@ -302,6 +322,65 @@ function setupMockData() { ]; } +function showCountdown(birthday) { + document.body.innerHTML = ` +
+
+
+
+

Your epic birthday surprise launches in:

+
+ +
+
+
--
+
Days
+
+
:
+
+
--
+
Hours
+
+
:
+
+
--
+
Minutes
+
+
:
+
+
--
+
Seconds
+
+
+
+
+
+ `; + + // Start the countdown timer + const timer = setInterval(() => { + const now = new Date(); + const timeLeft = birthday - now; + + if (timeLeft <= 0) { + clearInterval(timer); + // Birthday reached! Reload to show the game + window.location.reload(); + return; + } + + const days = Math.floor(timeLeft / (1000 * 60 * 60 * 24)); + const hours = Math.floor((timeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); + const minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60)); + const seconds = Math.floor((timeLeft % (1000 * 60)) / 1000); + + document.getElementById('days').textContent = days.toString().padStart(2, '0'); + document.getElementById('hours').textContent = hours.toString().padStart(2, '0'); + document.getElementById('minutes').textContent = minutes.toString().padStart(2, '0'); + document.getElementById('seconds').textContent = seconds.toString().padStart(2, '0'); + }, 1000); +} + function loadNormalGame() { // Clear old saves to prevent card ID conflicts after refactoring root.clearOldSaves(); diff --git a/style.css b/style.css index 96151eb..68a34fd 100644 --- a/style.css +++ b/style.css @@ -5182,3 +5182,144 @@ h3 { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.3); } + +/* Birthday Countdown Styles */ +.countdown-screen { + position: fixed; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + background: #000; + display: flex; + align-items: center; + justify-content: center; + z-index: 9999; +} + +.countdown-content { + text-align: center; + max-width: 900px; + padding: 40px; +} + +.countdown-timer { + margin-top: 40px; +} + +.countdown-message h2 { + color: #ffd700; + font-size: 2.5em; + margin-bottom: 20px; + text-shadow: 0 0 20px rgba(255, 215, 0, 0.5); +} + +.countdown-message p { + color: #d0d0d0; + font-size: 1.3em; + margin-bottom: 40px; +} + +.countdown-display { + display: flex; + justify-content: center; + gap: 20px; + margin: 40px 0; + flex-wrap: wrap; +} + +.time-unit { + background: #000; + border: 2px solid #fff; + border-radius: 15px; + padding: 20px; + min-width: 100px; +} + +.time-number { + font-size: 3em; + font-weight: bold; + color: #ffd700; + text-shadow: 0 0 10px rgba(255, 215, 0, 0.8); +} + +.time-label { + font-size: 1.1em; + color: #d0d0d0; + margin-top: 10px; + text-transform: uppercase; + letter-spacing: 1px; +} + +.time-separator { + font-size: 3em; + color: #ffd700; + align-self: center; + animation: blink 2s infinite; +} + +.birthday-preview { + margin-top: 50px; + padding: 30px; + background: rgba(58, 47, 31, 0.6); + border-radius: 15px; + border: 1px solid #5a4a2a; +} + +.birthday-preview p { + color: #d0d0d0; + font-size: 1.2em; + margin-bottom: 20px; +} + +.preview-icons { + font-size: 2em; + letter-spacing: 15px; + animation: float 3s ease-in-out infinite; + margin-bottom: 20px; +} + +.dev-hint { + color: #888; + font-size: 0.9em; +} + +.dev-hint code { + background: rgba(0,0,0,0.3); + padding: 2px 6px; + border-radius: 4px; + font-family: 'JetBrains Mono', monospace; +} + +@keyframes blink { + 0%, 50% { opacity: 1; } + 51%, 100% { opacity: 0.3; } +} + +@keyframes float { + 0%, 100% { transform: translateY(0px); } + 50% { transform: translateY(-10px); } +} + +@media (max-width: 768px) { + .countdown-display { + gap: 10px; + } + + .time-unit { + min-width: 80px; + padding: 15px; + } + + .time-number { + font-size: 2em; + } + + .countdown-message h2 { + font-size: 1.8em; + } + + .preview-icons { + letter-spacing: 10px; + } +}