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

BIN
lootalot_db/db.sqlite3
View File

Binary file not shown.

2
lootalot_front/src/App.vue
View File

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

20
lootalot_front/src/AppStorage.js
View File

@@ -43,7 +43,7 @@ export const AppStorage = {
player_id: 0, player_id: 0,
player_list: {}, player_list: {},
player_loot: {}, player_loot: {},
requests: {}, player_claims: {},
initiated: false, initiated: false,
show_player_chest: false, show_player_chest: false,
}, },
@@ -56,18 +56,19 @@ export const AppStorage = {
.all([ Api.fetchPlayerList(), Api.fetchClaims(), ]) .all([ Api.fetchPlayerList(), Api.fetchClaims(), ])
.then(data => { .then(data => {
const [players, claims] = data; const [players, claims] = data;
this.initPlayerList(players); this.__initPlayerList(players);
console.log("claims", claims); console.log("claims", claims);
}); });
}, },
initPlayerList(data) { __initPlayerList(data) {
for (var idx in data) { for (var idx in data) {
var playerDesc = data[idx]; var playerDesc = data[idx];
const playerId = Number(playerDesc.id); const playerId = Number(playerDesc.id);
if (this.debug) console.log("Creates", playerId, playerDesc.name) 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_list, playerId, playerDesc);
Vue.set(this.state.player_loot, playerId, []); Vue.set(this.state.player_loot, playerId, []);
Vue.set(this.state.requests, playerId, []); Vue.set(this.state.player_claims, playerId, []);
} }
// Hack for now !! // Hack for now !!
// Fetch all players loot and wait to set initiated to true // 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); Promise.all(promises).then(_ => this.state.initiated = true);
}, },
// Player actions // User actions
// Sets a new active player by id // Sets a new active player by id
setActivePlayer (newPlayerId) { setActivePlayer (newPlayerId) {
if (this.debug) console.log('setActivePlayer to ', 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) if (this.debug) console.log('switchPlayerChestVisibility', !this.state.show_player_chest)
this.state.show_player_chest = !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) { getPlayerLoot (playerId) {
}, },
@@ -118,7 +122,7 @@ export const AppStorage = {
.then(done => { .then(done => {
if (done) { if (done) {
// Update cliend-side state // Update cliend-side state
this.state.requests[playerId].push(itemId); this.state.player_claims[playerId].push(itemId);
} else { } else {
if (this.debug) console.log("API responded with 'false'") if (this.debug) console.log("API responded with 'false'")
} }
@@ -130,9 +134,9 @@ export const AppStorage = {
Api.unClaim(playerId, itemId) Api.unClaim(playerId, itemId)
.then(done => { .then(done => {
if (done) { if (done) {
var idx = this.state.requests[playerId].indexOf(itemId); var idx = this.state.player_claims[playerId].indexOf(itemId);
if (idx > -1) { if (idx > -1) {
this.state.requests[playerId].splice(idx, 1); this.state.player_claims[playerId].splice(idx, 1);
} else { } else {
if (this.debug) console.log("cancel a non-existent request") if (this.debug) console.log("cancel a non-existent request")
} }

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

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

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

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

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

@@ -40,12 +40,12 @@
computed: { computed: {
// Check if item is requested by active player // Check if item is requested by active player
isRequested () { 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); return reqs.includes(this.item);
}, },
// Check if item is requested by multiple players including active one // Check if item is requested by multiple players including active one
isInConflict () { isInConflict () {
const reqs = this.state.requests; const reqs = this.state.player_claims;
const playerId = this.state.player_id; const playerId = this.state.player_id;
var reqByPlayer = false; var reqByPlayer = false;
var reqByOther = 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> <p class="is-size-4">{{ wealth[3] }}</p>
</div> </div>
<div class="column"> <div class="column">
<p class="heading">PG</p> <p class="heading">PO</p>
<p class="is-size-4">{{ wealth[2] }}</p> <p class="is-size-4 is-primary">{{ wealth[2] }}</p>
</div> </div>
<div class="column"> <div class="column">
<p class="heading">PA</p> <p class="heading">PA</p>