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

more refactoring, removing imports

Browse Source
This commit is contained in:
Arthur Gerbaud
2019-07-31 21:48:59 +02:00
parent dae7633c11
commit 15d87e3b47
5 changed files with 74 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
lootalot_front/src/App.vue
View File

@@ -1,18 +1,42 @@
<template> <template>
<main id="app" class="container"> <main id="app" class="container">
<PlayerView :id="state.player_id" <PlayerView :id="state.player_id"
v-slot="{ player, notifications, actions }"> v-slot="{ player, loot, notifications, actions }">
<section class="section"> <section class="section">
<HeaderBar :app_state="state"> <HeaderBar :app_state="state">
<template v-slot:title>{{ player.name }}</template> <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> </HeaderBar>
<p v-if="notifications">{{ notifications }}</p> <p v-if="notifications.length > 0">{{ notifications }}</p>
<Wealth <Wealth
:wealth="[player.cp, player.sp, player.gp, player.pp]" :wealth="[player.cp, player.sp, player.gp, player.pp]"
:debt="player.debt" :debt="player.debt"
@update="actions.updateWealth"> @update="actions.updateWealth">
</wealth> </wealth>
<Chest :player="state.show_player_chest ? player.id : 0" <div class="tabs is-centered is-boxed is-medium" v-show="!playerIsGroup">
<ul>
<li :class="{ 'is-active': !state.show_player_chest }">
<a @click="switchPlayerChestVisibility">Coffre de groupe</a></li>
<li :class="{ 'is-active': state.show_player_chest }">
<a @click="switchPlayerChestVisibility">Mon coffre</a></li>
</ul>
</div>
<Chest :items="state.show_player_chest ? loot : state.group_loot"
:player="state.show_player_chest ? player.id : 0"
@claim="actions.putClaim" @claim="actions.putClaim"
@unclaim="actions.withdrawClaim"></Chest> @unclaim="actions.withdrawClaim"></Chest>
</section> </section>
@@ -68,6 +92,13 @@ export default {
} }
AppStorage.initStorage(playerId); AppStorage.initStorage(playerId);
}, },
methods: {
setActivePlayer (idx) { AppStorage.setActivePlayer(idx); },
switchPlayerChestVisibility () { AppStorage.switchPlayerChestVisibility(); },
},
computed: {
playerIsGroup () { return this.state.player_id == 0 },
}
} }
</script> </script>

40
lootalot_front/src/AppStorage.js
View File

@@ -5,36 +5,30 @@ const API_ENDPOINT = function (tailString) {
return API_BASEURL + tailString; return API_BASEURL + tailString;
} }
const Api = { export const Api = {
fetchPlayerList () { fetchPlayerList () {
return fetch(API_ENDPOINT("players")) return fetch(API_ENDPOINT("players"))
.then(r => r.json()) .then(r => r.json())
.catch(e => console.error("Fetch error ", e));
}, },
fetchClaims () { fetchClaims () {
return fetch(API_ENDPOINT("claims")) return fetch(API_ENDPOINT("claims"))
.then(r => r.json()) .then(r => r.json())
.catch(e => console.error("Fetch error ", e));
}, },
fetchLoot (playerId) { fetchLoot (playerId) {
return fetch(API_ENDPOINT(playerId + "/loot")) return fetch(API_ENDPOINT(playerId + "/loot"))
.then(r => r.json()) .then(r => r.json())
.catch(e => console.error("Fetch error", e));
}, },
putClaim (playerId, itemId) { putClaim (playerId, itemId) {
return fetch(API_ENDPOINT(playerId + "/claim/" + itemId)) return fetch(API_ENDPOINT(playerId + "/claim/" + itemId))
.then(r => r.json()) .then(r => r.json())
.catch(e => console.error("Fetch error", e));
}, },
unClaim (playerId, itemId) { unClaim (playerId, itemId) {
return fetch(API_ENDPOINT(playerId + "/unclaim/" + itemId)) return fetch(API_ENDPOINT(playerId + "/unclaim/" + itemId))
.then(r => r.json()) .then(r => r.json())
.catch(e => console.error("Fetch error", e));
}, },
updateWealth (playerId, goldValue) { updateWealth (playerId, goldValue) {
return fetch(API_ENDPOINT(playerId + "/update-wealth/" + goldValue)) return fetch(API_ENDPOINT(playerId + "/update-wealth/" + goldValue))
.then(r => r.json()) .then(r => r.json())
.catch(e => console.error("Fetch error", e));
} }
}; };
@@ -44,7 +38,7 @@ export const AppStorage = {
state: { state: {
player_id: 0, player_id: 0,
player_list: {}, player_list: {},
player_loot: {}, group_loot: [],
player_claims: {}, player_claims: {},
initiated: false, initiated: false,
show_player_chest: false, show_player_chest: false,
@@ -55,14 +49,19 @@ export const AppStorage = {
this.state.player_id = playerId; this.state.player_id = playerId;
// Fetch initial data // Fetch initial data
return Promise return Promise
.all([ Api.fetchPlayerList(), Api.fetchClaims(), ]) .all([
Api.fetchPlayerList(),
Api.fetchClaims(),
Api.fetchLoot(0)
])
.then(data => { .then(data => {
const [players, claims] = data; const [players, claims, group_loot] = data;
this.__initPlayerList(players); this.__initPlayerList(players);
this.__initClaimsStore(claims); this.__initClaimsStore(claims);
Vue.set(this.state, 'group_loot', group_loot);
}) })
// TODO: when __initPlayerList won't use promises .then(_ => this.state.initiated = true)
//.then(_ => this.state.initiated = true); .catch(e => { alert(e); this.state.initiated = false });
}, },
__initClaimsStore(data) { __initClaimsStore(data) {
for (var idx in data) { for (var idx in data) {
@@ -77,25 +76,8 @@ export const AppStorage = {
if (this.debug) console.log("Creates", playerId, playerDesc.name) if (this.debug) console.log("Creates", playerId, playerDesc.name)
// Initiate data for a single Player. // Initiate data for a single Player.
Vue.set(this.state.player_list, playerId, playerDesc); Vue.set(this.state.player_list, playerId, playerDesc);
Vue.set(this.state.player_loot, playerId, []);
Vue.set(this.state.player_claims, playerId, []); Vue.set(this.state.player_claims, playerId, []);
} }
// Hack for now !!
// Fetch all players loot and wait to set initiated to true
var promises = [];
for (var idx in data) {
const playerId = data[idx].id;
var promise = Api.fetchLoot(playerId)
.then(data => data.forEach(
item => {
if (this.debug) console.log("add looted item", item, playerId)
this.state.player_loot[playerId].push(item)
}
));
promises.push(promise);
}
Promise.all(promises)
.then(_ => this.state.initiated = true)
}, },
// User actions // User actions
// Sets a new active player by id // Sets a new active player by id

18
lootalot_front/src/components/Chest.vue
View File

@@ -2,7 +2,7 @@
<table class="table is-fullwidth is-striped"> <table class="table is-fullwidth is-striped">
<thead> <thead>
<tr> <tr>
<th>{{ player == 0 ? 'Coffre de groupe' : 'Objets'}}</th> <th>Objets</th>
<th v-if="canGrab"></th> <th v-if="canGrab"></th>
<th v-if="canSell"> <th v-if="canSell">
<div class="buttons is-right"> <div class="buttons is-right">
@@ -18,7 +18,7 @@
</tr> </tr>
</thead> </thead>
<tbody v-if="app_state.initiated"> <tbody v-if="app_state.initiated">
<template v-for="(item, idx) in content"> <template v-for="(item, idx) in items">
<tr :key="`row-${idx}`"> <tr :key="`row-${idx}`">
<td> <td>
<strong>{{item.name}}</strong> <strong>{{item.name}}</strong>
@@ -69,11 +69,16 @@
*/ */
export default { export default {
props: { props: {
items: {
type: Array,
required: true,
default: []
},
player: { player: {
type: Number, type: Number,
required: true, required: true,
default: 0 default: 0
} },
}, },
components: { components: {
Request, Request,
@@ -94,18 +99,13 @@
} }
}, },
computed: { computed: {
content () {
const playerId = this.player;
console.log("Refresh chest of", playerId);
return this.app_state.player_loot[playerId];
},
// Can the active user sell items from this chest ? // Can the active user sell items from this chest ?
canSell () { canSell () {
return this.player == this.app_state.player_id; return this.player == this.app_state.player_id;
}, },
totalSellValue () { totalSellValue () {
const selected = this.sell_selected; const selected = this.sell_selected;
return this.content return this.items
.filter(item => selected.includes(item.id)) .filter(item => selected.includes(item.id))
.map(item => item.base_price / 2) .map(item => item.base_price / 2)
.reduce((total,value) => total + value, 0); .reduce((total,value) => total + value, 0);

31
lootalot_front/src/components/HeaderBar.vue
View File

@@ -9,27 +9,13 @@
</a> </a>
</div> </div>
<div id="menu" class="navbar-menu"> <div id="menu" class="navbar-menu">
<div class="navbar-start" v-if="!playerIsGroup">
<a class="navbar-item" @click="switchPlayerChestVisibility">
{{ app_state.show_player_chest ? 'Coffre de groupe' : 'Mon coffre' }}</a>
</div>
<div class="navbar-end"> <div class="navbar-end">
<div class="navbar-item has-dropdown is-hoverable"> <div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link">Autres</a> <a class="navbar-link">Autres</a>
<div class="navbar-dropdown is-right"> <div class="navbar-dropdown is-right">
<slot name="links">
<a class="navbar-item">History of Loot</a> <a class="navbar-item">History of Loot</a>
<template v-if="playerIsGroup"> </slot>
<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 app_state.player_list" :key="i"
@click="setActivePlayer(i)"
href="#" class="navbar-item">
{{ p.name }}</a>
</div> </div>
</div> </div>
</div> </div>
@@ -37,16 +23,3 @@
</nav> </nav>
</template> </template>
<script>
import { AppStorage } from '../AppStorage'
export default {
props: ["app_state"],
methods: {
setActivePlayer (idx) { AppStorage.setActivePlayer(idx); },
switchPlayerChestVisibility () { AppStorage.switchPlayerChestVisibility(); },
},
computed: {
playerIsGroup () { return this.app_state.player_id == 0 },
}
}
</script>

21
lootalot_front/src/components/PlayerView.js
View File

@@ -1,9 +1,10 @@
import { AppStorage } from '../AppStorage' import { Api, AppStorage } from '../AppStorage'
export default { export default {
props: ["id"], props: ["id"],
data () { return { data () { return {
notifications: [], notifications: [],
loot: [],
}}, }},
methods: { methods: {
updateWealth (value) { updateWealth (value) {
@@ -20,6 +21,20 @@ export default {
.then(_ => { if (AppStorage.debug) this.notifications.push("Claim withdrawn")}) .then(_ => { if (AppStorage.debug) this.notifications.push("Claim withdrawn")})
}, },
parseLoot (items) {
this.loot = [];
items.map(item => {
this.loot.push(item);
});
}
},
watch: {
id: {
immediate: true,
handler: function(newId) {
Api.fetchLoot(newId).then(this.parseLoot);
}
},
}, },
computed: { computed: {
player () { player () {
@@ -29,14 +44,14 @@ export default {
cp: '-', sp: '-', gp: '-', pp: '-', cp: '-', sp: '-', gp: '-', pp: '-',
debt: 0 }; debt: 0 };
} else { } else {
console.log("Update player");
return AppStorage.state.player_list[this.id]; return AppStorage.state.player_list[this.id];
} }
} },
}, },
render () { render () {
return this.$scopedSlots.default({ return this.$scopedSlots.default({
player: this.player, player: this.player,
loot: this.loot,
notifications: this.notifications, notifications: this.notifications,
actions: { actions: {
updateWealth: this.updateWealth, updateWealth: this.updateWealth,