rust/lootalot
1
0
Fork 0
Code Issues 3 Pull Requests Releases Wiki Activity

going on, reactivity is not properly working

Browse Source
This commit is contained in:
Arthur Gerbaud
2019-07-04 16:02:05 +02:00
parent 503ebf7b6b
commit 5f0e6624e0
4 changed files with 107 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

102
lootalot_front/src/components/Wealth.vue
View File

@@ -1,82 +1,90 @@
<template>
<div class="box is-primary">
<span class="icon is-large">
<i class="fas fa-2x fa-piggy-bank"></i>
</span>
<div class="box is-shadowless">
<nav class="columns is-mobile is-multiline">
<div class="column">
<p class="heading">PC</p>
<p class="is-size-4">{{ wealth[0] }}</p>
</div>
<span class="icon is-large"
@click="edit = !edit">
<i class="fas fa-2x fa-piggy-bank"></i>
</span>
</div>
<div class="column">
<p class="heading">PA</p>
<p class="is-size-4">{{ wealth[1] }}</p>
</div>
<p class="heading">PP</p>
<p class="is-size-4">{{ wealth[3] }}</p>
</div>
<div class="column">
<p class="heading">PO</p>
<p class="is-size-4">{{ wealth[2] }}</p>
</div>
<p class="heading">PG</p>
<p class="is-size-4">{{ wealth[2] }}</p>
</div>
<div class="column">
<p class="heading">PP</p>
<p class="is-size-4">{{ wealth[3] }}</p>
</div>
</nav>
<p class="heading">PA</p>
<p class="is-size-4">{{ wealth[1] }}</p>
</div>
<div class="column">
<p class="heading">PC</p>
<p class="is-size-4">{{ wealth[0] }}</p>
</div>
</nav>
<div v-if="edit"> <!-- or v-show ? -->
<nav class="columns is-1 is-variable is-mobile">
<template v-for="i in 4">
<div :key="`input-col-${i}`" class="column">
<NumberInput v-model="edit_values[i - 1]"></NumberInput>
</div>
</template>
</nav>
<nav class="columns is-mobile">
<div class="column is-4 is-offset-2">
<div class="column">
<NumberInput v-model="edit_value"></NumberInput>
</div>
<div class="column is-2">
<button class="button is-outlined is-fullwidth is-danger"
@click="updateWealth('minus')">
<span class="icon"><i class="fas fa-2x fa-minus"></i></span>
</button>
</div>
<div class="column is-4">
</div>
<div class="column is-2">
<button class="button is-outlined is-primary is-fullwidth"
@click="updateWealth('plus')">
<span class="icon"><i class="fas fa-2x fa-plus"></i></span>
</button>
</div>
</nav>
</div>
</nav>
</div>
</div>
</template>
<script>
import { AppStorage } from '../AppStorage.js'
import NumberInput from './NumberInput.vue'
export default {
components: { NumberInput },
props: ["wealth", "edit"],
props: ["wealth"],
data () {
return {
edit_values: [0,0,0,0],
edit: false,
edit_value: 0,
};
},
methods: {
updateWealth (op) {
const values = this.edit_values;
// Is it optimal, considering NumberInput already validates numbers ?
// Check that all fields are valid numbers
const success = values
.map(v => !isNaN(v))
.reduce(
(t,v) => t && v,
true);
if (success) {
console.log('updated', op, values);
this.$emit('updated');
this.resetValues();
} else {
console.log('correct errors');
}
var goldValue;
switch (op) {
case 'plus':
goldValue = this.edit_value;
break;
case 'minus':
goldValue = -this.edit_value;
break;
default:
console.log("Error, bad operator !", op);
return;
}
AppStorage.updatePlayerWealth(goldValue)
.then(done => {
if (done) {
this.$emit('updated');
this.resetValues();
} else {
console.log('correct errors');
}
});
},
resetValues () {
this.edit_values.fill(0);
this.edit = false;
this.edit_value = 0;
}
}
}