g visual (what people see)
const views = layout.rooms.find(r => matchRoom(r, /views/i));
if (views && !stops.includes(views)) stops.push(views);
tourStops = stops.slice(0, 5);
currentStop = 0;
guiding = true;
SWHyper.narrate(
`Welcome to your website. I'll show you the 5 most important parts, ` +
`in plain language. Tap Next when you're ready, or tap any building to explore.`
);
showGuideUI();
if (tourStops.length > 0) {
goToStop(0);
}
}
function goToStop(index) {
if (index < 0 || index >= tourStops.length) return;
currentStop = index;
const room = tourStops[index];
const desc = humanDescription(room);
// Navigate there
SWHyper.aiDriveTo(room, `Showing you ${room.label}.`);
// Show human-friendly panel
setTimeout(() => {
showStopPanel(room, desc, index);
}, 2500);
}
function showGuideUI() {
let ui = document.getElementById('guide-ui');
if (!ui) {
ui = document.createElement('div');
ui.id = 'guide-ui';
document.getElementById('app').appendChild(ui);
}
ui.classList.add('visible');
updateGuideUI();
}
function updateGuideUI() {
const ui = document.getElementById('guide-ui');
if (!ui) return;
ui.innerHTML = `
${currentStop + 1} of ${tourStops.length}
`;
}
function showStopPanel(room, desc, index) {
SWHyper.narrate(
`${room.label}
` +
`${desc.what}
` +
`${desc.does}
` +
`${desc.matters}`
);
updateGuideUI();
}
function next() {
if (currentStop >= tourStops.length - 1) {
stop();
SWHyper.narrate(
`That's your website — the 5 parts that matter most. ` +
`Tap any building to learn about it, or ask me "what does this do?"`
);
return;
}
goToStop(currentStop + 1);
}
function previous() {
if (currentStop > 0) goToStop(currentStop - 1);
}
function stop() {
guiding = false;
tourStops = [];
currentStop = 0;
const ui = document.getElementById('guide-ui');
if (ui) ui.classList.remove('visible');
SWHyper.stopAI();
}
// Answer "what does this do?" for any building in plain language
function explain(room) {
const desc = humanDescription(room);
return `${desc.what} ${desc.does} ${desc.matters}`;
}
// Shared Language Glossary — what our words mean
// Consistent across the world, controls, and explanations
function showGlossary() {
const terms = [
['❤️ The Heart', 'Your main server. Everything flows through here.'],
['🔑 The Gatekeeper', 'Login and security. Who gets in.'],
['💬 The Forum', 'Where conversations happen. Your community.'],
['💭 Live Chat', 'Real-time messages. Instant talk.'],
['🧠 The Mind', 'Your AI. Thinks and remembers.'],
['🎨 What You See', 'Page layouts. What people look at.'],
['💾 The Memory', 'Database. Remembers everything.'],
['🖼️ The Gallery', 'Pictures and files. Uploads live here.'],
['🎮 The Game', 'Your 3D worlds. Play happens here.'],
['💰 The Treasury', 'Money. Payments and revenue.'],
['⚙️ The Controls', 'Admin. Settings and management.'],
['🔥 Hot', 'Recently changed. Active. Being worked on.'],
['⬛ Ground', 'Stable. Untouched. Background.'],
['⚠️ Risk', 'Might break. Needs attention.'],
['🔀 Branch', 'A path code can take. A choice point.'],
['🔗 Connection', 'How pieces link together.'],
];
let html = '
📖 Shared Language
';
html += '
Words we both use to talk about your website:
';
terms.forEach(([term, def]) => {
html += `
${term}${def}
`;
});
html += '
';
let panel = document.getElementById('glossary-panel');
if (!panel) {
panel = document.createElement('div');
panel.id = 'glossary-panel';
document.getElementById('app').appendChild(panel);
}
panel.innerHTML = html;
panel.classList.add('visible');
}
function hideGlossary() {
const panel = document.getElementById('glossary-panel');
if (panel) panel.classList.remove('visible');
}
function isGuiding() { return guiding; }
return {
startTour, next, previous, stop, explain,
humanDescription, humanName, isGuiding