67 lines
1.9 KiB
Vue
67 lines
1.9 KiB
Vue
<template>
|
|
<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>
|
|
</header>
|
|
<div class="card-content">
|
|
<span class="icon is-large">
|
|
<i class="fas fa-2x fa-coins"></i>
|
|
</span>
|
|
<nav class="level is-mobile">
|
|
<div class="level-item">
|
|
<div><p class="heading">CP</p><p class="subtitle">{{ wealth[0] }}</p></div>
|
|
</div>
|
|
<div class="level-item">
|
|
<div><p class="heading">SP</p><p class="subtitle">{{ wealth[1] }}</p></div>
|
|
</div>
|
|
<div class="level-item">
|
|
<div><p class="heading">GP</p><p class="subtitle">{{ wealth[2] }}</p></div>
|
|
</div>
|
|
<div class="level-item">
|
|
<div><p class="heading">PP</p><p class="subtitle">{{ 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 href="#" class="card-footer-item">Argent</a>
|
|
</footer>
|
|
</div>
|
|
<div class="card" v-show="showChest" style="margin-top: 1em;">
|
|
<div class="card-content">
|
|
<Chest player_id="0"></Chest>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import Chest from './Chest.vue'
|
|
/*
|
|
|
|
The Player control board.
|
|
|
|
|
|
|
|
*/
|
|
export default {
|
|
components: { Chest },
|
|
data () {
|
|
return {
|
|
name: "Player name",
|
|
wealth: [1000,100,10,1],
|
|
showChest: false,
|
|
};
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
</style>
|