lootalot/lootalot_front/src/components/Player.vue

<template>
  <div class="column is-one-third-desktop">
    <div id="sidebar" class="card">
      <header id="sidebar-heading" class="card-header">
        <p class="card-header-title">{{ name }}</p>
        <div class="dropdown is-right" 
            :class="{ 'is-active': show_dropdown }">
          <div class="dropdown-trigger" ref="dropdown_btn">
            <a id="change_player" class="card-header-icon"
               @click="show_dropdown = !show_dropdown"
               aria-haspopup="true" aria-controls="dropdown-menu">
              <span class="icon is-small">
                <i class="fas fa-exchange-alt"></i>
              </span>
            </a>
          </div>
          <div class="dropdown-menu" id="dropdown-menu" role="menu"
            v-closable="{ exclude: ['dropdown_btn'], handler: 'closeDropdown', visible: show_dropdown }">
            <div class="dropdown-content">
              <a v-for="(p,i) in state.player_list" :key="i"
                 @click="setActivePlayer(i)" 
                 href="#" class="dropdown-item">
                {{ p.name }}</a>
            </div>
          </div>
        </div>
      </header>
      <div class="card-content">
        <Wealth :wealth="player.wealth" 
                :edit="edit_wealth" 
                @updated="edit_wealth = !edit_wealth">
        </Wealth>
        <p class="notification is-warning" v-show="!playerIsGroup">Dette : {{ player.debt }}gp</p>
      </div>
      <footer class="card-footer">
        <a @click="switchPlayerChestVisibility" v-show="!playerIsGroup" 
           href="#" class="card-footer-item is-dark">
          Coffre
        </a>
        <a @click="edit_wealth = !edit_wealth" href="#" class="card-footer-item">Argent</a>
        <a href="#" class="card-footer-item disabled">Historique</a>
      </footer>
    </div>
    <div class="card" v-show="state.show_player_chest" style="margin-top: 1em;">
      <div class="card-content">
        <Chest :player="state.player_id"></Chest>
      </div>
    </div>
  </div>
</template>

<script>
    import { AppStorage } from '../AppStorage'
    import Chest from './Chest.vue'
    import Wealth from './Wealth.vue'
    /*
    The Player control board.
    To test :
        - Player name is displayed
        - Player's wealth is displayed -> Inside Wealth component
        - Dropdown:
            - The first item is the group
            - Opened by activator
            - Closed when clicked outside
            - Click on item does switch active player
        - Switch player :
            - Name is updated when player_id is updated
            - Wealth is updated -> Inside Wealth component
        - Chest button controls Chest visibility
            
    */
    let handleOutsideClick;
    export default {
        components: { Chest, Wealth },
        data () {
            return {
                state: AppStorage.state,
                show_dropdown: false,
                edit_wealth: false,
                handleOutsideClick: null,
            };
        },
        computed: {
            player () {
                const id = this.state.player_id;
                const idx = this.state.player_list.findIndex(p => p.id == id);
                return this.state.player_list[idx];
            },
            name () {
                return this.player.name;
            },
            // Check if the active player is the special 'Group' player
            playerIsGroup () {
                return this.state.player_id == 0;
            }
        },
        methods: {
            switchPlayerChestVisibility () {
                AppStorage.switchPlayerChestVisibility();
            },
            hidePlayerChest () {
                if (this.state.show_player_chest) {
                    this.switchPlayerChestVisibility();
                }
            },
            setActivePlayer (playerIdx) {
                const newId = this.state.player_list[playerIdx].id;
                AppStorage.setActivePlayer(newId);
                if (newId == 0) { this.hidePlayerChest() }
                this.player.name = this.state.player_list[playerIdx].name
            },
            closeDropdown () {
                this.show_dropdown = false
            }
        },
        directives: {
            'closable': {
                bind: function(el, binding, vnode) { 
                    handleOutsideClick = (e) => {
                        e.stopPropagation();
                        const { exclude, handler } = binding.value;
                        let excludedElClicked = false;
                        exclude.forEach(refName => {
                            if (!excludedElClicked) {
                                const elt = vnode.context.$refs[refName];
                                excludedElClicked = elt.contains(e.target);
                            }
                        });
                    
                        if (!excludedElClicked) {
                            console.log('outsideCloseDropdown');
                            vnode.context[handler]()
                        }
                    };
                },
                // Bind custom handler only when dropdown is visible
                update: function(el, binding, vnode, _) {
                    const { visible } = binding.value;
                    if (visible) {
                        document.addEventListener('click', handleOutsideClick);
                        document.addEventListener('touchstart', handleOutsideClick);
                    } else {
                        document.removeEventListener('click', handleOutsideClick);
                        document.removeEventListener('touchstart', handleOutsideClick);
                    }
                },
                unbind: function() { console.log("unbind"); 
                    document.removeEventListener('click', handleOutsideClick);
                    document.removeEventListener('touchstart', handleOutsideClick);
                }
            }
        }
    }
</script>

<style scoped>
</style>