STARTLINER/src/components/Onboarding.vue

<script setup lang="ts">
import { ComputedRef, computed, ref } from 'vue';
import Button from 'primevue/button';
import Carousel from 'primevue/carousel';
import Dialog from 'primevue/dialog';
import { fromKeycode } from '../keyboard';
import { useClientStore, usePrfStore } from '../stores';
import { prettyPrint } from '../util';
import { VueMarkdownIt } from '@f3ve/vue-markdown-it';
import { useI18n } from 'vue-i18n';

const { t } = useI18n();

const prf = usePrfStore();
const client = useClientStore();

const props = defineProps({
    visible: Boolean,
    firstTime: Boolean,
    onFinish: Function,
});

interface Datum {
    text: string;
    image: string;
}

const game = computed(() => prf.current?.meta.game);

const processText = computed(() => (s: string) => {
    // Why do I have to do this
    s = s
        .split('\n')
        .map((l) => l.trim())
        .join('\n');
    if (prf.current!.data.keyboard?.data.enabled) {
        const testKey = prf.current!.data.keyboard?.data.test;
        const readable = fromKeycode(testKey);
        if (readable !== null) {
            return s.replace(
                '%TESTMENU%',
                `${readable} ${t('onboarding.or')} ${t('onboarding.backButton')}`
            );
        }
    }
    return s.replace('%TESTMENU%', t('onboarding.backButton'));
});

const loadPage = computed(() => (title: string, messages?: object) => {
    return {
        text: t(`onboarding.${title}`, {
            endlink: '</a>',
            black: '<span class="bg-black text-white">',
            end: '</span>',
            ...messages,
        }),
        image: `help-${title}.png`,
    };
});

const data: ComputedRef<Datum[]> = computed(() => {
    const res = [];

    const [standard, systemProcessing, lever, server, finale] = [
        loadPage.value('standard', {
            bigblack: '<div class="p-2 mt-1 mb-1 bg-black text-white">',
            endbig: '</div>',
        }),
        loadPage.value('ongeki-system-processing'),
        loadPage.value('ongeki-lever'),
        loadPage.value('chunithm-server', {
            link: '<a href="https://gitea.tendokyu.moe/Dniel97/SEGAguide/wiki/FAQ#game-is-stuck-at-checking-distribution-server" target="_blank">',
        }),
        loadPage.value('finale', {
            segaguide:
                '<a href="https://gitea.tendokyu.moe/Dniel97/SEGAguide/wiki/FAQ" target="_blank">',
            twotorial: '<a href="https://two-torial.xyz/" target="_blank">',
        }),
    ];
    const standardOngeki = {
        ...standard,
        image: '/help-standard-ongeki.png',
    };
    const standardChunithm = {
        ...standard,
        image: '/help-standard-chunithm.png',
    };
    const finaleOngeki = {
        ...finale,
        image: '/help-finale-ongeki.png',
    };
    const finaleChunithm = {
        ...finale,
        image: '/help-finale-chunithm.png',
    };

    switch (prf.current?.meta.game) {
        case 'ongeki':
            res.push(systemProcessing);
            res.push(standardOngeki);
            res.push(lever);
            res.push(finaleOngeki);
            break;
        case 'chunithm':
            res.push(standardChunithm);
            res.push(server);
            res.push(finaleChunithm);
            break;
        default:
            break;
    }

    return res;
});

const context = ref({
    index: 0,
});

const exitLabel = computed(() => {
    return props.firstTime === true &&
        context.value.index < data.value.length - 1
        ? t('skip')
        : t('close');
});

const page = ref(0);
</script>

<template>
    <Dialog
        modal
        :visible="visible"
        :closable="false"
        :header="
            firstTime
                ? `It looks like you're running ${game ? prettyPrint(game) : '<game>'} for the first time`
                : `${game ? prettyPrint(game) : '<game>'} help`
        "
        :style="{ width: '760px', scale: client.scaleValue }"
        v-on:show="() => ((context.index = 0), (page = 0))"
    >
        <Carousel
            :value="data"
            :num-visible="1"
            :num-scroll="1"
            :context="context"
            :page="page"
            v-on:update:page="(p) => ((context.index = p), (page = p))"
        >
            <template #item="slotProps">
                <div class="md-container markdown">
                    <vue-markdown-it
                        :source="processText(slotProps.data?.text)"
                        :options="{
                            typographer: true,
                            breaks: true,
                            html: true,
                        }"
                    />
                </div>
                <div
                    class="border border-surface-200 dark:border-surface-700 rounded m-2"
                >
                    <img :src="slotProps.data.image" />
                </div>
            </template>
        </Carousel>
        <div style="width: 100%; text-align: center">
            <Button
                v-if="context.index < data.length - 1"
                class="m-auto mr-4"
                :label="t('next')"
                @click="() => (page += 1)"
            />
            <Button
                class="m-auto"
                :label="exitLabel"
                @click="() => onFinish && onFinish()"
            />
        </div>
    </Dialog>
</template>

<style lang="css">
.p-dialog ::-webkit-scrollbar {
    display: none;
}

.md-container {
    height: 9.5rem;
}
</style>