noxious/client
3
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
Show Stats 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>
<div class="flex flex-col gap-4"> <div class="flex flex-col gap-4">
<div class="flex flex-col gap-3 mx-5 mt-2"> <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]"> <div class="flex gap-4 flex-wrap max-w-[375px]">
<ul class="p-0 m-0 list-none"> <ul class="p-0 m-0 list-none">
<li class="leading-6 text-lg">Class:</li> <li class="leading-6 text-lg">Class:</li>
<li class="leading-6 text-lg">Health Points:</li> <li class="leading-6 text-lg">Race:</li>
<li class="leading-6 text-lg">Magic Points:</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">Level:</li>
<li class="leading-6 text-lg">Stat Points:</li> <li class="leading-6 text-lg">Stat Points:</li>
</ul> </ul>
<ul class="p-0 m-0 list-none"> <ul class="p-0 m-0 list-none">
<li class="leading-6 text-lg">Knight</li> <li class="leading-6 text-lg min-h-6">Knight</li>
<li class="leading-6 text-lg">100 <span class="text-green">(+15)</span></li> <li class="leading-6 text-lg min-h-6">{{ gameStore.character?.characterType?.race }}</li>
<li class="leading-6 text-lg">100</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">69</li> <li class="leading-6 text-lg min-h-6">{{ gameStore.character?.mana }}</li>
<li class="leading-6 text-lg">3</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> </ul>
</div> </div>
</div> </div>
<div class="flex flex-col gap-3 mx-5 mt-2"> <div class="flex flex-col gap-3 mx-5 mt-2">
<h3>Alignment</h3> <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> </div>
</div> </div>
@ -56,4 +59,11 @@
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script setup lang="ts">
import { useGameStore } from '@/stores/game'
const gameStore = useGameStore()
</script>

13
src/components/gui/partials/Equipment.vue
View File

@ -5,9 +5,9 @@
<div class="flex justify-center items-center flex-wrap gap-20"> <div class="flex justify-center items-center flex-wrap gap-20">
<div class="flex gap-3 mt-2 flex-wrap max-w-[375px]"> <div class="flex gap-3 mt-2 flex-wrap max-w-[375px]">
<div class="h-full flex flex-col justify-center items-center"> <div class="h-full flex flex-col justify-center items-center">
<h3>Ethereal</h3> <h3>{{ gameStore.character?.name }}</h3>
<img class="h-60 my-2 mx-auto" src="/assets/placeholders/inventory_player.png" /> <img class="h-60 my-2 mx-auto" src="/assets/placeholders/inventory_player.png" />
<span class="block text-sm">Level 69</span> <span class="block text-sm">Level {{ gameStore.character?.level }}</span>
</div> </div>
</div> </div>
<div class="flex flex-col gap-3 mx-5 mt-2"> <div class="flex flex-col gap-3 mx-5 mt-2">
@ -80,4 +80,11 @@
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script setup lang="ts">
import { useGameStore } from '@/stores/game'
const gameStore = useGameStore()
</script>

11
src/components/gui/partials/settings/CharacterSettings.vue
View File

@ -6,11 +6,15 @@
<form class="flex gap-2.5 flex-wrap"> <form class="flex gap-2.5 flex-wrap">
<div class="form-field-half max-w-[300px]"> <div class="form-field-half max-w-[300px]">
<label for="name">Name</label> <label for="name">Name</label>
<input class="input-cyan" :class="{'inactive': !editCharacter}" type="text" name="name" placeholder="Ethereal" disabled /> <input class="input-cyan" :class="{'inactive': !editCharacter}" type="text" name="name" placeholder="Ethereal" :disabled="!editCharacter" />
</div> </div>
<div class="form-field-half max-w-[300px]"> <div class="form-field-half max-w-[300px] relative">
<label for="class">Class</label> <label for="class">Class</label>
<input class="input-cyan" :class="{'inactive': !editCharacter}" type="text" name="class" placeholder="Knight" disabled /> <select class="input-cyan" v-model="characterClass" :class="{'inactive': !editCharacter}" name="class" :disabled="!editCharacter">
<option value="Knight" :selected="characterClass == 'Knight'" :disabled="characterClass == 'Knight'">Knight</option>
<option value="Paladin" :selected="characterClass == 'Paladin'" :disabled="characterClass == 'Paladin'">Paladin</option>
</select>
<span v-if="!editCharacter" class="absolute bottom-[9px] left-[14px] text-sm text-gray-300/50">{{characterClass}}</span>
</div> </div>
<button v-if="editCharacter" @click="toggle" class="btn-cyan px-4 py-1.5 min-w-24" type="submit">Save</button> <button v-if="editCharacter" @click="toggle" class="btn-cyan px-4 py-1.5 min-w-24" type="submit">Save</button>
</form> </form>
@ -22,6 +26,7 @@
import { ref } from 'vue' import { ref } from 'vue'
const editCharacter = ref(false) const editCharacter = ref(false)
const characterClass = ref('')
const toggle = () => { const toggle = () => {
editCharacter.value = !editCharacter.value editCharacter.value = !editCharacter.value