128 lines
3.4 KiB
JavaScript
128 lines
3.4 KiB
JavaScript
function setupUi() {
|
|
// Context Menu
|
|
document.body.addEventListener('contextmenu', (e) => {
|
|
var menu = document.querySelector('.context-menu');
|
|
menu.style.top = e.pageY + 'px';
|
|
menu.style.left = e.pageX + 'px';
|
|
togglePopup(menu);
|
|
e.preventDefault();
|
|
return false;
|
|
});
|
|
// Hide Pop-ups
|
|
document.body.addEventListener('click', () => {
|
|
var popups = document.querySelectorAll('.popup');
|
|
for (var i = 0; i < popups.length; i++) {
|
|
togglePopup(popups[i], 0);
|
|
}
|
|
});
|
|
// Initialize Hints
|
|
var itemswh = document.querySelectorAll('.withhint');
|
|
for (var j = 0; j < itemswh.length; j++) {
|
|
itemswh[j].addEventListener('mouseover', showHint);
|
|
//itemswh[j].addEventListener('mousemove', showHint);
|
|
itemswh[j].addEventListener('mouseleave', hideHint);
|
|
}
|
|
};
|
|
|
|
function initStars() {
|
|
var colors = ['#aaa','#ddd','#eee','#fff'];
|
|
var canvas = document.querySelector('canvas#stars');
|
|
var w = canvas.width;
|
|
var h = canvas.height;
|
|
var ctx = canvas.getContext('2d');
|
|
ctx.clearRect(0, 0, w, h);
|
|
for (var star = 0; star < 200; star++) {
|
|
ctx.fillStyle = colors[Math.floor(Math.random()*colors.length)];
|
|
ctx.fillRect(Math.round(Math.random()*w), Math.round(Math.random()*h), 1, 1);
|
|
}
|
|
};
|
|
|
|
function togglePopup(el, mode=1) {
|
|
var displaying = (el.accessKey.trim() != '' && el.accessKey != '0');
|
|
|
|
if (mode != 1 && !displaying)
|
|
return;
|
|
|
|
if (!displaying) {
|
|
el.style.animation = 'tdExpandInBounce 0.3s ease 0s forwards';
|
|
el.style.pointerEvents = 'auto';
|
|
el.accessKey = '1';
|
|
}
|
|
else {
|
|
el.style.animation = 'tdShrinkOutBounce 0.3s ease 0s forwards';
|
|
el.style.pointerEvents = 'none';
|
|
el.accessKey = '0';
|
|
}
|
|
};
|
|
|
|
function showDiscordSubmenu(e) {
|
|
var submenu = document.querySelector('li#item-discord').querySelector('nav.submenu');
|
|
togglePopup(submenu);
|
|
e.stopPropagation();
|
|
};
|
|
|
|
function showAboutCard(e) {
|
|
var about = document.querySelector('div.about-card-wrapper');
|
|
togglePopup(about);
|
|
e.stopPropagation();
|
|
};
|
|
|
|
function copyDiscordTag(e) {
|
|
var dtag = e.target.innerText;
|
|
var text = document.createElement('textarea');
|
|
text.style.position = 'absolute';
|
|
text.style.left = '-9999px';
|
|
text.style.top = '0';
|
|
text.innerHTML = dtag;
|
|
text.classList.add('copyarea');
|
|
e.target.append(text);
|
|
text.select();
|
|
|
|
document.execCommand('copy');
|
|
setTimeout(() => {
|
|
document.querySelector('textarea.copyarea').remove();
|
|
togglePopup(document.querySelector('li#item-discord').querySelector('nav.submenu'));
|
|
}, 100);
|
|
|
|
togglePopup(document.querySelector('.msg-wrapper'));
|
|
setTimeout(() => {
|
|
togglePopup(document.querySelector('.msg-wrapper'), 0);
|
|
}, 1500);
|
|
e.stopPropagation();
|
|
};
|
|
|
|
function changePicture(e, num) {
|
|
var img = document.querySelector('.space-obj > img');
|
|
switch (num) {
|
|
case 0:
|
|
img.src = 'img/earth.gif';
|
|
break;
|
|
case 1:
|
|
img.src = 'img/moon.gif';
|
|
break;
|
|
case 2:
|
|
img.src = 'img/sun.gif';
|
|
break;
|
|
}
|
|
togglePopup(document.querySelector('.context-menu'));
|
|
};
|
|
|
|
function spaceObjSpeed(spd) {
|
|
document.querySelector('.space-obj>img').style.animationDuration = `${spd}s`;
|
|
};
|
|
|
|
function showHint(e) {
|
|
var elid = e.target.id;
|
|
var hintid = 'hint-' + (elid.startsWith('item-') ? elid.slice(5) : 'elem');
|
|
var hintel = document.getElementById(hintid);
|
|
if (hintel)
|
|
hintel.style.opacity = '1';
|
|
};
|
|
|
|
function hideHint(e) {
|
|
var elid = e.target.id;
|
|
var hintid = 'hint-' + (elid.startsWith('item-') ? elid.slice(5) : 'elem');
|
|
var hintel = document.getElementById(hintid);
|
|
if (hintel)
|
|
hintel.style.opacity = '0';
|
|
};
|