moves shared store inside AppStorage.js

lootalot_front/src/App.vue

@@ -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'
-
+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) {
   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);
+        playerId = Number(cookie);
-        console.log("initiated with id", newPlayerId); 
-        store.setActivePlayer(newPlayerId);
     }
+    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>

lootalot_front/src/AppStorage.js

@@ -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")
+        }
+    }
+}
+

lootalot_front/src/components/Chest.vue

@@ -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 },

lootalot_front/src/components/Player.vue

@@ -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
             },

lootalot_front/src/components/Request.vue

@@ -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