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

UI fixes, adds blanket impls of buy/sell signals

Browse Source
This commit is contained in:
Arthur Gerbaud
2019-08-01 21:57:47 +02:00
parent f1d088596d
commit e56c8df121
6 changed files with 70 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
lootalot_front/src/App.vue
View File

@@ -37,7 +37,7 @@
v-show="!playerIsGroup">
<a @click="switchView('player')">Mon coffre</a></li>
<li :class="{'is-active': activeView == 'adding' }">
<a @click="switchView('adding')">
<a class="has-text-grey-light" @click="switchView('adding')">
+ {{ playerIsGroup ? 'Nouveau Loot' : 'Acheter' }}
</a>
</li>
@@ -49,7 +49,8 @@
<h2 v-show="playerIsGroup">ItemInput</h2>
<Chest
:items="playerIsGroup ? [] : shopInventory"
:perms="playerIsGroup ? {} : { canBuy: true }">
:perms="playerIsGroup ? {} : { canBuy: true }"
@buy="(data) => { switchView('player'); actions.buyItems(data); }">
</Chest>
</template>
<Chest v-else
@@ -58,6 +59,7 @@
canGrab: !(showPlayerChest || playerIsGroup),
canSell: showPlayerChest || playerIsGroup
}"
@sell="actions.sellItems"
@claim="actions.putClaim"
@unclaim="actions.withdrawClaim">
</Chest>

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

@@ -5,17 +5,20 @@
<th width="100%">Objets</th>
<th>Valeur</th>
<th>
<div v-show="perms.canSell" class="buttons" :class="{'has-addons': is_selling}">
<button class="button" :class="is_selling ? 'is-danger' : 'is-warning'"
@click="is_selling = !is_selling">
<div v-if="perms.canSell" class="buttons is-marginless" :class="{'has-addons': is_selling}">
<button class="button is-marginless" :class="is_selling ? 'is-danger' : 'is-warning'"
@click="sellSelectedItems">
<span class="icon"><i class="fas fa-coins"></i></span>
<p v-if="!is_selling">Vendre</p>
<p v-else>{{ totalSellValue ? totalSellValue : 'Annuler' }}</p>
<p v-else>{{ selected_items.length > 0 ? `${totalSelectedValue} po` : 'Annuler' }}</p>
</button>
<PercentInput v-show="is_selling"></PercentInput>
</div>
<div v-show="perms.canBuy">
<button class="button is-primary">Acheter</button>
<div v-else-if="perms.canBuy">
<button class="button is-danger is-fullwidth" @click="buySelectedItems">Acheter</button>
</div>
<div v-else-if="perms.canGrab">
<button class="button is-static is-fullwidth">Demander</button>
</div>
</th>
</tr>
@@ -26,18 +29,18 @@
<td><strong>{{item.name}}</strong></td>
<td>{{ item.base_price }}po</td>
<td>
<Request v-show="perms.canGrab"
<Request v-if="perms.canGrab"
:item="item.id"
@claim="(data) => $emit('claim', data)"
@unclaim="(data) => $emit('unclaim', data)">
</Request>
<div v-show="is_selling || perms.canBuy" class="field is-grouped">
<div v-else-if="showSelectors" class="buttons has-addons">
<label :for="`select-${idx}`" class="button is-marginless">
<input type="checkbox" class="checkbox"
id="`select-${idx}`"
:id="`select-${idx}`"
:value="item.id"
v-model="selected_items">
<label for="`select-${idx}`" class="label" style="padding: 0 1em;">
{{item.base_price / 2}} GP
&nbsp;{{is_selling ? item.base_price / 2 : item.base_price }}po
</label>
<PercentInput></PercentInput>
</div>
@@ -79,15 +82,39 @@
data () {
return {
is_selling: false,
is_adding: false,
selected_items: [],
};
},
methods: {
buySelectedItems () {
const items = this.items.filter(i => this.selected_items.includes(i.id));
this.$emit("buy", items);
this.selected_items.length = 0;
},
sellSelectedItems () {
if (!this.is_selling) {
this.is_selling = true;
} else {
this.is_selling = false;
if (this.selected_items.length > 0) {
const items = this.items.filter(i => this.selected_items.includes(i.id));
this.$emit("sell", items);
this.selected_items = [];
}
}
},
},
computed: {
totalSellValue () {
showSelectors () { return !this.perms.canGrab && (this.is_selling || this.perms.canBuy); },
totalSelectedValue () {
return this.items
.filter(item => this.selected_items.includes(item.id))
.map(item => item.base_price / 2)
.map(item => {
if (this.is_selling) {
return item.base_price / 2;
} else {
return item.base_price;
}})
.reduce((total,value) => total + value, 0);
},
},
@@ -97,4 +124,7 @@
<style scoped>
.table td, .table th { vertical-align: middle; }
.buttons { flex-wrap: nowrap; }
label.is-checkbox {
background-color: #eee;
}
</style>

2
lootalot_front/src/components/PercentInput.vue
View File

@@ -7,7 +7,7 @@
</span>
</div>
<div class="control">
<button class="button is-outlined" @click="is_opened = !is_opened">
<button class="button is-marginless" @click="is_opened = !is_opened">
<small v-if="!is_opened">Mod.</small>
<span v-else class="icon"><i class="fas fa-times-circle"></i></span>
</button>

8
lootalot_front/src/components/PlayerView.js
View File

@@ -21,6 +21,12 @@ export default {
.then(_ => { if (AppStorage.debug) this.notifications.push("Claim withdrawn")})
},
buyItems(items) {
this.notifications.push(`Would buy ${items.length} items`);
},
sellItems (items) {
this.notifications.push(`Would sell ${items.length} items`);
},
parseLoot (items) {
this.loot = [];
items.map(item => {
@@ -57,6 +63,8 @@ export default {
updateWealth: this.updateWealth,
putClaim: this.putClaim,
withdrawClaim: this.withdrawClaim,
buyItems: this.buyItems,
sellItems: this.sellItems,
}
})
}

4
lootalot_front/src/components/Request.vue
View File

@@ -73,3 +73,7 @@
},
}
</script>
<style scoped>
.buttons, .button { margin-bottom: 0; }
</style>

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

@@ -8,7 +8,14 @@
</div>
<template v-if="edit">
<div class="level-item">
<div class="field has-addons">
<p class="control">
<input class="input" type="number" step="0.01" v-model="edit_value"></input>
</p>
<p class="control">
<a class="button is-static">po</a>
</p>
</div>
</div>
<div class="level-item">
<button class="button is-danger" @click="updateWealth()">