feat: onboarding

2025-04-18 15:00:52 +00:00
parent 5d2d407659
commit e87b661f08
24 changed files with 408 additions and 139 deletions
--- a/src/components/Onboarding.vue
+++ b/src/components/Onboarding.vue
@ -0,0 +1,155 @@
+<script setup lang="ts">
+import { ComputedRef, computed, onMounted } 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';
+
+const prf = usePrfStore();
+const client = useClientStore();
+
+defineProps({
+    visible: Boolean,
+    firstTime: Boolean,
+    onFinish: Function,
+});
+
+interface Datum {
+    text: string;
+    image: string;
+}
+
+const game = computed(() => prf.current?.meta.game);
+
+const processText = (s: string) => {
+    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} or a button on the back of the controller`
+            );
+        }
+    }
+    return s.replace('%TESTMENU%', 'a button on the back of the controller');
+};
+
+const loadPage = async (title: string) => {
+    return {
+        text: await (await fetch(`/help-${title}.md`)).text(),
+        image: `help-${title}.png`,
+    };
+};
+
+let systemProcessing: Datum;
+let standardOngeki: Datum;
+let standardChunithm: Datum;
+let lever: Datum;
+let server: Datum;
+let finaleOngeki: Datum;
+let finaleChunithm: Datum;
+
+const data: ComputedRef<Datum[]> = computed(() => {
+    const res = [];
+
+    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;
+});
+
+onMounted(async () => {
+    [standardOngeki, systemProcessing, lever, server, finaleOngeki] =
+        await Promise.all([
+            loadPage('standard'),
+            loadPage('ongeki-system-processing'),
+            loadPage('ongeki-lever'),
+            loadPage('chunithm-server'),
+            loadPage('finale'),
+        ]);
+    standardOngeki = {
+        ...standardOngeki,
+        image: '/help-standard-ongeki.png',
+    };
+    standardChunithm = {
+        ...standardOngeki,
+        image: '/help-standard-chunithm.png',
+    };
+    finaleOngeki = {
+        ...finaleOngeki,
+        image: '/help-finale-ongeki.png',
+    };
+    finaleChunithm = {
+        ...finaleOngeki,
+        image: '/help-finale-chunithm.png',
+    };
+});
+</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 }"
+    >
+        <Carousel :value="data" :num-visible="1" :num-scroll="1">
+            <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
+                class="m-auto"
+                label="OK"
+                @click="() => onFinish && onFinish()"
+            />
+        </div>
+    </Dialog>
+</template>
+
+<style lang="css">
+.p-dialog ::-webkit-scrollbar {
+    display: none;
+}
+
+.md-container {
+    height: 9.5rem;
+}
+</style>