imshvc/noxious_client
1
0
Fork 0
forked from noxious/client
Code Pull Requests Activity

Refractor socket store into game store

Browse Source
This commit is contained in:
Dennis Postma
2024-07-12 11:58:06 +02:00
parent 6a1b2dd107
commit 79bef033f3
22 changed files with 161 additions and 170 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/gui/Hud.vue
View File

@ -7,16 +7,16 @@
<div class="absolute top-0 left-[30px] w-[280px] h-[84px] z-10 bg-[url('/assets/shapes/hud-shape-empty.svg')] bg-center bg-[length:cover] bg-no-repeat">
<div class="h-[64px] flex flex-col items-end py-[10px] pl-[50px] pr-[20px]">
<div class="w-full flex items-center justify-between mb-1.5">
<span class="text-ellipsis overflow-hidden whitespace-nowrap max-w-[125px] text-sm">{{ socket.character.name }}</span>
<span class="text-sm">lvl. {{ socket.character.level }}</span>
<span class="text-ellipsis overflow-hidden whitespace-nowrap max-w-[125px] text-sm">{{ game.character.name }}</span>
<span class="text-sm">lvl. {{ game.character.level }}</span>
</div>
<div class="w-full flex items-center justify-between">
<label class="text-sm" for="hp">HP</label>
<progress class="h-2 rounded-lg w-full max-w-[175px] appearance-none accent-red" id="hp" :value="socket.character.hitpoints" max="100">{{ socket.character.hitpoints }}%</progress>
<progress class="h-2 rounded-lg w-full max-w-[175px] appearance-none accent-red" id="hp" :value="game.character.hitpoints" max="100">{{ socket.character.hitpoints }}%</progress>
</div>
<div class="w-full flex items-center justify-between">
<label class="text-sm" for="mp">MP</label>
<progress class="h-2 rounded-lg w-full max-w-[175px] appearance-none accent-blue" id="mp" :value="socket.character.mana" max="100">{{ socket.character.mana }}%</progress>
<progress class="h-2 rounded-lg w-full max-w-[175px] appearance-none accent-blue" id="mp" :value="game.character.mana" max="100">{{ socket.character.mana }}%</progress>
</div>
</div>
</div>
@ -31,12 +31,12 @@
<div class="absolute top-0 right-[30px] w-[280px] h-[84px] z-10 scale-x-[-1] bg-[url('/assets/shapes/hud-shape-empty.svg')] bg-center bg-[length:cover] bg-no-repeat">
<div class="h-[64px] flex flex-col items-end scale-x-[-1] py-[10px] pr-[50px] pl-[20px]">
<div class="w-full flex items-center justify-between mb-1.5">
<span class="text-ellipsis overflow-hidden whitespace-nowrap max-w-[125px] text-sm">{{ socket.character.name }}</span>
<span class="text-ellipsis overflow-hidden whitespace-nowrap max-w-[125px] text-sm">{{ game.character.name }}</span>
<span class="text-sm">lvl. {{ socket.character.level }}</span>
</div>
<div class="w-full flex items-center justify-between">
<label class="text-sm" for="hp">HP</label>
<progress class="h-2 rounded-lg w-full max-w-[175px] appearance-none accent-red" id="hp" :value="socket.character.hitpoints" max="100">{{ socket.character.hitpoints }}%</progress>
<progress class="h-2 rounded-lg w-full max-w-[175px] appearance-none accent-red" id="hp" :value="game.character.hitpoints" max="100">{{ socket.character.hitpoints }}%</progress>
</div>
</div>
</div>
@ -44,9 +44,9 @@
</template>
<script setup lang="ts">
import { useSocketStore } from '@/stores/socket'
import { useGameStore } from '@/stores/game'
const socket = useSocketStore()
const gameStore = useGameStore()
</script>
<style scoped lang="scss">