93 lines
2.7 KiB
Vue
93 lines
2.7 KiB
Vue
<template>
|
|
<div class="buttons">
|
|
<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>
|
|
export default {
|
|
props: {
|
|
// Id of active player
|
|
id: {
|
|
type: Number,
|
|
required: true,
|
|
},
|
|
// Map of all claims
|
|
claims: {
|
|
type: Object,
|
|
required: true,
|
|
},
|
|
// Id of item we are bound to
|
|
item: {
|
|
type: Number,
|
|
required: true,
|
|
}
|
|
},
|
|
computed: {
|
|
// Check if item is requested by active player
|
|
isRequested () {
|
|
if (this.claims[this.id]) {
|
|
return this.claims[this.id].includes(this.item);
|
|
} else {
|
|
return false;
|
|
}
|
|
},
|
|
// Check if item is requested by multiple players including active one
|
|
isInConflict () {
|
|
var reqByPlayer = false;
|
|
var reqByOther = false;
|
|
for (var id in this.claims) {
|
|
const isReq = this.claims[id].includes(this.item);
|
|
if (isReq) {
|
|
if (id == this.id) {
|
|
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>
|
|
|
|
<style scoped>
|
|
.buttons, .button { margin-bottom: 0; }
|
|
</style>
|