init

static/js/music.js

@@ -0,0 +1,81 @@
+var enableMusic = true;
+
+document.getElementById('music').addEventListener('mouseover', function() { musicHover(); });
+
+function musicHover() {
+    if (!enableMusic) {
+        return;
+    }
+    let icon = document.getElementById('music-icon');
+    icon.style.width = '8rem';
+    icon.style.height = '8rem';
+    icon.style.borderRadius = '500px 0 0 500px';
+    let div = document.getElementById('music-expand');
+    div.style.display = 'flex';
+    div.style.width = '20rem';
+    div.style.height = '8rem';
+    let title = document.getElementById('music-title');
+    title.style.display = 'block';
+    let info = document.getElementById('music-info');
+    info.style.display = 'block';
+    let progress = document.getElementById('music-progress');
+    progress.style.display = 'block';
+}
+
+document.getElementById('music').addEventListener('mouseout', function() { musicOut(); });
+
+function musicOut() {
+    let icon = document.getElementById('music-icon');
+    icon.style.width = '1.5rem';
+    icon.style.height = '1.5rem';
+    icon.style.borderRadius = '50%';
+    let div = document.getElementById('music-expand');
+    div.style = '';
+    let title = document.getElementById('music-title');
+    title.style.display = 'none';
+    let info = document.getElementById('music-info');
+    info.style.display = 'none';
+    let progress = document.getElementById('music-progress');
+    progress.style.display = 'none';
+}
+
+function fetchData() {
+    let data = fetch('https://alfieking.dev/api/v1/current_song')
+    .then(response => response.json()).then(data => { return data; }) 
+    .catch(error => { return null;});
+    return data;
+}
+
+function updateUi(data) {
+    enableMusic = true;
+    document.getElementById('music').style.display = 'flex';
+    document.getElementById('music-icon').src = data.image;
+    document.getElementById('music-title').innerText = data.title;
+    document.getElementById('music-info').innerText = data.artist + ' - ' + data.album;
+    let progress = data.progress / data.length * 100;
+    document.getElementById('music-progress').style.width = progress + '%';
+}
+
+function hideUi() {
+    enableMusic = false;
+    document.getElementById('music').style.display = 'none';
+}
+
+function update() {
+    fetchData().then(data => { 
+        console.log(data);
+        if (data != null) {
+            if (data.idle)  {
+                hideUi();
+            } else {
+                updateUi(data);
+            }
+        }
+        else {
+            hideUi();
+        }
+    });
+}
+
+update();
+setInterval(update, 10000);

static/js/typing.js

@@ -0,0 +1,42 @@
+const values = ["Web developer", "Pc games enjoyer", "Server backend survivor", "python programmer", "Javascript disliker"];
+var direction = 1;
+var text = "";
+var speed = 100; 
+var selectedValue = 0;
+var currentValueIndex = 0;                                                  
+
+function type() {
+    if (direction == 1) {
+        if (currentValueIndex < values[selectedValue].length) {
+            text += values[selectedValue][currentValueIndex];
+            currentValueIndex++;
+        } else {
+            direction = -1;
+            speed = 1500;
+        }
+    } else {
+        if (currentValueIndex > 0) {
+            text = text.slice(0, -1);
+            currentValueIndex--;
+        } else {
+            direction = 1;
+            selectedValue++;
+            if (selectedValue >= values.length) {
+                selectedValue = 0;
+            }
+        }
+    }
+}
+
+function typing() {
+    type();
+    document.getElementById("typing").innerHTML = "$ " + text;
+    if (direction == 1) {
+        speed = 80 + Math.random() * 100;
+    } else {
+        speed = 60 + (Math.random() * 100) / 2;
+    }
+    setTimeout(typing, speed);
+}
+
+typing();