// Next step in guided tutorial
tutorialNextButtons.forEach(btn => {
btn.addEventListener('click', () => {
// Hide current step
const currentStep = document.querySelector(`.tutorial-step[data-step="${currentTutorialStep}"]`);
if (currentStep) currentStep.style.display = 'none';
// Increment step
currentTutorialStep++;
// Show next step
const nextStep = document.querySelector(`.tutorial-step[data-step="${currentTutorialStep}"]`);
if (nextStep) nextStep.style.display = 'block';
});
});
// Close guided tutorial
tutorialCloseButton.addEventListener('click', () => {
guidedTutorialOverlay.classList.remove('active');
});
// Initialize everything
initPiano();
setupKeyboardEvents();
initDiagonalLines(); Skin shop functionality
const skinCards = document.querySelectorAll('.skin-grid .song-card');
const skinPreview = document.querySelector('.skin-preview');
// Apply skin preview
function applySkinPreview(skinName) {
// Update the active skin attribute
skinPreview.setAttribute('data-active-skin', skinName);
// Just for demo, we'd normally have more complex logic here
// with CSS changes applied to the mini piano
}
// Initialize with classic skin
applySkinPreview('classic');
// Add event listeners to skin cards
skinCards.forEach(card => {
card.addEventListener('click', () => {
// Update selection
skinCards.forEach(c => c.classList.remove('selected'));
card.classList.add('selected');
// Apply skin preview
const skinName = card.dataset.skin;
applySkinPreview(skinName);
});
});
// Guided tutorial
const guidedTutorialBtn = document.getElementById('guided-tutorial-btn');
const guidedTutorialOverlay = document.getElementById('guided-tutorial-overlay');
const tutorialSteps = document.querySelectorAll('.tutorial-step');
const tutorialNextButtons = document.querySelectorAll('.tutorial-next');
const tutorialCloseButton = document.querySelector('.tutorial-close');
let currentTutorialStep = 1;
// Start guided tutorial
guidedTutorialBtn.addEventListener('click', () => {
// Close the tutorial modal
tutorialModal.classList.remove('active');
// Reset to first step
currentTutorialStep = 1;
// Hide all steps
tutorialSteps.forEach(step => {
step.style.display = 'none';
});
// Show first step
const firstStep = document.querySelector('.tutorial-step[data-step="1"]');
if (firstStep) firstStep.style.display = 'block';
// Show the overlay
guidedTutorialOverlay.classList.add('active');
});
//