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

redraws frontend UI

Browse Source
This commit is contained in:
Arthur Gerbaud
2019-07-28 15:56:19 +02:00
parent d280d0f095
commit a3eaeed807
12 changed files with 151 additions and 15350 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
.gitignore vendored
View File

@@ -1,11 +1,10 @@
/target /target
**/*.rs.bk **/*.rs.bk
node_modules
fontawesome
package-lock.json
Cargo.lock Cargo.lock
**/*.sqlite3 **/*.sqlite3
**/.env **/.env
package-lock.json
fontawesome

BIN
lootalot_db/db.sqlite3
View File

Binary file not shown.

1
lootalot_front/babel.config.js
View File

@@ -2,7 +2,6 @@ module.exports = {
presets: [ presets: [
'@vue/app' '@vue/app'
], ],
"presets": [["env", { "modules": false }]],
"env": { "env": {
"test": { "test": {
"presets": [["env", { "targets": { "node": "current" } }]] "presets": [["env", { "targets": { "node": "current" } }]]

15047
lootalot_front/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

1
lootalot_front/package.json
View File

@@ -21,6 +21,7 @@
"@vue/cli-plugin-eslint": "^3.8.0", "@vue/cli-plugin-eslint": "^3.8.0",
"@vue/cli-service": "^3.8.0", "@vue/cli-service": "^3.8.0",
"@vue/test-utils": "^1.0.0-beta.29", "@vue/test-utils": "^1.0.0-beta.29",
"babel-core": "^6.26.3",
"babel-eslint": "^10.0.1", "babel-eslint": "^10.0.1",
"babel-jest": "^24.8.0", "babel-jest": "^24.8.0",
"babel-preset-env": "^1.7.0", "babel-preset-env": "^1.7.0",

7
lootalot_front/src/App.vue
View File

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

19
lootalot_front/src/AppStorage.js
View File

@@ -116,17 +116,14 @@ export const AppStorage = {
}, },
updatePlayerWealth (goldValue) { updatePlayerWealth (goldValue) {
return Api.updateWealth(this.state.player_id, goldValue) return Api.updateWealth(this.state.player_id, goldValue)
.then(done => { .then(response => {
if (done.executed) {
// Update player wealth // Update player wealth
var diff = done.response; var diff = response;
if (this.debug) console.log('updatePlayerWealth', diff) if (this.debug) console.log('updatePlayerWealth', diff)
this.state.player_list[this.state.player_id].cp += diff[0]; this.state.player_list[this.state.player_id].cp += diff[0];
this.state.player_list[this.state.player_id].sp += diff[1]; this.state.player_list[this.state.player_id].sp += diff[1];
this.state.player_list[this.state.player_id].gp += diff[2]; this.state.player_list[this.state.player_id].gp += diff[2];
this.state.player_list[this.state.player_id].pp += diff[3]; this.state.player_list[this.state.player_id].pp += diff[3];
}
return done.executed;
}); });
}, },
// Put a claim on an item from group chest. // Put a claim on an item from group chest.
@@ -134,12 +131,8 @@ export const AppStorage = {
const playerId = this.state.player_id const playerId = this.state.player_id
Api.putClaim(playerId, itemId) Api.putClaim(playerId, itemId)
.then(done => { .then(done => {
if (done.executed) { // Update cliend-side state
// Update cliend-side state this.state.player_claims[playerId].push(itemId);
this.state.player_claims[playerId].push(itemId);
} else {
if (this.debug) console.log("API responded with 'false'")
}
}); });
}, },
// Withdraws a claim. // Withdraws a claim.
@@ -147,16 +140,12 @@ export const AppStorage = {
const playerId = this.state.player_id const playerId = this.state.player_id
Api.unClaim(playerId, itemId) Api.unClaim(playerId, itemId)
.then(done => { .then(done => {
if (done.executed) {
var idx = this.state.player_claims[playerId].indexOf(itemId); var idx = this.state.player_claims[playerId].indexOf(itemId);
if (idx > -1) { if (idx > -1) {
this.state.player_claims[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")
} }
} else {
if (this.debug) console.log("API responded with 'false'")
}
}); });
} }
} }

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

@@ -1,88 +1,50 @@
<template> <template>
<div class="container is-paddingless"> <table class="table is-fullwidth is-striped">
<div v-if="mainControlsDisplayed" <thead>
class="columns is-mobile is-vcentered" <tr>
> <th>{{ player == 0 ? 'Coffre de groupe' : 'Objets'}}</th>
<div class="column is-narrow"> <th v-if="canGrab"></th>
<span class="icon is-large"> <th v-if="canSell">
<i class="fas fa-2x fa-dragon"></i> <div class="buttons is-right">
</span> <button class="button" :class="is_selling ? 'is-danger' : 'is-warning'"
</div> @click="is_selling = !is_selling">
<div class="column has-text-left"> <span class="icon"><i class="fas fa-coins"></i></span>
<h1 class="title">Coffre de groupe</h1> <p v-if="!is_selling">Vendre</p>
</div> <p v-else>{{ totalSellValue ? totalSellValue : 'Annuler' }}</p>
<div class="column" v-show="canAdd">
<div v-show="mainControlsDisplayed" class="buttons is-right">
<button v-if="canAdd"
class="button is-inverted is-info"
@click="is_adding = true"
>
<span class="icon">
<i class="fas fa-box-open"></i>
</span>
<p>Nouveau loot</p>
</button>
<button class="button is-inverted is-primary">
<span class="icon">
<i class="fas fa-coins"></i>
</span>
<p>Tout vendre</p>
</button> </button>
<PercentInput v-show="is_selling"></PercentInput>
</div> </div>
</div> </th>
</div> </tr>
<Loot v-if="is_adding" @done="is_adding = false"></Loot> </thead>
<table v-else class="table is-fullwidth is-striped" > <tbody v-if="app_state.initiated">
<thead> <template v-for="(item, idx) in content">
<tr> <tr :key="`row-${idx}`">
<th>Objets de {{ player }}</th> <td>
<th v-if="canGrab"></th> <strong>{{item.name}}</strong>
<th v-if="canSell"> </td>
<div class="buttons is-right"> <td v-if="canGrab">
<button class="button" <Request :item="item.id"></Request>
:class="is_selling ? 'is-danger' : 'is-warning'" </td>
@click="is_selling = !is_selling" <td v-if="canSell">
> <div class="field is-grouped is-pulled-right" v-show="is_selling">
<span class="icon"> <div class="control">
<i class="fas fa-coins"></i> <label class="label">
</span> <input type="checkbox"
<p v-if="!is_selling"> id="`item-${idx}`"
Vendre</p> :value="item.id"
<p v-else> v-model="sell_selected">
{{ totalSellValue ? totalSellValue : 'Annuler' }}</p> {{item.base_price / 2}} GP
</button> </label>
<PercentInput v-show="is_selling">
</PercentInput>
</div> </div>
</th> <PercentInput></PercentInput>
</tr> </div>
</thead> </td>
<tbody> </tr>
<template v-for="(item, idx) in content"> </template>
<tr :key="`row-${idx}`"> </tbody>
<td>{{item.name}}</td> <p v-else>Loading...</p>
<td v-if="canGrab"> </table>
<Request :item="item.id"></Request>
</td>
<td v-if="canSell">
<div class="field is-grouped is-pulled-right" v-show="is_selling">
<div class="control">
<label class="label">
<input type="checkbox"
id="`item-${idx}`"
:value="item.id"
v-model="sell_selected">
{{item.base_price / 2}} GP
</label>
</div>
<PercentInput></PercentInput>
</div>
</td>
</tr>
</template>
</tbody>
</table>
</div>
</template> </template>
<script> <script>
@@ -154,11 +116,6 @@
return (this.app_state.player_id == 0 return (this.app_state.player_id == 0
&& this.player == 0); && this.player == 0);
}, },
// The main controls are only displayed on group chest
mainControlsDisplayed () {
return (this.player == 0
&& !this.is_adding);
}
}, },
} }
</script> </script>

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

@@ -1,27 +0,0 @@
<template>
<input type="text"
class="input"
:class="{'is-danger': has_error}"
:value="value"
@input="checkError"
></input>
</template>
<script>
export default {
props: ["value"],
data () {
return { has_error: false};
},
methods: {
checkError (ev) {
const newValue = ev.target.value;
this.has_error = isNaN(newValue);
this.$emit(
'input',
this.has_error ? 0 : Number(newValue)
);
}
},
}
</script>

30
lootalot_front/src/components/PercentInput.vue
View File

@@ -1,20 +1,18 @@
<template> <template>
<div class="field has-addons"> <div class="field has-addons">
<div v-show="is_opened" class="control has-icons-left"> <div v-show="is_opened" class="control has-icons-left">
<input class="input is-small" type="number" size="3" min=-50 max=50 step=5> <input class="input is-small" type="number" size="3" min=-50 max=50 step=5>
<span class="icon is-small is-left"> <span class="icon is-small is-left">
<i class="fas fa-percent"></i> <i class="fas fa-percent"></i>
</span> </span>
</div> </div>
<div class="control"> <div class="control">
<button class="button is-small is-outlined" <button class="button is-small is-outlined" @click="is_opened = !is_opened">
@click="is_opened = !is_opened" <small v-if="!is_opened">Mod.</small>
> <span v-else class="icon"><i class="fas fa-times-circle"></i></span>
<small v-if="!is_opened">Mod.</small> </button>
<span v-else class="icon"><i class="fas fa-times-circle"></i></span> </div>
</button> </div>
</div>
</div>
</template> </template>
<script> <script>

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

@@ -1,51 +1,45 @@
<template> <template>
<div class="column is-one-third-desktop"> <div class="">
<div id="sidebar" class="card"> <nav class="navbar is-info">
<header id="sidebar-heading" class="card-header"> <div class="navbar-brand">
<p class="card-header-title"> <p class="navbar-item is-size-4" @click="show_wealth = !show_wealth">{{ app_state.initiated ? player.name : "..." }}</p>
{{ app_state.initiated ? player.name : "..." }}</p> <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false">
<div class="dropdown is-right" <span aria-hidden="true"></span>
:class="{ 'is-active': show_dropdown }"> <span aria-hidden="true"></span>
<div class="dropdown-trigger" ref="dropdown_btn"> <span aria-hidden="true"></span>
<a id="change_player" class="card-header-icon" </a>
@click="show_dropdown = !show_dropdown" </div>
aria-haspopup="true" aria-controls="dropdown-menu"> <div id="menu" class="navbar-menu">
<span class="icon is-small"> <div class="navbar-start">
<i class="fas fa-exchange-alt"></i> <template v-if="playerIsGroup">
</span> <a class="navbar-item">Nouveau loot</a>
</a> </template>
</div> <template v-else>
<div class="dropdown-menu" id="dropdown-menu" role="menu" <a class="navbar-item" @click="switchPlayerChestVisibility">
v-closable="{ exclude: ['dropdown_btn'], handler: 'closeDropdown', visible: show_dropdown }"> {{ app_state.show_player_chest ? 'Coffre de groupe' : 'Mon coffre' }}</a>
<div class="dropdown-content" v-if="app_state.initiated"> <a class="navbar-item">Marchand</a>
<a v-for="(p,i) in app_state.player_list" :key="i" </template>
@click="setActivePlayer(i)" </div>
href="#" class="dropdown-item"> <div class="navbar-end">
{{ p.name }}</a> <div class="navbar-item has-dropdown is-hoverable">
</div> <a class="navbar-link">Autres</a>
</div> <div class="navbar-dropdown is-right">
</div> <a class="navbar-item">History of Loot</a>
</header> <hr class="navbar-divider">
<div class="card-content"> <div class="navbar-item heading">Changer</div>
<Wealth :wealth="wealth" :debt="player.debt"></Wealth> <a v-for="(p,i) in app_state.player_list" :key="i"
<div class="box is-shadowless" v-show="!playerIsGroup"> @click="setActivePlayer(i)"
<div class="columns is-vcentered" @click="switchPlayerChestVisibility"> href="#" class="navbar-item">
<div class="column is-one-fifth"> {{ p.name }}</a>
<span class="icon is-large"> </div>
<i class="fas fa-2x fa-box"></i>
</span>
</div>
<div class="column if-four-fifth has-text-left">
<p class="is-size-3">Coffre</p>
</div>
</div>
</div> </div>
<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>
</nav>
<section class="has-background-light" v-if="show_wealth">
<Wealth :wealth="wealth" :debt="player.debt"></Wealth>
</section>
<Chest :player="shownChest"></Chest>
</div> </div>
</template> </template>
@@ -75,9 +69,7 @@
data () { data () {
return { return {
app_state: AppStorage.state, app_state: AppStorage.state,
show_dropdown: false, show_wealth: true,
edit_wealth: false,
handleOutsideClick: null,
}; };
}, },
computed: { computed: {
@@ -100,6 +92,11 @@
// Check if the active player is the special 'Group' player // Check if the active player is the special 'Group' player
playerIsGroup () { playerIsGroup () {
return this.app_state.player_id == 0; return this.app_state.player_id == 0;
},
shownChest () {
return this.app_state.show_player_chest
? this.app_state.player_id
: 0;
} }
}, },
methods: { methods: {
@@ -120,43 +117,6 @@
this.show_dropdown = false this.show_dropdown = false
} }
}, },
directives: {
'closable': {
bind: function(el, binding, vnode) {
handleOutsideClick = (e) => {
e.stopPropagation();
const { exclude, handler } = binding.value;
let excludedElClicked = false;
exclude.forEach(refName => {
if (!excludedElClicked) {
const elt = vnode.context.$refs[refName];
excludedElClicked = elt.contains(e.target);
}
});
if (!excludedElClicked) {
console.log('outsideCloseDropdown');
vnode.context[handler]()
}
};
},
// Bind custom handler only when dropdown is visible
update: function(el, binding, vnode, _) {
const { visible } = binding.value;
if (visible) {
document.addEventListener('click', handleOutsideClick);
document.addEventListener('touchstart', handleOutsideClick);
} else {
document.removeEventListener('click', handleOutsideClick);
document.removeEventListener('touchstart', handleOutsideClick);
}
},
unbind: function() { console.log("unbind");
document.removeEventListener('click', handleOutsideClick);
document.removeEventListener('touchstart', handleOutsideClick);
}
}
}
} }
</script> </script>

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

@@ -1,57 +1,53 @@
<template> <template>
<div class="box is-shadowless"> <section class="level is-mobile">
<nav class="columns is-mobile is-multiline is-vcentered"> <div class="level-left">
<div class="column"> <div class="level-item">
<span class="icon is-large" <span class="icon is-large"
@click="edit = !edit"> @click="edit = !edit">
<i class="fas fa-2x fa-piggy-bank"></i> <i class="fas fa-2x fa-piggy-bank"></i>
</span> </span>
<p v-if="debt" class="has-text-danger">-{{ debt }}gp </p> </div>
</div> <template v-if="edit">
<div class="column has-text-info"> <div class="level-item">
<p class="heading">PP</p> <input type="number" step="0.01" v-model="edit_value"></input>
<p class="is-size-4">{{ wealth[3] }}</p> </div>
</div> <div class="level-item">
<div class="column has-text-warning"> <button class="button is-danger" @click="updateWealth()">
<p class="heading">PO</p> Modifier
<p class="is-size-4">{{ wealth[2] }}</p>
</div>
<div class="column has-text-grey">
<p class="heading">PA</p>
<p class="is-size-4">{{ wealth[1] }}</p>
</div>
<div class="column has-text-grey">
<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-mobile">
<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> </button>
</div> </div>
<div class="column is-2"> </template>
<button class="button is-outlined is-primary is-fullwidth" <template v-else>
@click="updateWealth('plus')"> <div class="level-item ">
<span class="icon"><i class="fas fa-2x fa-plus"></i></span> <p class="is-size-4">{{ wealth[3] }}</p>
</button> <p class="heading">PP</p>
</div> </div>
</nav> <div class="level-item ">
<p class="is-size-4">{{ wealth[2] }}</p>
<p class="heading">PO</p>
</div>
<div class="level-item ">
<p class="is-size-4">{{ wealth[1] }}</p>
<p class="heading">PA</p>
</div>
<div class="level-item ">
<p class="is-size-4">{{ wealth[0] }}</p>
<p class="heading">PC</p>
</div>
</template>
</div> </div>
</div> <div class="level-right" v-if="debt">
<div class="level-item">
<p class="heading is-size-4 has-text-danger">Dette: {{ debt }}gp </p>
</div>
</div>
</div>
</section>
</template> </template>
<script> <script>
import { AppStorage } from '../AppStorage.js' import { AppStorage } from '../AppStorage.js'
import NumberInput from './NumberInput.vue'
export default { export default {
components: { NumberInput },
props: ["wealth", "debt"], props: ["wealth", "debt"],
data () { data () {
return { return {
@@ -60,28 +56,9 @@
}; };
}, },
methods: { methods: {
updateWealth (op) { updateWealth () {
var goldValue; AppStorage.updatePlayerWealth(this.edit_value)
switch (op) { .then(_ => this.resetValues());
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 () { resetValues () {
this.edit = false; this.edit = false;