diff --git a/index.html b/index.html index cb79948..d75ef87 100644 --- a/index.html +++ b/index.html @@ -24,8 +24,14 @@
-

Hello!!!!

-

Welcome to my first website, I don't actually use here at all but if you are here you should leave a comment!!

+
+ Click Me! +
...
+
+
+

Hello!!!!

+

Welcome to my first website, I don't actually use here at all but if you are here you should leave a comment!!

+
diff --git a/js/comments.js b/js/comments.js index 988ee42..f9aefbf 100644 --- a/js/comments.js +++ b/js/comments.js @@ -147,6 +147,37 @@ document.addEventListener('DOMContentLoaded', () => { } } + // ── Global Click Counter ───────────────────────────────────── + const clickBtn = document.getElementById('yuuka-click-btn'); + const clickDisplay = document.getElementById('click-counter-display'); + + if (clickBtn && clickDisplay && configured) { + const statsRef = db.collection('stats').doc('global_clicks'); + + // Listen to changes in real-time + statsRef.onSnapshot(doc => { + if (doc.exists) { + clickDisplay.textContent = doc.data().count.toLocaleString(); + } else { + clickDisplay.textContent = '0'; + } + }, err => { + console.error("Click counter error:", err); + clickDisplay.textContent = 'Error'; + }); + + // Increment on click + clickBtn.addEventListener('click', () => { + // Optimistic update for instant feel + let current = parseInt(clickDisplay.textContent.replace(/,/g, '')) || 0; + clickDisplay.textContent = (current + 1).toLocaleString(); + + statsRef.set({ + count: firebase.firestore.FieldValue.increment(1) + }, { merge: true }).catch(err => console.error("Failed to click:", err)); + }); + } + db.collection(COLLECTION) .orderBy('timestamp', 'desc') .onSnapshot(snap => { diff --git a/sounds/yuuka_click.mp3 b/sounds/yuuka_click.mp3 new file mode 100644 index 0000000..e56f31d Binary files /dev/null and b/sounds/yuuka_click.mp3 differ diff --git a/style/comments.css b/style/comments.css index 2bfa708..c52afac 100644 --- a/style/comments.css +++ b/style/comments.css @@ -5,13 +5,47 @@ /* ── About hero (top half) ──────────────────────────────── */ #about-hero { padding: 120px 20px 50px; - text-align: center; + display: flex; + align-items: center; + justify-content: center; + gap: 40px; +} + +.hero-text { + text-align: left; } #about-hero h1 { margin-top: 0; } +#click-counter-container { + display: flex; + flex-direction: column; + align-items: center; + gap: 15px; +} + +#yuuka-click-btn { + width: 200px; + cursor: pointer; + transition: transform 0.1s cubic-bezier(0.175, 0.885, 0.32, 1.275); + user-select: none; + -webkit-user-drag: none; +} + +#yuuka-click-btn:active { + transform: scale(0.9); +} + +#click-counter-display { + color: #153dee; + font-size: 2.5rem; + font-weight: bold; + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + text-shadow: 2px 2px 0 rgba(255, 255, 255, 0.8); +} + /* ── Steam panel wrapper ─────────────────────────────────── */ #comments-section { width: 100%; diff --git a/textures/yuuka_click.png b/textures/yuuka_click.png new file mode 100644 index 0000000..99ee802 Binary files /dev/null and b/textures/yuuka_click.png differ