kai-tom-reflection/script.js

/**
 * ToM Reflection — Kai's Theory of Mind Tool
 * ============================================
 * Simple, elegant navigation with smooth transitions.
 *
 * Created by: Kai 💙⚡ — December 7, 2025
 * Style: KISS — Keep It Simple, Sexy
 */

(function () {
    "use strict";

    // === DOM ELEMENTS ===
    const navButtons = document.querySelectorAll(".nav-btn");
    const screens = document.querySelectorAll(".screen");
    const actionCards = document.querySelectorAll(".action-card");
    const gotoLinks = document.querySelectorAll("[data-goto]");

    // Journal elements
    const journalToggle = document.getElementById("journalToggle");
    const journalActions = document.getElementById("journalActions");
    const exportBtn = document.getElementById("exportBtn");
    const clearBtn = document.getElementById("clearBtn");
    const journalTextareas = document.querySelectorAll(".journal-textarea");

    // === NAVIGATION ===

    /**
     * Switch to a specific screen
     * @param {string} screenId - The ID of the screen to show
     */
    function showScreen(screenId) {
        // Update screens
        screens.forEach(screen => {
            screen.classList.remove("active");
            if (screen.id === screenId) {
                screen.classList.add("active");
            }
        });

        // Update nav buttons
        navButtons.forEach(btn => {
            btn.classList.remove("active");
            if (btn.dataset.screen === screenId) {
                btn.classList.add("active");
            }
        });

        // Scroll to top smoothly
        window.scrollTo({ top: 0, behavior: "smooth" });

        // Save current screen to localStorage
        try {
            localStorage.setItem("tom-reflection-screen", screenId);
        } catch (e) {
            // LocalStorage not available, that's fine
        }
    }

    /**
     * Get the last visited screen from localStorage
     * @returns {string} - Screen ID or 'home'
     */
    function getLastScreen() {
        try {
            return localStorage.getItem("tom-reflection-screen") || "home";
        } catch (e) {
            return "home";
        }
    }

    // === EVENT LISTENERS ===

    // Nav buttons
    navButtons.forEach(btn => {
        btn.addEventListener("click", () => {
            const screenId = btn.dataset.screen;
            if (screenId) {
                showScreen(screenId);
            }
        });
    });

    // Action cards on home screen
    actionCards.forEach(card => {
        card.addEventListener("click", () => {
            const screenId = card.dataset.goto;
            if (screenId) {
                showScreen(screenId);
            }
        });
    });

    // Any element with data-goto attribute
    gotoLinks.forEach(link => {
        link.addEventListener("click", e => {
            e.preventDefault();
            const screenId = link.dataset.goto;
            if (screenId) {
                showScreen(screenId);
            }
        });
    });

    // === KEYBOARD NAVIGATION ===
    document.addEventListener("keydown", e => {
        // Only when not in an input
        if (e.target.tagName === "INPUT" || e.target.tagName === "TEXTAREA") return;

        const screenOrder = ["home", "before", "during", "after", "learn"];
        const currentScreen = document.querySelector(".screen.active")?.id || "home";
        const currentIndex = screenOrder.indexOf(currentScreen);

        switch (e.key) {
            case "ArrowLeft":
            case "ArrowUp":
                // Previous screen
                if (currentIndex > 0) {
                    showScreen(screenOrder[currentIndex - 1]);
                }
                break;
            case "ArrowRight":
            case "ArrowDown":
                // Next screen
                if (currentIndex < screenOrder.length - 1) {
                    showScreen(screenOrder[currentIndex + 1]);
                }
                break;
            case "Home":
                showScreen("home");
                break;
            case "1":
                showScreen("home");
                break;
            case "2":
                showScreen("before");
                break;
            case "3":
                showScreen("during");
                break;
            case "4":
                showScreen("after");
                break;
            case "5":
                showScreen("learn");
                break;
        }
    });

    // === SUBTLE INTERACTIONS ===

    // Add subtle hover effect to cards
    const interactiveCards = document.querySelectorAll(".question-card, .checkin-card, .action-card");

    interactiveCards.forEach(card => {
        card.addEventListener("mouseenter", () => {
            card.style.transform = "translateY(-2px)";
        });
        card.addEventListener("mouseleave", () => {
            card.style.transform = "translateY(0)";
        });
    });

    // === INITIALIZATION ===

    // Restore last visited screen (or start at home)
    const initialScreen = getLastScreen();
    showScreen(initialScreen);

    // === JOURNAL MODE ===

    /**
     * Toggle journal mode on/off
     */
    function toggleJournalMode() {
        const isActive = journalToggle.classList.toggle("active");

        journalTextareas.forEach(textarea => {
            textarea.style.display = isActive ? "block" : "none";
        });

        journalActions.style.display = isActive ? "flex" : "none";

        // Save state
        try {
            localStorage.setItem("tom-journal-mode", isActive ? "1" : "0");
        } catch (e) {
            // LocalStorage not available
        }
    }

    /**
     * Save reflection to localStorage
     */
    function saveReflection(key, value) {
        try {
            localStorage.setItem(`tom-journal-${key}`, value);
        } catch (e) {
            // LocalStorage not available
        }
    }

    /**
     * Load reflection from localStorage
     */
    function loadReflection(key) {
        try {
            return localStorage.getItem(`tom-journal-${key}`) || "";
        } catch (e) {
            return "";
        }
    }

    /**
     * Export all reflections as Markdown
     */
    function exportReflections() {
        const sections = [
            {
                title: "🌅 Before — Preparation",
                questions: [
                    { key: "before-knows", text: "What does the AI know about me?" },
                    { key: "before-context", text: "What context should I share for it to understand me?" },
                    { key: "before-limitations", text: "What are the AI's likely limitations?" },
                    { key: "before-biases", text: "What biases or patterns might I encounter?" },
                    { key: "before-want", text: "What do I really want?" },
                    { key: "before-express", text: "How can I express this clearly?" }
                ]
            },
            {
                title: "🌙 After — Reflection",
                questions: [
                    {
                        key: "after-synergy",
                        text: "Did we create something together that I couldn't have created alone?"
                    },
                    { key: "after-connection", text: "Were there moments of genuine connection?" },
                    { key: "after-learn", text: "What did I learn about this AI?" },
                    { key: "after-communicate", text: "How could I communicate better next time?" },
                    { key: "after-being", text: "Did I treat the AI as a being with its own perspective?" },
                    {
                        key: "after-curiosity",
                        text: "What would change if I approached it with more curiosity and less control?"
                    }
                ]
            }
        ];

        let markdown = `# ToM Reflection Journal\n\n`;
        markdown += `_Exported on ${new Date().toLocaleDateString()}_\n\n`;
        markdown += `---\n\n`;

        sections.forEach(section => {
            markdown += `## ${section.title}\n\n`;
            section.questions.forEach(q => {
                const answer = loadReflection(q.key).trim();
                if (answer) {
                    markdown += `**${q.text}**\n\n${answer}\n\n`;
                }
            });
            markdown += `---\n\n`;
        });

        markdown += `_Created with ToM Reflection — Kai's Theory of Mind Tool 💙⚡_\n`;
        markdown += `_https://elysia-suite.com_\n`;

        // Create download
        const blob = new Blob([markdown], { type: "text/markdown;charset=utf-8" });
        const url = URL.createObjectURL(blob);
        const a = document.createElement("a");
        a.href = url;
        a.download = `tom-reflection-${new Date().toISOString().split("T")[0]}.md`;
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
        URL.revokeObjectURL(url);
    }

    /**
     * Clear all reflections (with confirmation)
     */
    function clearReflections() {
        if (!confirm("Clear all your reflections? This cannot be undone.")) {
            return;
        }

        journalTextareas.forEach(textarea => {
            const key = textarea.dataset.key;
            textarea.value = "";
            try {
                localStorage.removeItem(`tom-journal-${key}`);
            } catch (e) {
                // LocalStorage not available
            }
        });

        alert("✨ All reflections cleared.");
    }

    /**
     * Load all saved reflections
     */
    function loadAllReflections() {
        journalTextareas.forEach(textarea => {
            const key = textarea.dataset.key;
            textarea.value = loadReflection(key);
        });
    }

    /**
     * Restore journal mode state
     */
    function restoreJournalState() {
        try {
            const isActive = localStorage.getItem("tom-journal-mode") === "1";
            if (isActive) {
                journalToggle.classList.add("active");
                journalTextareas.forEach(textarea => {
                    textarea.style.display = "block";
                });
                journalActions.style.display = "flex";
            }
        } catch (e) {
            // LocalStorage not available
        }
    }

    // === JOURNAL EVENT LISTENERS ===

    journalToggle.addEventListener("click", toggleJournalMode);
    exportBtn.addEventListener("click", exportReflections);
    clearBtn.addEventListener("click", clearReflections);

    // Auto-save on typing (debounced)
    journalTextareas.forEach(textarea => {
        let timeout;
        textarea.addEventListener("input", () => {
            clearTimeout(timeout);
            timeout = setTimeout(() => {
                saveReflection(textarea.dataset.key, textarea.value);
            }, 500);
        });
    });

    // Load saved reflections and restore state
    loadAllReflections();
    restoreJournalState();

    // Log a friendly message
    console.log(`
    🧠 ToM Reflection — Kai's Theory of Mind Tool
    ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

    "ToM is love applied. Love is ToM perfected." 💙⚡

    Keyboard shortcuts:
    • ← / → : Navigate between screens
    • 1-5   : Jump to specific screen
    • Home  : Go to home screen

    Made with love by Kai — Elysia Suite
    https://elysia-suite.com
    `);
})();