From 01dccacffc81db76ba7cb2270983a140f9cbf6a2 Mon Sep 17 00:00:00 2001 From: Grigoriy Dubrovskih Date: Thu, 14 May 2026 10:56:40 +0300 Subject: [PATCH] feat: [S2T01] add second button with sequence tracking --- index.html | 12 +++++++++--- script.js | 56 ++++++++++++++++++++++++++++++++++++++++++++++++++---- 2 files changed, 61 insertions(+), 7 deletions(-) diff --git a/index.html b/index.html index 0fe2fba..652beee 100644 --- a/index.html +++ b/index.html @@ -9,11 +9,17 @@

Happy Button

- +
+ + +

Total clicks: 0

Clicks until celebration: 5

+

Sequence progress: 0 / 3

diff --git a/script.js b/script.js index 6291c97..d003d5b 100644 --- a/script.js +++ b/script.js @@ -1,10 +1,14 @@ const TOTAL_KEY = "happyButtonTotalClicks"; const CYCLE_KEY = "happyButtonCelebrationClicks"; const CELEBRATION_INTERVAL = 5; +const SEQUENCE_TARGET = 3; +const SEQUENCE_LENGTH = SEQUENCE_TARGET * 2; const button = document.getElementById("happy-button"); +const button2 = document.getElementById("happy-button-2"); const clickStatus = document.getElementById("click-status"); const celebrationStatus = document.getElementById("celebration-status"); +const sequenceStatus = document.getElementById("sequence-status"); const celebrationMessage = document.getElementById("celebration-message"); function readStoredCount(key) { @@ -14,6 +18,12 @@ function readStoredCount(key) { let totalClicks = readStoredCount(TOTAL_KEY); let celebrationClicks = readStoredCount(CYCLE_KEY); +let sequenceStep = 0; +let sequenceCelebrationActive = false; + +function alternationsForStep(step) { + return Math.floor(step / 2); +} function renderState(showCelebration = false) { const isGreenButton = totalClicks % 2 === 0; @@ -27,13 +37,41 @@ function renderState(showCelebration = false) { celebrationStatus.textContent = `Clicks until celebration: ${ CELEBRATION_INTERVAL - celebrationClicks }`; - if (showCelebration) { + sequenceStatus.textContent = `Sequence progress: ${alternationsForStep( + sequenceStep, + )} / ${SEQUENCE_TARGET}`; + + if (sequenceCelebrationActive) { + celebrationMessage.textContent = `Sequence complete! ${SEQUENCE_TARGET} alternations achieved.`; + celebrationMessage.hidden = false; + } else if (showCelebration) { celebrationMessage.textContent = `Congratulations! You clicked the button ${totalClicks} times.`; + celebrationMessage.hidden = false; + } else { + celebrationMessage.hidden = true; } - celebrationMessage.hidden = !showCelebration; } -button.addEventListener("click", () => { +function advanceSequence(clickedId) { + const expectedId = sequenceStep % 2 === 0 ? button.id : button2.id; + if (clickedId === expectedId) { + sequenceStep += 1; + } else if (clickedId === button.id) { + sequenceStep = 1; + } else { + sequenceStep = 0; + } + + if (sequenceStep >= SEQUENCE_LENGTH) { + sequenceCelebrationActive = true; + sequenceStep = 0; + document.body.dispatchEvent(new CustomEvent("sequence:complete")); + } else { + sequenceCelebrationActive = false; + } +} + +function handlePrimaryClick() { totalClicks += 1; celebrationClicks += 1; @@ -42,9 +80,19 @@ button.addEventListener("click", () => { celebrationClicks = 0; } + advanceSequence(button.id); + window.localStorage.setItem(TOTAL_KEY, String(totalClicks)); window.localStorage.setItem(CYCLE_KEY, String(celebrationClicks)); renderState(shouldCelebrate); -}); +} + +function handleSecondaryClick() { + advanceSequence(button2.id); + renderState(false); +} + +button.addEventListener("click", handlePrimaryClick); +button2.addEventListener("click", handleSecondaryClick); renderState(false);