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

going on, reactivity is not properly working

Browse Source
This commit is contained in:
Arthur Gerbaud
2019-07-04 16:02:05 +02:00
parent 503ebf7b6b
commit 5f0e6624e0
4 changed files with 107 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
lootalot_db/db.sqlite3
View File

Binary file not shown.

62
lootalot_front/src/AppStorage.js
View File

@@ -1,6 +1,6 @@
const Api = {
export const Api = {
fetchPlayerList () {
return fetch("http://localhost:8088/players")
.then(r => r.json())
@@ -19,15 +19,16 @@ const Api = {
},
putClaim (playerId, itemId) {
console.log('newRequest from', playerId, 'on', itemId);
return true;
return Promise.resolve(true);
},
unClaim (playerId, itemId) {
console.log('cancelRequest of', playerId, 'on', itemId);
return true;
return Promise.resolve(true);
},
updateWealth (playerId, goldValue) {
console.log('Update wealth', goldValue);
return true;
return fetch("http://localhost:8088/update-wealth/" + playerId + "/" + goldValue)
.then(r => r.json())
.catch(e => console.error("Fetch error", e));
}
};
@@ -92,31 +93,46 @@ export const AppStorage = {
if (this.debug) console.log('switchPlayerChestVisibility', !this.state.show_player_chest)
this.state.show_player_chest = !this.state.show_player_chest
},
updatePlayerWealth (goldValue) {
if (this.debug) console.log('updatePlayerWealth', goldValue, this.state.player_id)
return Api.updateWealth(this.state.player_id, goldValue)
.then(done => {
if (done) {
// Update player wealth
this.state.player_list[this.state.player_id].cp += 1;
}
return done;
});
},
// Put a claim on an item from group chest.
putRequest (itemId) {
const playerId = this.state.player_id
const done = Api.putClaim(playerId, itemId);
if (done) {
// Update cliend-side state
this.state.requests[playerId].push(itemId);
} else {
if (this.debug) console.log("API responded with 'false'")
}
Api.putClaim(playerId, itemId)
.then(done => {
if (done) {
// Update cliend-side state
this.state.requests[playerId].push(itemId);
} else {
if (this.debug) console.log("API responded with 'false'")
}
});
},
// Withdraws a claim.
cancelRequest(itemId) {
const playerId = this.state.player_id
const done = Api.unClaim(playerId, itemId);
if (done) {
var idx = this.state.requests[playerId].indexOf(itemId);
if (idx > -1) {
this.state.requests[playerId].splice(idx, 1);
} else {
if (this.debug) console.log("cancel a non-existent request")
}
} else {
if (this.debug) console.log("API responded with 'false'")
}
Api.unClaim(playerId, itemId)
.then(done => {
if (done) {
var idx = this.state.requests[playerId].indexOf(itemId);
if (idx > -1) {
this.state.requests[playerId].splice(idx, 1);
} else {
if (this.debug) console.log("cancel a non-existent request")
}
} else {
if (this.debug) console.log("API responded with 'false'")
}
});
}
}

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

@@ -27,25 +27,22 @@
</header>
<div class="card-content">
<Wealth :wealth="wealth"
:edit="edit_wealth"
@updated="edit_wealth = !edit_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>
</div>
<footer class="card-footer">
<a @click="switchPlayerChestVisibility" v-show="!playerIsGroup"
href="#" class="card-footer-item is-dark">
Coffre
</a>
<a @click="edit_wealth = !edit_wealth" href="#" class="card-footer-item">Argent</a>
<a href="#" class="card-footer-item disabled">Historique</a>
</footer>
</div>
<div class="card" v-show="state.show_player_chest" style="margin-top: 1em;">
<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>
@@ -86,7 +83,11 @@
return this.state.player_list[idx];
},
wealth () {
return [this.player.cp, this.player.sp, this.player.gp, this.player.pp];
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 () {

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

@@ -1,82 +1,90 @@
<template>
<div class="box is-primary">
<span class="icon is-large">
<i class="fas fa-2x fa-piggy-bank"></i>
</span>
<div class="box is-shadowless">
<nav class="columns is-mobile is-multiline">
<div class="column">
<p class="heading">PC</p>
<p class="is-size-4">{{ wealth[0] }}</p>
</div>
<span class="icon is-large"
@click="edit = !edit">
<i class="fas fa-2x fa-piggy-bank"></i>
</span>
</div>
<div class="column">
<p class="heading">PA</p>
<p class="is-size-4">{{ wealth[1] }}</p>
</div>
<p class="heading">PP</p>
<p class="is-size-4">{{ wealth[3] }}</p>
</div>
<div class="column">
<p class="heading">PO</p>
<p class="is-size-4">{{ wealth[2] }}</p>
</div>
<p class="heading">PG</p>
<p class="is-size-4">{{ wealth[2] }}</p>
</div>
<div class="column">
<p class="heading">PP</p>
<p class="is-size-4">{{ wealth[3] }}</p>
</div>
</nav>
<p class="heading">PA</p>
<p class="is-size-4">{{ wealth[1] }}</p>
</div>
<div class="column">
<p class="heading">PC</p>
<p class="is-size-4">{{ wealth[0] }}</p>
</div>
</nav>
<div v-if="edit"> <!-- or v-show ? -->
<nav class="columns is-1 is-variable is-mobile">
<template v-for="i in 4">
<div :key="`input-col-${i}`" class="column">
<NumberInput v-model="edit_values[i - 1]"></NumberInput>
</div>
</template>
</nav>
<nav class="columns is-mobile">
<div class="column is-4 is-offset-2">
<div class="column">
<NumberInput v-model="edit_value"></NumberInput>
</div>
<div class="column is-2">
<button class="button is-outlined is-fullwidth is-danger"
@click="updateWealth('minus')">
<span class="icon"><i class="fas fa-2x fa-minus"></i></span>
</button>
</div>
<div class="column is-4">
</div>
<div class="column is-2">
<button class="button is-outlined is-primary is-fullwidth"
@click="updateWealth('plus')">
<span class="icon"><i class="fas fa-2x fa-plus"></i></span>
</button>
</div>
</nav>
</div>
</nav>
</div>
</div>
</template>
<script>
import { AppStorage } from '../AppStorage.js'
import NumberInput from './NumberInput.vue'
export default {
components: { NumberInput },
props: ["wealth", "edit"],
props: ["wealth"],
data () {
return {
edit_values: [0,0,0,0],
edit: false,
edit_value: 0,
};
},
methods: {
updateWealth (op) {
const values = this.edit_values;
// Is it optimal, considering NumberInput already validates numbers ?
// Check that all fields are valid numbers
const success = values
.map(v => !isNaN(v))
.reduce(
(t,v) => t && v,
true);
if (success) {
console.log('updated', op, values);
this.$emit('updated');
this.resetValues();
} else {
console.log('correct errors');
}
var goldValue;
switch (op) {
case 'plus':
goldValue = this.edit_value;
break;
case 'minus':
goldValue = -this.edit_value;
break;
default:
console.log("Error, bad operator !", op);
return;
}
AppStorage.updatePlayerWealth(goldValue)
.then(done => {
if (done) {
this.$emit('updated');
this.resetValues();
} else {
console.log('correct errors');
}
});
},
resetValues () {
this.edit_values.fill(0);
this.edit = false;
this.edit_value = 0;
}
}
}