140 lines
4.3 KiB
Vue
140 lines
4.3 KiB
Vue
<template>
|
|
<PlayerView :id="state.player_id"
|
|
v-slot="{ player, loot, notifications, actions }">
|
|
<main id="app" class="container">
|
|
<header class="section">
|
|
<HeaderBar :app_state="state">
|
|
<template v-slot:title>{{ player.name }}</template>
|
|
<template v-slot:links>
|
|
<a class="navbar-item">History of Loot</a>
|
|
<template v-if="playerIsGroup">
|
|
<hr class="navbar-divider">
|
|
<div class="navbar-item heading">Admin</div>
|
|
<a class="navbar-item">"Resolve claims"</a>
|
|
<a class="navbar-item">"Add player"</a>
|
|
</template>
|
|
<hr class="navbar-divider">
|
|
<div class="navbar-item heading">Changer</div>
|
|
<a v-for="(p,i) in state.player_list" :key="i"
|
|
@click="setActivePlayer(i)"
|
|
href="#" class="navbar-item">
|
|
{{ p.name }}</a>
|
|
</template>
|
|
</HeaderBar>
|
|
<p v-show="notifications.length > 0">{{ notifications }}</p>
|
|
<Wealth
|
|
:wealth="[player.cp, player.sp, player.gp, player.pp]"
|
|
:debt="player.debt"
|
|
@update="actions.updateWealth">
|
|
</wealth>
|
|
</header>
|
|
<nav>
|
|
<div class="tabs is-centered is-boxed is-medium">
|
|
<ul>
|
|
<li :class="{ 'is-active': activeView == 'group' }">
|
|
<a @click="switchView('group')">Coffre de groupe</a></li>
|
|
<li :class="{ 'is-active': activeView == 'player' }"
|
|
v-show="!playerIsGroup">
|
|
<a @click="switchView('player')">Mon coffre</a></li>
|
|
<li :class="{'is-active': activeView == 'adding' }">
|
|
<a @click="switchView('adding')">
|
|
+ {{ playerIsGroup ? 'Nouveau Loot' : 'Acheter' }}
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
<main class="">
|
|
<template v-if="isAdding">
|
|
<h2 v-show="playerIsGroup">ItemInput</h2>
|
|
<Chest
|
|
:items="playerIsGroup ? [] : shopInventory"
|
|
:perms="playerIsGroup ? {} : { canBuy: true }">
|
|
</Chest>
|
|
</template>
|
|
<Chest v-else
|
|
:items="showPlayerChest ? loot : state.group_loot"
|
|
:perms="{
|
|
canGrab: !(showPlayerChest || playerIsGroup),
|
|
canSell: showPlayerChest || playerIsGroup
|
|
}"
|
|
@claim="actions.putClaim"
|
|
@unclaim="actions.withdrawClaim">
|
|
</Chest>
|
|
</main>
|
|
</main>
|
|
</PlayerView>
|
|
</template>
|
|
|
|
<script>
|
|
import PlayerView from './components/PlayerView.js'
|
|
import HeaderBar from './components/HeaderBar.vue'
|
|
import Wealth from './components/Wealth.vue'
|
|
import Chest from './components/Chest.vue'
|
|
import { AppStorage } from './AppStorage'
|
|
|
|
function getCookie(cname) {
|
|
var name = cname + "=";
|
|
var decodedCookie = decodeURIComponent(document.cookie);
|
|
var ca = decodedCookie.split(';');
|
|
for(var i = 0; i <ca.length; i++) {
|
|
var c = ca[i];
|
|
while (c.charAt(0) == ' ') {
|
|
c = c.substring(1);
|
|
}
|
|
if (c.indexOf(name) == 0) {
|
|
return c.substring(name.length, c.length);
|
|
}
|
|
}
|
|
return "";
|
|
}
|
|
|
|
export default {
|
|
name: 'app',
|
|
data () {
|
|
return {
|
|
state: AppStorage.state,
|
|
activeView: 'group',
|
|
shopInventory: [{id: 1, name: "Item from shop #1", base_price: 2000}],
|
|
};
|
|
},
|
|
components: {
|
|
PlayerView,
|
|
HeaderBar,
|
|
Chest,
|
|
Wealth
|
|
},
|
|
created () {
|
|
// Initiate with active player set to value found in cookie
|
|
// or as group by default.
|
|
const cookie = getCookie("player_id");
|
|
let playerId;
|
|
if (cookie == "") {
|
|
playerId = 0;
|
|
} else {
|
|
playerId = Number(cookie);
|
|
}
|
|
AppStorage.initStorage(playerId);
|
|
},
|
|
methods: {
|
|
setActivePlayer (idx) {
|
|
if (idx == 0) this.switchView('group');
|
|
AppStorage.setActivePlayer(idx);
|
|
},
|
|
switchView (viewId) {
|
|
if (!['group', 'player', 'adding'].includes(viewId)) {
|
|
console.error("Not a valid view ID :", viewId);
|
|
}
|
|
this.activeView = viewId;
|
|
},
|
|
switchPlayerChestVisibility () { AppStorage.switchPlayerChestVisibility(); },
|
|
},
|
|
computed: {
|
|
showPlayerChest () { return this.activeView == 'player' },
|
|
isAdding () { return this.activeView == 'adding' },
|
|
playerIsGroup () { return this.state.player_id == 0 },
|
|
}
|
|
}
|
|
</script>
|
|
|