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

Compare commits

base: rust:3b1ad574cd2f071c32d10c5029815019bbcd71c9
Branches Tags
rust:master rust:keep_track_of_all_loot rust:refactor_user_action_as_trait
...
compare: rust:ef9124cc7443707e2f43bb12da464f14c9968606
Branches Tags
rust:keep_track_of_all_loot rust:master rust:refactor_user_action_as_trait

2 Commits
3b1ad574cd ... ef9124cc74

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

108
lootalot_front/public/css/scroll.css
View File

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

2
lootalot_front/sass/scroll.scss
View File

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

57
lootalot_front/src/App.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<main id="app" class="container is-fluid"> <main id="app" class="section">
<section id="content" class="columns is-desktop"> <section id="content" class="columns is-desktop">
<Player></Player> <Player></Player>
<div class="column"> <div class="column">
@@ -12,47 +12,7 @@
<script> <script>
import Player from './components/Player.vue' import Player from './components/Player.vue'
import Chest from './components/Chest.vue' import Chest from './components/Chest.vue'
import { AppStorage } from './AppStorage'
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")
}
}
}
function getCookie(cname) { function getCookie(cname) {
var name = cname + "="; var name = cname + "=";
@@ -76,15 +36,16 @@ export default {
Player, Player,
Chest Chest
}, },
created () { beforeCreate () {
const cookie = getCookie("player_id"); const cookie = getCookie("player_id");
let playerId;
if (cookie == "") { if (cookie == "") {
return; playerId = 0;
} else { } else {
var newPlayerId = Number(cookie); playerId = Number(cookie);
console.log("initiated with id", newPlayerId);
store.setActivePlayer(newPlayerId);
} }
AppStorage.initStorage(playerId);
return;
} }
} }
</script> </script>
@@ -95,7 +56,5 @@ export default {
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
text-align: center; text-align: center;
color: #2c3e50;
margin-top: 60px;
} }
</style> </style>

57
lootalot_front/src/AppStorage.js Normal file
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")
}
}
}

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

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

8
lootalot_front/src/components/Loot.vue
View File

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

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

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

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

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