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

adds simple global state, adds dropdown to switch players

Browse Source
This commit is contained in:
Arthur Gerbaud
2019-06-11 22:08:53 +02:00
parent 4454bd245c
commit feef8146d2
3 changed files with 84 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2,12 +2,26 @@
<div class="column is-one-third-desktop">
<div id="sidebar" class="card">
<header id="sidebar-heading" class="card-header">
<a id="change_player" class="card-header-icon is-dark">
<span class="icon is-small">
<i class="fas fa-exchange-alt"></i>
</span>
</a>
<p id="active_player" class="card-header-title">{{ name }}</p>
<p class="card-header-title">{{ player.name }}</p>
<div class="dropdown is-right"
:class="{ 'is-active': show_dropdown }">
<div class="dropdown-trigger">
<a id="change_player" class="button is-outlined is-primary"
@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">
<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">
<span class="icon is-large">
@@ -15,25 +29,26 @@
</span>
<nav class="level is-mobile">
<div class="level-item">
<div><p class="heading">CP</p><p class="subtitle">{{ wealth[0] }}</p></div>
<div><p class="heading">CP</p><p class="subtitle">{{ player.wealth[0] }}</p></div>
</div>
<div class="level-item">
<div><p class="heading">SP</p><p class="subtitle">{{ wealth[1] }}</p></div>
<div><p class="heading">SP</p><p class="subtitle">{{ player.wealth[1] }}</p></div>
</div>
<div class="level-item">
<div><p class="heading">GP</p><p class="subtitle">{{ wealth[2] }}</p></div>
<div><p class="heading">GP</p><p class="subtitle">{{ player.wealth[2] }}</p></div>
</div>
<div class="level-item">
<div><p class="heading">PP</p><p class="subtitle">{{ wealth[3] }}</p></div>
<div><p class="heading">PP</p><p class="subtitle">{{ player.wealth[3] }}</p></div>
</div>
</nav>
</div>
<footer class="card-footer">
<a @click="showChest = !showChest" href="#" class="card-footer-item is-dark">Coffre</a>
<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="showChest" style="margin-top: 1em;">
<div class="card" v-show="app_state.show_player_chest" style="margin-top: 1em;">
<div class="card-content">
<Chest player_id="0"></Chest>
</div>
@@ -42,6 +57,7 @@
</template>
<script>
import { store } from '../App.vue'
import Chest from './Chest.vue'
/*
@@ -54,11 +70,22 @@
components: { Chest },
data () {
return {
name: "Player name",
wealth: [1000,100,10,1],
showChest: false,
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
}
},
}
</script>