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.

30
lootalot_front/src/AppStorage.js
View File

@@ -1,6 +1,6 @@
const Api = { export const Api = {
fetchPlayerList () { fetchPlayerList () {
return fetch("http://localhost:8088/players") return fetch("http://localhost:8088/players")
.then(r => r.json()) .then(r => r.json())
@@ -19,15 +19,16 @@ const Api = {
}, },
putClaim (playerId, itemId) { putClaim (playerId, itemId) {
console.log('newRequest from', playerId, 'on', itemId); console.log('newRequest from', playerId, 'on', itemId);
return true; return Promise.resolve(true);
}, },
unClaim (playerId, itemId) { unClaim (playerId, itemId) {
console.log('cancelRequest of', playerId, 'on', itemId); console.log('cancelRequest of', playerId, 'on', itemId);
return true; return Promise.resolve(true);
}, },
updateWealth (playerId, goldValue) { updateWealth (playerId, goldValue) {
console.log('Update wealth', goldValue); return fetch("http://localhost:8088/update-wealth/" + playerId + "/" + goldValue)
return true; .then(r => r.json())
.catch(e => console.error("Fetch error", e));
} }
}; };
@@ -92,21 +93,35 @@ 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
}, },
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. // Put a claim on an item from group chest.
putRequest (itemId) { putRequest (itemId) {
const playerId = this.state.player_id const playerId = this.state.player_id
const done = Api.putClaim(playerId, itemId); Api.putClaim(playerId, itemId)
.then(done => {
if (done) { if (done) {
// Update cliend-side state // Update cliend-side state
this.state.requests[playerId].push(itemId); this.state.requests[playerId].push(itemId);
} else { } else {
if (this.debug) console.log("API responded with 'false'") if (this.debug) console.log("API responded with 'false'")
} }
});
}, },
// Withdraws a claim. // Withdraws a claim.
cancelRequest(itemId) { cancelRequest(itemId) {
const playerId = this.state.player_id const playerId = this.state.player_id
const done = Api.unClaim(playerId, itemId); Api.unClaim(playerId, itemId)
.then(done => {
if (done) { if (done) {
var idx = this.state.requests[playerId].indexOf(itemId); var idx = this.state.requests[playerId].indexOf(itemId);
if (idx > -1) { if (idx > -1) {
@@ -117,6 +132,7 @@ export const AppStorage = {
} else { } else {
if (this.debug) console.log("API responded with 'false'") if (this.debug) console.log("API responded with 'false'")
} }
});
} }
} }

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

@@ -27,25 +27,22 @@
</header> </header>
<div class="card-content"> <div class="card-content">
<Wealth :wealth="wealth" <Wealth :wealth="wealth"
:edit="edit_wealth" @updated="console.log('updated wealth')">
@updated="edit_wealth = !edit_wealth">
</Wealth> </Wealth>
<p class="notification is-warning" v-show="!playerIsGroup">Dette : {{ player.debt }}gp</p> <p class="notification is-warning" v-show="!playerIsGroup">Dette : {{ player.debt }}gp</p>
</div>
<footer class="card-footer">
<a @click="switchPlayerChestVisibility" v-show="!playerIsGroup" <a @click="switchPlayerChestVisibility" v-show="!playerIsGroup"
href="#" class="card-footer-item is-dark"> href="#" class="button is-link is-fullwidth">
Coffre Coffre
</a> </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>
<div class="card" v-show="state.show_player_chest" style="margin-top: 1em;"> </div>
<div class="card" v-show="state.show_player_chest">
<div class="card-content"> <div class="card-content">
<Chest :player="state.player_id"></Chest> <Chest :player="state.player_id"></Chest>
</div> </div>
</div> </div>
<a href="#" class="button is-link is-fullwidth" disabled>Historique</a>
</div> </div>
</template> </template>
@@ -86,7 +83,11 @@
return this.state.player_list[idx]; return this.state.player_list[idx];
}, },
wealth () { 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 // Check if the active player is the special 'Group' player
playerIsGroup () { playerIsGroup () {

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

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