lootalot/lootalot_front/src/components/Chest.vue

<template>
  <div class="container is-paddingless">
    <div v-if="mainControlsDisplayed" 
         class="columns is-mobile is-vcentered"
      >
      <div class="column is-narrow">
        <span class="icon is-large">
          <i class="fas fa-2x fa-dragon"></i>
          </span>
        </div>
      <div class="column has-text-left">
        <h1 class="title">Coffre de groupe</h1>
        </div>
      <div class="column" v-show="canAdd">
        <div v-show="mainControlsDisplayed" class="buttons is-right">
          <button v-if="canAdd" 
            class="button is-inverted is-info"
            @click="is_adding = true"
            >
            <span class="icon">
              <i class="fas fa-box-open"></i>
            </span>
            <p>Nouveau loot</p>
            </button>
          <button class="button is-inverted is-primary">
            <span class="icon">
              <i class="fas fa-coins"></i>
              </span>
            <p>Tout vendre</p>
            </button>
          </div>
        </div>
      </div>
    <Loot v-if="is_adding" @done="is_adding = false"></Loot>
    <table v-else class="table is-fullwidth is-striped" >
      <thead>
        <tr>
          <th>Objets de {{ player }}</th>
          <th v-if="canGrab"></th>
          <th v-if="canSell">
            <div class="buttons is-right">
              <button class="button" 
                  :class="is_selling ? 'is-danger' :  'is-warning'"
                  @click="is_selling = !is_selling"
                >
                <span class="icon">
                  <i class="fas fa-coins"></i>
                </span>
                <p v-if="!is_selling">
                  Vendre</p>
                <p v-else>
                  {{ totalSellValue ? totalSellValue : 'Annuler' }}</p>
                </button>
                <PercentInput v-show="is_selling">
                  </PercentInput>
              </div>
            </th>
          </tr>
        </thead>
      <tbody>
        <template v-for="(item, idx) in content">
          <tr :key="`row-${idx}`">
            <td>{{item.name}}</td>
            <td v-if="canGrab">
              <Request :item="item.id"></Request>
              </td>
            <td v-if="canSell">
              <div class="field is-grouped is-pulled-right" v-show="is_selling">
                <div class="control">
                  <label class="label">
                    <input type="checkbox" 
                        id="`item-${idx}`" 
                        :value="item.id"
                        v-model="sell_selected">
                      {{item.sell_value}} GP
                    </label>
                  </div>
                <PercentInput></PercentInput>
                </div>
              </td>
            </tr>
          </template>
        </tbody>
      </table>
    </div>
</template>

<script>
    import { AppStorage } from '../AppStorage'
    import Request from './Request.vue'
    import PercentInput from './PercentInput.vue'
    import Loot from './Loot.vue'
    /*
        The chest displays the collection of items owned by a player

        TO TEST :
            - Possible interactions depends on player_id and current chest
            - Objects are displayed as a table

        Sell workflow :
            1. Click sell (sell becomes danger)
            2. Check objects to sell (sell button displays total value)
            3. Click sell to confirm
    */
    export default {
        props: {
            player: {
                type: Number,
                required: true,
                default: 0
            }
        },
        components: {
            Request,
            PercentInput,
            Loot,
        },
        data () {
            return {
                app_state: AppStorage.state,
                content: [],
                is_selling: false,
                is_adding: false,
                sell_selected: [],
            };
        },
        methods: {
       	    fetchLoot () {
       	   	fetch(`http://localhost:8088/loot/${this.player}`)
       	   	    .then(r => r.json())
       	   	    .then(data => {
       	   	    	data.forEach(item => this.content.push(item));
       	   	    })
       	   	    .then(_ => console.log("Loot loaded !"))
       	    }
        },
        computed: {
            // Can the active user sell items from this chest ?
            canSell () {
                return this.player == this.app_state.player_id;
            },
            totalSellValue () {
                const selected = this.sell_selected;
                var value = this.content
                    .filter(item => selected.includes(item.id))
                    .map(item => item.sell_value)
                    .reduce((total,value) => total + value, 0);

                return value;
            },
            // Can the user grab items from this chest ?
            canGrab () {
                return (this.app_state.player_id != 0  // User is not the group
                     && this.player == 0);  // This is the group chest
            },
            canAdd () {
                return (this.app_state.player_id == 0 
                    && this.player == 0);
            },
            // The main controls are only displayed on group chest
            mainControlsDisplayed () {
                return (this.player == 0 
                     && !this.is_adding);
            }
        },
        mounted () {
	    this.fetchLoot();
        }
    }
</script>

<style scoped>
    .table td, .table th { vertical-align: middle; }
</style>