61 lines
1.0 KiB
Vue
61 lines
1.0 KiB
Vue
<template lang="html">
|
|
<div class="pa-1" style="background: inherit;">
|
|
<health-bar
|
|
:value="value"
|
|
:max-value="maxValue"
|
|
name="Hit Points"
|
|
@change="healthBarChanged"
|
|
/>
|
|
<health-bar
|
|
:value="50"
|
|
:max-value="100"
|
|
name="Temporary Hit Points"
|
|
/>
|
|
<health-bar
|
|
:value="70"
|
|
:max-value="100"
|
|
name="Some other bar"
|
|
@change="healthBarChanged"
|
|
/>
|
|
<health-bar
|
|
:value="90"
|
|
:max-value="100"
|
|
name="Cow"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import HealthBar from '/imports/ui/components/HealthBar.vue';
|
|
export default {
|
|
data(){return{
|
|
value: 100,
|
|
maxValue: 100,
|
|
}},
|
|
components: {
|
|
HealthBar,
|
|
},
|
|
methods: {
|
|
healthBarChanged(e){
|
|
let val = e.value;
|
|
// Apply the change
|
|
if (e.type === 'set'){
|
|
this.value = val;
|
|
} else if (e.type === 'increment') {
|
|
this.value += val;
|
|
}
|
|
// Clamp the value
|
|
if (this.value < 0){
|
|
this.value = 0;
|
|
}
|
|
if (this.value > this.maxValue){
|
|
this.value = this.maxValue;
|
|
}
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="css" scoped>
|
|
</style>
|