ToM-Tools-Family-Edition

Running

ToM-Tools-Family-Edition / kai-tom-reflection /script.js

Upload 21 files

415dd6f verified 11 months ago

12 kB

/**
 * 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
    `);
})();

	/**
	* 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
	`);
	})();