diff --git a/files/assets/css/main.css b/files/assets/css/main.css index 9d9ab3323..0688eaffa 100644 --- a/files/assets/css/main.css +++ b/files/assets/css/main.css @@ -7307,4 +7307,11 @@ button, .btn { #marseko { z-index: 1000000000000000; + width: 32px; + height: 32px; + position: fixed; + pointer-events: none; + background-image: url('/i/marseko.webp?x=1'); + image-rendering: pixelated; + background-position: -64px -32px; } diff --git a/files/assets/js/marseko.js b/files/assets/js/marseko.js new file mode 100644 index 000000000..108ece876 --- /dev/null +++ b/files/assets/js/marseko.js @@ -0,0 +1,187 @@ +const marsekoEl = document.getElementById("marseko"); +let marsekoPosX = 32; +let marsekoPosY = 32; +let mousePosX = 0; +let mousePosY = 0; +let frameCount = 0; +let idleTime = 0; +let idleAnimation = null; +let idleAnimationFrame = 0; +const marsekoSpeed = 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]; + marsekoEl.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 (marsekoPosX < 32) { + avalibleIdleAnimations.push("scratchWallW"); + } + if (marsekoPosY < 32) { + avalibleIdleAnimations.push("scratchWallN"); + } + if (marsekoPosX > window.innerWidth - 32) { + avalibleIdleAnimations.push("scratchWallE"); + } + if (marsekoPosY > window.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 = marsekoPosX - mousePosX; + const diffY = marsekoPosY - mousePosY; + const distance = Math.sqrt(diffX ** 2 + diffY ** 2); + + if (distance < marsekoSpeed || distance < 48) { + 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); + + marsekoPosX -= (diffX / distance) * marsekoSpeed; + marsekoPosY -= (diffY / distance) * marsekoSpeed; + + marsekoPosX = Math.min(Math.max(16, marsekoPosX), window.innerWidth - 16); + marsekoPosY = Math.min(Math.max(16, marsekoPosY), window.innerHeight - 16); + + marsekoEl.style.left = `${marsekoPosX - 16}px`; + marsekoEl.style.top = `${marsekoPosY - 16}px`; +} + +document.onmousemove = (event) => { + mousePosX = event.clientX; + mousePosY = event.clientY; + }; +window.marseykoInterval = setInterval(frame, 100); + +function getRandomInt(max) { + return Math.floor(Math.random() * max); +} +const random_left = getRandomInt(screen.width) +const random_top = getRandomInt(screen.height) + +marsekoEl.style.left = `${random_left}px`; +marsekoEl.style.top = `${random_top}px`; diff --git a/files/assets/js/vendor/marseko.js b/files/assets/js/vendor/marseko.js deleted file mode 100644 index afb82d91e..000000000 --- a/files/assets/js/vendor/marseko.js +++ /dev/null @@ -1,199 +0,0 @@ -// based on marseyko.js from https://github.com/adryd325/marseyko.js, licensed under MIT, with art from https://twitter.com/_Anunnery - -(function marseyko() { - const nekoEl = document.createElement("div"); - let nekoPosX = 32; - let nekoPosY = 32; - let mousePosX = 0; - let mousePosY = 0; - let frameCount = 0; - let idleTime = 0; - let idleAnimation = null; - let idleAnimationFrame = 0; - const nekoSpeed = 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 create() { - nekoEl.id = "marseko"; - nekoEl.style.width = "32px"; - nekoEl.style.height = "32px"; - nekoEl.style.position = "fixed"; - nekoEl.style.pointerEvents = "none"; - nekoEl.style.backgroundImage = "url('/i/marseko.webp?x=1')"; - nekoEl.style.imageRendering = "pixelated"; - nekoEl.style.left = "16px"; - nekoEl.style.top = "16px"; - - document.body.appendChild(nekoEl); - - document.onmousemove = (event) => { - mousePosX = event.clientX; - mousePosY = event.clientY; - }; - - window.marseykoInterval = setInterval(frame, 100); - } - - function setSprite(name, frame) { - const sprite = spriteSets[name][frame % spriteSets[name].length]; - nekoEl.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 (nekoPosX < 32) { - avalibleIdleAnimations.push("scratchWallW"); - } - if (nekoPosY < 32) { - avalibleIdleAnimations.push("scratchWallN"); - } - if (nekoPosX > window.innerWidth - 32) { - avalibleIdleAnimations.push("scratchWallE"); - } - if (nekoPosY > window.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 = nekoPosX - mousePosX; - const diffY = nekoPosY - mousePosY; - const distance = Math.sqrt(diffX ** 2 + diffY ** 2); - - if (distance < nekoSpeed || distance < 48) { - 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); - - nekoPosX -= (diffX / distance) * nekoSpeed; - nekoPosY -= (diffY / distance) * nekoSpeed; - - nekoPosX = Math.min(Math.max(16, nekoPosX), window.innerWidth - 16); - nekoPosY = Math.min(Math.max(16, nekoPosY), window.innerHeight - 16); - - nekoEl.style.left = `${nekoPosX - 16}px`; - nekoEl.style.top = `${nekoPosY - 16}px`; - } - - create(); -})(); diff --git a/files/templates/default.html b/files/templates/default.html index 543ccb747..ded6ee487 100644 --- a/files/templates/default.html +++ b/files/templates/default.html @@ -98,10 +98,6 @@ {% endif %} -{% if SITE_NAME == 'rDrama' %} - -{% endif %} - {% if IS_DKD() %} {% include "events/DKD/music.html" %} {% elif IS_FISTMAS() %} diff --git a/files/templates/root.html b/files/templates/root.html index 68e89f295..782530cad 100644 --- a/files/templates/root.html +++ b/files/templates/root.html @@ -37,5 +37,10 @@ {% block body required %}{% endblock %} {{html_head.stylesheets_lower()}} + + {% if SITE_NAME == 'rDrama' %} +
+ + {% endif %}