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

updates frontend to use DB api

Browse Source
This commit is contained in:
Arthur Gerbaud
2019-07-04 14:53:50 +02:00
parent 4e28eb4159
commit 503ebf7b6b
5 changed files with 103 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
lootalot_front/src/App.vue
View File

@@ -1,9 +1,9 @@
<template>
<main id="app" class="section">
<section id="content" class="columns is-desktop">
<Player v-if="fullyLoaded"></Player>
<Player v-if="state.initiated"></Player>
<div class="column">
<Chest :player="0" v-if="fullyLoaded"></Chest>
<Chest :player="0" v-if="state.initiated"></Chest>
</div>
</section>
</main>
@@ -32,14 +32,18 @@ function getCookie(cname) {
export default {
name: 'app',
data () { return {
fullyLoaded: false,
};},
data () {
return {
state: AppStorage.state,
};
},
components: {
Player,
Chest
},
created () {
// Initiate with active player set to value found in cookie
// or as group by default.
const cookie = getCookie("player_id");
let playerId;
if (cookie == "") {
@@ -47,8 +51,7 @@ export default {
} else {
playerId = Number(cookie);
}
AppStorage.initStorage(playerId)
.then(_ => this.fullyLoaded = true);
AppStorage.initStorage(playerId);
},
}
</script>

112
lootalot_front/src/AppStorage.js
View File

@@ -1,45 +1,84 @@
const PLAYER_LIST = [
{id: 0, name: "Groupe", wealth: [0,0,0,0], debt: 0},
{id: 1, name: "Lomion", wealth: [0,0,0,0], debt: 0},
{id: 4, name: "Oilosse", wealth: [0,0,0,0], debt: 0},
{id: 3, name: "Fefi", wealth: [0,0,0,0], debt: 0},
];
const __fetchPlayerList = function() {
return fetch("http://localhost:8088/players")
.then(r => r.json())
const Api = {
fetchPlayerList () {
return fetch("http://localhost:8088/players")
.then(r => r.json())
.catch(e => console.error("Fetch error ", e));
},
fetchClaims () {
return fetch("http://localhost:8088/claims")
.then(r => r.json())
.catch(e => console.error("Fetch error ", e));
},
fetchLoot (playerId) {
const url = "http://localhost:8088/loot/" + playerId;
return fetch(url)
.then(r => r.json())
.catch(e => console.error("Fetch error", e));
},
putClaim (playerId, itemId) {
console.log('newRequest from', playerId, 'on', itemId);
return true;
},
unClaim (playerId, itemId) {
console.log('cancelRequest of', playerId, 'on', itemId);
return true;
},
updateWealth (playerId, goldValue) {
console.log('Update wealth', goldValue);
return true;
}
};
export const AppStorage = {
debug: true,
state: {
player_id: 0,
player_list: [],
show_player_chest: false,
player_list: {},
player_loot: {},
requests: {},
initiated: false,
show_player_chest: false,
},
// Initiate the state
initStorage (playerId) {
if (this.debug) console.log('Initiate with player : ', playerId)
if (this.debug) console.log('Initiates with player : ', playerId)
this.state.player_id = playerId;
return Promise.all([
fetch("http://localhost:8088/players")
.then(r => r.json()),
])
.then(data => {
console.log("initiate ", data);
this.initPlayerList(data[0]);
})
.catch(e => console.log("Fetch error ", e));
// Fetch initial data
return Promise
.all([ Api.fetchPlayerList(), Api.fetchClaims(), ])
.then(data => {
const [players, claims] = data;
this.initPlayerList(players);
console.log("claims", claims);
});
},
initPlayerList(data) {
for (var idx in data) {
var p = data[idx];
this.state.player_list.push(p);
this.state.requests[p.id] = [5,];
var playerDesc = data[idx];
const playerId = Number(playerDesc.id);
if (this.debug) console.log("Creates", playerId, playerDesc.name)
this.state.player_list[playerId] = playerDesc;
this.state.player_loot[playerId] = [];
this.state.requests[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);
},
// Player actions
// Sets a new active player by id
@@ -56,18 +95,27 @@ export const AppStorage = {
// Put a claim on an item from group chest.
putRequest (itemId) {
const playerId = this.state.player_id
if (this.debug) console.log('newRequest from', playerId, 'on', itemId)
this.state.requests[playerId].push(itemId);
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'")
}
},
// Withdraws a claim.
cancelRequest(itemId) {
const playerId = this.state.player_id
if (this.debug) console.log('cancelRequest of', playerId, 'on', itemId)
var idx = this.state.requests[playerId].indexOf(itemId);
if (idx > -1) {
this.state.requests[playerId].splice(idx, 1);
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("cancel a non-existent request")
if (this.debug) console.log("API responded with 'false'")
}
}
}

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

@@ -72,7 +72,7 @@
id="`item-${idx}`"
:value="item.id"
v-model="sell_selected">
{{item.sell_value}} GP
{{item.base_price / 2}} GP
</label>
</div>
<PercentInput></PercentInput>
@@ -118,7 +118,6 @@
data () {
return {
app_state: AppStorage.state,
content: [],
is_selling: false,
is_adding: false,
sell_selected: [],
@@ -126,27 +125,25 @@
},
methods: {
fetchLoot () {
fetch(`http://localhost:8088/loot/${this.player}`)
.then(r => r.json())
.then(data => {
data.forEach(item => this.content.push(item));
})
.then(_ => console.log("Loot loaded !"))
}
},
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 ?
canSell () {
return this.player == this.app_state.player_id;
},
totalSellValue () {
const selected = this.sell_selected;
var value = this.content
return this.content
.filter(item => selected.includes(item.id))
.map(item => item.sell_value)
.map(item => item.base_price / 2)
.reduce((total,value) => total + value, 0);
return value;
},
// Can the user grab items from this chest ?
canGrab () {
@@ -163,9 +160,6 @@
&& !this.is_adding);
}
},
mounted () {
this.fetchLoot();
}
}
</script>

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

@@ -82,8 +82,7 @@
},
computed: {
player () {
const id = this.state.player_id;
const idx = this.state.player_list.findIndex(p => p.id == id);
const idx = this.state.player_id;
return this.state.player_list[idx];
},
wealth () {
@@ -104,10 +103,9 @@
}
},
setActivePlayer (playerIdx) {
const newId = this.state.player_list[playerIdx].id;
AppStorage.setActivePlayer(newId);
if (newId == 0) { this.hidePlayerChest() }
this.player.name = this.state.player_list[playerIdx].name
var playerIdx = Number(playerIdx);
AppStorage.setActivePlayer(playerIdx);
if (playerIdx == 0) { this.hidePlayerChest() }
},
closeDropdown () {
this.show_dropdown = false

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

@@ -35,7 +35,6 @@
data () {
return {
state: AppStorage.state,
_requested: false, // Dummy state
};
},
computed: {