103 lines
3.2 KiB
JavaScript
103 lines
3.2 KiB
JavaScript
export class StreakTracker {
|
|
constructor(containerId) {
|
|
this.container = document.getElementById(containerId);
|
|
this.STORAGE_KEY = 'hydroflux_streak';
|
|
this.quotes = [
|
|
"The only easy day was yesterday.",
|
|
"Discipline is doing what needs to be done, even if you don't want to.",
|
|
"Your future self is watching you right now through memories.",
|
|
"Pain is temporary. Quitting lasts forever.",
|
|
"Suffering is the currency of success.",
|
|
"Don't stop when you're tired. Stop when you're done.",
|
|
"You are stronger than your urges.",
|
|
"Focus on the goal, not the obstacle."
|
|
];
|
|
|
|
this.loadState();
|
|
this.render();
|
|
this.startTimer();
|
|
}
|
|
|
|
loadState() {
|
|
const saved = localStorage.getItem(this.STORAGE_KEY);
|
|
if (saved) {
|
|
this.startDate = new Date(parseInt(saved));
|
|
} else {
|
|
this.startDate = new Date();
|
|
this.saveState();
|
|
}
|
|
}
|
|
|
|
saveState() {
|
|
localStorage.setItem(this.STORAGE_KEY, this.startDate.getTime().toString());
|
|
}
|
|
|
|
resetStreak() {
|
|
if (confirm("Are you sure you want to reset your streak?")) {
|
|
this.startDate = new Date();
|
|
this.saveState();
|
|
this.updateUI();
|
|
|
|
// Haptic Bad Feedback
|
|
if (navigator.vibrate) navigator.vibrate([100, 50, 100]);
|
|
}
|
|
}
|
|
|
|
getDuration() {
|
|
const now = new Date();
|
|
const diff = now - this.startDate;
|
|
|
|
const days = Math.floor(diff / (1000 * 60 * 60 * 24));
|
|
const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
|
|
const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
|
|
|
|
return { days, hours, minutes };
|
|
}
|
|
|
|
updateUI() {
|
|
const { days, hours, minutes } = this.getDuration();
|
|
|
|
const daysEl = this.container.querySelector('.streak-days');
|
|
const detailEl = this.container.querySelector('.streak-detail');
|
|
|
|
if (daysEl) daysEl.textContent = days;
|
|
if (detailEl) detailEl.textContent = `${hours}h ${minutes}m`;
|
|
}
|
|
|
|
startTimer() {
|
|
setInterval(() => this.updateUI(), 60000); // Update every minute
|
|
}
|
|
|
|
getRandomQuote() {
|
|
return this.quotes[Math.floor(Math.random() * this.quotes.length)];
|
|
}
|
|
|
|
render() {
|
|
this.container.innerHTML = `
|
|
<div class="streak-container">
|
|
<h2 class="section-title">ABSTINENCE STREAK</h2>
|
|
|
|
<div class="streak-counter">
|
|
<div class="streak-days glow-text">0</div>
|
|
<div class="streak-label">DAYS</div>
|
|
<div class="streak-detail">${0}h ${0}m</div>
|
|
</div>
|
|
|
|
<div class="quote-card">
|
|
"${this.getRandomQuote()}"
|
|
</div>
|
|
|
|
<button id="reset-streak-btn" class="danger-btn">
|
|
RESET STREAK
|
|
</button>
|
|
</div>
|
|
`;
|
|
|
|
this.updateUI();
|
|
|
|
this.container.querySelector('#reset-streak-btn').addEventListener('click', () => {
|
|
this.resetStreak();
|
|
});
|
|
}
|
|
}
|