script.js - main - Larfi/sober-live

script.js
263 строки9 KB
Larfi44
Initialization
26 июн 2026, 08:23
26 июн 2026, 08:230ebf708
// Timer identifiers
const timerIds = ['gaming', 'junkfood', 'masturbation', 'porn', 'bedtime', 'wakeup'];

// Chart objects
const charts = {};

// Initialize timers when the page loads
window.onload = function () {
    initializeTimers();
    initializeCharts();

    // Update all timers every second
    setInterval(updateAllTimers, 1000);
};

// Initialize all timers
function initializeTimers() {
    timerIds.forEach(timerId => {
        const startTime = getStartTime(timerId);
        updateTimerDisplay(timerId, startTime);

        // Update record display
        const record = getRecord(timerId);
        if (record > 0) {
            updateRecordDisplay(timerId, record);
        }
    });
}

// Initialize charts
function initializeCharts() {
    timerIds.forEach(timerId => {
        const ctx = document.getElementById(`${timerId}-chart`);
        if (ctx) {
            const history = getDurationHistory(timerId);

            // Store timestamps in a way Chart.js can access
            const timestamps = history.map(item => item.timestamp);

            charts[timerId] = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: history.map(item => formatDateOnly(item.timestamp)),
                    datasets: [{
                        label: 'Duration',
                        data: history.map(item => item.duration),
                        backgroundColor: '#667eea',
                        borderColor: '#764ba2',
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    layout: {
                        padding: {
                            left: 10,
                            right: 10,
                            top: 10,
                            bottom: 50
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true,
                            title: {
                                display: true,
                                text: 'Duration'
                            },
                            ticks: {
                                callback: function (value) {
                                    return formatDuration(value);
                                }
                            }
                        },
                        x: {
                            title: {
                                display: true,
                                text: 'Date'
                            },
                            ticks: {
                                maxRotation: 45,
                                minRotation: 45,
                                autoSkip: false,
                                padding: 15,
                                font: {
                                    size: 10
                                }
                            },
                            grid: {
                                display: false
                            }
                        }
                    },
                    plugins: {
                        legend: {
                            display: false
                        },
                        tooltip: {
                            enabled: true,
                            mode: 'nearest',
                            intersect: true,
                            callbacks: {
                                title: function (tooltipItems, data) {
                                    // Get the timestamp from the same index as the tooltip item
                                    const history = getDurationHistory(timerId);
                                    const index = tooltipItems[0].dataIndex;
                                    const timestamp = history[index].timestamp;
                                    return formatDateTime(timestamp);
                                },
                                label: function (tooltipItem, data) {
                                    return `Duration: ${formatDuration(tooltipItem.raw)}`;
                                }
                            }
                        }
                    }
                },
                // Store timestamps in the chart instance for access in tooltips
                timestamps: timestamps
            });
        }
    });
}

// Get start time for a timer from localStorage or set current time if not exists
function getStartTime(timerId) {
    const key = `sober_${timerId}_start`;
    let startTime = localStorage.getItem(key);

    if (!startTime) {
        startTime = Date.now();
        localStorage.setItem(key, startTime);
    }

    return parseInt(startTime);
}

// Update the display for a specific timer
function updateTimerDisplay(timerId, startTime) {
    const currentTime = Date.now();
    const elapsedTime = currentTime - startTime;

    const days = Math.floor(elapsedTime / (1000 * 60 * 60 * 24));
    const hours = Math.floor((elapsedTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    const minutes = Math.floor((elapsedTime % (1000 * 60 * 60)) / (1000 * 60));
    const seconds = Math.floor((elapsedTime % (1000 * 60)) / 1000);

    const timeString = `${days}d ${hours}h ${minutes}m ${seconds}s`;

    const timeElement = document.getElementById(`${timerId}-time`);
    if (timeElement) {
        timeElement.textContent = timeString;
    }
}

// Update all timers
function updateAllTimers() {
    timerIds.forEach(timerId => {
        const startTime = getStartTime(timerId);
        updateTimerDisplay(timerId, startTime);
    });
}

// Reset a specific timer
function resetTimer(timerId) {
    if (confirm(`Are you sure you want to reset the ${timerId.replace('_', ' ')} timer?`)) {
        const startTime = getStartTime(timerId);
        const endTime = Date.now();
        const duration = endTime - startTime;

        // Add to history with timestamp
        addDurationToHistory(timerId, duration, endTime);

        // Update record if needed
        const record = getRecord(timerId);
        if (duration > record) {
            localStorage.setItem(`sober_${timerId}_record`, duration);
            updateRecordDisplay(timerId, duration);
        }

        // Reset timer
        localStorage.setItem(`sober_${timerId}_start`, Date.now());

        // Update the display immediately
        updateTimerDisplay(timerId, Date.now());

        // Update chart
        if (charts[timerId]) {
            updateChart(timerId);
        }
    }
}

// Update record display
function updateRecordDisplay(timerId, duration) {
    const recordElement = document.getElementById(`${timerId}-record`);
    if (recordElement) {
        recordElement.textContent = formatDuration(duration);
    }
}

// Format duration in milliseconds to readable string
function formatDuration(durationMs) {
    const seconds = Math.floor(durationMs / 1000);
    const days = Math.floor(seconds / (24 * 60 * 60));
    const hours = Math.floor((seconds % (24 * 60 * 60)) / (60 * 60));
    const minutes = Math.floor((seconds % (60 * 60)) / 60);
    const secs = seconds % 60;

    return `${days}d ${hours}h ${minutes}m ${secs}s`;
}

// Get record for a timer
function getRecord(timerId) {
    const record = localStorage.getItem(`sober_${timerId}_record`);
    return record ? parseInt(record) : 0;
}

// Get duration history for a timer
function getDurationHistory(timerId) {
    const history = localStorage.getItem(`sober_${timerId}_history`);
    return history ? JSON.parse(history) : [];
}

// Add duration to history with timestamp
function addDurationToHistory(timerId, duration, timestamp) {
    const history = getDurationHistory(timerId);
    history.push({
        duration: duration,
        timestamp: timestamp
    });

    // Keep only last 10 attempts
    if (history.length > 10) {
        history.shift();
    }

    localStorage.setItem(`sober_${timerId}_history`, JSON.stringify(history));
}

// Update chart with new data
function updateChart(timerId) {
    const history = getDurationHistory(timerId);

    if (charts[timerId]) {
        charts[timerId].data.labels = history.map(item => formatDateOnly(item.timestamp));
        charts[timerId].data.datasets[0].data = history.map(item => item.duration);
        charts[timerId].timestamps = history.map(item => item.timestamp);
        charts[timerId].update();
    }
}

// Format timestamp to readable date only (for x-axis labels)
function formatDateOnly(timestamp) {
    const date = new Date(timestamp);
    return date.toLocaleDateString();
}

// Format timestamp to readable date and time (for tooltips)
function formatDateTime(timestamp) {
    const date = new Date(timestamp);
    return date.toLocaleDateString() + ' ' + date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
}