forked from noxious/client
69 lines
3.2 KiB
Vue
69 lines
3.2 KiB
Vue
<template>
|
|
<div class="grow flex flex-col w-full h-full relative overflow-auto">
|
|
<div class="m-4 relative">
|
|
<h4 class="font-medium text-lg max-w-[375px]">Character</h4>
|
|
<div class="flex justify-center flex-wrap gap-20">
|
|
<div class="flex gap-3 mt-2 flex-wrap max-w-[375px]">
|
|
<div class="h-full flex flex-col justify-center items-center">
|
|
<img class="h-72 my-2 mx-auto" src="/assets/placeholders/inventory_player.png" />
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-col gap-4">
|
|
<div class="flex flex-col gap-3 mx-5 mt-2">
|
|
<h3>{{ gameStore.character?.name }}</h3>
|
|
<div class="flex gap-4 flex-wrap max-w-[375px]">
|
|
<ul class="p-0 m-0 list-none">
|
|
<li class="leading-6 text-lg">Class:</li>
|
|
<li class="leading-6 text-lg">Race:</li>
|
|
<li class="leading-6 text-lg">Hit Points:</li>
|
|
<li class="leading-6 text-lg">Mana Points:</li>
|
|
<li class="leading-6 text-lg">Level:</li>
|
|
<li class="leading-6 text-lg">Stat Points:</li>
|
|
</ul>
|
|
<ul class="p-0 m-0 list-none">
|
|
<li class="leading-6 text-lg min-h-6">Knight</li>
|
|
<li class="leading-6 text-lg min-h-6">{{ gameStore.character?.characterType?.race }}</li>
|
|
<li class="leading-6 text-lg min-h-6">{{ gameStore.character?.hitpoints }} <span class="text-green">(+15)</span></li>
|
|
<li class="leading-6 text-lg min-h-6">{{ gameStore.character?.mana }}</li>
|
|
<li class="leading-6 text-lg min-h-6">{{ gameStore.character?.level }}</li>
|
|
<li class="leading-6 text-lg min-h-6">3</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-col gap-3 mx-5 mt-2">
|
|
<h3>Alignment</h3>
|
|
<div class="h-8 w-64 rounded border border-solid border-white bg-gradient-to-r from-red to-blue relative">
|
|
<!-- TODO: Give slider left value based on alignment (0-100), new characters start with 50 -->
|
|
<div class="rounded border-2 border-solid border-white h-10 w-2 absolute top-1/2 -translate-y-1/2 -translate-x-1/2" :style="{ left: gameStore.character?.alignment + '%' }"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="absolute -left-5 -bottom-5 w-[calc(100%_+_40px)] my-px h-px bg-cyan-200"></div>
|
|
</div>
|
|
<div class="m-4">
|
|
<h4 class="font-medium text-lg max-w-[375px]">Character stats</h4>
|
|
<div class="flex gap-3 mt-4 flex-wrap max-w-[375px]">
|
|
<ul class="p-0 m-0 list-none">
|
|
<li class="leading-6">Health:</li>
|
|
<li class="leading-6">Defense:</li>
|
|
<li class="leading-6">More stats:</li>
|
|
<li class="leading-6">Extra stats:</li>
|
|
</ul>
|
|
<ul class="p-0 m-0 list-none text-right">
|
|
<li class="leading-6">100 <span class="text-green">(+15)</span></li>
|
|
<li class="leading-6">1000 <span class="text-green">(+500)</span></li>
|
|
<li class="leading-6"></li>
|
|
<li class="leading-6"></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { useGameStore } from '@/stores/game'
|
|
|
|
const gameStore = useGameStore()
|
|
</script>
|