83 lines
2.6 KiB
Vue
83 lines
2.6 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"
|
|
:class="{'is-outlined': isRequested}"
|
|
: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 {
|
|
state: AppStorage.state,
|
|
_requested: false, // Dummy state
|
|
};
|
|
},
|
|
computed: {
|
|
// Check if item is requested by active player
|
|
isRequested () {
|
|
const reqs = this.state.requests[this.state.player_id];
|
|
return reqs.includes(this.item);
|
|
},
|
|
// Check if item is requested by multiple players including active one
|
|
isInConflict () {
|
|
const reqs = this.state.requests;
|
|
const playerId = this.state.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 () {
|
|
AppStorage.putRequest(this.item)
|
|
},
|
|
// The active player withdraws his request
|
|
cancelRequest () {
|
|
AppStorage.cancelRequest(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>
|