STARTLINER/src/components/options/Keyboard.vue

<script setup lang="ts">
import SelectButton from 'primevue/selectbutton';
import ToggleSwitch from 'primevue/toggleswitch';
import KeyboardKey from '../KeyboardKey.vue';
import OptionCategory from '../OptionCategory.vue';
import OptionRow from '../OptionRow.vue';
import { usePrfStore } from '../../stores';

const prf = usePrfStore();
</script>

<template>
    <OptionCategory title="Keyboard">
        <OptionRow
            title="Enable"
            tooltip="Only applicable if the IO module is set to segatools built-in (keyboard) or a compatible third-party module (like mu3io.NET)"
        >
            <ToggleSwitch v-model="prf.current!.data.keyboard!.data.enabled" />
        </OptionRow>
        <OptionRow
            title="Lever mode"
            v-if="prf.current!.data.keyboard!.game === 'Ongeki'"
        >
            <SelectButton
                v-model="prf.current!.data.keyboard!.data.use_mouse"
                :options="[
                    { title: 'XInput', value: false },
                    { title: 'Mouse', value: true },
                ]"
                :allow-empty="false"
                option-label="title"
                option-value="value"
            />
        </OptionRow>
        <div
            v-if="prf.current!.data.keyboard!.data.enabled"
            :style="`position: relative; height: ${prf.current!.data.keyboard!.game === 'Ongeki' ? 400 : 250}px`"
        >
            <div
                class="absolute left-1/6 top-1/10"
                style="transform: translateX(-30%) translateY(-50%)"
            >
                <div class="flex flex-row gap-2 self-center w-full">
                    <KeyboardKey button="test" small tooltip="Test" />
                    <KeyboardKey button="svc" small tooltip="Service" />
                    <KeyboardKey button="coin" small tooltip="Coin" />
                </div>
            </div>
            <div v-if="prf.current?.meta.game === 'ongeki'">
                <div
                    class="absolute left-1/2 top-1/2"
                    style="transform: translateX(-540%) translateY(-200%)"
                >
                    <KeyboardKey
                        button="lmenu"
                        small
                        color="rgba(255, 0, 0, 0.2)"
                    />
                </div>
                <div
                    class="absolute right-1/2 top-1/2"
                    style="transform: translateX(540%) translateY(-200%)"
                >
                    <KeyboardKey
                        button="rmenu"
                        small
                        color="rgba(255, 255, 0, 0.2)"
                    />
                </div>
                <div
                    class="absolute left-1/2 top-1/2"
                    style="transform: translateX(-50%) translateY(-20%)"
                >
                    <div class="flex flex-row gap-2 self-center w-full">
                        <KeyboardKey
                            button="lwad"
                            tall
                            color="rgba(180, 0, 255, 0.2)"
                        />
                        <div style="width: 0.7em"></div>
                        <KeyboardKey button="l1" color="rgba(255, 0, 0, 0.2)" />
                        <KeyboardKey button="l2" color="rgba(0, 255, 0, 0.2)" />
                        <KeyboardKey button="l3" color="rgba(0, 0, 255, 0.2)" />
                        <div style="width: 0.7em"></div>
                        <KeyboardKey button="r1" color="rgba(255, 0, 0, 0.2)" />
                        <KeyboardKey button="r2" color="rgba(0, 255, 0, 0.2)" />
                        <KeyboardKey button="r3" color="rgba(0, 0, 255, 0.2)" />
                        <div style="width: 0.7em"></div>
                        <KeyboardKey
                            button="rwad"
                            tall
                            color="rgba(255, 0, 180, 0.2)"
                        />
                    </div>
                </div>
            </div>
            <div v-if="prf.current?.meta.game === 'chunithm'">
                <div class="absolute left-1/2 top-1/5">
                    <div
                        class="flex flex-row flex-nowrap gap-2 self-center w-full"
                    >
                        <div
                            v-for="idx in Array(6)
                                .fill(0)
                                .map((_, i) => i + 1)"
                        >
                            <KeyboardKey
                                button="ir"
                                :index="idx - 1"
                                :tooltip="`ir${idx}`"
                                small
                                color="rgba(0, 255, 0, 0.2)"
                            />
                        </div>
                    </div>
                </div>
                <div
                    class="absolute left-1/2 top-1/2"
                    style="transform: translateX(-50%) translateY(-5%)"
                >
                    <div
                        class="flex flex-row flex-nowrap gap-2 self-center w-full"
                    >
                        <div
                            v-for="idx in Array(16)
                                .fill(0)
                                .map((_, i) => 32 - 2 * i - 1)"
                        >
                            <KeyboardKey
                                button="cell"
                                :index="idx - 1"
                                :tooltip="`cell${idx}`"
                                small
                                color="rgba(255, 255, 0, 0.2)"
                            />
                        </div>
                    </div>
                    <div style="height: 0.6em"></div>
                    <div
                        class="flex flex-row flex-nowrap gap-2 self-center w-full"
                    >
                        <div
                            v-for="idx in Array(16)
                                .fill(0)
                                .map((_, i) => 32 - 2 * i)"
                        >
                            <KeyboardKey
                                button="cell"
                                :index="idx - 1"
                                :tooltip="`cell${idx}`"
                                small
                                color="rgba(255, 255, 0, 0.2)"
                            />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </OptionCategory>
</template>