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

improves progressive rendering, work in progress...

Browse Source
This commit is contained in:
Arthur Gerbaud
2019-07-05 15:06:16 +02:00
parent b4692a7a4e
commit 63c14b4a54
7 changed files with 58 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2,8 +2,9 @@
<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"
<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"
@@ -16,33 +17,30 @@
</div>
<div class="dropdown-menu" id="dropdown-menu" role="menu"
v-closable="{ exclude: ['dropdown_btn'], handler: 'closeDropdown', visible: show_dropdown }">
<div class="dropdown-content">
<a v-for="(p,i) in state.player_list" :key="i"
<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>
</div>
</header>
</header>
<div class="card-content">
<Wealth :wealth="wealth"
@updated="console.log('updated wealth')">
</Wealth>
<p class="notification is-warning" v-show="!playerIsGroup">Dette : {{ player.debt }}gp</p>
<a @click="switchPlayerChestVisibility" v-show="!playerIsGroup"
href="#" class="button is-link is-fullwidth">
Coffre
</a>
<Wealth :wealth="wealth"></Wealth>
<p class="notification is-warning" v-show="!playerIsGroup">
Dette : {{ app_state.initiated ? player.debt : "" }}gp
</p>
<a @click="switchPlayerChestVisibility" v-show="!playerIsGroup"
href="#" class="button is-link is-fullwidth">
Coffre
</a>
<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>
<div class="card" v-show="state.show_player_chest">
<div class="card-content">
<Chest :player="state.player_id"></Chest>
</div>
</div>
<a href="#" class="button is-link is-fullwidth" disabled>Historique</a>
</div>
</template>
@@ -71,7 +69,7 @@
components: { Chest, Wealth },
data () {
return {
state: AppStorage.state,
app_state: AppStorage.state,
show_dropdown: false,
edit_wealth: false,
handleOutsideClick: null,
@@ -79,19 +77,24 @@
},
computed: {
player () {
const idx = this.state.player_id;
return this.state.player_list[idx];
if (!this.app_state.initiated) return {}
const idx = this.app_state.player_id;
return this.app_state.player_list[idx];
},
wealth () {
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];
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.state.player_id == 0;
return this.app_state.player_id == 0;
}
},
methods: {
@@ -99,7 +102,7 @@
AppStorage.switchPlayerChestVisibility();
},
hidePlayerChest () {
if (this.state.show_player_chest) {
if (this.app_state.show_player_chest) {
this.switchPlayerChestVisibility();
}
},
@@ -153,4 +156,5 @@
</script>
<style scoped>
.fa-exchange-alt.disabled { opacity: 0.4; }
</style>