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

NQ-56 center player name + extra styling healthbar

Browse Source
This commit is contained in:
Colin Kallemein 2024-06-08 13:41:29 +02:00
parent 7428521fb2
commit 5ba2547c6e
2 changed files with 30 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/assets/scss/_variables.scss
View File

@ -10,5 +10,4 @@ $gray: #7f7f7f;
$gray-2: #696969; $gray-2: #696969;
$dark-gray: #454545; $dark-gray: #454545;
$light-gray: #b1b2b5; $light-gray: #b1b2b5;
$turqoise: #42B883; $green: #09ad19;
$cyan: #213547;

39
src/components/sprites/Character.vue
View File

@ -1,25 +1,44 @@
<template> <template>
<Container> <Container>
<!-- @TODO : Text position X must be calculated based on the character name length --> <Rectangle
:x="props.character?.position_x"
:y="props.character?.position_y"
:origin-x="0.5"
:origin-y="12"
:fillColor="0xFFFFFF"
:width="74"
:height="8"
>
<Rectangle
:x="props.character?.position_x"
:y="props.character?.position_y"
:origin-x="0.5"
:origin-y="23.5"
:fillColor="0x09ad19"
:width="70"
:height="4"
/>
</Rectangle>
<Text <Text
:text="props.character?.name" :text="props.character?.name"
:x="props.character.position_x - 40" :x="props.character?.position_x"
:y="props.character.position_y - 80" :y="props.character?.position_y"
:origin-x="0.5"
:origin-y="3.5"
:style="{ :style="{
fontFamily: 'Helvetica, Arial', fontFamily: 'Helvetica, Arial',
color: '#42B883', color: '#FFF',
fontSize: '1.25rem', fontSize: '1rem',
fontStyle: 'bold', strokeThickness: 4,
strokeThickness: 8, stroke: 'red'
stroke: '#213547'
}" }"
/> />
<Sprite ref="sprite" :x="props.character.position_x" :y="props.character.position_y" play="walk" /> <Sprite ref="sprite" :x="props.character?.position_x" :y="props.character?.position_y" play="walk" />
</Container> </Container>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { Container, Sprite, Text, useScene } from 'phavuer' import { Container, Rectangle, Sprite, Text, useScene } from 'phavuer'
import { onBeforeMount, onMounted, reactive, type Ref, ref, watch } from 'vue' import { onBeforeMount, onMounted, reactive, type Ref, ref, watch } from 'vue'
import config from '@/config' import config from '@/config'
import { useSocketStore } from '@/stores/socket' import { useSocketStore } from '@/stores/socket'