lootalot/lootalot_front/src/App.vue

<template>
  <PlayerView
    :id="state.player_id"
    v-slot="{ player, loot, notifications, actions }"
  >
    <main id="app" class="container">
      <header>
        <HeaderBar :app_state="state">
          <template v-slot:title>
            {{ player.name }}
          </template>
          <template v-slot:links>
            <a class="navbar-item">History of Loot</a>
            <template v-if="playerIsGroup">
              <hr class="navbar-divider">
              <div class="navbar-item heading">Admin</div>
              <a class="navbar-item">"Resolve claims"</a>
              <a class="navbar-item">"Add player"</a>
            </template>
            <hr class="navbar-divider">
            <div class="navbar-item heading">Changer</div>
            <a v-for="(p,i) in state.player_list" :key="i"
              @click="setActivePlayer(i)"
              href="#" class="navbar-item">
              {{ p.name }}</a>
          </template>
        </HeaderBar>
        <Wealth 
            :wealth="[player.cp, player.sp, player.gp, player.pp]" 
            :debt="player.debt"
            @update="actions.updateWealth"
        ></Wealth>
        <p v-show="notifications.length > 0">{{ notifications }}</p>
      </header>
      <nav>
        <div class="tabs is-centered is-boxed is-medium">
          <ul>
            <li :class="{ 'is-active': activeView == 'group' }">
              <a @click="switchView('group')">
                Coffre de groupe
              </a>
            </li>
            <li v-show="!playerIsGroup" :class="{ 'is-active': activeView == 'player' }">
              <a @click="switchView('player')">
                Mon coffre
              </a>
            </li>
            <li :class="{'is-active': activeView == 'adding' }">
              <a class="has-text-grey-light"
                 @click="switchView('adding')">
                + {{ playerIsGroup ? 'Nouveau Loot' : 'Acheter' }}
              </a>
            </li>
           </ul>
        </div>
      </nav>
      <main class="section">
        <template v-if="isAdding">
          <div v-if="playerIsGroup" class="box">
            <ItemInput v-if="playerIsGroup"
              :source="state.inventory"
              @addItem="item => pending_loot.push(item)"
            ></ItemInput>
            <button>Envoyer</button>
          </div>
          <AddingChest 
              :items="playerIsGroup ? pending_loot : state.inventory"
              :perms="playerIsGroup ? {} : { canBuy: true }"
              @buy="(data) => { switchView('player'); actions.buyItems(data); }">
          </AddingChest>
        </template>
        <Chest v-else 
            :items="showPlayerChest ? loot : state.group_loot"
            :perms="{ 
                canGrab: !(showPlayerChest || playerIsGroup), 
                canSell: showPlayerChest || playerIsGroup
            }"
            @sell="actions.sellItems"
            @claim="actions.putClaim"
            @unclaim="actions.withdrawClaim">
        </Chest>
      </main>
    </main>
  </PlayerView>
</template>

<script>
import PlayerView from './components/PlayerView.js'
import HeaderBar from './components/HeaderBar.vue'
import Wealth from './components/Wealth.vue'
import Chest from './components/Chest.vue'
import ItemInput from './components/ItemInput.vue'
import { AppStorage } from './AppStorage'

function getCookie(cname) {
  var name = cname + "=";
  var decodedCookie = decodeURIComponent(document.cookie);
  var ca = decodedCookie.split(';');
  for(var i = 0; i <ca.length; i++) {
    var c = ca[i];
    while (c.charAt(0) == ' ') {
      c = c.substring(1);
    }
    if (c.indexOf(name) == 0) {
      return c.substring(name.length, c.length);
    }
  }
  return "";
}

export default {
  name: 'app',
  data () {
      return {
        state: AppStorage.state,
        activeView: 'group',
        shopInventory: [{id: 1, name: "Item from shop #1", base_price: 2000}],
        pending_loot: [],
      };
  },
  components: {
    PlayerView,
    HeaderBar,
    'AddingChest': Chest, // Alias to prevent component re-use 
    Chest,
    Wealth,
    ItemInput,
  },
  created () {
    // Initiate with active player set to value found in cookie
    // or as group by default.
    const cookie = getCookie("player_id");
    let playerId;
    if (cookie == "") {
        playerId = 0;
    } else {
        playerId = Number(cookie);
    }
    AppStorage.initStorage(playerId);
  },
  methods: {
    setActivePlayer (idx) { 
        if (idx == 0) this.switchView('group');
        AppStorage.setActivePlayer(idx); 
    },
    switchView (viewId) {
        if (!['group', 'player', 'adding'].includes(viewId)) {
            console.error("Not a valid view ID :", viewId);
        }
        this.activeView = viewId;
    },
    switchPlayerChestVisibility () { AppStorage.switchPlayerChestVisibility(); },
  },
  computed: {
    showPlayerChest () { return this.activeView == 'player' },
    isAdding () { return this.activeView == 'adding' },
    playerIsGroup () { return this.state.player_id == 0 },
  }
}
</script>

<style scoped>
    header {
        padding-bottom: 1.5em;
    }
</style>