418 lines
14 KiB
JavaScript
418 lines
14 KiB
JavaScript
/* ============================================================
|
|
TERMINAL PORTFOLIO — JS
|
|
Tree navigation + Markdown page viewer
|
|
============================================================ */
|
|
|
|
'use strict';
|
|
|
|
// ── Constants ──────────────────────────────────────────────
|
|
const ITEM_H = 28; // px, must match --item-h CSS var
|
|
const SCROLL_STEP = 80; // px per arrow key in page view
|
|
const BOOT_LINES = [
|
|
{ text: 'GAUVAIN BOICHÉ PORTFOLIO TERMINAL v1.0', cls: 'boot-ok' },
|
|
{ text: '─────────────────────────────────────────', cls: 'boot-dim' },
|
|
{ text: 'Initializing display subsystem... OK', cls: '' },
|
|
{ text: 'Loading content tree... OK', cls: '' },
|
|
{ text: 'Mounting virtual filesystem... OK', cls: '' },
|
|
{ text: '─────────────────────────────────────────', cls: 'boot-dim' },
|
|
{ text: 'System ready. Use ↑↓ + ENTER to navigate.', cls: 'boot-ok' },
|
|
];
|
|
const BOOT_MS = 60; // delay between boot lines (ms)
|
|
const BOOT_HOLD = 800; // ms after last line before switching to tree
|
|
|
|
// ── State ──────────────────────────────────────────────────
|
|
const state = {
|
|
mode: 'boot', // 'boot' | 'tree' | 'page'
|
|
dirStack: [], // [{node, selectedIdx, scrollOffset}, …]
|
|
};
|
|
|
|
let manifest = null;
|
|
|
|
// ── Utility ─────────────────────────────────────────────────
|
|
function esc(str) {
|
|
return str
|
|
.replace(/&/g, '&')
|
|
.replace(/</g, '<')
|
|
.replace(/>/g, '>')
|
|
.replace(/"/g, '"');
|
|
}
|
|
|
|
function el(id) { return document.getElementById(id); }
|
|
|
|
// ── Path helpers ────────────────────────────────────────────
|
|
function buildPath() {
|
|
const parts = state.dirStack.map(d => d.node.name);
|
|
return parts.join('/').replace(/^~\//, '~/') || '~';
|
|
}
|
|
|
|
function currentDirState() {
|
|
return state.dirStack[state.dirStack.length - 1];
|
|
}
|
|
|
|
function getDirItems(dirNode, isRoot) {
|
|
const items = isRoot ? [] : [{ name: '..', type: 'parent' }];
|
|
if (dirNode.children) {
|
|
const sorted = [...dirNode.children].sort((a, b) => {
|
|
if (a.type === 'dir' && b.type !== 'dir') return -1;
|
|
if (a.type !== 'dir' && b.type === 'dir') return 1;
|
|
return a.name.localeCompare(b.name);
|
|
});
|
|
items.push(...sorted);
|
|
}
|
|
return items;
|
|
}
|
|
|
|
// ── Render dispatcher ────────────────────────────────────────
|
|
function render() {
|
|
if (state.mode === 'tree') renderTree();
|
|
else if (state.mode === 'page') renderPage();
|
|
}
|
|
|
|
// ── Tree view ────────────────────────────────────────────────
|
|
function renderTree() {
|
|
const ds = currentDirState();
|
|
const isRoot = state.dirStack.length === 1;
|
|
const items = getDirItems(ds.node, isRoot);
|
|
const path = buildPath();
|
|
|
|
el('current-path').textContent = path;
|
|
|
|
// How many items fit in the viewport
|
|
const bodyH = el('terminal-body').clientHeight;
|
|
// Rough overhead: prompt(22) + sep(10) + sep(10) + scrollinfo(22) + padding(16)
|
|
const overhead = 80;
|
|
const visible = Math.max(1, Math.floor((bodyH - overhead) / ITEM_H));
|
|
|
|
// Clamp scroll so selected item stays visible
|
|
let scroll = ds.scrollOffset || 0;
|
|
if (ds.selectedIdx < scroll) scroll = ds.selectedIdx;
|
|
if (ds.selectedIdx >= scroll + visible) scroll = ds.selectedIdx - visible + 1;
|
|
scroll = Math.max(0, Math.min(scroll, Math.max(0, items.length - visible)));
|
|
ds.scrollOffset = scroll;
|
|
|
|
const slice = items.slice(scroll, scroll + visible);
|
|
const above = scroll;
|
|
const below = Math.max(0, items.length - scroll - visible);
|
|
|
|
// Prompt line
|
|
const prompt = `gauvain@portfolio:${path}$ ls`;
|
|
|
|
// Build HTML
|
|
let html = `<div class="tree-prompt">${esc(prompt)}</div>`;
|
|
html += `<hr class="tree-sep">`;
|
|
html += `<div class="tree-items-wrap"><div class="tree-items-inner" id="tree-items-inner">`;
|
|
|
|
slice.forEach((item, vi) => {
|
|
const realIdx = scroll + vi;
|
|
const sel = realIdx === ds.selectedIdx;
|
|
const isDir = item.type === 'dir';
|
|
const isPar = item.type === 'parent';
|
|
const icon = isPar ? '../' : (isDir ? `${item.name}/` : item.name);
|
|
const cls = [
|
|
'tree-item',
|
|
sel ? 'selected' : '',
|
|
isDir ? 'item-dir' : '',
|
|
isPar ? 'item-parent' : '',
|
|
].filter(Boolean).join(' ');
|
|
|
|
html += `<div class="${cls}" data-idx="${realIdx}">${esc(icon)}</div>`;
|
|
});
|
|
|
|
html += `</div></div>`;
|
|
html += `<hr class="tree-sep">`;
|
|
|
|
const scrollInfo = [
|
|
above > 0 ? `↑ ${above} above` : '',
|
|
below > 0 ? `↓ ${below} below` : '',
|
|
].filter(Boolean).join(' ');
|
|
html += `<div class="tree-scroll-info">${scrollInfo}</div>`;
|
|
|
|
el('tree-view').innerHTML = html;
|
|
el('tree-view').classList.remove('hidden');
|
|
el('page-view').classList.add('hidden');
|
|
|
|
// Update status bar
|
|
el('status-left').textContent = `${items.length} item(s)`;
|
|
el('status-right').innerHTML =
|
|
`<span class="key">↑↓</span> SELECT ` +
|
|
`<span class="key">ENTER</span> OPEN ` +
|
|
`<span class="key">ESC</span> BACK`;
|
|
|
|
// Event delegation on items
|
|
const inner = el('tree-items-inner');
|
|
if (inner) {
|
|
inner.addEventListener('click', onTreeItemClick);
|
|
inner.addEventListener('dblclick', onTreeItemDblClick);
|
|
}
|
|
}
|
|
|
|
function onTreeItemClick(e) {
|
|
const itemEl = e.target.closest('.tree-item');
|
|
if (!itemEl) return;
|
|
const idx = parseInt(itemEl.dataset.idx, 10);
|
|
currentDirState().selectedIdx = idx;
|
|
renderTree();
|
|
}
|
|
|
|
function onTreeItemDblClick(e) {
|
|
const itemEl = e.target.closest('.tree-item');
|
|
if (!itemEl) return;
|
|
const idx = parseInt(itemEl.dataset.idx, 10);
|
|
currentDirState().selectedIdx = idx;
|
|
openSelected();
|
|
}
|
|
|
|
// ── Open selected item ────────────────────────────────────────
|
|
function openSelected() {
|
|
const ds = currentDirState();
|
|
const isRoot = state.dirStack.length === 1;
|
|
const items = getDirItems(ds.node, isRoot);
|
|
const item = items[ds.selectedIdx];
|
|
if (!item) return;
|
|
|
|
if (item.type === 'parent') {
|
|
navigateBack();
|
|
return;
|
|
}
|
|
|
|
if (item.type === 'dir') {
|
|
state.dirStack.push({ node: item, selectedIdx: 0, scrollOffset: 0 });
|
|
renderTree();
|
|
return;
|
|
}
|
|
|
|
// It's a file — load it
|
|
loadPage(item.path, item.name);
|
|
}
|
|
|
|
// ── Navigate back ─────────────────────────────────────────────
|
|
function navigateBack() {
|
|
if (state.mode === 'page') {
|
|
state.mode = 'tree';
|
|
render();
|
|
return;
|
|
}
|
|
if (state.dirStack.length > 1) {
|
|
state.dirStack.pop();
|
|
renderTree();
|
|
}
|
|
}
|
|
|
|
// ── Page view ─────────────────────────────────────────────────
|
|
async function loadPage(path, name) {
|
|
state.mode = 'page';
|
|
|
|
el('tree-view').classList.add('hidden');
|
|
el('page-view').classList.remove('hidden');
|
|
el('page-header').textContent = `gauvain@portfolio:${buildPath()}$ cat ${name}`;
|
|
el('page-content').innerHTML = `<p style="color:var(--gold-dim)">Loading…</p>`;
|
|
el('current-path').textContent = buildPath() + '/' + name;
|
|
|
|
updatePageStatus();
|
|
|
|
try {
|
|
const res = await fetch(path);
|
|
if (!res.ok) throw new Error(`HTTP ${res.status}`);
|
|
const md = await res.text();
|
|
el('page-content').innerHTML = marked.parse(md);
|
|
el('page-scroll-area').scrollTop = 0;
|
|
} catch (err) {
|
|
el('page-content').innerHTML =
|
|
`<p style="color:#a00">ERROR: Could not load <code>${esc(path)}</code><br>${esc(err.message)}</p>`;
|
|
}
|
|
|
|
updatePageStatus();
|
|
}
|
|
|
|
function renderPage() {
|
|
el('tree-view').classList.add('hidden');
|
|
el('page-view').classList.remove('hidden');
|
|
updatePageStatus();
|
|
}
|
|
|
|
function updatePageStatus() {
|
|
el('status-left').textContent = state.mode === 'page' ? 'READING' : '';
|
|
el('status-right').innerHTML =
|
|
`<span class="key" id="btn-up">↑</span> SCROLL UP ` +
|
|
`<span class="key" id="btn-dn">↓</span> SCROLL DOWN ` +
|
|
`<span class="key" id="btn-q">Q</span> QUIT`;
|
|
|
|
const sa = el('page-scroll-area');
|
|
const btnUp = el('btn-up');
|
|
const btnDn = el('btn-dn');
|
|
const btnQ = el('btn-q');
|
|
if (btnUp) btnUp.onclick = () => { sa.scrollBy({ top: -SCROLL_STEP, behavior: 'smooth' }); };
|
|
if (btnDn) btnDn.onclick = () => { sa.scrollBy({ top: SCROLL_STEP, behavior: 'smooth' }); };
|
|
if (btnQ) btnQ.onclick = navigateBack;
|
|
}
|
|
|
|
// ── Keyboard events ───────────────────────────────────────────
|
|
function setupKeyboard() {
|
|
document.addEventListener('keydown', (e) => {
|
|
if (state.mode === 'boot') return;
|
|
|
|
if (state.mode === 'tree') {
|
|
handleTreeKey(e);
|
|
} else if (state.mode === 'page') {
|
|
handlePageKey(e);
|
|
}
|
|
});
|
|
}
|
|
|
|
function handleTreeKey(e) {
|
|
const ds = currentDirState();
|
|
const isRoot = state.dirStack.length === 1;
|
|
const items = getDirItems(ds.node, isRoot);
|
|
|
|
switch (e.key) {
|
|
case 'ArrowUp':
|
|
e.preventDefault();
|
|
ds.selectedIdx = Math.max(0, ds.selectedIdx - 1);
|
|
renderTree();
|
|
break;
|
|
case 'ArrowDown':
|
|
e.preventDefault();
|
|
ds.selectedIdx = Math.min(items.length - 1, ds.selectedIdx + 1);
|
|
renderTree();
|
|
break;
|
|
case 'Enter':
|
|
e.preventDefault();
|
|
openSelected();
|
|
break;
|
|
case 'Escape':
|
|
case 'ArrowLeft':
|
|
e.preventDefault();
|
|
navigateBack();
|
|
break;
|
|
case 'ArrowRight':
|
|
e.preventDefault();
|
|
openSelected();
|
|
break;
|
|
}
|
|
}
|
|
|
|
function handlePageKey(e) {
|
|
const sa = el('page-scroll-area');
|
|
switch (e.key) {
|
|
case 'ArrowUp':
|
|
case 'k':
|
|
e.preventDefault();
|
|
sa.scrollBy({ top: -SCROLL_STEP, behavior: 'smooth' });
|
|
break;
|
|
case 'ArrowDown':
|
|
case 'j':
|
|
e.preventDefault();
|
|
sa.scrollBy({ top: SCROLL_STEP, behavior: 'smooth' });
|
|
break;
|
|
case 'Home':
|
|
e.preventDefault();
|
|
sa.scrollTo({ top: 0, behavior: 'smooth' });
|
|
break;
|
|
case 'End':
|
|
e.preventDefault();
|
|
sa.scrollTo({ top: sa.scrollHeight, behavior: 'smooth' });
|
|
break;
|
|
case 'PageUp':
|
|
e.preventDefault();
|
|
sa.scrollBy({ top: -(sa.clientHeight * 0.85), behavior: 'smooth' });
|
|
break;
|
|
case 'PageDown':
|
|
e.preventDefault();
|
|
sa.scrollBy({ top: (sa.clientHeight * 0.85), behavior: 'smooth' });
|
|
break;
|
|
case 'q':
|
|
case 'Q':
|
|
case 'Escape':
|
|
e.preventDefault();
|
|
navigateBack();
|
|
break;
|
|
}
|
|
}
|
|
|
|
// ── Cursor block (click simulation) ──────────────────────────
|
|
function setupCursor() {
|
|
const cursor = el('cursor-block');
|
|
let hideTimer = null;
|
|
|
|
document.addEventListener('click', (e) => {
|
|
// Skip clicks on status-bar keys (they have their own handlers)
|
|
if (e.target.classList.contains('key')) return;
|
|
|
|
cursor.style.left = e.clientX + 'px';
|
|
cursor.style.top = e.clientY + 'px';
|
|
cursor.classList.add('active');
|
|
cursor.style.opacity = '1';
|
|
|
|
clearTimeout(hideTimer);
|
|
hideTimer = setTimeout(() => {
|
|
cursor.classList.remove('active');
|
|
cursor.style.opacity = '0';
|
|
}, 2800);
|
|
});
|
|
}
|
|
|
|
// ── Boot sequence ─────────────────────────────────────────────
|
|
async function runBoot() {
|
|
// Inject a temporary boot screen inside the terminal body
|
|
const bootDiv = document.createElement('div');
|
|
bootDiv.id = 'boot-screen';
|
|
|
|
// Append to tree-view placeholder (it's empty at this point)
|
|
el('tree-view').appendChild(bootDiv);
|
|
el('tree-view').classList.remove('hidden');
|
|
|
|
for (let i = 0; i < BOOT_LINES.length; i++) {
|
|
await sleep(BOOT_MS);
|
|
const { text, cls } = BOOT_LINES[i];
|
|
const line = document.createElement('div');
|
|
line.className = 'boot-line ' + (cls || '');
|
|
line.textContent = text;
|
|
bootDiv.appendChild(line);
|
|
}
|
|
|
|
await sleep(BOOT_HOLD);
|
|
bootDiv.remove();
|
|
}
|
|
|
|
function sleep(ms) {
|
|
return new Promise(resolve => setTimeout(resolve, ms));
|
|
}
|
|
|
|
// ── Init ──────────────────────────────────────────────────────
|
|
document.addEventListener('DOMContentLoaded', async () => {
|
|
try {
|
|
// Fetch manifest first (fail fast)
|
|
const res = await fetch('content/manifest.json');
|
|
if (!res.ok) throw new Error(`Manifest HTTP ${res.status}`);
|
|
manifest = await res.json();
|
|
} catch (err) {
|
|
showFatal('Failed to load content/manifest.json — ' + err.message);
|
|
return;
|
|
}
|
|
|
|
state.dirStack = [{ node: manifest, selectedIdx: 0, scrollOffset: 0 }];
|
|
|
|
// Boot screen then tree
|
|
state.mode = 'boot';
|
|
await runBoot();
|
|
|
|
state.mode = 'tree';
|
|
renderTree();
|
|
|
|
setupKeyboard();
|
|
setupCursor();
|
|
});
|
|
|
|
function showFatal(msg) {
|
|
const treeView = el('tree-view');
|
|
treeView.classList.remove('hidden');
|
|
treeView.innerHTML = `
|
|
<div style="padding:20px;color:#c00;text-shadow:0 0 8px #a00;">
|
|
<div style="font-size:1.2em;margin-bottom:10px;">SYSTEM ERROR</div>
|
|
<div>${esc(msg)}</div>
|
|
<div style="margin-top:16px;color:var(--gold-dim)">
|
|
Make sure content/manifest.json exists and the page is served over HTTP.
|
|
</div>
|
|
</div>`;
|
|
}
|