// This mood tracker will use a GitHub-like contribution table to visualize mood entries. // We'll use SQLite for persistence, emojis for mood input, and implement a 4-hour cooldown. // The dashboard will display the contribution table and some basic stats. /** @jsxImportSource https://esm.sh/react */ import React, { useState, useEffect } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; const MOODS = ["😄", "😊", "😐", "😕", "😢"]; function App() { const [moodData, setMoodData] = useState([]); const [lastEntry, setLastEntry] = useState(null); const [stats, setStats] = useState({}); useEffect(() => { fetchMoodData(); }, []); const fetchMoodData = async () => { const response = await fetch("/mood-data"); const data = await response.json(); setMoodData(data.moodData); setLastEntry(data.lastEntry); setStats(data.stats); }; const submitMood = async (mood) => { const response = await fetch("/submit-mood", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ mood }), }); if (response.ok) { fetchMoodData(); } else { alert("You can only submit a mood every 4 hours."); } }; const renderContributionTable = () => { const today = new Date(); const oneYearAgo = new Date(today.getFullYear() - 1, today.getMonth(), today.getDate()); const days = []; for (let d = new Date(oneYearAgo); d <= today; d.setDate(d.getDate() + 1)) { const dateStr = d.toISOString().split('T')[0]; const mood = moodData.find(m => m.date === dateStr)?.mood || ""; days.push(

{mood}

); } return

{days}

; }; return (

Mood Tracker

{MOODS.map(mood => ( ))}

Last entry: {lastEntry ? `${lastEntry.mood} at ${new Date(lastEntry.timestamp).toLocaleString()}` : "No entries yet"}

{renderContributionTable()}

Stats

Total entries: {stats.totalEntries}

Most common mood: {stats.mostCommonMood}

Longest streak: {stats.longestStreak} days

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } async function server(request: Request): Promise { const { sqlite } = await import("https://esm.town/v/stevekrouse/sqlite"); const SCHEMA_VERSION = 1; const KEY = new URL(import.meta.url).pathname.split("/").at(-1); await sqlite.execute(` CREATE TABLE IF NOT EXISTS ${KEY}_moods_${SCHEMA_VERSION} ( id INTEGER PRIMARY KEY AUTOINCREMENT, mood TEXT NOT NULL, timestamp DATETIME DEFAULT CURRENT_TIMESTAMP ) `); if (request.method === "POST" && request.url.endsWith("/submit-mood")) { const { mood } = await request.json(); const lastEntry = (await sqlite.execute(`SELECT * FROM ${KEY}_moods_${SCHEMA_VERSION} ORDER BY timestamp DESC LIMIT 1`)).rows[0]; if (lastEntry && (Date.now() - new Date(lastEntry.timestamp).getTime()) < 4 * 60 * 60 * 1000) { return new Response("Too soon", { status: 429 }); } await sqlite.execute(`INSERT INTO ${KEY}_moods_${SCHEMA_VERSION} (mood) VALUES (?)`, [mood]); return new Response("Mood submitted", { status: 200 }); } if (request.url.endsWith("/mood-data")) { const moodData = await sqlite.execute(` SELECT DATE(timestamp) as date, mood FROM ${KEY}_moods_${SCHEMA_VERSION} ORDER BY timestamp DESC `); const lastEntry = moodData.rows[0]; const stats = await calculateStats(sqlite, KEY, SCHEMA_VERSION); return new Response(JSON.stringify({ moodData: moodData.rows, lastEntry, stats }), { headers: { "Content-Type": "application/json" } }); } return new Response(` Mood Tracker

`, { headers: { "Content-Type": "text/html" } }); } async function calculateStats(sqlite, KEY, SCHEMA_VERSION) { const totalEntries = (await sqlite.execute(`SELECT COUNT(*) as count FROM ${KEY}_moods_${SCHEMA_VERSION}`)).rows[0].count; const mostCommonMood = (await sqlite.execute(` SELECT mood, COUNT(*) as count FROM ${KEY}_moods_${SCHEMA_VERSION} GROUP BY mood ORDER BY count DESC LIMIT 1 `)).rows[0]?.mood; const moodData = await sqlite.execute(` SELECT DATE(timestamp) as date FROM ${KEY}_moods_${SCHEMA_VERSION} ORDER BY timestamp `); let longestStreak = 0; let currentStreak = 0; let previousDate = null; for (const row of moodData.rows) { const currentDate = new Date(row.date); if (previousDate && (currentDate.getTime() - previousDate.getTime()) === 86400000) { currentStreak++; } else { longestStreak = Math.max(longestStreak, currentStreak); currentStreak = 1; } previousDate = currentDate; } longestStreak = Math.max(longestStreak, currentStreak); return { totalEntries, mostCommonMood, longestStreak }; } const css = ` body { font-family: Arial, sans-serif; margin: 0; padding: 20px; background-color: #f0f0f0; } .container { max-width: 800px; margin: 0 auto; background-color: white; padding: 20px; border-radius: 8px; box-shadow: 0 0 10px rgba(0,0,0,0.1); } h1 { text-align: center; } .mood-input { display: flex; justify-content: center; margin-bottom: 20px; } .mood-input button { font-size: 24px; margin: 0 5px; padding: 10px; border: none; background-color: #f0f0f0; border-radius: 5px; cursor: pointer; } .contribution-table { display: grid; grid-template-columns: repeat(52, 1fr); gap: 2px; margin-bottom: 20px; } .day { width: 12px; height: 12px; background-color: #ebedf0; border-radius: 2px; font-size: 8px; display: flex; align-items: center; justify-content: center; } .stats { background-color: #f9f9f9; padding: 10px; border-radius: 5px; } footer { text-align: center; margin-top: 20px; } `; export default server;

moodTracker

Versions

v0