Pruned unused components
This commit is contained in:
Thaum Rystra
@@ -1,37 +0,0 @@
|
||||
<template lang="html">
|
||||
<v-list
|
||||
v-if="effects && effects.length"
|
||||
two-line
|
||||
>
|
||||
<effect-list-tile
|
||||
v-for="effect in sortedEffects"
|
||||
:key="effect._id"
|
||||
:show-stat-name="showStatName"
|
||||
:model="effect"
|
||||
v-on="$listeners.click ? { click(e){$emit('click', e)} } : {}"
|
||||
/>
|
||||
</v-list>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import EffectListTile from '/imports/ui/properties/components/effects/EffectListTile.vue';
|
||||
import sortEffects from '/imports/ui/utility/sortEffects.js';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
EffectListTile,
|
||||
},
|
||||
props: {
|
||||
effects: Array,
|
||||
showStatName: Boolean,
|
||||
},
|
||||
computed: {
|
||||
sortedEffects(){
|
||||
return sortEffects(this.effects);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="css" scoped>
|
||||
</style>
|
||||
@@ -1,104 +0,0 @@
|
||||
<template lang="html">
|
||||
<effect-edit-expansion-list
|
||||
:effects="effects"
|
||||
:stats="stats"
|
||||
@change="change"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import EffectEditExpansionList from '/imports/ui/properties/components/effects/EffectEditExpansionList.vue';
|
||||
export default {
|
||||
data(){ return {
|
||||
effects: [
|
||||
{
|
||||
name: "Ghost Touch",
|
||||
stat: 'Strength',
|
||||
operation: "add",
|
||||
result: -2,
|
||||
calculation: '-2',
|
||||
enabled: true,
|
||||
_id: Random.id(),
|
||||
},{
|
||||
name: "Some Base",
|
||||
stat: 'Strength',
|
||||
operation: "base",
|
||||
result: 15,
|
||||
calculation: '15',
|
||||
enabled: true,
|
||||
_id: Random.id(),
|
||||
},{
|
||||
name: "Some Multiply",
|
||||
stat: 'Strength',
|
||||
operation: "mul",
|
||||
result: 1.5,
|
||||
calculation: '1.5',
|
||||
enabled: true,
|
||||
_id: Random.id(),
|
||||
},{
|
||||
name: "Some Min",
|
||||
stat: 'Strength',
|
||||
operation: "min",
|
||||
result: 8,
|
||||
calculation: '8',
|
||||
enabled: true,
|
||||
_id: Random.id(),
|
||||
},{
|
||||
name: "Some Advantage",
|
||||
stat: 'Strength',
|
||||
operation: "advantage",
|
||||
result: 1,
|
||||
calculation: '1',
|
||||
enabled: true,
|
||||
_id: Random.id(),
|
||||
},{
|
||||
name: "Some Disadvantage",
|
||||
stat: 'Strength',
|
||||
operation: "disadvantage",
|
||||
result: 1,
|
||||
calculation: '1',
|
||||
enabled: true,
|
||||
_id: Random.id(),
|
||||
},{
|
||||
name: "Some Passive",
|
||||
stat: 'Strength',
|
||||
operation: "passiveAdd",
|
||||
result: -2,
|
||||
calculation: '-2',
|
||||
calculation: "3-5",
|
||||
_id: Random.id(),
|
||||
},{
|
||||
name: "Some Conditional",
|
||||
stat: 'Strength',
|
||||
operation: "conditional",
|
||||
calculation: "+8 Only when asleep",
|
||||
result: "+8 Only when asleep",
|
||||
enabled: true,
|
||||
_id: Random.id(),
|
||||
},
|
||||
],
|
||||
stats: ["Strength", "Dexterity", "Constitution", "Speed"].map( a => ({
|
||||
name: a,
|
||||
variableName: a,
|
||||
})),
|
||||
}},
|
||||
components: {
|
||||
EffectEditExpansionList,
|
||||
},
|
||||
methods: {
|
||||
change({set, ack, effectId, index}){
|
||||
console.log({set, ack, effectId, index});
|
||||
for (let key in set){
|
||||
this.effects[index][key] = set[key];
|
||||
if (key === 'calculation'){
|
||||
this.effects[index].result = set[key]
|
||||
}
|
||||
ack();
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="css" scoped>
|
||||
</style>
|
||||
@@ -1,54 +0,0 @@
|
||||
<template lang="html">
|
||||
<v-expansion-panel
|
||||
v-model="expanded"
|
||||
class="effect-edit-expansion-list"
|
||||
>
|
||||
<v-expansion-panel-content
|
||||
v-for="(effect, index) in effects"
|
||||
:key="effect._id"
|
||||
lazy
|
||||
>
|
||||
<effect-list-tile
|
||||
slot="header"
|
||||
class="effect-list-tile"
|
||||
:class="{'primary--text': expanded === index}"
|
||||
:model="effect"
|
||||
/>
|
||||
<effect-form
|
||||
:effect="effect"
|
||||
:stats="stats"
|
||||
@change="({set, ack}) => $emit('change', {set, ack, effectId: effect._id, index})"
|
||||
/>
|
||||
</v-expansion-panel-content>
|
||||
</v-expansion-panel>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import EffectForm from '/imports/ui/properties/forms/EffectForm.vue';
|
||||
import EffectListTile from '/imports/ui/properties/components/effects/EffectListTile.vue';
|
||||
export default {
|
||||
components: {
|
||||
EffectForm,
|
||||
EffectListTile,
|
||||
},
|
||||
props: {
|
||||
effects: Array,
|
||||
stats: Array,
|
||||
},
|
||||
data(){ return {
|
||||
expanded: null,
|
||||
}},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="css" scoped>
|
||||
.effect-edit-expansion-list >>> .v-expansion-panel__header {
|
||||
padding-left: 0;
|
||||
padding-right: 8px;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
.effect-list-tile {
|
||||
width: calc(100% - 26px);
|
||||
}
|
||||
</style>
|
||||
@@ -1,122 +0,0 @@
|
||||
<template lang="html">
|
||||
<v-list-tile
|
||||
class="effect-list-tile"
|
||||
:class="{disabled: !enabled}"
|
||||
:data-id="_id"
|
||||
v-on="$listeners.click ? { click(e){
|
||||
$emit('click', $props)
|
||||
} } : {}"
|
||||
>
|
||||
<v-list-tile-avatar>
|
||||
<v-icon class="icon">
|
||||
{{ getEffectIcon(model.operation, model.result) }}
|
||||
</v-icon>
|
||||
</v-list-tile-avatar>
|
||||
<v-list-tile-action>
|
||||
<div
|
||||
v-if="showValue(model.operation)"
|
||||
class="value display-1 pr-2"
|
||||
>
|
||||
{{ getValue(model.operation, model.result) }}
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
class="calculation body-2 pr-2"
|
||||
>
|
||||
{{ model.operation === 'conditional' ? model.calculation : '' }}
|
||||
</div>
|
||||
</v-list-tile-action>
|
||||
<v-list-tile-content>
|
||||
<v-list-tile-title
|
||||
v-if="showStatName"
|
||||
class="stat"
|
||||
>
|
||||
{{ model.statName }}
|
||||
</v-list-tile-title>
|
||||
<v-list-tile-title
|
||||
v-else
|
||||
class="name"
|
||||
>
|
||||
{{ model.name }}
|
||||
</v-list-tile-title>
|
||||
<v-list-tile-sub-title class="operation">
|
||||
{{ getOperation(model.operation) }}
|
||||
</v-list-tile-sub-title>
|
||||
</v-list-tile-content>
|
||||
</v-list-tile>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import getEffectIcon from '/imports/ui/utility/getEffectIcon.js';
|
||||
export default {
|
||||
props: {
|
||||
enabled: Boolean,
|
||||
showStatName: Boolean,
|
||||
model: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
getEffectIcon,
|
||||
getOperation(op){
|
||||
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;
|
||||
}
|
||||
.icon {
|
||||
color: inherit !important;
|
||||
}
|
||||
.net-effect {
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.value, .calculation {
|
||||
min-width: 80px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user