106 lines
3.8 KiB
Vue
106 lines
3.8 KiB
Vue
<template>
|
|
<div class="column is-one-third-desktop">
|
|
<div id="sidebar" class="card">
|
|
<header id="sidebar-heading" class="card-header">
|
|
<p class="card-header-title">{{ player.name }}</p>
|
|
<div class="dropdown is-right"
|
|
:class="{ 'is-active': show_dropdown }">
|
|
<div class="dropdown-trigger" ref="dropdown_btn">
|
|
<a id="change_player" class="card-header-icon"
|
|
@click="show_dropdown = !show_dropdown"
|
|
aria-haspopup="true" aria-controls="dropdown-menu">
|
|
<span class="icon is-small">
|
|
<i class="fas fa-exchange-alt"></i>
|
|
</span>
|
|
</a>
|
|
</div>
|
|
<div class="dropdown-menu" id="dropdown-menu" role="menu"
|
|
v-closable="{ exclude: ['dropdown_btn'], handler: 'closeDropdown' }">
|
|
<div class="dropdown-content">
|
|
<a href="#" class="dropdown-item">Féfi</a>
|
|
<a href="#" class="dropdown-item">Lomion</a>
|
|
<a href="#" class="dropdown-item">Oilossë</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<div class="card-content">
|
|
<Wealth v-bind:wealth="player.wealth"></Wealth>
|
|
</div>
|
|
<footer class="card-footer">
|
|
<a @click="switchPlayerChestVisibility" href="#" class="card-footer-item is-dark">Coffre</a>
|
|
<a href="#" class="card-footer-item">Argent</a>
|
|
<a href="#" class="card-footer-item disabled">Historique</a>
|
|
</footer>
|
|
</div>
|
|
<div class="card" v-show="app_state.show_player_chest" style="margin-top: 1em;">
|
|
<div class="card-content">
|
|
<Chest player_id="0"></Chest>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { store } from '../App.vue'
|
|
import Chest from './Chest.vue'
|
|
import Wealth from './Wealth.vue'
|
|
/*
|
|
The Player control board.
|
|
*/
|
|
let handleOutsideClick;
|
|
export default {
|
|
components: { Chest, Wealth },
|
|
data () {
|
|
return {
|
|
app_state: store.state,
|
|
player: {
|
|
name: "Player name",
|
|
wealth: [1000,100,10,1],
|
|
},
|
|
show_dropdown: false,
|
|
};
|
|
},
|
|
methods: {
|
|
switchPlayerChestVisibility () {
|
|
store.switchPlayerChestVisibility()
|
|
},
|
|
closeDropdown () {
|
|
this.show_dropdown = false
|
|
}
|
|
},
|
|
directives: {
|
|
'closable': {
|
|
bind: function(el, binding, vnode) {
|
|
handleOutsideClick = (e) => {
|
|
console.log("outsideClick");
|
|
e.stopPropagation();
|
|
const { exclude, handler } = binding.value;
|
|
let excludedElClicked = false;
|
|
exclude.forEach(refName => {
|
|
if (!excludedElClicked) {
|
|
const elt = vnode.context.$refs[refName];
|
|
excludedElClicked = elt.contains(e.target);
|
|
}
|
|
});
|
|
|
|
if (!el.contains(e.target) && !excludedElClicked) {
|
|
console.log('outsideCloseDropdown');
|
|
vnode.context[handler]()
|
|
}
|
|
};
|
|
document.addEventListener('click', handleOutsideClick);
|
|
document.addEventListener('touchstart', handleOutsideClick);
|
|
},
|
|
unbind: function() { console.log("unbind");
|
|
document.removeEventListener('click', handleOustideClick);
|
|
document.removeEventListener('touchstart', handleOustideClick);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
</style>
|