jschaufuss/DiceCloud
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Abstracted effect list tile into its own component and made it dark mode compatible

Browse Source
This commit is contained in:
Stefan Zermatten
2019-02-15 12:03:57 +02:00
parent 96bb072dad
commit 1103248574
2 changed files with 118 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
app/imports/ui/components/AttributeEffectList.vue
View File

@@ -1,40 +1,15 @@
<template lang="html">
<v-list two-line v-if="this.effects && this.effects.length">
<v-list-tile
<effect-list-tile
v-for="effect in sortedEffects"
:class="{effect: true, disabled: !effect.enabled}"
:id="`${_uid}-${effect._id}`"
:key="effect._id"
v-on="$listeners.click ? { click(e){
$emit('click', {effect, elementId: `${_uid}-${effect._id}`})
} } : {}"
v-bind="effect"
v-on="$listeners.click ? { click(e){$emit('click', e)} } : {}"
>
<v-layout row align-center class="net-effect">
<v-icon class="black--text icon">
{{getEffectIcon(effect.operation, effect.result)}}
</v-icon>
<div class="value display-1 pr-2" v-if="showValue(effect.operation)">
{{getValue(effect.operation, effect.result)}}
</div>
<div class="calculation body-2 pr-2" v-else>
{{effect.calculation}}
</div>
</v-layout>
<v-list-tile-content>
<v-list-tile-title class="name">
{{effect.name}}
</v-list-tile-title>
<v-list-tile-sub-title class="operation">
{{getOperation(effect.operation)}}
</v-list-tile-sub-title>
</v-list-tile-content>
</v-list-tile>
</v-list>
</template>
<script>
import numberToSignedString from '/imports/ui/utility/numberToSignedString.js';
import getEffectIcon from '/imports/ui/utility/getEffectIcon.js';
import EffectListTile from '/imports/ui/components/EffectListTile.vue';
const SORT_INDEX = {
"base": 1,
"add": 2,
@@ -52,6 +27,9 @@
props: {
effects: Array,
},
components: {
EffectListTile,
},
computed: {
sortedEffects(){
if (!this.effects || !this.effects.length) return [];
@@ -60,67 +38,8 @@
);
}
},
watch: {
sortedEffects(newValue){
console.log(newValue);
}
},
methods: {
getEffectIcon,
getOperation(op, value){
switch(op) {
case 'base': return 'Base value';
case 'add': return 'Add';
case 'mul': return 'Multiply';
case 'min': return 'Minimum';
case 'max': return 'Maximum';
case 'advantage': return 'Advantage';
case 'disadvantage': return 'Disadvantage';
case 'passiveAdd': return 'Passive bonus';
case 'fail': return 'Always fail';
case 'conditional': return 'Conditional benefit' ;
}
},
showValue(op){
switch(op) {
case 'base': return true;
case 'add': return true;
case 'mul': return true;
case 'min': return true;
case 'max': return true;
case 'advantage': return false;
case 'disadvantage': return false;
case 'passiveAdd': return true;
case 'fail': return false;
case 'conditional': return false;
}
},
getValue(op, value){
switch(op) {
case 'base': return value;
case 'add': return Math.abs(value);
case 'mul': return value;
case 'min': return value;
case 'max': return value;
case 'advantage': return;
case 'disadvantage': return;
case 'passiveAdd': return Math.abs(value);
case 'fail': return;
case 'conditional': return;
}
}
},
};
</script>
<style lang="css" scoped>
.icon {
min-width: 30px;
}
.net-effect {
flex-grow: 0;
}
.value, .calculation {
min-width: 80px;
}
</style>

111
app/imports/ui/components/EffectListTile.vue Normal file
View File

@@ -0,0 +1,111 @@
<template lang="html">
<v-list-tile
class="effect-list-tile"
:class="{disabled: !enabled}"
:id="elementId"
:key="_id"
v-on="$listeners.click ? { click(e){
$emit('click', {$props, elementId})
} } : {}"
>
<v-layout row align-center class="net-effect">
<v-icon class="icon">
{{getEffectIcon(operation, result)}}
</v-icon>
<div class="value display-1 pr-2" v-if="showValue(operation)">
{{getValue(operation, result)}}
</div>
<div class="calculation body-2 pr-2" v-else>
{{calculation}}
</div>
</v-layout>
<v-list-tile-content>
<v-list-tile-title class="name">
{{name}}
</v-list-tile-title>
<v-list-tile-sub-title class="operation">
{{getOperation(operation)}}
</v-list-tile-sub-title>
</v-list-tile-content>
</v-list-tile>
</template>
<script>
import numberToSignedString from '/imports/ui/utility/numberToSignedString.js';
import getEffectIcon from '/imports/ui/utility/getEffectIcon.js';
export default {
props: {
_id: String,
enabled: Boolean,
operation: String,
result: [String, Number],
calculation: String,
name: String,
},
computed: {
elementId(){
return `${this._uid}-${this._id}`
},
},
methods: {
getEffectIcon,
getOperation(op, value){
switch(op) {
case 'base': return 'Base value';
case 'add': return 'Add';
case 'mul': return 'Multiply';
case 'min': return 'Minimum';
case 'max': return 'Maximum';
case 'advantage': return 'Advantage';
case 'disadvantage': return 'Disadvantage';
case 'passiveAdd': return 'Passive bonus';
case 'fail': return 'Always fail';
case 'conditional': return 'Conditional benefit' ;
}
},
showValue(op){
switch(op) {
case 'base': return true;
case 'add': return true;
case 'mul': return true;
case 'min': return true;
case 'max': return true;
case 'advantage': return false;
case 'disadvantage': return false;
case 'passiveAdd': return true;
case 'fail': return false;
case 'conditional': return false;
}
},
getValue(op, value){
switch(op) {
case 'base': return value;
case 'add': return Math.abs(value);
case 'mul': return value;
case 'min': return value;
case 'max': return value;
case 'advantage': return;
case 'disadvantage': return;
case 'passiveAdd': return Math.abs(value);
case 'fail': return;
case 'conditional': return;
}
}
},
};
</script>
<style lang="css" scoped>
.icon {
min-width: 30px;
}
.theme--light .icon {
color: black;
}
.net-effect {
flex-grow: 0;
}
.value, .calculation {
min-width: 80px;
}
</style>