From 99244774825f03916a60da7086c536abc88e179c Mon Sep 17 00:00:00 2001 From: Mylloon Date: Fri, 14 Apr 2023 20:02:04 +0200 Subject: [PATCH] wip: web3 --- static/css/web3.css | 53 +++++++--- static/cursors/0.png | 3 + static/cursors/1.png | 3 + static/js/web3.js | 221 +++++++++++++++++++++++++++++++++++++++- static/pics/bg-web3.gif | 3 + static/pics/oneko.gif | 3 + templates/web3.html | 59 ++++++++--- 7 files changed, 315 insertions(+), 30 deletions(-) create mode 100644 static/cursors/0.png create mode 100644 static/cursors/1.png create mode 100644 static/pics/bg-web3.gif create mode 100644 static/pics/oneko.gif diff --git a/static/css/web3.css b/static/css/web3.css index 90491f9..e4941ee 100644 --- a/static/css/web3.css +++ b/static/css/web3.css @@ -1,37 +1,39 @@ -div.scroll-banner { - background-color: black; - position: absolute; - top: 0.2em; - left: 0.1%; - width: 99.8%; - overflow: hidden; +html { + background-image: url("../pics/bg-web3.gif"); + background-repeat: revert; + color: white; } -div.scroll-text { +div#scroll-banner { + overflow: hidden; + border: 3px double white; +} + +div#scroll-text { text-align: right; white-space: nowrap; - animation: marquee 13s linear infinite; + animation: marquee 8s linear infinite; } -div.scroll-banner > div.scroll-text > * { - color: #ff6161; - font-size: 150%; +div#scroll-banner > div#scroll-text > * { + font-size: 200%; + margin: 0; } @keyframes marquee { from { - transform: translateX(55%); + transform: translateX(100%); } to { - transform: translateX(-100%); + transform: translateX(-140%); } } @media only screen and (max-width: 850px) { /* Mobile display */ - div.info-text { + div#scroll-text { animation: marquee 9s linear infinite; } @@ -45,3 +47,24 @@ div.scroll-banner > div.scroll-text > * { } } } + +h1 { + font-size: 250%; +} + +p, +a { + font-size: 125%; +} + +a { + color: rgb(147, 107, 255); +} + +img { + vertical-align: middle; +} + +footer { + text-align: center; +} diff --git a/static/cursors/0.png b/static/cursors/0.png new file mode 100644 index 0000000..b46ce8c --- /dev/null +++ b/static/cursors/0.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:98e87b49dd167096b4da164c389026a76be91f3340ba99881b16f6abf95b64dc +size 204 diff --git a/static/cursors/1.png b/static/cursors/1.png new file mode 100644 index 0000000..47ea8b8 --- /dev/null +++ b/static/cursors/1.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:0e7b054ed4fc86f5194aa591882f52048dd60193216537ddd555725e8769f8c8 +size 224 diff --git a/static/js/web3.js b/static/js/web3.js index 9de9c0c..3827a90 100644 --- a/static/js/web3.js +++ b/static/js/web3.js @@ -1,7 +1,7 @@ window.addEventListener("load", () => main()); const main = () => { - // Handle change of focus + /* Handle change of focus */ const title = document.title; const blurMessage = "Hey.. come back!"; @@ -12,4 +12,223 @@ const main = () => { window.addEventListener("focus", function () { document.title = title; }); + + /* Mouse cursor */ + const nb_available_cursors = 2; + const id = Math.floor(Math.random() * nb_available_cursors); + document.body.style = `cursor: url('/cursors/${id}.png'), default;`; + new cursoreffects.fairyDustCursor(); + oneko(); + + /* Nb of visitors */ + document.getElementById("visitors-number").innerHTML = + Math.floor(Math.random() * 3578) + 1312; + + /* Scroll text */ + document.getElementById("scroll-text").firstElementChild.innerHTML = + "WELCOME HERE IN MY WEBSPACE! ".repeat(3); +}; + +/** https://github.com/adryd325/oneko.js */ +const oneko = () => { + 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], + ], + }; + + const create = () => { + nekoEl.id = "oneko"; + nekoEl.style.width = "32px"; + nekoEl.style.height = "32px"; + nekoEl.style.position = "fixed"; + nekoEl.style.pointerEvents = "none"; + nekoEl.style.backgroundImage = "url('./pics/oneko.gif')"; + nekoEl.style.imageRendering = "pixelated"; + nekoEl.style.left = `${nekoPosX - 16}px`; + nekoEl.style.top = `${nekoPosY - 16}px`; + nekoEl.style.zIndex = "999"; + + document.body.appendChild(nekoEl); + + document.onmousemove = (event) => { + mousePosX = event.clientX; + mousePosY = event.clientY; + }; + + window.onekoInterval = setInterval(frame, 100); + }; + + const setSprite = (name, frame) => { + const sprite = spriteSets[name][frame % spriteSets[name].length]; + nekoEl.style.backgroundPosition = `${sprite[0] * 32}px ${sprite[1] * 32}px`; + }; + + const resetIdleAnimation = () => { + idleAnimation = null; + idleAnimationFrame = 0; + }; + + const idle = () => { + idleTime++; + + // every ~ 20 seconds + if ( + idleTime > 10 && + Math.floor(Math.random() * 200) == 0 && + 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++; + }; + + const frame = () => { + frameCount++; + 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/static/pics/bg-web3.gif b/static/pics/bg-web3.gif new file mode 100644 index 0000000..45192a9 --- /dev/null +++ b/static/pics/bg-web3.gif @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:90af1a375171c0bc8bc7bdaadf28dfb1fd12d384c936f9b817fa8777f4de5888 +size 311045 diff --git a/static/pics/oneko.gif b/static/pics/oneko.gif new file mode 100644 index 0000000..4a73a7a --- /dev/null +++ b/static/pics/oneko.gif @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:f4c5688eb8ee6f22b08ab8df361222307dc6fe2d5bdcfa12582cea694707e66d +size 3316 diff --git a/templates/web3.html b/templates/web3.html index 4141006..003cba3 100644 --- a/templates/web3.html +++ b/templates/web3.html @@ -46,12 +46,37 @@ {{#data}}
-
+
+

...

+
-
+
+

anri's website

+ +

+ idk if you know but i do love + pic of a crab, mascot of rust(RUST) +

+ +

in fact the whole website backend is 🦀🦀

+ +

+ 
+welcome to my web3 space feel free to send me nfts as jpeg format
+

+
+ + {{/data}}