Compare commits

2 Commits

Author SHA1 Message Date
ef9124cc74 moves shared store inside AppStorage.js 2019-06-16 15:37:03 +02:00
d9b629116c small fixes 2019-06-16 14:33:26 +02:00
8 changed files with 136 additions and 116 deletions

View File

@@ -316,7 +316,7 @@ a {
code {
background-color: whitesmoke;
color: #ff3860;
color: #B7321B;
font-size: 0.875em;
font-weight: normal;
padding: 0.25em 0.5em 0.25em; }
@@ -756,13 +756,13 @@ a.has-text-warning:hover, a.has-text-warning:focus {
background-color: #ffdd57 !important; }
.has-text-danger {
color: #ff3860 !important; }
color: #B7321B !important; }
a.has-text-danger:hover, a.has-text-danger:focus {
color: #ff0537 !important; }
color: #8b2614 !important; }
.has-background-danger {
background-color: #ff3860 !important; }
background-color: #B7321B !important; }
.has-text-black-bis {
color: #121212 !important; }
@@ -1827,30 +1827,30 @@ a.box:active {
box-shadow: none;
color: rgba(0, 0, 0, 0.7); }
.button.is-danger {
background-color: #ff3860;
background-color: #B7321B;
border-color: transparent;
color: #fff; }
.button.is-danger:hover, .button.is-danger.is-hovered {
background-color: #ff2b56;
background-color: #ac2f19;
border-color: transparent;
color: #fff; }
.button.is-danger:focus, .button.is-danger.is-focused {
border-color: transparent;
color: #fff; }
.button.is-danger:focus:not(:active), .button.is-danger.is-focused:not(:active) {
box-shadow: 0 0 0 0.125em rgba(255, 56, 96, 0.25); }
box-shadow: 0 0 0 0.125em rgba(183, 50, 27, 0.25); }
.button.is-danger:active, .button.is-danger.is-active {
background-color: #ff1f4b;
background-color: #a12c18;
border-color: transparent;
color: #fff; }
.button.is-danger[disabled],
fieldset[disabled] .button.is-danger {
background-color: #ff3860;
background-color: #B7321B;
border-color: transparent;
box-shadow: none; }
.button.is-danger.is-inverted {
background-color: #fff;
color: #ff3860; }
color: #B7321B; }
.button.is-danger.is-inverted:hover, .button.is-danger.is-inverted.is-hovered {
background-color: #f2f2f2; }
.button.is-danger.is-inverted[disabled],
@@ -1858,36 +1858,36 @@ a.box:active {
background-color: #fff;
border-color: transparent;
box-shadow: none;
color: #ff3860; }
color: #B7321B; }
.button.is-danger.is-loading::after {
border-color: transparent transparent #fff #fff !important; }
.button.is-danger.is-outlined {
background-color: transparent;
border-color: #ff3860;
color: #ff3860; }
border-color: #B7321B;
color: #B7321B; }
.button.is-danger.is-outlined:hover, .button.is-danger.is-outlined.is-hovered, .button.is-danger.is-outlined:focus, .button.is-danger.is-outlined.is-focused {
background-color: #ff3860;
border-color: #ff3860;
background-color: #B7321B;
border-color: #B7321B;
color: #fff; }
.button.is-danger.is-outlined.is-loading::after {
border-color: transparent transparent #ff3860 #ff3860 !important; }
border-color: transparent transparent #B7321B #B7321B !important; }
.button.is-danger.is-outlined.is-loading:hover::after, .button.is-danger.is-outlined.is-loading.is-hovered::after, .button.is-danger.is-outlined.is-loading:focus::after, .button.is-danger.is-outlined.is-loading.is-focused::after {
border-color: transparent transparent #fff #fff !important; }
.button.is-danger.is-outlined[disabled],
fieldset[disabled] .button.is-danger.is-outlined {
background-color: transparent;
border-color: #ff3860;
border-color: #B7321B;
box-shadow: none;
color: #ff3860; }
color: #B7321B; }
.button.is-danger.is-inverted.is-outlined {
background-color: transparent;
border-color: #fff;
color: #fff; }
.button.is-danger.is-inverted.is-outlined:hover, .button.is-danger.is-inverted.is-outlined.is-hovered, .button.is-danger.is-inverted.is-outlined:focus, .button.is-danger.is-inverted.is-outlined.is-focused {
background-color: #fff;
color: #ff3860; }
color: #B7321B; }
.button.is-danger.is-inverted.is-outlined.is-loading:hover::after, .button.is-danger.is-inverted.is-outlined.is-loading.is-hovered::after, .button.is-danger.is-inverted.is-outlined.is-loading:focus::after, .button.is-danger.is-inverted.is-outlined.is-loading.is-focused::after {
border-color: transparent transparent #ff3860 #ff3860 !important; }
border-color: transparent transparent #B7321B #B7321B !important; }
.button.is-danger.is-inverted.is-outlined[disabled],
fieldset[disabled] .button.is-danger.is-inverted.is-outlined {
background-color: transparent;
@@ -2297,7 +2297,7 @@ a.box:active {
background-color: #ffdd57;
color: rgba(0, 0, 0, 0.7); }
.notification.is-danger {
background-color: #ff3860;
background-color: #B7321B;
color: #fff; }
.progress {
@@ -2392,13 +2392,13 @@ a.box:active {
.progress.is-warning:indeterminate {
background-image: linear-gradient(to right, #ffdd57 30%, #dbdbdb 30%); }
.progress.is-danger::-webkit-progress-value {
background-color: #ff3860; }
background-color: #B7321B; }
.progress.is-danger::-moz-progress-bar {
background-color: #ff3860; }
background-color: #B7321B; }
.progress.is-danger::-ms-fill {
background-color: #ff3860; }
background-color: #B7321B; }
.progress.is-danger:indeterminate {
background-image: linear-gradient(to right, #ff3860 30%, #dbdbdb 30%); }
background-image: linear-gradient(to right, #B7321B 30%, #dbdbdb 30%); }
.progress:indeterminate {
animation-duration: 1.5s;
animation-iteration-count: infinite;
@@ -2482,8 +2482,8 @@ a.box:active {
color: rgba(0, 0, 0, 0.7); }
.table td.is-danger,
.table th.is-danger {
background-color: #ff3860;
border-color: #ff3860;
background-color: #B7321B;
border-color: #B7321B;
color: #fff; }
.table td.is-narrow,
.table th.is-narrow {
@@ -2637,7 +2637,7 @@ a.box:active {
background-color: #ffdd57;
color: rgba(0, 0, 0, 0.7); }
.tag:not(body).is-danger {
background-color: #ff3860;
background-color: #B7321B;
color: #fff; }
.tag:not(body).is-normal {
font-size: 0.75rem; }
@@ -2879,9 +2879,9 @@ a.tag:hover {
.is-warning.input:focus, .is-warning.textarea:focus, .is-warning.is-focused.input, .is-warning.is-focused.textarea, .is-warning.input:active, .is-warning.textarea:active, .is-warning.is-active.input, .is-warning.is-active.textarea {
box-shadow: 0 0 0 0.125em rgba(255, 221, 87, 0.25); }
.is-danger.input, .is-danger.textarea {
border-color: #ff3860; }
border-color: #B7321B; }
.is-danger.input:focus, .is-danger.textarea:focus, .is-danger.is-focused.input, .is-danger.is-focused.textarea, .is-danger.input:active, .is-danger.textarea:active, .is-danger.is-active.input, .is-danger.is-active.textarea {
box-shadow: 0 0 0 0.125em rgba(255, 56, 96, 0.25); }
box-shadow: 0 0 0 0.125em rgba(183, 50, 27, 0.25); }
.is-small.input, .is-small.textarea {
border-radius: 2px;
font-size: 0.75rem; }
@@ -3047,13 +3047,13 @@ a.tag:hover {
.select.is-warning select:focus, .select.is-warning select.is-focused, .select.is-warning select:active, .select.is-warning select.is-active {
box-shadow: 0 0 0 0.125em rgba(255, 221, 87, 0.25); }
.select.is-danger:not(:hover)::after {
border-color: #ff3860; }
border-color: #B7321B; }
.select.is-danger select {
border-color: #ff3860; }
border-color: #B7321B; }
.select.is-danger select:hover, .select.is-danger select.is-hovered {
border-color: #ff1f4b; }
border-color: #a12c18; }
.select.is-danger select:focus, .select.is-danger select.is-focused, .select.is-danger select:active, .select.is-danger select.is-active {
box-shadow: 0 0 0 0.125em rgba(255, 56, 96, 0.25); }
box-shadow: 0 0 0 0.125em rgba(183, 50, 27, 0.25); }
.select.is-small {
border-radius: 2px;
font-size: 0.75rem; }
@@ -3230,19 +3230,19 @@ a.tag:hover {
border-color: transparent;
color: rgba(0, 0, 0, 0.7); }
.file.is-danger .file-cta {
background-color: #ff3860;
background-color: #B7321B;
border-color: transparent;
color: #fff; }
.file.is-danger:hover .file-cta, .file.is-danger.is-hovered .file-cta {
background-color: #ff2b56;
background-color: #ac2f19;
border-color: transparent;
color: #fff; }
.file.is-danger:focus .file-cta, .file.is-danger.is-focused .file-cta {
border-color: transparent;
box-shadow: 0 0 0.5em rgba(255, 56, 96, 0.25);
box-shadow: 0 0 0.5em rgba(183, 50, 27, 0.25);
color: #fff; }
.file.is-danger:active .file-cta, .file.is-danger.is-active .file-cta {
background-color: #ff1f4b;
background-color: #a12c18;
border-color: transparent;
color: #fff; }
.file.is-small {
@@ -3402,7 +3402,7 @@ a.tag:hover {
.help.is-warning {
color: #ffdd57; }
.help.is-danger {
color: #ff3860; }
color: #B7321B; }
.field:not(:last-child) {
margin-bottom: 0.75rem; }
@@ -4028,13 +4028,13 @@ a.list-item {
border-color: #ffdd57;
color: #3b3108; }
.message.is-danger {
background-color: #fff5f7; }
background-color: #fef7f6; }
.message.is-danger .message-header {
background-color: #ff3860;
background-color: #B7321B;
color: #fff; }
.message.is-danger .message-body {
border-color: #ff3860;
color: #cd0930; }
border-color: #B7321B;
color: #832717; }
.message-header {
align-items: center;
@@ -4560,7 +4560,7 @@ a.list-item {
background-color: #ffdd57;
color: rgba(0, 0, 0, 0.7); } }
.navbar.is-danger {
background-color: #ff3860;
background-color: #B7321B;
color: #fff; }
.navbar.is-danger .navbar-brand > .navbar-item,
.navbar.is-danger .navbar-brand .navbar-link {
@@ -4569,7 +4569,7 @@ a.list-item {
.navbar.is-danger .navbar-brand .navbar-link:focus,
.navbar.is-danger .navbar-brand .navbar-link:hover,
.navbar.is-danger .navbar-brand .navbar-link.is-active {
background-color: #ff1f4b;
background-color: #a12c18;
color: #fff; }
.navbar.is-danger .navbar-brand .navbar-link::after {
border-color: #fff; }
@@ -4591,7 +4591,7 @@ a.list-item {
.navbar.is-danger .navbar-end .navbar-link:focus,
.navbar.is-danger .navbar-end .navbar-link:hover,
.navbar.is-danger .navbar-end .navbar-link.is-active {
background-color: #ff1f4b;
background-color: #a12c18;
color: #fff; }
.navbar.is-danger .navbar-start .navbar-link::after,
.navbar.is-danger .navbar-end .navbar-link::after {
@@ -4599,10 +4599,10 @@ a.list-item {
.navbar.is-danger .navbar-item.has-dropdown:focus .navbar-link,
.navbar.is-danger .navbar-item.has-dropdown:hover .navbar-link,
.navbar.is-danger .navbar-item.has-dropdown.is-active .navbar-link {
background-color: #ff1f4b;
background-color: #a12c18;
color: #fff; }
.navbar.is-danger .navbar-dropdown a.navbar-item.is-active {
background-color: #ff3860;
background-color: #B7321B;
color: #fff; } }
.navbar > .container {
align-items: stretch;
@@ -6840,7 +6840,7 @@ label.panel-block {
.hero.is-warning.is-bold .navbar-menu {
background-image: linear-gradient(141deg, #ffaf24 0%, #ffdd57 71%, #fffa70 100%); } }
.hero.is-danger {
background-color: #ff3860;
background-color: #B7321B;
color: #fff; }
.hero.is-danger a:not(.button):not(.dropdown-item):not(.tag):not(.pagination-link.is-current),
.hero.is-danger strong {
@@ -6854,14 +6854,14 @@ label.panel-block {
color: #fff; }
@media screen and (max-width: 1023px) {
.hero.is-danger .navbar-menu {
background-color: #ff3860; } }
background-color: #B7321B; } }
.hero.is-danger .navbar-item,
.hero.is-danger .navbar-link {
color: rgba(255, 255, 255, 0.7); }
.hero.is-danger a.navbar-item:hover, .hero.is-danger a.navbar-item.is-active,
.hero.is-danger .navbar-link:hover,
.hero.is-danger .navbar-link.is-active {
background-color: #ff1f4b;
background-color: #a12c18;
color: #fff; }
.hero.is-danger .tabs a {
color: #fff;
@@ -6877,12 +6877,12 @@ label.panel-block {
.hero.is-danger .tabs.is-boxed li.is-active a, .hero.is-danger .tabs.is-boxed li.is-active a:hover, .hero.is-danger .tabs.is-toggle li.is-active a, .hero.is-danger .tabs.is-toggle li.is-active a:hover {
background-color: #fff;
border-color: #fff;
color: #ff3860; }
color: #B7321B; }
.hero.is-danger.is-bold {
background-image: linear-gradient(141deg, #ff0561 0%, #ff3860 71%, #ff5257 100%); }
background-image: linear-gradient(141deg, #930c0f 0%, #B7321B 71%, #d35318 100%); }
@media screen and (max-width: 768px) {
.hero.is-danger.is-bold .navbar-menu {
background-image: linear-gradient(141deg, #ff0561 0%, #ff3860 71%, #ff5257 100%); } }
background-image: linear-gradient(141deg, #930c0f 0%, #B7321B 71%, #d35318 100%); } }
.hero.is-small .hero-body {
padding-bottom: 1.5rem;
padding-top: 1.5rem; }

View File

@@ -4,12 +4,14 @@ $brown: #757763;
$beige: #C9AD6A;
$beige-light: #E0E5C1;
$beige-lighter: #EEE5CE;
$red: #B7321B;
$dark-red: #58180D;
$yellow-light: #FCF2C5;
$link: $brown;
$primary: $brown;
$info: $beige;
$danger: $red;
$table-cell-border: 1px solid $dark-red;
$table-striped-row-even-background-color: $yellow-light;

View File

@@ -1,5 +1,5 @@
<template>
<main id="app" class="container is-fluid">
<main id="app" class="section">
<section id="content" class="columns is-desktop">
<Player></Player>
<div class="column">
@@ -12,47 +12,7 @@
<script>
import Player from './components/Player.vue'
import Chest from './components/Chest.vue'
export const store = {
debug: true,
state: {
player_id: 0,
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},
],
show_player_chest: false,
requests: { // TEST: must be initialised with players ids
0: [], 1: [], 4: [], 3: []
},
},
setActivePlayer (newPlayerId) {
if (this.debug) console.log('setActivePlayer to ', newPlayerId)
this.state.player_id = newPlayerId
document.cookie = `player_id=${newPlayerId};`;
},
switchPlayerChestVisibility () {
if (this.debug) console.log('switchPlayerChestVisibility', !this.state.show_player_chest)
this.state.show_player_chest = !this.state.show_player_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);
},
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);
} else {
if (this.debug) console.log("cancel a non-existent request")
}
}
}
import { AppStorage } from './AppStorage'
function getCookie(cname) {
var name = cname + "=";
@@ -76,15 +36,16 @@ export default {
Player,
Chest
},
created () {
beforeCreate () {
const cookie = getCookie("player_id");
let playerId;
if (cookie == "") {
return;
playerId = 0;
} else {
var newPlayerId = Number(cookie);
console.log("initiated with id", newPlayerId);
store.setActivePlayer(newPlayerId);
playerId = Number(cookie);
}
AppStorage.initStorage(playerId);
return;
}
}
</script>
@@ -95,7 +56,5 @@ export default {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>

View File

@@ -0,0 +1,57 @@
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},
];
export const AppStorage = {
debug: true,
state: {
player_id: 0,
player_list: [],
show_player_chest: false,
requests: {},
},
// Initiate the state
initStorage (playerId) {
if (this.debug) console.log('Initiate with player : ', playerId)
this.state.player_id = playerId;
for (var idx in PLAYER_LIST) {
var player = PLAYER_LIST[idx];
this.state.player_list.push(player);
this.state.requests[player.id] = [];
}
},
// Player actions
// Sets a new active player by id
setActivePlayer (newPlayerId) {
if (this.debug) console.log('setActivePlayer to ', newPlayerId)
this.state.player_id = newPlayerId
document.cookie = `player_id=${newPlayerId};`;
},
// Show/Hide player's chest
switchPlayerChestVisibility () {
if (this.debug) console.log('switchPlayerChestVisibility', !this.state.show_player_chest)
this.state.show_player_chest = !this.state.show_player_chest
},
// 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);
},
// 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);
} else {
if (this.debug) console.log("cancel a non-existent request")
}
}
}

View File

@@ -86,7 +86,7 @@
</template>
<script>
import { store } from '../App.vue'
import { AppStorage } from '../AppStorage'
import Request from './Request.vue'
import PercentInput from './PercentInput.vue'
import Loot from './Loot.vue'
@@ -117,7 +117,7 @@
},
data () {
return {
app_state: store.state,
app_state: AppStorage.state,
content: [
{id: 10, name: "Épée longue +2 acérée",
sell_value: 15000 },

View File

@@ -1,5 +1,5 @@
<template>
<div class="card">
<div class="card is-shadowless">
<div class="card-header">
<p class="card-header-title">
Nouveau loot - {{ looted.length }} objet(s)</p>
@@ -12,8 +12,10 @@
</p>
</div>
<div class="card-footer">
<a class="card-footer-item">Confirmer</a>
<a @click="onClose" class="card-footer-item">Annuler</a>
<div class="card-footer-item buttons is-center">
<a class="button is-primary">Confirmer</a>
<a @click="onClose" class="button is-danger">Annuler</a>
</div>
</div>
</div>
</template>

View File

@@ -50,7 +50,7 @@
</template>
<script>
import { store } from '../App.vue'
import { AppStorage } from '../AppStorage'
import Chest from './Chest.vue'
import Wealth from './Wealth.vue'
/*
@@ -74,7 +74,7 @@
components: { Chest, Wealth },
data () {
return {
state: store.state,
state: AppStorage.state,
show_dropdown: false,
edit_wealth: false,
handleOutsideClick: null,
@@ -96,7 +96,7 @@
},
methods: {
switchPlayerChestVisibility () {
store.switchPlayerChestVisibility();
AppStorage.switchPlayerChestVisibility();
},
hidePlayerChest () {
if (this.state.show_player_chest) {
@@ -105,7 +105,7 @@
},
setActivePlayer (playerIdx) {
const newId = this.state.player_list[playerIdx].id;
store.setActivePlayer(newId);
AppStorage.setActivePlayer(newId);
if (newId == 0) { this.hidePlayerChest() }
this.player.name = this.state.player_list[playerIdx].name
},

View File

@@ -29,12 +29,12 @@
</template>
<script>
import { store } from '../App.vue'
import { AppStorage } from '../AppStorage'
export default {
props: ["item"],
data () {
return {
state: store.state,
state: AppStorage.state,
_requested: false, // Dummy state
};
},
@@ -66,11 +66,11 @@
methods: {
// The active player claims the item
putRequest () {
store.putRequest(this.item)
AppStorage.putRequest(this.item)
},
// The active player withdraws his request
cancelRequest () {
store.cancelRequest(this.item)
AppStorage.cancelRequest(this.item)
},
// The active player insist on his claim
// TODO: Find a simple and fun system to express