76 lines
2.3 KiB
Vue
76 lines
2.3 KiB
Vue
<template>
|
|
<div class="buttons is-right" >
|
|
<template v-if="isInConflict">
|
|
<button class="button is-success"
|
|
@click="cancelRequest">
|
|
<span class="icon is-small">
|
|
<i class="fas fa-hand-peace"></i>
|
|
</span>
|
|
</button>
|
|
<button class="button is-danger"
|
|
@click="hardenRequest">
|
|
<span class="icon is-small">
|
|
<i class="fas fa-hand-middle-finger"></i>
|
|
</span>
|
|
</button>
|
|
</template>
|
|
<button class="button is-primary"
|
|
@click="putRequest"
|
|
:disabled="isRequested">
|
|
<span class="icon is-small">
|
|
<i class="fas fa-praying-hands"></i>
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { AppStorage } from '../AppStorage'
|
|
export default {
|
|
props: ["item"],
|
|
data () {
|
|
return AppStorage.state;
|
|
},
|
|
computed: {
|
|
// Check if item is requested by active player
|
|
isRequested () {
|
|
const reqs = this.player_claims[this.player_id];
|
|
return reqs.includes(this.item);
|
|
},
|
|
// Check if item is requested by multiple players including active one
|
|
isInConflict () {
|
|
const reqs = this.player_claims;
|
|
const playerId = this.player_id;
|
|
var reqByPlayer = false;
|
|
var reqByOther = false;
|
|
for (var key in reqs) {
|
|
const isReq = reqs[key].includes(this.item);
|
|
if (isReq) {
|
|
if (key == playerId) {
|
|
reqByPlayer = true;
|
|
} else {
|
|
reqByOther = true;
|
|
}
|
|
}
|
|
}
|
|
return reqByPlayer && reqByOther;
|
|
},
|
|
},
|
|
methods: {
|
|
// The active player claims the item
|
|
putRequest () {
|
|
this.$emit("claim", this.item);
|
|
},
|
|
// The active player withdraws his request
|
|
cancelRequest () {
|
|
this.$emit("unclaim", this.item);
|
|
},
|
|
// The active player insist on his claim
|
|
// TODO: Find a simple and fun system to express
|
|
// how much each player want an item
|
|
hardenRequest () {
|
|
}
|
|
},
|
|
}
|
|
</script>
|