* Migrate from static HTML/JS to Haskell/Scotty web application * Add server-side routing and API endpoints * Implement language switching and command processing * Set up project structure with stack * Move static assets to dedicated directory * Add type definitions and template rendering
81 lines
2.8 KiB
JavaScript
81 lines
2.8 KiB
JavaScript
let currentLanguage = 'fr';
|
|
const terminal = document.getElementById('terminal');
|
|
const userInput = document.getElementById('user-input');
|
|
const welcomeText = document.getElementById('welcome-text');
|
|
const inputLine = document.getElementById('input-line');
|
|
|
|
async function initTerminal(lang) {
|
|
currentLanguage = lang;
|
|
const response = await fetch(`/api/command/help?lang=${currentLanguage}`);
|
|
const data = await response.json();
|
|
const welcomeMsg = currentLanguage === 'fr'
|
|
? "Bienvenue dans le Portfolio de Thomas Brasdefer.\nTapez 'help' pour voir la liste des commandes disponibles. Type 'language' to switch to English."
|
|
: "Welcome to Thomas Brasdefer's Portfolio.\nType 'help' to see the list of available commands. Tapez 'language' pour passer en français.";
|
|
|
|
typeText(welcomeMsg, welcomeText);
|
|
}
|
|
|
|
function typeText(text, element, speed = 50) {
|
|
let i = 0;
|
|
element.innerHTML = '';
|
|
function type() {
|
|
if (i < text.length) {
|
|
element.innerHTML += text.charAt(i);
|
|
i++;
|
|
setTimeout(type, speed);
|
|
} else {
|
|
inputLine.style.display = 'flex';
|
|
userInput.focus();
|
|
}
|
|
}
|
|
type();
|
|
}
|
|
|
|
userInput.addEventListener('keydown', async function(event) {
|
|
if (event.key === 'Enter') {
|
|
const command = userInput.value.trim().toLowerCase();
|
|
addToTerminal(`$ ${command}`);
|
|
|
|
if (command === 'clear') {
|
|
clearTerminal();
|
|
} else if (command === 'language') {
|
|
currentLanguage = currentLanguage === 'fr' ? 'en' : 'fr';
|
|
const response = await fetch(`/api/language/${currentLanguage}`);
|
|
const data = await response.json();
|
|
addToTerminal(data.responseText);
|
|
} else {
|
|
const response = await fetch(`/api/command/${command}?lang=${currentLanguage}`);
|
|
const data = await response.json();
|
|
if (data.responseHtml) {
|
|
addToTerminalHtml(data.responseText);
|
|
} else {
|
|
addToTerminal(data.responseText);
|
|
}
|
|
}
|
|
|
|
userInput.value = '';
|
|
}
|
|
});
|
|
|
|
function addToTerminal(text) {
|
|
const output = document.createElement('div');
|
|
output.classList.add('output');
|
|
output.textContent = text;
|
|
terminal.insertBefore(output, inputLine);
|
|
terminal.scrollTop = terminal.scrollHeight;
|
|
}
|
|
|
|
function addToTerminalHtml(html) {
|
|
const output = document.createElement('div');
|
|
output.classList.add('output');
|
|
output.innerHTML = html;
|
|
terminal.insertBefore(output, inputLine);
|
|
terminal.scrollTop = terminal.scrollHeight;
|
|
}
|
|
|
|
function clearTerminal() {
|
|
const outputs = document.querySelectorAll('.output');
|
|
outputs.forEach(output => output.remove());
|
|
welcomeText.innerHTML = '';
|
|
}
|