94 lines
1.8 KiB
Vue
94 lines
1.8 KiB
Vue
<template lang="html">
|
|
<v-list-tile class="hit-dice-list-tile white" :class="{hover}">
|
|
|
|
<v-list-tile-action class="mr-4">
|
|
|
|
<v-layout row align-center class="left">
|
|
<v-layout column class="buttons" justify-center>
|
|
<v-btn icon flat :disabled="value >= maxValue" @click="increment(1)">
|
|
<v-icon>arrow_drop_up</v-icon>
|
|
</v-btn>
|
|
<v-btn icon flat :disabled="value <= 0" @click="increment(-1)">
|
|
<v-icon>arrow_drop_down</v-icon>
|
|
</v-btn>
|
|
</v-layout>
|
|
|
|
<v-layout row align-end>
|
|
<div class="display-1">
|
|
{{value}}
|
|
</div>
|
|
<div class="title max-value ml-2">
|
|
/{{maxValue}}
|
|
</div>
|
|
</v-layout>
|
|
</v-layout>
|
|
|
|
</v-list-tile-action>
|
|
|
|
<v-list-tile-content
|
|
class="content"
|
|
@click="click"
|
|
@mouseover="hover = true"
|
|
@mouseleave="hover = false"
|
|
>
|
|
<v-list-tile-title>
|
|
d{{dice}} {{signed(conMod)}}
|
|
</v-list-tile-title>
|
|
</v-list-tile-content>
|
|
|
|
</v-list-tile>
|
|
</template>
|
|
|
|
<script>
|
|
import numberToSignedString from '/imports/ui/utility/numberToSignedString.js';
|
|
export default {
|
|
data(){ return{
|
|
hover: false,
|
|
}},
|
|
props: {
|
|
dice: Number,
|
|
value: Number,
|
|
maxValue: Number,
|
|
conMod: Number,
|
|
},
|
|
methods: {
|
|
signed: numberToSignedString,
|
|
click(e){
|
|
this.$emit('click', e);
|
|
},
|
|
increment(value){
|
|
this.$emit('change', {type: 'increment', value})
|
|
},
|
|
},
|
|
computed: {
|
|
hasClickListener(){
|
|
return this.$listeners && this.$listeners.click
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="css" scoped>
|
|
.hit-dice-list-tile >>> .v-list__tile {
|
|
height: 88px;
|
|
}
|
|
.left {
|
|
height: 100%;
|
|
}
|
|
.buttons {
|
|
height: 100%;
|
|
}
|
|
.buttons > .v-btn {
|
|
margin: -2px;
|
|
}
|
|
.hit-dice-list-tile.hover {
|
|
background: rgba(0,0,0,.04);
|
|
}
|
|
.content {
|
|
cursor: pointer;
|
|
}
|
|
.max-value {
|
|
color: rgba(0,0,0,.54);
|
|
}
|
|
</style>
|