lootalot/lootalot_front/src/AppStorage.js

import Vue from 'vue'

const API_BASEURL = "http://localhost:8088/api/"
const API_ENDPOINT = function (tailString) {
  return API_BASEURL + tailString;
}

export const Api = {
  __doFetch (endpoint, method, payload) {
    return fetch(API_ENDPOINT(endpoint),
        {
            method,
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify(payload)
        })
        .then(r => r.json())
  },
  fetchPlayerList () {
      return fetch(API_ENDPOINT("players/all"))
          .then(r => r.json())
  },
  fetchInventory () {
      return fetch(API_ENDPOINT("items"))
          .then(r => r.json())
  },
  fetchClaims () {
      return fetch(API_ENDPOINT("claims"))
          .then(r => r.json())
  },
  fetchLoot (playerId) {
      return fetch(API_ENDPOINT("players/loot/" + playerId))
       	  .then(r => r.json())
  },
  putClaim (player_id, item_id) {
      const payload = { player_id, item_id };
      return this.__doFetch("claims", 'PUT', payload);
  },
  unClaim (player_id, item_id) {
       const payload = { player_id, item_id };
       return this.__doFetch("claims", 'DELETE', payload);
  },
  updateWealth (player_id, value_in_gp) {
      const payload = { player_id, value_in_gp: Number(value_in_gp) };
      return this.__doFetch("players/update-wealth", 'PUT', payload);
  },
  buyItems (player_id, items) {
      const payload = { player_id, items };
      return this.__doFetch("players/buy", 'POST', payload);
  },
  sellItems (player_id, items) {
      const payload = { player_id, items };
      return this.__doFetch("players/sell", 'POST', payload);

  },
};


export const AppStorage = {
    debug: true,
    state: {
        player_id: 0,
        player_list: {},
        group_loot: [],
        player_claims: {},
        inventory: [],
        initiated: false,
        show_player_chest: false,
    },
    // Initiate the state
    initStorage (playerId) {
        if (this.debug) console.log('Initiates with player : ', playerId)
        this.state.player_id = playerId;
        // Fetch initial data
        return Promise
            .all([ 
                Api.fetchPlayerList(), 
                Api.fetchClaims(), 
                Api.fetchInventory(),
                Api.fetchLoot(0)
            ])
            .then(data => {
                const [players, claims, inventory, group_loot] = data;
                this.__initPlayerList(players);
                this.__initClaimsStore(claims);
                Vue.set(this.state, 'group_loot', group_loot);
                Vue.set(this.state, 'inventory', inventory);
            })
            .then(_ => this.state.initiated = true)
            .catch(e => { alert(e); this.state.initiated = false });
    },
    __initClaimsStore(data) {
      for (var idx in data) {
        var claimDesc = data[idx];
        this.state.player_claims[claimDesc.player_id].push(claimDesc.loot_id);
      }
    },
    __initPlayerList(data) {
        for (var idx in data) {
          var playerDesc = data[idx];
          const playerId = Number(playerDesc.id);
          if (this.debug) console.log("Creates", playerId, playerDesc.name)
          // Initiate data for a single Player.
          Vue.set(this.state.player_list, playerId, playerDesc);
          Vue.set(this.state.player_claims, playerId, []);
        }
    },
    // User actions
    // Sets a new active player by id
    setActivePlayer (newPlayerId) {
        if (this.debug) console.log('setActivePlayer to ', newPlayerId)
        this.state.player_id = Number(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
    },
    // TODO
    // get the content of a player Chest, retrieve form cache or fetched
    // will replace hack that loads *all* chest...
    getPlayerLoot (playerId) {

    },
    updatePlayerWealth (goldValue) {
        return Api.updateWealth(this.state.player_id, goldValue)
          .then(diff => this.__updatePlayerWealth(diff));
    },
    // TODO: Weird private name denotes a conflict
    __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].sp += diff[1];
              this.state.player_list[this.state.player_id].gp += diff[2];
              this.state.player_list[this.state.player_id].pp += diff[3];
    },
    // Put a claim on an item from group chest.
    putRequest (itemId) {
        const playerId = this.state.player_id
        return Api.putClaim(playerId, itemId)
           .then(done => {
              // Update cliend-side state
              this.state.player_claims[playerId].push(itemId);
           });
    },
    buyItems (items) {
        return Api.buyItems(this.state.player_id, items)
            .then(diff => this.__updatePlayerWealth(diff))
            .then(() => {
                // Add items to the player loot
                console.log(items);
            });
    },
    sellItems (items) {
        return Api.sellItems(this.state.player_id, items)
            .then(diff => this.__updatePlayerWealth(diff))
            .then(() => {
                // Remove items from player chest
                console.log(items);
            });
    },
    // Withdraws a claim.
    cancelRequest(itemId) {
        const playerId = this.state.player_id
        return Api.unClaim(playerId, itemId)
          .then(done => {
                var idx = this.state.player_claims[playerId].indexOf(itemId);
                if (idx > -1) {
                    this.state.player_claims[playerId].splice(idx, 1);
                } else {
                    if (this.debug) console.log("cancel a non-existent request")
                }
          });
    }
}