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

Changed global styling so its readable

Browse Source 
Placeholder changes before new design is implemented
This commit is contained in:
Colin Kallemein
2024-10-12 21:32:41 +02:00
parent 4293ec63b6
commit 474de8b14a
19 changed files with 47 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,21 +1,21 @@
<template>
<div class="hud-wrapper relative left-0 w-[310px] h-[84px]">
<div class="absolute w-14 h-14 bg-white/80 rounded-full border-3 border-solid border-white top-1/2 -translate-y-1/2 left-0 z-20">
<div class="absolute w-14 h-14 bg-gray rounded-full border-3 border-solid border-gray-500 top-1/2 -translate-y-1/2 left-0 z-20">
<img class="w-7 absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2" draggable="false" src="/assets/avatar/default/head.png" />
</div>
<div class="hud-bg absolute top-0 left-8 w-[280px] h-[84px] z-10 bg-[url('/assets/bg-hud-2.png')] bg-top bg-[length:cover] bg-no-repeat mask-[url('/assets/shapes/hud-image-shape.svg')] mask-center mask-[length:cover] mask-no-repeat"></div>
<div class="absolute top-0 left-8 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-16 flex flex-col items-end py-2.5 pl-12 pr-5">
<div class="w-full flex items-center justify-between mb-1.5">
<span class="text-ellipsis overflow-hidden whitespace-nowrap max-w-32 text-sm">{{ gameStore.character.name }}</span>
<span class="text-sm">lvl. {{ gameStore.character.level }}</span>
<span class="text-ellipsis overflow-hidden whitespace-nowrap max-w-32 text-sm text-white">{{ gameStore.character.name }}</span>
<span class="text-sm text-white">lvl. {{ gameStore.character.level }}</span>
</div>
<div class="w-full flex items-center justify-between">
<label class="text-sm" for="hp">HP</label>
<label class="text-sm text-white" for="hp">HP</label>
<progress class="h-2 rounded-lg w-full max-w-44 appearance-none accent-red" id="hp" :value="gameStore.character.hitpoints" max="100">{{ gameStore.character.hitpoints }}%</progress>
</div>
<div class="w-full flex items-center justify-between">
<label class="text-sm" for="mp">MP</label>
<label class="text-sm text-white" for="mp">MP</label>
<progress class="h-2 rounded-lg w-full max-w-44 appearance-none accent-blue" id="mp" :value="gameStore.character.mana" max="100">{{ gameStore.character.mana }}%</progress>
</div>
</div>