feat(gameplay): implement progressive difficulty mechanics and peek cooldown

app.py

@@ -7779,6 +7779,8 @@ class MatchWiseApp {
         this.previewTimer = null;
         this.previewShuffleTimer = null;
         this.previewShuffleAnimationMs = 520;
+        this.previewFogTimers = [];
+        this.previewHideTimers = [];
         this.previewCount = PREVIEW_SECONDS;
         this.pendingTransition = false;
         this.levelStartTime = null;
@@ -7793,6 +7795,8 @@ class MatchWiseApp {
         this.wrongMatchTimer = null;
         this.distractorSparkleTimer = null;
         this.distractorSparkleClearTimer = null;
+        this.recentlyFlippedCardIndexes = [];
+        this.peekCooldownMoves = Number(this.state.peek_cooldown_moves || 0);
         this.challengeStarted = false;
         this.challengeSelectionLocked = false;
         this.challengeResultIndex = null;
@@ -7948,12 +7952,77 @@ class MatchWiseApp {
             z-index: 4;
         }
 
+        .memory-card.distractor-sparkle .memory-back::after {
+            content: '✦';
+            position: absolute;
+            left: 9%;
+            top: 8%;
+            width: 28%;
+            height: 28%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border-radius: 999px;
+            color: rgba(255, 255, 255, 0.95);
+            background: radial-gradient(circle, rgba(255,255,255,0.7), rgba(255,255,255,0.1) 58%, transparent 72%);
+            filter: drop-shadow(0 0 10px rgba(255,255,255,0.75));
+            font-size: clamp(14px, calc(var(--card-fit-size, var(--card-size, 150px)) * 0.16), 26px);
+            pointer-events: none;
+            animation: distractorSparkleRuntime 680ms ease-out forwards;
+            z-index: 4;
+        }
+
+        .memory-container.preview-fog-blink .memory-card.preview-locked .memory-back,
+        .matchwise-root.preview-fog-blink .memory-card.preview-locked .memory-back {
+            animation: previewFogBlinkRuntime 260ms ease-in-out forwards;
+        }
+
+        .memory-card.preview-hidden-card .memory-back {
+            animation: previewCardHideRuntime 620ms ease-in-out forwards;
+        }
+
+        .memory-card.preview-hidden-card::after {
+            content: '☁️';
+            position: absolute;
+            inset: 10%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border-radius: 24px;
+            font-size: clamp(24px, calc(var(--card-fit-size, var(--card-size, 150px)) * 0.28), 46px);
+            background: radial-gradient(circle, rgba(255,255,255,0.95), rgba(255,255,255,0.62) 55%, rgba(255,255,255,0.14));
+            filter: drop-shadow(0 10px 18px rgba(132, 90, 255, 0.2));
+            pointer-events: none;
+            z-index: 8;
+            animation: previewCloudCoverRuntime 620ms ease-in-out forwards;
+        }
+
         @keyframes distractorSparkleRuntime {
             0% { transform: scale(0.35) rotate(-18deg); opacity: 0; }
             28% { transform: scale(1.18) rotate(10deg); opacity: 1; }
             100% { transform: scale(0.65) rotate(24deg); opacity: 0; }
         }
 
+        @keyframes previewFogBlinkRuntime {
+            0% { filter: blur(0px) brightness(1); opacity: 1; }
+            45% { filter: blur(5px) brightness(0.94); opacity: 0.72; }
+            100% { filter: blur(0px) brightness(1); opacity: 1; }
+        }
+
+        @keyframes previewCardHideRuntime {
+            0% { filter: blur(0px); opacity: 1; }
+            18% { filter: blur(3px); opacity: 0.18; }
+            82% { filter: blur(3px); opacity: 0.18; }
+            100% { filter: blur(0px); opacity: 1; }
+        }
+
+        @keyframes previewCloudCoverRuntime {
+            0% { transform: scale(0.86); opacity: 0; }
+            18% { transform: scale(1); opacity: 1; }
+            82% { transform: scale(1); opacity: 1; }
+            100% { transform: scale(1.06); opacity: 0; }
+        }
+
         @keyframes popBounceRuntime {
             0% {
                 transform: translate(-50%, -50%) scale(0) rotate(-15deg);
@@ -8776,6 +8845,45 @@ class MatchWiseApp {
         return effectiveMaxHints;
     }
 
+    getHintCooldownLengthMoves() {
+        const level = Math.max(1, Number(this.levelNumber || this.state.level || 1));
+
+        // Early levels stay friendly. Later levels make Peek a small decision.
+        if (level < 7) return 0;
+        if (level < 14) return 1;
+        return 2;
+    }
+
+    decrementPeekCooldownAfterMove() {
+        if (this.peekCooldownMoves > 0) {
+            this.peekCooldownMoves = Math.max(0, this.peekCooldownMoves - 1);
+            this.state.peek_cooldown_moves = this.peekCooldownMoves;
+            this.updateHintsDisplay();
+        }
+    }
+
+    getWrongFlipBackDelayMs() {
+        const level = Math.max(1, Number(this.levelNumber || this.state.level || 1));
+
+        // Level 1-5: 900ms, Level 6-12: 700ms, Level 13+: 550ms.
+        if (level <= 5) return 900;
+        if (level <= 12) return 700;
+        return 550;
+    }
+
+    getCompletedChallengeLevels() {
+        return Math.max(0, Number(this.state.completed_challenge_levels || 0));
+    }
+
+    rememberRecentlyFlipped(index) {
+        const value = Number(index);
+        if (!Number.isFinite(value)) return;
+        this.recentlyFlippedCardIndexes = [
+            value,
+            ...this.recentlyFlippedCardIndexes.filter((item) => item !== value),
+        ].slice(0, 6);
+    }
+
     getDistractorSparkleIntervalMs() {
         const level = Math.max(1, Number(this.levelNumber || this.state.level || 1));
 
@@ -8788,7 +8896,15 @@ class MatchWiseApp {
             return;
         }
 
-        const candidates = Array.from(this.grid.querySelectorAll('.memory-card:not(.matched):not(.flipped):not(.preview-locked)'));
+        const faceDownCandidates = Array.from(this.grid.querySelectorAll('.memory-card:not(.matched):not(.flipped):not(.preview-locked)'));
+        const recentlyFlippedCandidates = this.recentlyFlippedCardIndexes
+            .map((index) => this.grid.querySelector(`[data-index="${index}"]`))
+            .filter((card) => card && !card.classList.contains('matched') && !card.classList.contains('preview-locked'));
+
+        const level = Math.max(1, Number(this.levelNumber || this.state.level || 1));
+        const canUseRecentDecoy = level >= 8 && recentlyFlippedCandidates.length > 0;
+        const useRecentDecoy = canUseRecentDecoy && Math.random() < 0.34;
+        const candidates = useRecentDecoy ? recentlyFlippedCandidates : faceDownCandidates;
         if (!candidates.length) return;
 
         const card = candidates[Math.floor(Math.random() * candidates.length)];
@@ -8858,6 +8974,7 @@ class MatchWiseApp {
                 this.hints <= 0 ||
                 this.state.status !== 'playing' ||
                 this.hinting ||
+                this.peekCooldownMoves > 0 ||
                 oddFaceUp ||
                 this.state.game_over ||
                 this.state.level_complete;
@@ -9528,6 +9645,99 @@ class MatchWiseApp {
         });
     }
 
+    clearPreviewChallengeEffects() {
+        this.previewFogTimers.forEach((timer) => clearTimeout(timer));
+        this.previewFogTimers = [];
+        this.previewHideTimers.forEach((timer) => clearTimeout(timer));
+        this.previewHideTimers = [];
+
+        const effectRoots = [this.memoryContainer, this.root].filter(Boolean);
+        effectRoots.forEach((root) => root.classList.remove('preview-fog-blink'));
+
+        if (this.grid) {
+            this.grid.querySelectorAll('.memory-card.preview-hidden-card').forEach((card) => {
+                card.classList.remove('preview-hidden-card');
+            });
+        }
+    }
+
+    triggerPreviewFogBlinkOnce() {
+        const effectRoot = this.memoryContainer || this.root;
+        if (!effectRoot || this.state.status !== 'preview') return;
+
+        effectRoot.classList.remove('preview-fog-blink');
+        void effectRoot.offsetWidth;
+        effectRoot.classList.add('preview-fog-blink');
+
+        const timer = setTimeout(() => {
+            effectRoot.classList.remove('preview-fog-blink');
+        }, 280);
+        this.previewFogTimers.push(timer);
+    }
+
+    startPreviewFogChallenge() {
+        const level = Math.max(1, Number(this.levelNumber || this.state.level || 1));
+        if (level < 10) return;
+
+        const blinkCount = level >= 18 ? 2 : 1;
+        const delays = blinkCount >= 2 ? [760, 1760] : [1260];
+        delays.slice(0, blinkCount).forEach((delay) => {
+            const timer = setTimeout(() => {
+                if (window.__activeMemoryLevelId === this.levelId && this.state.status === 'preview') {
+                    this.triggerPreviewFogBlinkOnce();
+                }
+            }, delay);
+            this.previewFogTimers.push(timer);
+        });
+    }
+
+    getPreviewHideCardCount() {
+        const completedChallengeLevels = this.getCompletedChallengeLevels();
+        if (completedChallengeLevels < 1) return 0;
+        return completedChallengeLevels >= 3 ? 2 : 1;
+    }
+
+    hideRandomPreviewCardsOnce() {
+        if (!this.grid || this.state.status !== 'preview') return;
+
+        const hideCount = this.getPreviewHideCardCount();
+        if (hideCount <= 0) return;
+
+        const cards = Array.from(this.grid.querySelectorAll('.memory-card.preview-locked:not(.matched):not(.preview-hidden-card)'));
+        if (!cards.length) return;
+
+        const shuffled = this.makeDifferentPreviewOrder(cards).slice(0, Math.min(hideCount, cards.length));
+        shuffled.forEach((card) => {
+            card.classList.add('preview-hidden-card');
+            const timer = setTimeout(() => {
+                card.classList.remove('preview-hidden-card');
+            }, 650);
+            this.previewHideTimers.push(timer);
+        });
+    }
+
+    startPreviewHideChallenge() {
+        if (this.getPreviewHideCardCount() <= 0) return;
+
+        [920, 1880].forEach((delay, index) => {
+            const timer = setTimeout(() => {
+                if (window.__activeMemoryLevelId === this.levelId && this.state.status === 'preview') {
+                    // The second pulse only appears once challenge progress is stronger.
+                    if (index === 0 || this.getCompletedChallengeLevels() >= 2) {
+                        this.hideRandomPreviewCardsOnce();
+                    }
+                }
+            }, delay);
+            this.previewHideTimers.push(timer);
+        });
+    }
+
+    startPreviewDifficultyEffects() {
+        this.clearPreviewChallengeEffects();
+        this.startPreviewFogChallenge();
+        this.startPreviewHideChallenge();
+    }
+
     startPreviewGridShuffle() {
         this.stopPreviewGridShuffle();
 
@@ -9554,6 +9764,8 @@ class MatchWiseApp {
             this.previewShuffleTimer = null;
         }
 
+        this.clearPreviewChallengeEffects();
+
         if (!this.grid) return;
 
         this.grid.querySelectorAll('.memory-card').forEach((card) => {
@@ -9609,6 +9821,7 @@ class MatchWiseApp {
             });
             cardEl.style.transform = '';
             cardEl.style.zIndex = '';
+            cardEl.classList.remove('preview-hidden-card', 'distractor-sparkle');
         });
     }
 
@@ -9660,6 +9873,8 @@ class MatchWiseApp {
         this.state.status = 'preview';
         this.state.level_complete = false;
         this.state.game_over = false;
+        this.recentlyFlippedCardIndexes = [];
+        this.peekCooldownMoves = Number(this.state.peek_cooldown_moves || 0);
         this.syncProgressiveHintLimit(true);
         this.applyStateStyle();
         this.setStatus(
@@ -9688,6 +9903,7 @@ class MatchWiseApp {
 
         setTimeout(() => {
             this.startPreviewGridShuffle();
+            this.startPreviewDifficultyEffects();
         }, 260);
         this.updateHintsDisplay();
 
@@ -9721,6 +9937,8 @@ class MatchWiseApp {
         this.state.status = 'preview';
         this.state.level_complete = false;
         this.state.game_over = false;
+        this.recentlyFlippedCardIndexes = [];
+        this.peekCooldownMoves = Number(this.state.peek_cooldown_moves || 0);
         this.syncProgressiveHintLimit(true);
 
         if (this.overlay) {
@@ -9752,6 +9970,7 @@ class MatchWiseApp {
 
         setTimeout(() => {
             this.startPreviewGridShuffle();
+            this.startPreviewDifficultyEffects();
         }, 260);
 
         this.previewTimer = setInterval(() => {
@@ -9938,6 +10157,7 @@ class MatchWiseApp {
 
         card.classList.add('flipped');
         this.flipped.push(idx);
+        this.rememberRecentlyFlipped(idx);
 
         if (this.flipped.length === 1) {
             this.updateHintsDisplay();
@@ -9952,6 +10172,7 @@ class MatchWiseApp {
         this.locked = true;
         this.moves += 1;
         this.state.moves = this.moves;
+        this.decrementPeekCooldownAfterMove();
         this.updateHud();
 
         const [a, b] = this.flipped;
@@ -10071,6 +10292,7 @@ class MatchWiseApp {
         this.resetComboFeedback();
         this.clearWrongMatchTimer();
         this.locked = true;
+        const wrongFlipBackDelay = this.getWrongFlipBackDelayMs();
         this.wrongMatchTimer = window.setTimeout(() => {
             try {
                 [a, b].forEach((index) => {
@@ -10087,7 +10309,7 @@ class MatchWiseApp {
                     this.gameOver();
                 }
             }
-        }, 900);
+        }, wrongFlipBackDelay);
 
         try {
             this.showFeedbackOverlay('WRONG MATCH', 'Lost 1 live', 'negative', false);
@@ -10121,6 +10343,11 @@ class MatchWiseApp {
         if (this.state.status !== 'playing') return;
         this.syncProgressiveHintLimit(false);
         if (this.hinting) return;
+        if (this.peekCooldownMoves > 0) {
+            this.setStatus('Peek is cooling down.', 'error', `${this.peekCooldownMoves} move${this.peekCooldownMoves === 1 ? '' : 's'} left before next peek.`);
+            this.updateHintsDisplay();
+            return;
+        }
         if (this.hints <= 0) {
             this.setStatus('No peeks left!', 'error', '');
             this.updateHintsDisplay();
@@ -10163,6 +10390,8 @@ class MatchWiseApp {
 
             this.hinting = false;
             this.locked = false;
+            this.peekCooldownMoves = this.getHintCooldownLengthMoves();
+            this.state.peek_cooldown_moves = this.peekCooldownMoves;
             this.updateHintsDisplay();
             await this.syncBackendEvent('hint');
         }, 1200);