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

feat(midsummer): frog-hop easter egg replaces the rickroll

Browse source
This commit is contained in:
Erik 2026-06-19 09:29:07 +02:00
parent c4dd1b7ae7
commit e896ef1f21
2 changed files with 53 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -60,23 +60,28 @@ export const Sidebar: React.FC<Props> = ({
{version && <div className="ml-version">v{version}</div>} {version && <div className="ml-version">v{version}</div>}
<div className="ml-sidebar-header"> <div className="ml-sidebar-header">
<span className="ml-sidebar-title" style={{ cursor: 'pointer' }} onClick={() => { <span className="ml-sidebar-title" style={{ cursor: 'pointer' }} onClick={() => {
// 🎵 // 🐸 Små grodorna hop — bounce the whole layout and send frogs
const overlay = document.createElement('div'); // leaping up the screen. Replaces the old rickroll.
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 layout = document.querySelector('.ml-layout') as HTMLElement | null;
const video = document.createElement('video'); if (layout) {
video.src = '/rick.mp4'; layout.classList.remove('ms-hop');
video.autoplay = true; void layout.offsetWidth; // force reflow so the animation restarts
video.loop = true; layout.classList.add('ms-hop');
video.style.cssText = 'width:100vw;height:100vh;object-fit:cover;'; }
overlay.appendChild(video); const frogs = document.createElement('div');
document.body.appendChild(overlay); frogs.className = 'ms-hop-frogs';
// Violent shake for 1.5s then spin forever for (let i = 0; i < 9; i++) {
document.body.style.animation = 'ml-shake 0.05s 30'; const f = document.createElement('span');
const style = document.createElement('style'); f.textContent = '🐸';
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)}}'; f.style.left = (i * 11 + 3) + 'vw';
document.head.appendChild(style); f.style.animationDelay = (i * 0.07).toFixed(2) + 's';
setTimeout(() => { overlay.style.animation = 'ml-spin 3s linear infinite'; }, 1500); frogs.appendChild(f);
video.play().catch(() => {}); }
document.body.appendChild(frogs);
window.setTimeout(() => {
layout?.classList.remove('ms-hop');
frogs.remove();
}, 2600);
}}>Active Mosswart Enjoyers ({players.length})</span> }}>Active Mosswart Enjoyers ({players.length})</span>
</div> </div>

31
frontend/src/styles/midsummer.css
View file

@ -139,3 +139,34 @@
@keyframes ms-fall { @keyframes ms-fall {
to { transform: translateY(112vh) rotate(360deg); opacity: 0.25; } to { transform: translateY(112vh) rotate(360deg); opacity: 0.25; }
} }
.ml-layout.ms-hop {
animation: ms-bounce 0.6s ease-in-out 3;
}
@keyframes ms-bounce {
0%, 100% { transform: translateY(0); }
20% { transform: translateY(-16px); }
40% { transform: translateY(0); }
60% { transform: translateY(-9px); }
80% { transform: translateY(0); }
}
.ms-hop-frogs {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 999999;
}
.ms-hop-frogs span {
position: absolute;
bottom: -40px;
font-size: 34px;
line-height: 1;
animation: ms-hop-up 2.4s ease-in forwards;
}
@keyframes ms-hop-up {
to { bottom: 114vh; transform: rotate(18deg); }
}
@media (prefers-reduced-motion: reduce) {
.ml-layout.ms-hop { animation: none; }
.ms-hop-frogs span { animation-duration: 0.01s; }
}