forked from akanyan/STARTLINER
62 lines
1.6 KiB
Vue
62 lines
1.6 KiB
Vue
<script setup lang="ts">
|
|
import Button from 'primevue/button';
|
|
import ProfileListEntry from './ProfileListEntry.vue';
|
|
import { usePrfStore } from '../stores';
|
|
|
|
const prf = usePrfStore();
|
|
</script>
|
|
|
|
<template>
|
|
<div v-if="prf.list.length === 0">
|
|
Welcome to STARTLINER! Start by creating a profile.
|
|
</div>
|
|
<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')"
|
|
v-tooltip="'!!! Experimental !!!'"
|
|
/>
|
|
</div>
|
|
<div class="mt-12 flex flex-col flex-wrap align-middle gap-4">
|
|
<div v-for="p in prf.list">
|
|
<ProfileListEntry :p="p" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style>
|
|
.profile-button {
|
|
width: 14em;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.ongeki-button {
|
|
background-color: var(--p-pink-400) !important;
|
|
border-color: var(--p-pink-400) !important;
|
|
}
|
|
|
|
.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) !important;
|
|
border-color: var(--p-yellow-400) !important;
|
|
}
|
|
.chunithm-button:hover,
|
|
.chunithm-button:active {
|
|
background-color: var(--p-yellow-300) !important;
|
|
border-color: var(--p-yellow-300) !important;
|
|
}
|
|
</style>
|