network-website/assets/loader.js

62 lines
2.5 KiB
JavaScript
Raw Normal View History

2024-06-06 00:40:00 +02:00
// keep the main html clean by loading in ascii art from file
function asciiLoader() {
2024-06-05 21:53:45 +02:00
fetch('assets/ascii.txt')
.then(response => response.text())
.then(data => {
const asciiArtContainer = document.getElementById('ascii-art-container');
asciiArtContainer.innerText = data;
initAsciiEffect(data);
2024-06-06 00:40:00 +02:00
}); }
// because different screen sizes require different positioning and font size, we adjust it dynamically
2024-06-05 21:53:45 +02:00
function adjustFontSize() {
const asciiArtContainer = document.getElementById('ascii-art-container');
const windowWidth = window.innerWidth;
const windowHeight = window.innerHeight;
2024-06-06 00:40:00 +02:00
const baseFontSize = Math.min(windowWidth, windowHeight) / 145;
2024-06-05 21:53:45 +02:00
asciiArtContainer.style.fontSize = `${baseFontSize}px`;
asciiArtContainer.style.top = `${windowHeight / 2}px`;
asciiArtContainer.style.left = `${windowWidth / 2}px`;
2024-06-06 00:40:00 +02:00
asciiArtContainer.style.transform = 'translate(-50%, -50%)'; }
// if you are wondering why this function exists,
// i wanted to play with js, and it should show that everything will deteriorate eventually
// and nothing is permament, so enjoy it while it lasts.
2024-06-05 21:53:45 +02:00
function initAsciiEffect(asciiArt) {
const asciiArtContainer = document.getElementById('ascii-art-container');
const chars = asciiArt.split('');
2024-06-06 00:40:00 +02:00
const updateFrequency = 0;
2024-06-05 21:53:45 +02:00
function getRandomIndex() {
return Math.floor(Math.random() * chars.length);
}
2024-06-05 21:53:45 +02:00
function flipBit() {
const index = getRandomIndex();
const char = chars[index];
2024-06-06 00:40:00 +02:00
if (char === '@') {
2024-06-05 21:53:45 +02:00
chars[index] = '#';
} else if (char === '#') {
chars[index] = '@';
2024-06-06 00:40:00 +02:00
} else if (char === '*') {
chars[index] = '-';
2024-06-06 00:50:23 +02:00
} else if (char === '-') {
chars[index] = '*';
2024-06-05 21:53:45 +02:00
}
asciiArtContainer.innerText = chars.join('');
}
2024-06-06 00:40:00 +02:00
setInterval(flipBit, updateFrequency); }
function greetBeingOfUnknownHeritage() {
2024-06-06 00:50:23 +02:00
console.log(`___
2024-06-06 00:40:00 +02:00
    
    | _ _|
    / __x
  /     |
   /    
  | | |    
|  | | |  
| (_ヽ_)_) 
二つ      
`);
console.log("hello there, have fun"); }
window.addEventListener('resize', adjustFontSize);
window.addEventListener('load', adjustFontSize);
window.addEventListener('load', asciiLoader);
window.addEventListener('load', greetBeingOfUnknownHeritage);
// meow