forked from noxious/client
50 lines
1.1 KiB
Vue
50 lines
1.1 KiB
Vue
<template>
|
|
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { useGameStore } from '@/stores/gameStore'
|
|
|
|
const gameStore = useGameStore()
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.hud-wrapper {
|
|
.hud-bg {
|
|
mask: url('/assets/shapes/hud-image-shape.svg') center/cover no-repeat;
|
|
}
|
|
#hp {
|
|
// Chrome, Safari, Edge, Opera
|
|
&::-webkit-progress-value {
|
|
@apply bg-red rounded-lg;
|
|
}
|
|
&::-webkit-progress-bar {
|
|
@apply bg-white rounded-lg border-2 border-solid border-white;
|
|
}
|
|
// Firefox
|
|
&::-moz-progress-bar {
|
|
@apply bg-red rounded-lg border-2 border-solid border-white;
|
|
}
|
|
}
|
|
#mp {
|
|
// Chrome, Safari, Edge, Opera
|
|
&::-webkit-progress-value {
|
|
@apply bg-blue rounded-lg;
|
|
}
|
|
&::-webkit-progress-bar {
|
|
@apply bg-white rounded-lg border-2 border-solid border-white;
|
|
}
|
|
// Firefox
|
|
&::-moz-progress-bar {
|
|
@apply bg-blue rounded-lg border-2 border-solid border-white;
|
|
}
|
|
}
|
|
|
|
&.other-player {
|
|
.hud-bg {
|
|
mask: url('/assets/shapes/hud-image-shape-flipped.svg') center/cover no-repeat;
|
|
}
|
|
}
|
|
}
|
|
</style>
|