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

Compare commits

base: rust:2efed539fb0b56230a78f8f6fe9987fcc4de844f
Branches Tags
rust:master rust:keep_track_of_all_loot rust:refactor_user_action_as_trait
...
compare: rust:3deda52df4dc43095b06c8f80ba22e547deb1477
Branches Tags
rust:keep_track_of_all_loot rust:master rust:refactor_user_action_as_trait

2 Commits
2efed539fb ... 3deda52df4

Author SHA1 Message Date
Artus
3deda52df4 working on sell UX 2019-06-13 16:06:19 +02:00
Artus
6843fc92cf improves updateWealth error handling 2019-06-13 16:06:00 +02:00
2 changed files with 75 additions and 44 deletions
Expand all files Collapse all files

60
lootalot_front/src/components/Chest.vue
View File

@@ -1,19 +1,21 @@
<template>
<div class="container">
<p class="notification is-paddingless is-info" v-show="canAdd">Peut ajouter</p>
<p class="notification is-paddingless is-warning" v-show="canSell">Peut vendre</p>
<p class="notification is-paddingless is-primary" v-show="canGrab">Peut prendre</p>
<table class="table is-fullwidth is-striped" >
<thead>
<tr>
<th>Objets de {{ player }}</th>
<th width="100%" >Objets de {{ player }}</th>
<th v-if="canGrab"></th>
<th v-if="canSell">
<button class="button is-warning is-medium">
<button class="button"
:class="is_selling ? 'is-danger' : 'is-warning'"
@click="is_selling = !is_selling"
>
<span class="icon">
<i class="fas fa-coins"></i>
</span>
<small>Vendre</small>
<p v-if="!is_selling">Vendre</p>
<p v-else>{{ totalSellValue }}</p>
</button>
</th>
</tr>
@@ -21,17 +23,21 @@
<tbody>
<template v-for="(item, idx) in content">
<tr :key="`row-${idx}`">
<td>{{item.name}}</td>
<td v-if="canGrab">
<button class="button is-primary is-medium" disabled>
<span class="icon">
<i class="fas fa-praying-hands"></i>
</span>
<small>Request pending...</small>
</button>
</td>
<td v-if="canSell">
</td>
<td>{{item.name}}</td>
<td v-if="canGrab">
<button class="button is-primary" disabled>
<span class="icon">
<i class="fas fa-praying-hands"></i>
</span>
<small>Request pending...</small>
</button>
</td>
<td v-if="canSell">
<label class="checkbox">
<input type="checkbox">
{{item.sell_value}}
</label>
</td>
</tr>
</template>
</tbody>
@@ -47,6 +53,11 @@
TO TEST :
- Possible interactions depends on player_id and current chest
- Objects are displayed as a table
Sell workflow :
1. Click sell (sell becomes danger)
2. Check objects to sell (sell button displays total value)
3. Click sell to confirm
*/
export default {
props: {
@@ -60,9 +71,13 @@
return {
app_state: store.state,
content: [
{id: 10, name: "Épée longue +2 acérée"},
{id: 5, name: "Ceinture de force +6"},
{id: 10, name: "Épée longue +2 acérée",
sell_value: 15000 },
{id: 5, name: "Ceinture de force +6",
sell_value: 80000 },
],
is_selling: false,
sell_selected: [],
};
},
computed: {
@@ -70,6 +85,15 @@
canSell () {
return this.player == this.app_state.player_id;
},
totalSellValue () {
const selected = this.sell_selected;
var value = this.content
.filter(item => selected.includes(item.id))
.map(item => item.sell_value)
.reduce((total,value) => total + value, 0);
return value;
},
// Can the user grab items from this chest ?
canGrab () {
return (this.app_state.player_id != 0 // User is not the group

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

@@ -1,5 +1,5 @@
<template>
<div>
<div class="box is-primary">
<span class="icon is-large">
<i class="fas fa-2x fa-piggy-bank"></i>
</span>
@@ -21,34 +21,33 @@
<p class="is-size-3">{{ wealth[3] }}</p>
</div>
</nav>
<nav v-show="edit" class="columns is-mobile">
<div class="column">
<input type="number" class="input" v-show="edit" v-model="edit_values[0]"></input>
</div>
<div class="column">
<input type="number" class="input" v-show="edit" v-model="edit_values[1]"></input>
</div>
<div class="column">
<input type="number" class="input" v-show="edit" v-model="edit_values[2]"></input>
</div>
<div class="column">
<input type="number" class="input" v-show="edit" v-model="edit_values[3]"></input>
<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">
<input type="text" size="6" class="input"
:key="inputs_key"
:class="{'is-danger': form_errors[i - 1]}"
v-model.number="edit_values[i - 1]">
</input>
</div>
</template>
</nav>
<nav v-show="edit" class="columns is-mobile">
<div class="column is-3 is-offset-3">
<button class="button is-fullwidth is-danger"
<nav class="columns is-mobile">
<div class="column is-4 is-offset-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-3">
<button class="button is-primary is-fullwidth"
<div class="column is-4">
<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>
</div>
</template>
@@ -58,20 +57,28 @@
data () {
return {
edit_values: [0,0,0,0],
form_errors: [false,false,false,false],
inputs_key: 0, // Hack to re-render inputs
};
},
methods: {
updateWealth (op) {
const values = this.edit_values.map(Number);
console.log('updateWealth', op, values);
let success;
if (true) {
success = true;
}
const values = this.edit_values;
this.form_errors.fill(false); // Reset error status
values.forEach((v,i) => {
if (isNaN(v)) {
console.log("error with value", v);
this.form_errors[i] = true;
};
});
const success = !this.form_errors.includes(true);
if (success) {
console.log('updated', op, values);
this.$emit('updated');
this.edit_values.fill(0)
this.edit_values.fill(0) }
else {
console.log(this.form_errors);
this.inputs_key += 1;
}
}
}