Fixed rodent sneeding
parent
ac3d9a337d
commit
e5ea709a0e
|
@ -112,7 +112,8 @@ function postToastSwitch(t, url, button1, button2, cls, extraActionsOnSuccess) {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!location.pathname.endsWith('/submit') && !location.pathname.endsWith('/chat')) {
|
if (!location.pathname.endsWith('/submit') && !location.pathname.endsWith('/chat'))
|
||||||
|
{
|
||||||
document.addEventListener('keydown', (e) => {
|
document.addEventListener('keydown', (e) => {
|
||||||
if (!((e.ctrlKey || e.metaKey) && e.key === "Enter")) return;
|
if (!((e.ctrlKey || e.metaKey) && e.key === "Enter")) return;
|
||||||
|
|
||||||
|
@ -157,10 +158,11 @@ function autoExpand(field) {
|
||||||
|
|
||||||
field.style.height = height + 'px';
|
field.style.height = height + 'px';
|
||||||
if (Math.abs(window.scrollX - xpos) < 1 && Math.abs(window.scrollY - ypos) < 1) return;
|
if (Math.abs(window.scrollX - xpos) < 1 && Math.abs(window.scrollY - ypos) < 1) return;
|
||||||
window.scrollTo(xpos, ypos);
|
window.scrollTo(xpos,ypos);
|
||||||
};
|
};
|
||||||
|
|
||||||
function smoothScrollTop() {
|
function smoothScrollTop()
|
||||||
|
{
|
||||||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -195,7 +197,8 @@ function expandImage(url) {
|
||||||
document.getElementById("expanded-image").src = '';
|
document.getElementById("expanded-image").src = '';
|
||||||
document.getElementById("expanded-image-wrap-link").href = '';
|
document.getElementById("expanded-image-wrap-link").href = '';
|
||||||
|
|
||||||
if (!url) {
|
if (!url)
|
||||||
|
{
|
||||||
url = e.target.dataset.src
|
url = e.target.dataset.src
|
||||||
if (!url) url = e.target.src
|
if (!url) url = e.target.src
|
||||||
}
|
}
|
||||||
|
@ -207,7 +210,7 @@ function expandImage(url) {
|
||||||
|
|
||||||
function bs_trigger(e) {
|
function bs_trigger(e) {
|
||||||
let tooltipTriggerList = [].slice.call(e.querySelectorAll('[data-bs-toggle="tooltip"]'));
|
let tooltipTriggerList = [].slice.call(e.querySelectorAll('[data-bs-toggle="tooltip"]'));
|
||||||
tooltipTriggerList.map(function (element) {
|
tooltipTriggerList.map(function(element){
|
||||||
return bootstrap.Tooltip.getOrCreateInstance(element);
|
return bootstrap.Tooltip.getOrCreateInstance(element);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -232,18 +235,18 @@ function showmore(t) {
|
||||||
}
|
}
|
||||||
|
|
||||||
function formatDate(d) {
|
function formatDate(d) {
|
||||||
const options = { year: 'numeric', month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit', timeZoneName: 'short' };
|
const options = {year: 'numeric', month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit', timeZoneName: 'short'};
|
||||||
return d.toLocaleTimeString([], options)
|
return d.toLocaleTimeString([], options)
|
||||||
}
|
}
|
||||||
|
|
||||||
const timestamps = document.querySelectorAll('[data-time]');
|
const timestamps = document.querySelectorAll('[data-time]');
|
||||||
|
|
||||||
for (const e of timestamps) {
|
for (const e of timestamps) {
|
||||||
e.innerHTML = formatDate(new Date(e.dataset.time * 1000));
|
e.innerHTML = formatDate(new Date(e.dataset.time*1000));
|
||||||
};
|
};
|
||||||
|
|
||||||
function timestamp(t, ti) {
|
function timestamp(t, ti) {
|
||||||
const date = formatDate(new Date(ti * 1000));
|
const date = formatDate(new Date(ti*1000));
|
||||||
t.setAttribute("data-bs-original-title", date);
|
t.setAttribute("data-bs-original-title", date);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -320,7 +323,7 @@ function sendFormXHR(form, extraActionsOnSuccess) {
|
||||||
xhr.open("POST", actionPath);
|
xhr.open("POST", actionPath);
|
||||||
xhr.setRequestHeader('xhr', 'xhr');
|
xhr.setRequestHeader('xhr', 'xhr');
|
||||||
|
|
||||||
xhr.onload = function () {
|
xhr.onload = function() {
|
||||||
const success = xhr.status >= 200 && xhr.status < 300;
|
const success = xhr.status >= 200 && xhr.status < 300;
|
||||||
|
|
||||||
if (!(extraActionsOnSuccess == reload && success)) {
|
if (!(extraActionsOnSuccess == reload && success)) {
|
||||||
|
@ -381,7 +384,7 @@ function sort_table(t) {
|
||||||
attr = parseInt(attr.replace(/,/g, ''))
|
attr = parseInt(attr.replace(/,/g, ''))
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
items.push({ ele, attr });
|
items.push({ele, attr});
|
||||||
}
|
}
|
||||||
if (sortAscending[n]) {
|
if (sortAscending[n]) {
|
||||||
items.sort((a, b) => a.attr > b.attr ? 1 : -1);
|
items.sort((a, b) => a.attr > b.attr ? 1 : -1);
|
||||||
|
@ -424,7 +427,8 @@ if (location.pathname != '/chat' && (gbrowser == 'iphone' || gbrowser == 'mac'))
|
||||||
}
|
}
|
||||||
|
|
||||||
const screen_width = (innerWidth > 0) ? innerWidth : screen.width;
|
const screen_width = (innerWidth > 0) ? innerWidth : screen.width;
|
||||||
function focusSearchBar(element) {
|
function focusSearchBar(element)
|
||||||
|
{
|
||||||
if (screen_width >= 768) {
|
if (screen_width >= 768) {
|
||||||
element.focus();
|
element.focus();
|
||||||
}
|
}
|
||||||
|
@ -450,13 +454,13 @@ function insertText(input, text) {
|
||||||
input.setRangeText(text);
|
input.setRangeText(text);
|
||||||
|
|
||||||
if (window.chrome !== undefined)
|
if (window.chrome !== undefined)
|
||||||
setTimeout(function () {
|
setTimeout(function(){
|
||||||
input.focus();
|
input.focus();
|
||||||
for (let i = 0; i < 2; i++)
|
for(let i = 0; i < 2; i++)
|
||||||
input.setSelectionRange(newPos, newPos);
|
input.setSelectionRange(newPos, newPos);
|
||||||
|
|
||||||
input.focus();
|
input.focus();
|
||||||
for (let i = 0; i < 2; i++)
|
for(let i = 0; i < 2; i++)
|
||||||
input.setSelectionRange(newPos, newPos);
|
input.setSelectionRange(newPos, newPos);
|
||||||
}, 1);
|
}, 1);
|
||||||
else
|
else
|
||||||
|
@ -467,13 +471,6 @@ function insertText(input, text) {
|
||||||
handle_disabled(input)
|
handle_disabled(input)
|
||||||
}
|
}
|
||||||
|
|
||||||
/** Returns a promise which can be used to await when the event loop is idle. */
|
|
||||||
const idle = () => {
|
|
||||||
return new Promise(resolve => {
|
|
||||||
requestIdleCallback(resolve);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Shamelessly copied from https://github.com/component/textarea-caret-position/blob/master/index.js
|
* Shamelessly copied from https://github.com/component/textarea-caret-position/blob/master/index.js
|
||||||
* This code makes the assumption that the style of the textarea/input won't change.
|
* This code makes the assumption that the style of the textarea/input won't change.
|
||||||
|
@ -693,8 +690,8 @@ function handle_files(input, newfiles) {
|
||||||
for (let file of newfiles) {
|
for (let file of newfiles) {
|
||||||
if (file.name == 'image.png') {
|
if (file.name == 'image.png') {
|
||||||
const blob = file.slice(0, file.size, 'image/png');
|
const blob = file.slice(0, file.size, 'image/png');
|
||||||
const new_name = Math.random().toString(32).substring(2, 10) + '.png'
|
const new_name = Math.random().toString(32).substring(2,10) + '.png'
|
||||||
file = new File([blob], new_name, { type: 'image/png' });
|
file = new File([blob], new_name, {type: 'image/png'});
|
||||||
}
|
}
|
||||||
oldfiles[ta.id].items.add(file);
|
oldfiles[ta.id].items.add(file);
|
||||||
insertText(ta, `[${file.name}]`);
|
insertText(ta, `[${file.name}]`);
|
||||||
|
@ -702,7 +699,8 @@ function handle_files(input, newfiles) {
|
||||||
|
|
||||||
input.files = oldfiles[ta.id].files;
|
input.files = oldfiles[ta.id].files;
|
||||||
|
|
||||||
if (input.files.length > 20) {
|
if (input.files.length > 20)
|
||||||
|
{
|
||||||
window.alert("You can't upload more than 20 files at one time!")
|
window.alert("You can't upload more than 20 files at one time!")
|
||||||
input.value = null
|
input.value = null
|
||||||
oldfiles[ta.id] = new DataTransfer();
|
oldfiles[ta.id] = new DataTransfer();
|
||||||
|
@ -731,7 +729,8 @@ file_upload = document.getElementById('file-upload');
|
||||||
|
|
||||||
if (file_upload) {
|
if (file_upload) {
|
||||||
function display_url_image() {
|
function display_url_image() {
|
||||||
if (file_upload.files) {
|
if (file_upload.files)
|
||||||
|
{
|
||||||
const file = file_upload.files[0]
|
const file = file_upload.files[0]
|
||||||
const char_limit = screen_width >= 768 ? 50 : 10;
|
const char_limit = screen_width >= 768 ? 50 : 10;
|
||||||
file_upload.previousElementSibling.textContent = file.name.substr(0, char_limit);
|
file_upload.previousElementSibling.textContent = file.name.substr(0, char_limit);
|
||||||
|
@ -772,7 +771,7 @@ if (file_upload) {
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
document.onpaste = function (event) {
|
document.onpaste = function(event) {
|
||||||
const files = structuredClone(event.clipboardData.files);
|
const files = structuredClone(event.clipboardData.files);
|
||||||
if (!files.length) return
|
if (!files.length) return
|
||||||
|
|
||||||
|
|
|
@ -1,206 +1,203 @@
|
||||||
// How about we don't dump everything into the global scope?
|
const cursormarseyEl = document.getElementById("cursormarsey");
|
||||||
{
|
const heartEl = document.getElementById("cursormarsey-heart");
|
||||||
const cursormarseyEl = document.getElementById("cursormarsey");
|
|
||||||
const heartEl = document.getElementById("cursormarsey-heart");
|
|
||||||
|
|
||||||
function getInitialPosition(max) {
|
function getInitialPosition(max) {
|
||||||
return Math.max(32, Math.floor(Math.random() * max));
|
return Math.max(32, Math.floor(Math.random() * max));
|
||||||
|
}
|
||||||
|
let cursormarseyPosX = getInitialPosition(screen.availWidth - 20);
|
||||||
|
let cursormarseyPosY = getInitialPosition(screen.availHeight - 50);
|
||||||
|
cursormarseyEl.style.left = `${cursormarseyPosX}px`;
|
||||||
|
cursormarseyEl.style.top = `${cursormarseyPosY}px`;
|
||||||
|
heartEl.style.left = `${cursormarseyPosX+16}px`;
|
||||||
|
heartEl.style.top = `${cursormarseyPosY-16}px`;
|
||||||
|
|
||||||
|
let mousePosX = cursormarseyPosX;
|
||||||
|
let mousePosY = cursormarseyPosY;
|
||||||
|
|
||||||
|
let frameCount = 0;
|
||||||
|
let idleTime = 0;
|
||||||
|
let idleAnimation = null;
|
||||||
|
let idleAnimationFrame = 0;
|
||||||
|
const cursormarseySpeed = 10;
|
||||||
|
const spriteSets = {
|
||||||
|
idle: [[-3, -3]],
|
||||||
|
alert: [[-7, -3]],
|
||||||
|
scratchSelf: [
|
||||||
|
[-5, 0],
|
||||||
|
[-6, 0],
|
||||||
|
[-7, 0],
|
||||||
|
],
|
||||||
|
scratchWallN: [
|
||||||
|
[0, 0],
|
||||||
|
[0, -1],
|
||||||
|
],
|
||||||
|
scratchWallS: [
|
||||||
|
[-7, -1],
|
||||||
|
[-6, -2],
|
||||||
|
],
|
||||||
|
scratchWallE: [
|
||||||
|
[-2, -2],
|
||||||
|
[-2, -3],
|
||||||
|
],
|
||||||
|
scratchWallW: [
|
||||||
|
[-4, 0],
|
||||||
|
[-4, -1],
|
||||||
|
],
|
||||||
|
tired: [[-3, -2]],
|
||||||
|
sleeping: [
|
||||||
|
[-2, 0],
|
||||||
|
[-2, -1],
|
||||||
|
],
|
||||||
|
N: [
|
||||||
|
[-1, -2],
|
||||||
|
[-1, -3],
|
||||||
|
],
|
||||||
|
NE: [
|
||||||
|
[0, -2],
|
||||||
|
[0, -3],
|
||||||
|
],
|
||||||
|
E: [
|
||||||
|
[-3, 0],
|
||||||
|
[-3, -1],
|
||||||
|
],
|
||||||
|
SE: [
|
||||||
|
[-5, -1],
|
||||||
|
[-5, -2],
|
||||||
|
],
|
||||||
|
S: [
|
||||||
|
[-6, -3],
|
||||||
|
[-7, -2],
|
||||||
|
],
|
||||||
|
SW: [
|
||||||
|
[-5, -3],
|
||||||
|
[-6, -1],
|
||||||
|
],
|
||||||
|
W: [
|
||||||
|
[-4, -2],
|
||||||
|
[-4, -3],
|
||||||
|
],
|
||||||
|
NW: [
|
||||||
|
[-1, 0],
|
||||||
|
[-1, -1],
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
||||||
|
function setSprite(name, frame) {
|
||||||
|
const sprite = spriteSets[name][frame % spriteSets[name].length];
|
||||||
|
cursormarseyEl.style.backgroundPosition = `${sprite[0] * 32}px ${sprite[1] * 32}px`;
|
||||||
|
}
|
||||||
|
|
||||||
|
function resetIdleAnimation() {
|
||||||
|
idleAnimation = null;
|
||||||
|
idleAnimationFrame = 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
function idle() {
|
||||||
|
idleTime += 1;
|
||||||
|
|
||||||
|
// every ~ 20 seconds
|
||||||
|
if (idleTime > 10 && true && idleAnimation == null) {
|
||||||
|
let avalibleIdleAnimations = ["sleeping", "scratchSelf"];
|
||||||
|
if (cursormarseyPosX < 32) {
|
||||||
|
avalibleIdleAnimations.push("scratchWallW");
|
||||||
}
|
}
|
||||||
let cursormarseyPosX = getInitialPosition(screen.availWidth - 20);
|
if (cursormarseyPosY < 32) {
|
||||||
let cursormarseyPosY = getInitialPosition(screen.availHeight - 50);
|
avalibleIdleAnimations.push("scratchWallN");
|
||||||
|
}
|
||||||
|
if (cursormarseyPosX > innerWidth - 32) {
|
||||||
|
avalibleIdleAnimations.push("scratchWallE");
|
||||||
|
}
|
||||||
|
if (cursormarseyPosY > innerHeight - 32) {
|
||||||
|
avalibleIdleAnimations.push("scratchWallS");
|
||||||
|
}
|
||||||
|
idleAnimation =
|
||||||
|
avalibleIdleAnimations[
|
||||||
|
Math.floor(Math.random() * avalibleIdleAnimations.length)
|
||||||
|
];
|
||||||
|
}
|
||||||
|
|
||||||
|
switch (idleAnimation) {
|
||||||
|
case "sleeping":
|
||||||
|
if (idleAnimationFrame < 8) {
|
||||||
|
setSprite("tired", 0);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
setSprite("sleeping", Math.floor(idleAnimationFrame / 4));
|
||||||
|
if (idleAnimationFrame > 192) {
|
||||||
|
resetIdleAnimation();
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
case "scratchWallN":
|
||||||
|
case "scratchWallS":
|
||||||
|
case "scratchWallE":
|
||||||
|
case "scratchWallW":
|
||||||
|
case "scratchSelf":
|
||||||
|
setSprite(idleAnimation, idleAnimationFrame);
|
||||||
|
if (idleAnimationFrame > 9) {
|
||||||
|
resetIdleAnimation();
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
setSprite("idle", 0);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
idleAnimationFrame += 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
function frame() {
|
||||||
|
frameCount += 1;
|
||||||
|
const diffX = cursormarseyPosX - mousePosX;
|
||||||
|
const diffY = cursormarseyPosY - mousePosY;
|
||||||
|
const distance = Math.sqrt(diffX ** 2 + diffY ** 2);
|
||||||
|
|
||||||
|
if (distance < cursormarseySpeed || distance < 100) {
|
||||||
|
idle();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
idleAnimation = null;
|
||||||
|
idleAnimationFrame = 0;
|
||||||
|
|
||||||
|
if (idleTime > 1) {
|
||||||
|
setSprite("alert", 0);
|
||||||
|
// count down after being alerted before moving
|
||||||
|
idleTime = Math.min(idleTime, 7);
|
||||||
|
idleTime -= 1;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
direction = diffY / distance > 0.5 ? "N" : "";
|
||||||
|
direction += diffY / distance < -0.5 ? "S" : "";
|
||||||
|
direction += diffX / distance > 0.5 ? "W" : "";
|
||||||
|
direction += diffX / distance < -0.5 ? "E" : "";
|
||||||
|
setSprite(direction, frameCount);
|
||||||
|
|
||||||
|
cursormarseyPosX -= (diffX / distance) * cursormarseySpeed;
|
||||||
|
cursormarseyPosY -= (diffY / distance) * cursormarseySpeed;
|
||||||
|
|
||||||
|
cursormarseyPosX = Math.min(Math.max(16, cursormarseyPosX), innerWidth - 16);
|
||||||
|
cursormarseyPosY = Math.min(Math.max(16, cursormarseyPosY), innerHeight - 16);
|
||||||
|
|
||||||
cursormarseyEl.style.left = `${cursormarseyPosX}px`;
|
cursormarseyEl.style.left = `${cursormarseyPosX}px`;
|
||||||
cursormarseyEl.style.top = `${cursormarseyPosY}px`;
|
cursormarseyEl.style.top = `${cursormarseyPosY}px`;
|
||||||
heartEl.style.left = `${cursormarseyPosX+16}px`;
|
heartEl.style.left = `${cursormarseyPosX+16}px`;
|
||||||
heartEl.style.top = `${cursormarseyPosY-16}px`;
|
heartEl.style.top = `${cursormarseyPosY-16}px`;
|
||||||
|
}
|
||||||
|
|
||||||
let mousePosX = cursormarseyPosX;
|
document.onmousemove = (event) => {
|
||||||
let mousePosY = cursormarseyPosY;
|
mousePosX = event.clientX;
|
||||||
|
mousePosY = event.clientY;
|
||||||
let frameCount = 0;
|
|
||||||
let idleTime = 0;
|
|
||||||
let idleAnimation = null;
|
|
||||||
let idleAnimationFrame = 0;
|
|
||||||
const cursormarseySpeed = 10;
|
|
||||||
const spriteSets = {
|
|
||||||
idle: [[-3, -3]],
|
|
||||||
alert: [[-7, -3]],
|
|
||||||
scratchSelf: [
|
|
||||||
[-5, 0],
|
|
||||||
[-6, 0],
|
|
||||||
[-7, 0],
|
|
||||||
],
|
|
||||||
scratchWallN: [
|
|
||||||
[0, 0],
|
|
||||||
[0, -1],
|
|
||||||
],
|
|
||||||
scratchWallS: [
|
|
||||||
[-7, -1],
|
|
||||||
[-6, -2],
|
|
||||||
],
|
|
||||||
scratchWallE: [
|
|
||||||
[-2, -2],
|
|
||||||
[-2, -3],
|
|
||||||
],
|
|
||||||
scratchWallW: [
|
|
||||||
[-4, 0],
|
|
||||||
[-4, -1],
|
|
||||||
],
|
|
||||||
tired: [[-3, -2]],
|
|
||||||
sleeping: [
|
|
||||||
[-2, 0],
|
|
||||||
[-2, -1],
|
|
||||||
],
|
|
||||||
N: [
|
|
||||||
[-1, -2],
|
|
||||||
[-1, -3],
|
|
||||||
],
|
|
||||||
NE: [
|
|
||||||
[0, -2],
|
|
||||||
[0, -3],
|
|
||||||
],
|
|
||||||
E: [
|
|
||||||
[-3, 0],
|
|
||||||
[-3, -1],
|
|
||||||
],
|
|
||||||
SE: [
|
|
||||||
[-5, -1],
|
|
||||||
[-5, -2],
|
|
||||||
],
|
|
||||||
S: [
|
|
||||||
[-6, -3],
|
|
||||||
[-7, -2],
|
|
||||||
],
|
|
||||||
SW: [
|
|
||||||
[-5, -3],
|
|
||||||
[-6, -1],
|
|
||||||
],
|
|
||||||
W: [
|
|
||||||
[-4, -2],
|
|
||||||
[-4, -3],
|
|
||||||
],
|
|
||||||
NW: [
|
|
||||||
[-1, 0],
|
|
||||||
[-1, -1],
|
|
||||||
],
|
|
||||||
};
|
};
|
||||||
|
window.marseykoInterval = setInterval(frame, 100);
|
||||||
|
|
||||||
function setSprite(name, frame) {
|
document.addEventListener('click', (event) => {
|
||||||
const sprite = spriteSets[name][frame % spriteSets[name].length];
|
cursormarseyEl.style.removeProperty("pointer-events");
|
||||||
cursormarseyEl.style.backgroundPosition = `${sprite[0] * 32}px ${sprite[1] * 32}px`;
|
let elementClicked = document.elementFromPoint(event.clientX,event.clientY);
|
||||||
|
if (elementClicked.id === cursormarseyEl.id) {
|
||||||
|
heartEl.classList.remove("d-none");
|
||||||
|
setTimeout(() => {
|
||||||
|
heartEl.classList.add("d-none");
|
||||||
|
}, 2000);
|
||||||
}
|
}
|
||||||
|
cursormarseyEl.style.pointerEvents = "none";
|
||||||
function resetIdleAnimation() {
|
});
|
||||||
idleAnimation = null;
|
|
||||||
idleAnimationFrame = 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
const idle = () => {
|
|
||||||
idleTime += 1;
|
|
||||||
|
|
||||||
// every ~ 20 seconds
|
|
||||||
if (idleTime > 10 && true && idleAnimation == null) {
|
|
||||||
let avalibleIdleAnimations = ["sleeping", "scratchSelf"];
|
|
||||||
if (cursormarseyPosX < 32) {
|
|
||||||
avalibleIdleAnimations.push("scratchWallW");
|
|
||||||
}
|
|
||||||
if (cursormarseyPosY < 32) {
|
|
||||||
avalibleIdleAnimations.push("scratchWallN");
|
|
||||||
}
|
|
||||||
if (cursormarseyPosX > innerWidth - 32) {
|
|
||||||
avalibleIdleAnimations.push("scratchWallE");
|
|
||||||
}
|
|
||||||
if (cursormarseyPosY > innerHeight - 32) {
|
|
||||||
avalibleIdleAnimations.push("scratchWallS");
|
|
||||||
}
|
|
||||||
idleAnimation =
|
|
||||||
avalibleIdleAnimations[
|
|
||||||
Math.floor(Math.random() * avalibleIdleAnimations.length)
|
|
||||||
];
|
|
||||||
}
|
|
||||||
|
|
||||||
switch (idleAnimation) {
|
|
||||||
case "sleeping":
|
|
||||||
if (idleAnimationFrame < 8) {
|
|
||||||
setSprite("tired", 0);
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
setSprite("sleeping", Math.floor(idleAnimationFrame / 4));
|
|
||||||
if (idleAnimationFrame > 192) {
|
|
||||||
resetIdleAnimation();
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
case "scratchWallN":
|
|
||||||
case "scratchWallS":
|
|
||||||
case "scratchWallE":
|
|
||||||
case "scratchWallW":
|
|
||||||
case "scratchSelf":
|
|
||||||
setSprite(idleAnimation, idleAnimationFrame);
|
|
||||||
if (idleAnimationFrame > 9) {
|
|
||||||
resetIdleAnimation();
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
setSprite("idle", 0);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
idleAnimationFrame += 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
const frame = () => {
|
|
||||||
frameCount += 1;
|
|
||||||
const diffX = cursormarseyPosX - mousePosX;
|
|
||||||
const diffY = cursormarseyPosY - mousePosY;
|
|
||||||
const distance = Math.sqrt(diffX ** 2 + diffY ** 2);
|
|
||||||
|
|
||||||
if (distance < cursormarseySpeed || distance < 100) {
|
|
||||||
idle();
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
idleAnimation = null;
|
|
||||||
idleAnimationFrame = 0;
|
|
||||||
|
|
||||||
if (idleTime > 1) {
|
|
||||||
setSprite("alert", 0);
|
|
||||||
// count down after being alerted before moving
|
|
||||||
idleTime = Math.min(idleTime, 7);
|
|
||||||
idleTime -= 1;
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
direction = diffY / distance > 0.5 ? "N" : "";
|
|
||||||
direction += diffY / distance < -0.5 ? "S" : "";
|
|
||||||
direction += diffX / distance > 0.5 ? "W" : "";
|
|
||||||
direction += diffX / distance < -0.5 ? "E" : "";
|
|
||||||
setSprite(direction, frameCount);
|
|
||||||
|
|
||||||
cursormarseyPosX -= (diffX / distance) * cursormarseySpeed;
|
|
||||||
cursormarseyPosY -= (diffY / distance) * cursormarseySpeed;
|
|
||||||
|
|
||||||
cursormarseyPosX = Math.min(Math.max(16, cursormarseyPosX), innerWidth - 16);
|
|
||||||
cursormarseyPosY = Math.min(Math.max(16, cursormarseyPosY), innerHeight - 16);
|
|
||||||
|
|
||||||
cursormarseyEl.style.left = `${cursormarseyPosX}px`;
|
|
||||||
cursormarseyEl.style.top = `${cursormarseyPosY}px`;
|
|
||||||
heartEl.style.left = `${cursormarseyPosX+16}px`;
|
|
||||||
heartEl.style.top = `${cursormarseyPosY-16}px`;
|
|
||||||
}
|
|
||||||
|
|
||||||
document.onmousemove = (event) => {
|
|
||||||
mousePosX = event.clientX;
|
|
||||||
mousePosY = event.clientY;
|
|
||||||
};
|
|
||||||
window.marseykoInterval = setInterval(frame, 100);
|
|
||||||
|
|
||||||
document.addEventListener('click', (event) => {
|
|
||||||
cursormarseyEl.style.removeProperty("pointer-events");
|
|
||||||
let elementClicked = document.elementFromPoint(event.clientX,event.clientY);
|
|
||||||
if (elementClicked.id === cursormarseyEl.id) {
|
|
||||||
heartEl.classList.remove("d-none");
|
|
||||||
setTimeout(() => {
|
|
||||||
heartEl.classList.add("d-none");
|
|
||||||
}, 2000);
|
|
||||||
}
|
|
||||||
cursormarseyEl.style.pointerEvents = "none";
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
Loading…
Reference in New Issue