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

improves progressive rendering, work in progress...

Browse Source
This commit is contained in:
Arthur Gerbaud
2019-07-05 15:06:16 +02:00
parent b4692a7a4e
commit 63c14b4a54
7 changed files with 58 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
lootalot_front/src/App.vue
View File

@@ -1,7 +1,7 @@
<template>
<main id="app" class="section">
<section id="content" class="columns is-desktop">
<Player v-if="state.initiated"></Player>
<Player></Player>
<div class="column">
<Chest :player="0" v-if="state.initiated"></Chest>
</div>

20
lootalot_front/src/AppStorage.js
View File

@@ -43,7 +43,7 @@ export const AppStorage = {
player_id: 0,
player_list: {},
player_loot: {},
requests: {},
player_claims: {},
initiated: false,
show_player_chest: false,
},
@@ -56,18 +56,19 @@ export const AppStorage = {
.all([ Api.fetchPlayerList(), Api.fetchClaims(), ])
.then(data => {
const [players, claims] = data;
this.initPlayerList(players);
this.__initPlayerList(players);
console.log("claims", claims);
});
},
initPlayerList(data) {
__initPlayerList(data) {
for (var idx in data) {
var playerDesc = data[idx];
const playerId = Number(playerDesc.id);
if (this.debug) console.log("Creates", playerId, playerDesc.name)
// Initiate data for a single Player.
Vue.set(this.state.player_list, playerId, playerDesc);
Vue.set(this.state.player_loot, playerId, []);
Vue.set(this.state.requests, playerId, []);
Vue.set(this.state.player_claims, playerId, []);
}
// Hack for now !!
// Fetch all players loot and wait to set initiated to true
@@ -85,7 +86,7 @@ export const AppStorage = {
}
Promise.all(promises).then(_ => this.state.initiated = true);
},
// Player actions
// User actions
// Sets a new active player by id
setActivePlayer (newPlayerId) {
if (this.debug) console.log('setActivePlayer to ', newPlayerId)
@@ -97,6 +98,9 @@ export const AppStorage = {
if (this.debug) console.log('switchPlayerChestVisibility', !this.state.show_player_chest)
this.state.show_player_chest = !this.state.show_player_chest
},
// TODO
// get the content of a player Chest, retrieve form cache or fetched
// will replace hack that loads *all* chest...
getPlayerLoot (playerId) {
},
@@ -118,7 +122,7 @@ export const AppStorage = {
.then(done => {
if (done) {
// Update cliend-side state
this.state.requests[playerId].push(itemId);
this.state.player_claims[playerId].push(itemId);
} else {
if (this.debug) console.log("API responded with 'false'")
}
@@ -130,9 +134,9 @@ export const AppStorage = {
Api.unClaim(playerId, itemId)
.then(done => {
if (done) {
var idx = this.state.requests[playerId].indexOf(itemId);
var idx = this.state.player_claims[playerId].indexOf(itemId);
if (idx > -1) {
this.state.requests[playerId].splice(idx, 1);
this.state.player_claims[playerId].splice(idx, 1);
} else {
if (this.debug) console.log("cancel a non-existent request")
}

11
lootalot_front/src/components/NumberInput.vue
View File

@@ -17,11 +17,12 @@
checkError (ev) {
const newValue = ev.target.value;
this.has_error = isNaN(newValue);
this.$emit(
'input',
// Do the conversion if valid
this.has_error ? newValue : Number(newValue)
);
if (!this.has_error) {
this.$emit(
'input',
Number(newValue)
);
}
}
},
}

66
lootalot_front/src/components/Player.vue
View File

@@ -2,8 +2,9 @@
<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>
<div class="dropdown is-right"
<p class="card-header-title">
{{ app_state.initiated ? player.name : "..." }}</p>
<div class="dropdown is-right"
:class="{ 'is-active': show_dropdown }">
<div class="dropdown-trigger" ref="dropdown_btn">
<a id="change_player" class="card-header-icon"
@@ -16,33 +17,30 @@
</div>
<div class="dropdown-menu" id="dropdown-menu" role="menu"
v-closable="{ exclude: ['dropdown_btn'], handler: 'closeDropdown', visible: show_dropdown }">
<div class="dropdown-content">
<a v-for="(p,i) in state.player_list" :key="i"
<div class="dropdown-content" v-if="app_state.initiated">
<a v-for="(p,i) in app_state.player_list" :key="i"
@click="setActivePlayer(i)"
href="#" class="dropdown-item">
{{ p.name }}</a>
</div>
</div>
</div>
</div>
</header>
</header>
<div class="card-content">
<Wealth :wealth="wealth"
@updated="console.log('updated wealth')">
</Wealth>
<p class="notification is-warning" v-show="!playerIsGroup">Dette : {{ player.debt }}gp</p>
<a @click="switchPlayerChestVisibility" v-show="!playerIsGroup"
href="#" class="button is-link is-fullwidth">
Coffre
</a>
<Wealth :wealth="wealth"></Wealth>
<p class="notification is-warning" v-show="!playerIsGroup">
Dette : {{ app_state.initiated ? player.debt : "" }}gp
</p>
<a @click="switchPlayerChestVisibility" v-show="!playerIsGroup"
href="#" class="button is-link is-fullwidth">
Coffre
</a>
<Chest :player="app_state.player_id"
v-show="app_state.show_player_chest">
</Chest>
<a href="#" class="button is-link is-fullwidth is-hidden" disabled>Historique</a>
</div>
</div>
<div class="card" v-show="state.show_player_chest">
<div class="card-content">
<Chest :player="state.player_id"></Chest>
</div>
</div>
<a href="#" class="button is-link is-fullwidth" disabled>Historique</a>
</div>
</template>
@@ -71,7 +69,7 @@
components: { Chest, Wealth },
data () {
return {
state: AppStorage.state,
app_state: AppStorage.state,
show_dropdown: false,
edit_wealth: false,
handleOutsideClick: null,
@@ -79,19 +77,24 @@
},
computed: {
player () {
const idx = this.state.player_id;
return this.state.player_list[idx];
if (!this.app_state.initiated) return {}
const idx = this.app_state.player_id;
return this.app_state.player_list[idx];
},
wealth () {
const cp = this.player.cp
const sp = this.player.sp
const gp = this.player.gp
const pp = this.player.pp
return [cp, sp, gp, pp];
if (!this.app_state.initiated) {
return ["-", "-", "-", "-"];
} else {
const cp = this.player.cp
const sp = this.player.sp
const gp = this.player.gp
const pp = this.player.pp
return [cp, sp, gp, pp];
}
},
// Check if the active player is the special 'Group' player
playerIsGroup () {
return this.state.player_id == 0;
return this.app_state.player_id == 0;
}
},
methods: {
@@ -99,7 +102,7 @@
AppStorage.switchPlayerChestVisibility();
},
hidePlayerChest () {
if (this.state.show_player_chest) {
if (this.app_state.show_player_chest) {
this.switchPlayerChestVisibility();
}
},
@@ -153,4 +156,5 @@
</script>
<style scoped>
.fa-exchange-alt.disabled { opacity: 0.4; }
</style>

4
lootalot_front/src/components/Request.vue
View File

@@ -40,12 +40,12 @@
computed: {
// Check if item is requested by active player
isRequested () {
const reqs = this.state.requests[this.state.player_id];
const reqs = this.state.player_claims[this.state.player_id];
return reqs.includes(this.item);
},
// Check if item is requested by multiple players including active one
isInConflict () {
const reqs = this.state.requests;
const reqs = this.state.player_claims;
const playerId = this.state.player_id;
var reqByPlayer = false;
var reqByOther = false;

4
lootalot_front/src/components/Wealth.vue
View File

@@ -12,8 +12,8 @@
<p class="is-size-4">{{ wealth[3] }}</p>
</div>
<div class="column">
<p class="heading">PG</p>
<p class="is-size-4">{{ wealth[2] }}</p>
<p class="heading">PO</p>
<p class="is-size-4 is-primary">{{ wealth[2] }}</p>
</div>
<div class="column">
<p class="heading">PA</p>