noxious/client
6
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Replaced character placeholder values in userpanel, more work on settings

Browse Source
This commit is contained in:
Colin Kallemein
2024-08-31 19:07:25 +02:00
parent f8f367fb6e
commit e87c23111e
3 changed files with 39 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
src/components/gui/partials/CharacterScreen.vue
View File

@ -10,28 +10,31 @@
</div>
<div class="flex flex-col gap-4">
<div class="flex flex-col gap-3 mx-5 mt-2">
<h3>Ethereal</h3>
<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">Health Points:</li>
<li class="leading-6 text-lg">Magic Points:</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">Knight</li>
<li class="leading-6 text-lg">100 <span class="text-green">(+15)</span></li>
<li class="leading-6 text-lg">100</li>
<li class="leading-6 text-lg">69</li>
<li class="leading-6 text-lg">3</li>
<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-10 w-64 rounded border border-solid border-white bg-gradient-to-r from-red to-blue">
<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"></div>
</div>
</div>
</div>
@ -56,4 +59,11 @@
</div>
</div>
</div>
</template>
</template>
<script setup lang="ts">
import { useGameStore } from '@/stores/game'
const gameStore = useGameStore()
</script>