103 lines
3.0 KiB
Vue
103 lines
3.0 KiB
Vue
<script setup lang="ts">
|
|
import Button from 'primevue/button';
|
|
import { usePrfStore } from '../stores';
|
|
|
|
const prf = usePrfStore();
|
|
</script>
|
|
|
|
<template>
|
|
<div class="mt-4 flex flex-row flex-wrap align-middle gap-4">
|
|
<Button
|
|
label="O.N.G.E.K.I. profile"
|
|
icon="pi pi-plus"
|
|
class="ongeki-button profile-button"
|
|
@click="() => prf.create('ongeki')"
|
|
/>
|
|
<Button
|
|
label="CHUNITHM profile"
|
|
icon="pi pi-plus"
|
|
class="chunithm-button profile-button"
|
|
@click="() => prf.create('chunithm')"
|
|
/>
|
|
</div>
|
|
<div class="mt-12 flex flex-col flex-wrap align-middle gap-4">
|
|
<div v-for="p in prf.list">
|
|
<div class="flex flex-row flex-wrap align-middle gap-2">
|
|
<Button
|
|
:disabled="
|
|
prf.current?.game === p.game &&
|
|
prf.current?.name === p.name
|
|
"
|
|
:label="p.name"
|
|
:class="
|
|
(p.game === 'chunithm'
|
|
? 'chunithm-button'
|
|
: 'ongeki-button') +
|
|
' ' +
|
|
'self-center profile-button'
|
|
"
|
|
@click="prf.switchTo(p.game, p.name)"
|
|
/>
|
|
<Button
|
|
rounded
|
|
icon="pi pi-trash"
|
|
severity="danger"
|
|
aria-label="remove"
|
|
size="small"
|
|
class="self-center ml-2"
|
|
style="width: 2rem; height: 2rem"
|
|
:disabled="true"
|
|
/>
|
|
<Button
|
|
rounded
|
|
icon="pi pi-clone"
|
|
severity="warn"
|
|
aria-label="duplicate"
|
|
size="small"
|
|
class="self-center"
|
|
style="width: 2rem; height: 2rem"
|
|
:disabled="true"
|
|
/>
|
|
<Button
|
|
rounded
|
|
icon="pi pi-pencil"
|
|
severity="help"
|
|
aria-label="duplicate"
|
|
size="small"
|
|
class="self-center"
|
|
style="width: 2rem; height: 2rem"
|
|
:disabled="true"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.profile-button {
|
|
width: 14em;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.ongeki-button {
|
|
background-color: var(--p-pink-400);
|
|
border-color: var(--p-pink-400);
|
|
}
|
|
|
|
.ongeki-button:hover,
|
|
.ongeki-button:active {
|
|
background-color: var(--p-pink-300) !important;
|
|
border-color: var(--p-pink-300) !important;
|
|
}
|
|
|
|
.chunithm-button {
|
|
background-color: var(--p-yellow-400);
|
|
border-color: var(--p-yellow-400);
|
|
}
|
|
.chunithm-button:hover,
|
|
.chunithm-button:active {
|
|
background-color: var(--p-yellow-300) !important;
|
|
border-color: var(--p-yellow-300) !important;
|
|
}
|
|
</style>
|