' + '

Матроскин уже считает!

' + '

«Так, раз банка… два банка… три… ой, я сбился! Сколько же их у меня на полке?»

' + ''; this.completed[1] = true; Matroskin.success(); showToast('+1 ⭐'); setTimeout(() => this.updateUI(), 600); }); }, // STEP 2: DRAG bindDrag() { const pool = document.getElementById('mm-pool'); const slots = document.getElementById('mm-slots'); if (!pool || !slots) return; // Build slots for (let i = 1; i <= 5; i++) { const s = document.createElement('div'); s.className = 'mm__slot'; s.dataset.value = String(i); s.textContent = '?'; slots.appendChild(s); } // Build shuffled chips const numbers = [1, 2, 3, 4, 5].sort(() => Math.random() - 0.5); numbers.forEach(n => { const chip = document.createElement('div'); chip.className = 'mm__chip'; chip.draggable = true; chip.dataset.value = String(n); chip.textContent = String(n); pool.appendChild(chip); }); let draggedChip = null; let draggedSource = null; pool.addEventListener('dragstart', (e) => { if (!e.target.classList.contains('mm__chip')) return; draggedChip = e.target; draggedSource = e.target.parentElement; e.target.classList.add('is-dragging'); try { e.dataTransfer.setData('text/plain', e.target.dataset.value); } catch (err) {} Audio.play('click'); }); pool.addEventListener('dragend', (e) => { if (e.target.classList) e.target.classList.remove('is-dragging'); document.querySelectorAll('.mm__slot, .mm__task1-pool').forEach(s => s.classList.remove('is-target')); }); slots.querySelectorAll('.mm__slot').forEach(el => { el.addEventListener('dragover', (e) => { e.preventDefault(); el.classList.add('is-target'); }); el.addEventListener('dragleave', () => el.classList.remove('is-target')); el.addEventListener('drop', (e) => { e.preventDefault(); el.classList.remove('is-target'); if (!draggedChip) return; const existing = el.querySelector('.mm__chip'); if (existing && draggedSource !== el) { pool.appendChild(existing); } el.textContent = ''; el.appendChild(draggedChip); el.classList.add('is-filled'); Audio.play('pop'); this.checkDrag(); }); el.addEventListener('click', () => { const chip = el.querySelector('.mm__chip'); if (!chip) return; pool.appendChild(chip); el.classList.remove('is-filled', 'is-correct', 'is-wrong'); el.textContent = '?'; this.checkDrag(); }); }); pool.addEventListener('dragover', (e) => { e.preventDefault(); pool.classList.add('is-target'); }); pool.addEventListener('dragleave', () => pool.classList.remove('is-target')); pool.addEventListener('drop', (e) => { e.preventDefault(); pool.classList.remove('is-target'); if (!draggedChip) return; if (draggedSource && draggedSource.classList.contains('mm__slot')) { pool.appendChild(draggedChip); draggedSource.classList.remove('is-filled'); draggedSource.textContent = '?'; } }); }, checkDrag() { const filledSlots = document.querySelectorAll('.mm__slot .mm__chip'); if (filledSlots.length < 5) return; let allCorrect = true; let errorCount = 0; filledSlots.forEach(chip => { const slot = chip.parentElement; if (chip.dataset.value === slot.dataset.value) { slot.classList.add('is-correct'); slot.classList.remove('is-wrong'); } else { slot.classList.add('is-wrong'); slot.classList.remove('is-correct'); allCorrect = false; errorCount++; } }); if (allCorrect) { this.completed[2] = true; this.errors[2] = errorCount > 0 ? 1 : 0; Matroskin.success(); showToast('+1 ⭐'); setTimeout(() => this.updateUI(), 500); } else { this.errors[2]++; if (this.errors[2] >= 1) Matroskin.error(); // clear wrong state after animation setTimeout(() => { filledSlots.forEach(chip => chip.parentElement.classList.remove('is-wrong')); }, 1000); } }, // STEP 3: SIGN bindSign() { const choose = document.getElementById('mm-sign-choose'); if (!choose) return; choose.addEventListener('click', (e) => { const btn = e.target.closest('.mm__choose-btn'); if (!btn || btn.disabled) return; const chosen = btn.dataset.sign; Audio.play('pop'); if (chosen === '>') { btn.classList.add('is-correct'); this.completed[3] = true; choose.querySelectorAll('.mm__choose-btn').forEach(b => b.disabled = true); const basketMid = document.getElementById('mm-basket-mid'); if (basketMid) { basketMid.classList.add('is-correct'); basketMid.textContent = '>'; } Matroskin.success(); showToast('+1 ⭐'); setTimeout(() => this.updateUI(), 500); } else { btn.classList.add('is-wrong'); this.errors[3]++; if (this.errors[3] >= 1) Matroskin.error(); setTimeout(() => btn.classList.remove('is-wrong'), 800); } }); }, // STEP 4: INPUT bindInput() { const submit = document.getElementById('mm-input-submit'); const field = document.getElementById('mm-input1'); const hint = document.getElementById('mm-input-hint'); if (!submit || !field) return; const check = () => { const val = field.value.trim(); if (val === '3') { field.classList.add('is-correct'); field.classList.remove('is-wrong'); hint.textContent = '🎉 Правильно! Молодец.'; hint.classList.add('is-correct'); hint.classList.remove('is-wrong'); this.completed[4] = true; Matroskin.success(); showToast('+1 ⭐'); setTimeout(() => this.updateUI(), 500); } else { field.classList.add('is-wrong'); field.classList.remove('is-correct'); hint.textContent = 'Подумай ещё: между 2 и 4 стоит какое число?'; hint.classList.add('is-wrong'); hint.classList.remove('is-correct'); this.errors[4]++; if (this.errors[4] >= 1) Matroskin.error(); setTimeout(() => field.classList.remove('is-wrong'), 800); } }; submit.addEventListener('click', check); field.addEventListener('keydown', (e) => { if (e.key === 'Enter') { e.preventDefault(); check(); } }); field.addEventListener('input', () => { field.classList.remove('is-wrong', 'is-correct'); }); }, // NAV bindNav() { const prev = document.getElementById('mm-prev'); const next = document.getElementById('mm-next'); if (prev) prev.addEventListener('click', () => { Audio.play('click'); this.goToStep(this.currentStep - 1); }); if (next) next.addEventListener('click', () => { Audio.play('click'); this.goToStep(this.currentStep + 1); }); }, // FORM bindForm() { const form = document.getElementById('mm-registration'); if (!form) return; form.addEventListener('submit', (e) => { e.preventDefault(); const submitBtn = document.getElementById('mm-form-submit'); if (submitBtn) { submitBtn.disabled = true; submitBtn.textContent = 'Отправляем...'; } setTimeout(() => { Matroskin.react('wave'); Matroskin.say('done', 'Спасибо! Мы скоро свяжемся 🐱'); Confetti.fire(window.innerWidth / 2, window.innerHeight / 2); if (submitBtn) { submitBtn.textContent = '✓ Заявка отправлена!'; submitBtn.style.background = 'var(--mm-green)'; submitBtn.style.boxShadow = '0 5px 0 #2D7A5A'; } }, 800); }); // Add focus sound to inputs form.querySelectorAll('.mm__form-input').forEach(input => { input.addEventListener('focus', () => Audio.play('click')); }); form.querySelectorAll('.mm__form-check').forEach(check => { check.addEventListener('click', () => Audio.play('pop')); }); } }; // ============= INIT ============= if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', () => { Matroskin.init(); Lesson.init(); }); } else { Matroskin.init(); Lesson.init(); } // Init audio on first user interaction (autoplay policy) const initAudioOnce = () => { Audio.init(); document.removeEventListener('click', initAudioOnce); document.removeEventListener('touchstart', initAudioOnce); }; document.addEventListener('click', initAudioOnce, { once: true }); document.addEventListener('touchstart', initAudioOnce, { once: true }); })();