92 lines
3.1 KiB
JavaScript
92 lines
3.1 KiB
JavaScript
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const ritualSteps = document.querySelectorAll('.ritual-step');
|
|
const nextButtons = document.querySelectorAll('.next-step');
|
|
const progressBar = document.querySelector('.progress-bar-fill');
|
|
const timerElement = document.getElementById('timer');
|
|
const beginButton = document.getElementById('begin-ritual');
|
|
|
|
let currentStep = 0;
|
|
let timerInterval;
|
|
|
|
function showStep(stepIndex) {
|
|
ritualSteps.forEach((step, index) => {
|
|
step.classList.toggle('active', index === stepIndex);
|
|
});
|
|
const progress = ((stepIndex) / (ritualSteps.length - 2)) * 100;
|
|
if(progressBar) {
|
|
progressBar.style.width = `${progress}%`;
|
|
}
|
|
}
|
|
|
|
function startTimer(duration) {
|
|
let timer = duration, minutes, seconds;
|
|
if(!timerElement) return;
|
|
|
|
const updateTimer = () => {
|
|
minutes = parseInt(timer / 60, 10);
|
|
seconds = parseInt(timer % 60, 10);
|
|
|
|
minutes = minutes < 10 ? "0" + minutes : minutes;
|
|
seconds = seconds < 10 ? "0" + seconds : seconds;
|
|
|
|
timerElement.textContent = minutes + ":" + seconds;
|
|
|
|
if (--timer < 0) {
|
|
clearInterval(timerInterval);
|
|
// Optionally, move to next step automatically
|
|
if(currentStep < ritualSteps.length - 1) {
|
|
currentStep++;
|
|
showStep(currentStep);
|
|
} else {
|
|
// Handle completion
|
|
}
|
|
}
|
|
};
|
|
updateTimer();
|
|
timerInterval = setInterval(updateTimer, 1000);
|
|
}
|
|
|
|
if(beginButton) {
|
|
beginButton.addEventListener('click', () => {
|
|
currentStep = 1; // Move to the first ritual step
|
|
showStep(currentStep);
|
|
startTimer(90); // 90 second timer
|
|
});
|
|
}
|
|
|
|
|
|
nextButtons.forEach(button => {
|
|
button.addEventListener('click', () => {
|
|
if (currentStep < ritualSteps.length - 1) {
|
|
currentStep++;
|
|
showStep(currentStep);
|
|
|
|
// If this is the last step, log progress
|
|
if (currentStep === ritualSteps.length - 1) {
|
|
const theme = new URLSearchParams(window.location.search).get('theme') || 'gratitude';
|
|
fetch('log_progress.php', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({ theme: theme })
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (!data.success) {
|
|
console.error('Failed to log progress.');
|
|
}
|
|
})
|
|
.catch(error => console.error('Error logging progress:', error));
|
|
}
|
|
}
|
|
});
|
|
});
|
|
|
|
// Initial setup
|
|
if(ritualSteps.length > 0) {
|
|
showStep(0);
|
|
}
|
|
});
|