rust/lootalot
1
0
Fork 0
Code Issues 3 Pull Requests Releases Wiki Activity

redraws frontend UI

Browse Source
This commit is contained in:
Arthur Gerbaud
2019-07-28 15:56:19 +02:00
parent d280d0f095
commit a3eaeed807
12 changed files with 151 additions and 15350 deletions
Download Patch File Download Diff File Expand all files Collapse all files

128
lootalot_front/src/components/Player.vue
View File

@@ -1,51 +1,45 @@
<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">
{{ app_state.initiated ? 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', visible: show_dropdown }">
<div class="dropdown-content" v-if="app_state.initiated">
<a v-for="(p,i) in app_state.player_list" :key="i"
@click="setActivePlayer(i)"
href="#" class="dropdown-item">
{{ p.name }}</a>
</div>
</div>
</div>
</header>
<div class="card-content">
<Wealth :wealth="wealth" :debt="player.debt"></Wealth>
<div class="box is-shadowless" v-show="!playerIsGroup">
<div class="columns is-vcentered" @click="switchPlayerChestVisibility">
<div class="column is-one-fifth">
<span class="icon is-large">
<i class="fas fa-2x fa-box"></i>
</span>
</div>
<div class="column if-four-fifth has-text-left">
<p class="is-size-3">Coffre</p>
</div>
</div>
<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">
<template v-if="playerIsGroup">
<a class="navbar-item">Nouveau loot</a>
</template>
<template v-else>
<a class="navbar-item" @click="switchPlayerChestVisibility">
{{ app_state.show_player_chest ? 'Coffre de groupe' : 'Mon coffre' }}</a>
<a class="navbar-item">Marchand</a>
</template>
</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>
<Chest :player="app_state.player_id"
v-show="app_state.show_player_chest">
</Chest>
<a href="#" class="button is-link is-fullwidth is-hidden" disabled>Historique</a>
</div>
</div>
</nav>
<section class="has-background-light" v-if="show_wealth">
<Wealth :wealth="wealth" :debt="player.debt"></Wealth>
</section>
<Chest :player="shownChest"></Chest>
</div>
</template>
@@ -75,9 +69,7 @@
data () {
return {
app_state: AppStorage.state,
show_dropdown: false,
edit_wealth: false,
handleOutsideClick: null,
show_wealth: true,
};
},
computed: {
@@ -100,6 +92,11 @@
// 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: {
@@ -120,43 +117,6 @@
this.show_dropdown = false
}
},
directives: {
'closable': {
bind: function(el, binding, vnode) {
handleOutsideClick = (e) => {
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 (!excludedElClicked) {
console.log('outsideCloseDropdown');
vnode.context[handler]()
}
};
},
// Bind custom handler only when dropdown is visible
update: function(el, binding, vnode, _) {
const { visible } = binding.value;
if (visible) {
document.addEventListener('click', handleOutsideClick);
document.addEventListener('touchstart', handleOutsideClick);
} else {
document.removeEventListener('click', handleOutsideClick);
document.removeEventListener('touchstart', handleOutsideClick);
}
},
unbind: function() { console.log("unbind");
document.removeEventListener('click', handleOutsideClick);
document.removeEventListener('touchstart', handleOutsideClick);
}
}
}
}
</script>