157 lines
6.3 KiB
Vue
157 lines
6.3 KiB
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">
|
|
<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
|
|
: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) => 16 - i)"
|
|
>
|
|
<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 - 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>
|