51 lines
3.0 KiB
Vue
51 lines
3.0 KiB
Vue
<script setup lang="ts">
|
|
import { MAIN_STATS, mainStatTexts } from '#shared/character.util';
|
|
import type { CharacterConfig, MainStat } from '~/types/character';
|
|
|
|
const { config } = defineProps<{
|
|
config: CharacterConfig
|
|
}>();
|
|
|
|
const position = ref(0);
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex flex-1 gap-12 px-2 py-4 justify-center items-center sticky top-0 bg-light-0 dark:bg-dark-0 w-full z-10 min-h-20">
|
|
<div class="flex flex-shrink gap-3 items-center relative w-48 ms-12">
|
|
<span v-for="(stat, i) of MAIN_STATS" :value="stat" class="block w-2.5 h-2.5 m-px outline outline-1 outline-transparent
|
|
hover:outline-light-70 dark:hover:outline-dark-70 rounded-full bg-light-40 dark:bg-dark-40 cursor-pointer" @click="position = i"></span>
|
|
<span :style="{ 'left': position * 1.5 + 'em' }" :data-text="mainStatTexts[MAIN_STATS[position] as MainStat]" class="rounded-full w-3 h-3 bg-accent-blue absolute transition-[left]
|
|
after:content-[attr(data-text)] after:absolute after:-translate-x-1/2 after:top-4 after:p-px after:bg-light-0 dark:after:bg-dark-0 after:text-center"></span>
|
|
</div>
|
|
<div class="flex-1 flex">
|
|
<slot name="addin" :stat="MAIN_STATS[position]"></slot>
|
|
</div>
|
|
<span></span>
|
|
</div>
|
|
<div class="flex flex-1 px-8 overflow-hidden max-w-full">
|
|
<div class="relative cursor-grab active:cursor-grabbing select-none transition-[left] flex flex-1 flex-row max-w-full" :style="{ 'left': `-${position * 100}%` }">
|
|
<div class="flex flex-shrink-0 flex-col gap-4 relative w-full overflow-y-auto px-20" v-for="(stat, name) in config.training">
|
|
<template v-for="(options, level) of stat">
|
|
<div class="w-full flex h-px"><div class="border-t border-dashed border-light-50 dark:border-dark-50 w-full"></div><span class="relative left-4">{{ level }}</span></div>
|
|
<div class="flex flex-row gap-4 justify-center">
|
|
<template v-for="(option, i) in options">
|
|
<slot :stat="name" :level="level" :option="i"></slot>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
<!-- <div class="flex flex-shrink-0 flex-col gap-4 relative w-full overflow-y-auto px-20" v-for="(stat, name) in config.training" >
|
|
<div class="flex flex-row gap-2 justify-center relative" v-for="(options, level) in stat">
|
|
<template v-if="progress">
|
|
<div class="absolute left-0 right-0 -top-2 h-px border-t border-light-30 dark:border-dark-30 border-dashed">
|
|
<span class="absolute right-0 p-1 text-end">{{ level }}</span>
|
|
</div>
|
|
</template>
|
|
<template v-for="(option, i) in options">
|
|
<slot :stat="name" :level="level" :option="i"></slot>
|
|
</template>
|
|
</div>
|
|
</div> -->
|
|
</div>
|
|
</div>
|
|
</template> |