SawatoMosswartsEnjoyersClub/MosswartOverlord
3
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(sidebar): restore the rickroll title-click easter egg

Browse source 
Holiday's over — revert the Sma Grodorna frog-hop title gag back to the
original /rick.mp4 fullscreen rickroll + shake/spin it replaced.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Erik 2026-06-24 08:15:21 +02:00
parent cc686da532
commit 6a0bb9fe80
14 changed files with 36 additions and 44 deletions
Download patch file Download diff file Expand all files Collapse all files

42
frontend/src/components/map/Sidebar.tsx
View file

@ -60,31 +60,23 @@ export const Sidebar: React.FC<Props> = ({
{version && <div className="ml-version">v{version}</div>}
<div className="ml-sidebar-header">
<span className="ml-sidebar-title" style={{ cursor: 'pointer' }} onClick={() => {
// 🐸 Små grodorna hop — bounce the whole layout and send frogs
// leaping up the screen. Replaces the old rickroll.
// Ignore rapid re-clicks while a hop is already in flight so the
// frog layers and their cleanup timers don't stack.
if (document.querySelector('.ms-hop-frogs')) return;
const layout = document.querySelector('.ml-layout') as HTMLElement | null;
if (layout) {
layout.classList.remove('ms-hop');
void layout.offsetWidth; // force reflow so the animation restarts
layout.classList.add('ms-hop');
}
const frogs = document.createElement('div');
frogs.className = 'ms-hop-frogs';
for (let i = 0; i < 9; i++) {
const f = document.createElement('span');
f.textContent = '🐸';
f.style.left = (i * 11 + 3) + 'vw';
f.style.animationDelay = (i * 0.07).toFixed(2) + 's';
frogs.appendChild(f);
}
document.body.appendChild(frogs);
window.setTimeout(() => {
layout?.classList.remove('ms-hop');
frogs.remove();
}, 2600);
// 🎵
const overlay = document.createElement('div');
overlay.style.cssText = 'position:fixed;top:0;left:0;width:100vw;height:100vh;background:#000;z-index:999999;display:flex;align-items:center;justify-content:center;';
const video = document.createElement('video');
video.src = '/rick.mp4';
video.autoplay = true;
video.loop = true;
video.style.cssText = 'width:100vw;height:100vh;object-fit:cover;';
overlay.appendChild(video);
document.body.appendChild(overlay);
// Violent shake for 1.5s then spin forever
document.body.style.animation = 'ml-shake 0.05s 30';
const style = document.createElement('style');
style.textContent = '@keyframes ml-shake{0%,100%{transform:translate(0) rotate(0)}25%{transform:translate(-15px,10px) rotate(-2deg)}50%{transform:translate(15px,-10px) rotate(2deg)}75%{transform:translate(-10px,-15px) rotate(-1deg)}} @keyframes ml-spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}';
document.head.appendChild(style);
setTimeout(() => { overlay.style.animation = 'ml-spin 3s linear infinite'; }, 1500);
video.play().catch(() => {});
}}>Active Mosswart Enjoyers ({players.length})</span>
</div>