adds simple global state, adds dropdown to switch players
This commit is contained in:
@@ -3,19 +3,7 @@
|
||||
<section id="content" class="columns is-desktop">
|
||||
<Player></Player>
|
||||
<div class="column">
|
||||
<section id="main" class="columns">
|
||||
<div class="column">
|
||||
<div id="main-heading" class="columns is-mobile is-vcentered">
|
||||
<div class="column is-narrow">
|
||||
<span class="icon is-large"><i class="fas fa-3x fa-gem"></i></span>
|
||||
</div>
|
||||
<div class="column has-text-left">
|
||||
<h1 class="title">Coffre de groupe</h1>
|
||||
</div>
|
||||
</div>
|
||||
<Chest player_id="0"></Chest>
|
||||
</div>
|
||||
</section>
|
||||
<GroupChest></GroupChest>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
@@ -23,14 +11,30 @@
|
||||
|
||||
<script>
|
||||
import Player from './components/Player.vue'
|
||||
import Chest from './components/Chest.vue'
|
||||
import GroupChest from './components/GroupChest.vue'
|
||||
import 'bulma/css/bulma.css'
|
||||
|
||||
export const store = {
|
||||
debug: true,
|
||||
state: {
|
||||
player_id: 0,
|
||||
show_player_chest: false,
|
||||
},
|
||||
setActivePlayer (newPlayerId) {
|
||||
if (this.debug) console.log('setActivePlayer to ', newPlayerId)
|
||||
this.state.player_id = newPlayerId
|
||||
},
|
||||
switchPlayerChestVisibility () {
|
||||
if (this.debug) console.log('switchPlayerChestVisibility', !this.state.show_player_chest)
|
||||
this.state.show_player_chest = !this.state.show_player_chest
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'app',
|
||||
components: {
|
||||
Player,
|
||||
Chest
|
||||
GroupChest
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
22
lootalot_front/src/components/GroupChest.vue
Normal file
22
lootalot_front/src/components/GroupChest.vue
Normal file
@@ -0,0 +1,22 @@
|
||||
<template>
|
||||
<section id="main" class="section">
|
||||
<div id="main-heading" class="columns is-mobile is-vcentered">
|
||||
<div class="column is-narrow">
|
||||
<span class="icon is-large"><i class="fas fa-3x fa-gem"></i></span>
|
||||
</div>
|
||||
<div class="column has-text-left">
|
||||
<h1 class="title">Coffre de groupe</h1>
|
||||
</div>
|
||||
</div>
|
||||
<Chest player_id="0"></Chest>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Chest from './Chest.vue'
|
||||
|
||||
export default {
|
||||
components: { Chest },
|
||||
data () { return {}; }
|
||||
}
|
||||
</script>
|
||||
@@ -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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user