adds dummy impls for targeted behaviours

This commit is contained in:
2019-06-12 15:34:52 +02:00
parent 022b97520f
commit eeb297215a
5 changed files with 90 additions and 19 deletions

View File

@@ -1,22 +1,54 @@
<template>
<div class="container">
<p class="notification is-paddingless is-info" v-show="canAdd">Peut ajouter</p>
<p class="notification is-paddingless is-warning" v-show="canSell">Peut vendre</p>
<p class="notification is-paddingless is-primary" v-show="canGrab">Peut prendre</p>
<table class="table is-fullwidth is-striped">
<thead>
<tr><th>Objets de {{ player_id }}</th></tr>
<tr><th>Objets de {{ player }}</th></tr>
</thead>
<tbody>
<tr><td>Nom 1</td></tr>
<tr><td>Nom 2</td></tr>
<tr><td>Nom 3</td></tr>
<template v-for="(item, idx) in content">
<tr :key="idx"><td>{{item.name}}</td></tr>
</template>
</tbody>
</table>
</div>
</template>
<script>
import { store } from '../App.vue'
export default {
props: ["player_id"],
props: {
player: {
type: Number,
required: true,
default: 0
}
},
data () {
return {
app_state: store.state,
content: [
{id: 10, name: "Épée longue +2 acérée"},
{id: 5, name: "Ceinture de force +6"},
],
};
}
},
computed: {
// Can the active user sell items from this chest ?
canSell () {
return this.player == this.app_state.player_id;
},
// Can the user grab items from this chest ?
canGrab () {
return (this.app_state.player_id != 0 // User is not the group
&& this.player == 0); // This is the group chest
},
canAdd () {
return (this.app_state.player_id == 0
&& this.player == 0);
},
},
}
</script>

View File

@@ -1,14 +1,14 @@
<template>
<section id="main" class="section">
<div id="main-heading" class="columns is-mobile is-vcentered">
<div id="main-heading" class="notification is-dark is-paddingless columns is-mobile is-vcentered">
<div class="column is-narrow">
<span class="icon is-large"><i class="fas fa-3x fa-gem"></i></span>
<span class="icon is-large"><i class="fas fa-2x fa-dragon"></i></span>
</div>
<div class="column has-text-left">
<h1 class="title">Coffre de groupe</h1>
</div>
</div>
<Chest player_id="0"></Chest>
<Chest player="0"></Chest>
</section>
</template>

View File

@@ -2,7 +2,7 @@
<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>
<p class="card-header-title">{{ name }}</p>
<div class="dropdown is-right"
:class="{ 'is-active': show_dropdown }">
<div class="dropdown-trigger" ref="dropdown_btn">
@@ -17,25 +17,30 @@
<div class="dropdown-menu" id="dropdown-menu" role="menu"
v-closable="{ exclude: ['dropdown_btn'], handler: 'closeDropdown' }">
<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>
<a v-for="(p,i) in player_list" :key="i"
@click="setActivePlayer(i)"
href="#" class="dropdown-item">
{{ p.name }}</a>
</div>
</div>
</div>
</header>
<div class="card-content">
<Wealth v-bind:wealth="player.wealth"></Wealth>
<p class="notification is-warning" v-show="!playerIsGroup">Dette : {{ player.debt }}gp</p>
</div>
<footer class="card-footer">
<a @click="switchPlayerChestVisibility" href="#" class="card-footer-item is-dark">Coffre</a>
<a @click="switchPlayerChestVisibility" v-show="!playerIsGroup"
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="app_state.show_player_chest" style="margin-top: 1em;">
<div class="card-content">
<Chest player_id="0"></Chest>
<Chest :player="app_state.player_id"></Chest>
</div>
</div>
</div>
@@ -55,15 +60,42 @@
return {
app_state: store.state,
player: {
name: "Player name",
name: "Groupe",
wealth: [1000,100,10,1],
debt: 0,
},
player_list: [
{id: 0, name: "Groupe"},
{id: 1, name: "Lomion"},
{id: 4, name: "Oilosse"},
{id: 3, name: "Fefi"},
],
show_dropdown: false,
};
},
computed: {
name () {
return this.player.name;
},
// Check if the active player is the special 'Group' player
playerIsGroup () {
return this.app_state.player_id == 0;
}
},
methods: {
switchPlayerChestVisibility () {
store.switchPlayerChestVisibility()
store.switchPlayerChestVisibility();
},
hidePlayerChest () {
if (this.app_state.show_player_chest) {
this.switchPlayerChestVisibility();
}
},
setActivePlayer (playerIdx) {
const newId = this.player_list[playerIdx].id;
store.setActivePlayer(newId);
if (newId == 0) { this.hidePlayerChest() }
this.player.name = this.player_list[playerIdx].name
},
closeDropdown () {
this.show_dropdown = false
@@ -84,7 +116,7 @@
}
});
if (!el.contains(e.target) && !excludedElClicked) {
if (!excludedElClicked) {
console.log('outsideCloseDropdown');
vnode.context[handler]()
}

View File

@@ -1,5 +1,5 @@
<template>
<div class="container">
<div class="container is-fluid">
<span class="icon is-large">
<i class="fas fa-2x fa-piggy-bank"></i>
</span>