mami/src/mami.js/youare.jsx

#include animate.js

const MamiYouAreAnIdiot = function() {
    const html = <div class="youare">
        <div class="youare-content">
            <div class="youare-text">
                <div class="youare-big">you are an idiot</div>
                <div class="youare-small">!</div>
            </div>
            <div class="youare-smiles">
                <div class="youare-smile">☺</div>
                <div class="youare-smile">☺</div>
                <div class="youare-smile">☺</div>
            </div>
        </div>
    </div>;

    let soundSrc;

    const pub = {
        getElement: () => html,
        onViewPush: () => {
            return new Promise(resolve => {
                const soundMgr = mami.getSound();
                if(soundMgr === undefined || soundMgr === null) {
                    resolve();
                    return;
                }

                const soundSrcs = mami.getSoundLibrary().getSound('misc:youare').getSources();
                soundMgr.load('youarebgm', soundSrcs, (success, buffer) => {
                    if(success) {
                        soundSrc = buffer.createSource();
                        soundSrc.setMuted(true);
                        soundSrc.setLoopStart(0.21);
                        soundSrc.setLoopEnd(5);
                        soundSrc.setLoop();
                        soundSrc.play();
                        resolve();
                    } else resolve();
                });
            });
        },
        onViewForeground: async () => {
            if(soundSrc !== undefined)
                soundSrc.setMuted(false);
        },
        onViewBackground: async () => {
            if(soundSrc !== undefined)
                soundSrc.setMuted(true);
        },
        onViewPop: async () => {
            if(soundSrc !== undefined)
                soundSrc.stop();
            soundSrc = undefined;
        },
        pushOn: async views => views.push(pub, ctx => MamiAnimate({
            async: true,
            duration: 1500,
            easing: 'outBounce',
            start: () => ctx.toElem.style.top = '-100%',
            update: t => ctx.toElem.style.top = `${-100 + (t * 100)}%`,
            end: () => ctx.toElem.style.top = null,
        })),
    };

    return pub;
};