helikon

#serverBuddy { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); z-index: 2147483000; cursor: default; -webkit-user-select: none; -moz-user-select: none; user-select: none; } #serverBuddy img { width: 96px; height: 96px; image-rendering: pixelated; image-rendering: crisp-edges; display: block; border: none; outline: none; pointer-events: none; -webkit-user-drag: none; user-drag: none; } #buddySpeech { position: fixed; bottom: 120px; left: 50%; transform: translateX(-50%) scale(0); background: #1a1a2e; color: #0df; padding: 8px 14px; border-radius: 10px; font-family: monospace; font-size: 11px; white-space: nowrap; z-index: 2147483001; opacity: 0; transition: opacity 0.3s ease, transform 0.3s ease; pointer-events: none; box-shadow: 0 2px 10px rgba(0,0,0,0.3); } #buddySpeech.visible { opacity: 1; transform: translateX(-50%) scale(1); } #buddySpeech::after { content: ''; position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 8px solid #1a1a2e; } (function() { var SLEEP_SEC = 30; var HAPPY_SEC = 4; var ERROR_SEC = 6; var LOAD_SEC = 5; var GIFS = new Array(5); GIFS[0] = '/@api/deki/files/403/=buddy_idle.gif'; GIFS[1] = '/@api/deki/files/402/=buddy_sleeping.gif'; GIFS[2] = '/@api/deki/files/401/=buddy_happy.gif'; GIFS[3] = '/@api/deki/files/400/=buddy_error.gif'; GIFS[4] = '/@api/deki/files/399/=buddy_loading.gif'; var S_IDLE = 0, S_SLEEP = 1, S_HAPPY = 2, S_ERROR = 3, S_LOAD = 4; var SPEECH = new Array(5); SPEECH[0] = new Array('Alles klar!', 'Bereit!', 'Was gibts?', 'Hm...'); SPEECH[1] = new Array('zzz...', 'ZZzz...', '*schnarch*', 'zZzZz...'); SPEECH[2] = new Array('Yay!', 'Super!', 'Nice!', 'Toll!', 'Weiter so!'); SPEECH[3] = new Array('ALARM!', 'Oh nein!', 'Fehler!', 'Hilfe!'); SPEECH[4] = new Array('Moment...', 'Lade...', 'Gleich...', 'Bitte warten...'); var curState = S_IDLE; var lastAct = Date.now(); var sTimer = null; var leaving = false; var bImg = document.getElementById('buddyImg'); var bSpeech = document.getElementById('buddySpeech'); if (!bImg || !bSpeech) return; document.getElementById('serverBuddy').style.display = ''; bImg.setAttribute('alt', ''); bImg.setAttribute('title', ''); bImg.setAttribute('draggable', 'false'); bImg.addEventListener('dragstart', function(e) { e.preventDefault(); }); bImg.addEventListener('contextmenu', function(e) { e.preventDefault(); }); function pick(arr) { return arr[Math.floor(Math.random() * arr.length)]; } function showMsg(txt) { bSpeech.textContent = txt; bSpeech.className = 'visible'; setTimeout(function() { bSpeech.className = ''; }, 3000); } function setS(s, msg) { if (curState === s && s !== S_HAPPY) return; curState = s; bImg.src = GIFS[s]; showMsg(msg || pick(SPEECH[s])); if (sTimer) clearTimeout(sTimer); if (s === S_HAPPY) { sTimer = setTimeout(function() { setS(S_IDLE); }, HAPPY_SEC * 1000); } if (s === S_ERROR) { sTimer = setTimeout(function() { setS(S_IDLE); }, ERROR_SEC * 1000); } if (s === S_LOAD) { sTimer = setTimeout(function() { setS(S_HAPPY, 'Fertig!'); }, LOAD_SEC * 1000); } } function resetIdle() { lastAct = Date.now(); if (curState === S_SLEEP && !leaving) setS(S_IDLE); } function checkIdle() { if (leaving) return; var sec = Math.floor((Date.now() - lastAct) / 1000); if (sec >= SLEEP_SEC && curState === S_IDLE) setS(S_SLEEP); } document.addEventListener('mousemove', resetIdle); document.addEventListener('scroll', resetIdle); document.addEventListener('keydown', resetIdle); document.addEventListener('touchstart', resetIdle); document.addEventListener('click', function(e) { resetIdle(); var t = e.target; var link = null; if (t.tagName === 'A') { link = t; } else if (t.parentNode && t.parentNode.tagName === 'A') { link = t.parentNode; } if (link) { var href = link.getAttribute('href') || ''; if (href && href.charAt(0) !== '#' && href.indexOf('javascript:') !== 0) { leaving = true; curState = -1; setS(S_SLEEP, 'Bis gleich...'); } else { setS(S_HAPPY); } } }); window.addEventListener('beforeunload', function() { leaving = true; bImg.src = GIFS[S_SLEEP]; }); document.getElementById('serverBuddy').addEventListener('click', function(e) { e.stopPropagation(); e.preventDefault(); var hi = new Array('Hi!', 'Hallo!', '*blinzel*', 'Yo!', '01001000 01101001'); showMsg(pick(hi)); }); window.addEventListener('error', function() { setS(S_ERROR); }); document.addEventListener('visibilitychange', function() { if (document.hidden) { setS(S_SLEEP, '*gaehn*'); } else { leaving = false; resetIdle(); setS(S_IDLE, 'Wieder da!'); } }); var i; for (i = 0; i < 5; i++) { var preImg = new Image(); preImg.src = GIFS[i]; } setS(S_LOAD, 'Lade Seite...'); setTimeout(function() { leaving = false; setS(S_IDLE, 'Bereit!'); }, 2000); setInterval(checkIdle, 1000); window.serverBuddy = new Object(); window.serverBuddy.setState = function(name, msg) { var map = new Object(); map['idle'] = 0; map['sleeping'] = 1; map['happy'] = 2; map['error'] = 3; map['loading'] = 4; if (map[name] !== undefined) setS(map[name], msg); }; window.serverBuddy.say = showMsg; })();