Complete rework + eleventy

static/scripts/ccd.js

@@ -0,0 +1,14 @@
+const konamiCode = ['ArrowUp', 'ArrowUp', 'ArrowDown', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'ArrowLeft', 'ArrowRight', 'KeyB', 'KeyA'];
+let keyIndex = 0;
+
+document.addEventListener('keydown', function(event) {
+  if (event.code === konamiCode[keyIndex]) {
+    keyIndex++;
+    if (keyIndex === konamiCode.length) {
+        window.location.href = './toyourdreams.txt'
+        keyIndex = 0;
+    }
+  } else {
+    keyIndex = 0;
+  }
+});

static/scripts/home.js

@@ -0,0 +1,51 @@
+const _homeSquares = document.querySelector("#homeSquares");
+const main = document.querySelector("main");
+
+let info = [
+    ["Default", "defaultSquare", "arrow-cursor.svg", "Computer cursor arrow line drawing"],
+    ["Music", "headerSquareMusic", "8thNote.svg", "Music note line drawing"],
+    ["Video", "headerSquareVideo", "video.svg", "Video roll line drawing"],
+    ["Code", "headerSquareCode", "file-code.svg", "Computer code file line drawing"]
+]
+
+info.forEach(square => {
+    let rawHTML = `<div class='headerSquare' id='${square[1]}'><img src='/static/images/${square[2]}' alt='${square[3]}'></div>`;
+    _homeSquares.innerHTML += rawHTML;
+});
+
+const homeSquares = document.querySelectorAll(".headerSquare");
+let selectedSquare = "defaultSquare";
+let selectedSquareDiv;
+updateSquare();
+
+homeSquares.forEach(square =>
+    square.addEventListener('click', () => {
+        toggleSquare(square);
+    })
+)
+
+function toggleSquare(square) {
+    if (selectedSquare && (selectedSquare == square.id)) {
+        return
+    }
+    else if (selectedSquare) {
+        oldSquare = document.getElementById(selectedSquare);
+        oldSquare.classList.toggle("selected");
+        document.querySelector(`#${selectedSquareDiv}`).classList.toggle("selected");
+    }
+    selectedSquare = square.id;
+    updateSquare()
+}
+
+function getSquareDivByID(id) {
+    divID = `hs${info.find(item => item[1] === id)[0]}`;
+    return document.querySelector(`#${divID}`);
+}
+
+function updateSquare() {
+    square = document.getElementById(selectedSquare);
+    square.classList.toggle("selected");
+    div = getSquareDivByID(square.id);
+    selectedSquareDiv = div.id;
+    div.classList.toggle("selected");
+}

static/scripts/language.js

@@ -0,0 +1,37 @@
+const el = document.getElementById("languageTitle");
+const texts = [["Pick a language", "English"], ["Escolha um idioma", "Português Brasileiro"]];
+let i = 0;
+let fadeTime = 1000;
+let holdTime = 2000;
+const links = document.querySelectorAll("#languageList li a");
+let currentLang = 0;
+
+el.style.transition = `opacity ${fadeTime}ms`;
+el.style.opacity = 1;
+
+function cycle() {
+  el.style.opacity = 0;
+  removeOldHighlightedLang();
+  setTimeout(() => {
+    i = (i + 1) % texts.length;
+    currentLang = i;
+    el.textContent = texts[i][0];
+    el.style.opacity = 1;
+    setNewHighlightedLang()
+  }, fadeTime);
+}
+
+function removeOldHighlightedLang() {
+    document.querySelector(".languagesHighlightedLink").classList.remove("languagesHighlightedLink");
+}
+
+function setNewHighlightedLang() {
+    links.forEach(link => {
+        if (link.innerText == texts[currentLang][1]) {
+            link.classList.add('languagesHighlightedLink');
+        }
+    })
+}
+
+setNewHighlightedLang()
+setInterval(cycle, fadeTime * 2 + holdTime);

static/scripts/main.js

@@ -0,0 +1,40 @@
+const toggle = document.querySelector('#soundDiv')
+toggle.innerHTML = `<img src="/static/images/sound-on.png" id="sound" onclick="toggleAudio()"><p>${toggle.getAttribute("data-title")}</p>`
+
+const audio = new Audio(`/static/${toggle.getAttribute("data-source")}`);
+const toggleIMG = document.querySelector('#sound');
+
+const savedTime = localStorage.getItem("audioTime");
+const wasPlaying = localStorage.getItem("audioPlaying") === 'true'
+
+if (savedTime) audio.currentTime = parseFloat(savedTime);
+if (wasPlaying) {
+    play();
+} else {
+    stop();
+}
+
+function play() {
+    audio.play();
+    localStorage.setItem("audioPlaying", "true")
+    toggleIMG.src = "/static/images/sound-on.png"
+}
+
+function stop() {
+    audio.pause();
+    localStorage.setItem("audioPlaying", "false")
+    toggleIMG.src = "/static/images/sound-off.png"
+}
+
+function toggleAudio() {
+    if (!audio.paused) {
+        stop();
+    } else {
+        play();
+    }
+}
+
+window.addEventListener("beforeunload", () => {
+  localStorage.setItem("audioTime", audio.currentTime);
+  localStorage.setItem("audioPlaying", !audio.paused);
+});

static/scripts/telnetSimulator.js

@@ -0,0 +1,66 @@
+const screen = document.getElementById('telnetSimulationClientScreen');
+const input = document.getElementById('telnetSimulationInputBox');
+const btn = document.getElementById('telnetSimulationClientSend')
+const sbtn = document.getElementById('telnetSimulationServerClean');
+const sscreen = document.getElementById('telnetSimulationServerScreen');
+const loading = document.getElementById("telnetSimulationLoadingHolder")
+const loadingText = document.getElementById("telnetSimulationLoadingText")
+let loadingms = 2500;
+
+btn.addEventListener('click', () => {
+  send_command();
+})
+
+sbtn.addEventListener('click', () => {
+  screen.innerHTML = '';
+  sscreen.innerHTML = '';
+})
+
+async function send_command() {
+  if (!input.value) return;
+  const command = input.value;
+  input.value = '';
+  screen.value += `telnet> ${command}\n`;
+  await wait(loadingms, "<b>Camada OSI #7 - Aplicação:</b> Usuário digitou o texto na aplicação.");
+  await wait(loadingms, "<b>Camada OSI #6 - Apresentação:</b> Tradução do comando para um pacote legível para o servidor.");
+  await wait(loadingms, "<b>Camada OSI #5 - Sessão:</b> Sistema do cliente abre uma conexão com o servidor.");
+  await wait(loadingms, "<b>Camada OSI #4 - Transporte:</b> Sistema do cliente troca informações com o servidor.");
+  await wait(loadingms, "<b>Camada OSI #3 - Rede:</b> O sistema do cliente resolve o endereço do servidor.");
+  await wait(loadingms, "<b>Camada OSI #2 - Enlace de dados:</b> Os frames são entregues ao dispositivo com o endereço MAC correto.");
+  await wait(loadingms, "<b>Camada OSI #1 - Física:</b> Os dados são transmitidos por cabo, ou via <i>wireless</i>, para o dispositivo de destino.");
+  process_command(command);
+}
+
+async function process_command(command) {
+  sscreen.value += `Comando recebido: ${command}\n`;
+  args = command.split(" ");
+  command = args[0]
+  args.shift();
+  await wait(loadingms, "<b>O servidor empacota uma resposta, que também será passada por todas camadas até chegar no cliente.");
+  switch (command) {
+    case 'help':
+        screen.value += `Comandos disponíveis:\nhelp - mostra essa mensagem de ajuda\nping - responde 'pong'\necho [texto] - retorna o texto especificado no comando\ntimeout [milissegundos] - muda o tempo que as mensagens de carregamento da simulação duram`
+      break;
+    case 'echo':
+        screen.value += `Resposta do servidor: ${args.join(' ')}\n`
+      break;
+    case 'ping':
+        screen.value += `Pong!\n`
+      break;
+    case 'timeout':
+        loadingms = args[0]
+        screen.value += `O tempo das mensagens de carregamento foi mudado para ${args[0]}ms!`
+      break;
+    default:
+        screen.value += `Comando desconhecido! Envie help para ver a lista de comandos.\n`
+      break;
+  }
+}
+
+async function wait(ms, txt = '') {
+  const delay = ms => new Promise(res => setTimeout(res, ms));
+  loadingText.innerHTML = txt;
+  loading.style.display = "flex"
+  await delay(ms)
+  loading.style.display = "none"
+}