113 lines
4.2 KiB
JavaScript
113 lines
4.2 KiB
JavaScript
#include animate.js
|
|
#include easings.js
|
|
#include rng.js
|
|
|
|
const MamiForceDisconnectNotice = function(banInfo) {
|
|
const message = (() => {
|
|
if(banInfo.perma)
|
|
return 'You have been banned till the end of time, please try again in a different dimension';
|
|
if(banInfo.until)
|
|
return `You were banned until ${banInfo.until.toLocaleString()}`;
|
|
return 'You were kicked, refresh to log back in';
|
|
})();
|
|
|
|
let marqueeElem;
|
|
const html = <div class="baka">
|
|
<div class="baka-container">
|
|
<div class="baka-duration">
|
|
<div class="baka-duration-inner">{message}</div>
|
|
</div>
|
|
{marqueeElem = <div class="baka-marquee"></div>}
|
|
</div>
|
|
<div class="baka-bottom"/>
|
|
</div>;
|
|
|
|
const marqueeString = banInfo.type === 'kick' ? 'Kicked' : 'Banned';
|
|
for(let i = 0; i < 30; ++i)
|
|
marqueeElem.append(<div class="baka-marquee-text">{marqueeString}</div>);
|
|
|
|
const rng = new MamiRNG;
|
|
const rotate = rng.next(-20, 20);
|
|
let sfxBuf, bgmSrc;
|
|
|
|
const pub = {
|
|
getElement: () => html,
|
|
onViewPush: async () => {
|
|
try {
|
|
sfxBuf = await mami.sound.library.loadBuffer('touhou:pichuun');
|
|
} catch(ex) {
|
|
sfxBuf = undefined;
|
|
}
|
|
|
|
try {
|
|
bgmSrc = await mami.sound.library.loadSource('touhou:th10score');
|
|
bgmSrc.setLoop(true, 10.512, 38.074);
|
|
} catch(ex) {
|
|
bgmSrc = undefined;
|
|
}
|
|
},
|
|
onViewPop: async () => {
|
|
try {
|
|
bgmSrc?.stop();
|
|
} catch(ex) {}
|
|
bgmSrc = sfxBuf = undefined;
|
|
},
|
|
getViewTransition: mode => {
|
|
if(mode === 'push')
|
|
return ctx => MamiAnimate({
|
|
async: true,
|
|
duration: (sfxBuf?.duration ?? 1.4) * 1000,
|
|
start: () => {
|
|
if(sfxBuf !== undefined)
|
|
mami.sound.audio.createSource(sfxBuf).play();
|
|
|
|
ctx.toElem.style.top = '-100%';
|
|
},
|
|
update: t => {
|
|
const tOutBounce = MamiEasings.outBounce(t);
|
|
ctx.toElem.style.top = `${-100 + (tOutBounce * 100)}%`;
|
|
|
|
const tOutExpo = MamiEasings.outExpo(t);
|
|
ctx.fromElem.style.transform = `scale(${1 - (1 * tOutExpo)}) rotate(${rotate * tOutExpo}deg)`;
|
|
ctx.fromElem.style.filter = `grayscale(${tOutExpo * 100}%)`;
|
|
},
|
|
end: () => {
|
|
bgmSrc?.play();
|
|
ctx.toElem.style.top = null;
|
|
ctx.fromElem.style.transform = null;
|
|
ctx.fromElem.style.filter = null;
|
|
},
|
|
});
|
|
|
|
if(mode === 'pop')
|
|
return ctx => MamiAnimate({
|
|
async: true,
|
|
duration: (sfxBuf?.duration ?? 1.4) * 1000,
|
|
start: () => {
|
|
bgmSrc?.stop();
|
|
if(sfxBuf !== undefined)
|
|
mami.sound.audio.createSource(sfxBuf, true).play();
|
|
|
|
ctx.toElem.style.transform = `scale(1) rotate(${rotate}deg)`;
|
|
ctx.toElem.style.filter = 'grayscale(100%)';
|
|
},
|
|
update: t => {
|
|
const tOutBounce = MamiEasings.inBounce(t);
|
|
ctx.fromElem.style.top = `${tOutBounce * -100}%`;
|
|
|
|
const tOutExpo = MamiEasings.inExpo(t);
|
|
ctx.toElem.style.transform = `scale(${1 * tOutExpo}) rotate(${rotate - (rotate * tOutExpo)}deg)`;
|
|
ctx.toElem.style.filter = `grayscale(${100 - (tOutExpo * 100)}%)`;
|
|
},
|
|
end: () => {
|
|
ctx.fromElem.style.top = null;
|
|
ctx.toElem.style.transform = null;
|
|
ctx.toElem.style.filter = null;
|
|
},
|
|
});
|
|
},
|
|
};
|
|
|
|
return pub;
|
|
};
|