125 lines
4.1 KiB
Vue
125 lines
4.1 KiB
Vue
<template>
|
|
<div class="">
|
|
<nav class="navbar is-info">
|
|
<div class="navbar-brand">
|
|
<p class="navbar-item is-size-4" @click="show_wealth = !show_wealth">{{ app_state.initiated ? player.name : "..." }}</p>
|
|
<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false">
|
|
<span aria-hidden="true"></span>
|
|
<span aria-hidden="true"></span>
|
|
<span aria-hidden="true"></span>
|
|
</a>
|
|
</div>
|
|
<div id="menu" class="navbar-menu">
|
|
<div class="navbar-start" v-if="!playerIsGroup">
|
|
<a class="navbar-item" @click="switchPlayerChestVisibility">
|
|
{{ app_state.show_player_chest ? 'Coffre de groupe' : 'Mon coffre' }}</a>
|
|
</div>
|
|
<div class="navbar-end">
|
|
<div class="navbar-item has-dropdown is-hoverable">
|
|
<a class="navbar-link">Autres</a>
|
|
<div class="navbar-dropdown is-right">
|
|
<a class="navbar-item">History of Loot</a>
|
|
<hr class="navbar-divider">
|
|
<div class="navbar-item heading">Changer</div>
|
|
<a v-for="(p,i) in app_state.player_list" :key="i"
|
|
@click="setActivePlayer(i)"
|
|
href="#" class="navbar-item">
|
|
{{ p.name }}</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
<section class="box is-shadowless" v-if="show_wealth">
|
|
<Wealth :wealth="wealth" :debt="player.debt"></Wealth>
|
|
</section>
|
|
<section class="card">
|
|
<div class="card-content">
|
|
<Loot v-if="is_adding"></Loot>
|
|
<Chest v-else :player="shownChest"></Chest>
|
|
</div>
|
|
<div class="card-footer" v-if="shownChest == player.id">
|
|
<template v-if="is_adding">
|
|
<a class="card-footer-item">Confirmer</a>
|
|
<a class="card-footer-item" @click="toggleAdding">Annuler</a>
|
|
</template>
|
|
<a v-else class="card-footer-item" @click="toggleAdding">
|
|
+ {{ playerIsGroup ? 'Nouveau loot' : 'Acheter' }}
|
|
</a>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { AppStorage } from '../AppStorage'
|
|
import Chest from './Chest.vue'
|
|
import Wealth from './Wealth.vue'
|
|
import Loot from './Loot.vue'
|
|
/*
|
|
The Player control board.
|
|
*/
|
|
export default {
|
|
components: { Chest, Wealth, Loot },
|
|
data () {
|
|
return {
|
|
app_state: AppStorage.state,
|
|
is_adding: false,
|
|
show_wealth: true,
|
|
};
|
|
},
|
|
computed: {
|
|
player () {
|
|
if (!this.app_state.initiated) return {}
|
|
const idx = this.app_state.player_id;
|
|
return this.app_state.player_list[idx];
|
|
},
|
|
wealth () {
|
|
if (!this.app_state.initiated) {
|
|
return ["-", "-", "-", "-"];
|
|
} else {
|
|
const cp = this.player.cp
|
|
const sp = this.player.sp
|
|
const gp = this.player.gp
|
|
const pp = this.player.pp
|
|
return [cp, sp, gp, pp];
|
|
}
|
|
},
|
|
// Check if the active player is the special 'Group' player
|
|
playerIsGroup () {
|
|
return this.app_state.player_id == 0;
|
|
},
|
|
shownChest () {
|
|
return this.app_state.show_player_chest
|
|
? this.app_state.player_id
|
|
: 0;
|
|
}
|
|
},
|
|
methods: {
|
|
toggleAdding () {
|
|
this.is_adding = !this.is_adding;
|
|
},
|
|
switchPlayerChestVisibility () {
|
|
AppStorage.switchPlayerChestVisibility();
|
|
},
|
|
hidePlayerChest () {
|
|
if (this.app_state.show_player_chest) {
|
|
this.switchPlayerChestVisibility();
|
|
}
|
|
},
|
|
setActivePlayer (playerIdx) {
|
|
var playerIdx = Number(playerIdx);
|
|
AppStorage.setActivePlayer(playerIdx);
|
|
if (playerIdx == 0) { this.hidePlayerChest() }
|
|
},
|
|
closeDropdown () {
|
|
this.show_dropdown = false
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.fa-exchange-alt.disabled { opacity: 0.4; }
|
|
</style>
|