Vue

by joplomacedo

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<div id="app">
  <input v-model="fuseSearchStr" @keydown="handleKeyDown" />
  
  <div v-if="fuseSearchStr">
      <ol v-if="fuseResults">
        <li v-for="result in fuseResults">
          {{ result }}
        </li>
      </ol>
  </div>

  <ol v-else class="manual_select__box">
    
    <div class="manual_select__slide" v-if="!selectedHeroId">
      <li v-for="hero in heroes" @click="e => handleHeroSelectOptionClick(e,  hero.id)">
        {{ hero.name }}
      </li>
    </div>
    
    <div class="manual_select__slide" v-else>
      <div @click="handleBackToHeroSelectClick">
        &lt; Back
      </div>
      
      <div>
        <div v-for="deck in getDecksByHero(selectedHeroId)">
          {{deck.abbr}}
        </div>
      </div>
    </div>
  </ol>
</div>

CSS

*,
*:after,
*:before {
  padding: 0;
  margin: 0;
  border: 0;
  font: inherit;
}


.hero_list {

}

Vue

const heroes = [
    { 
    	id: 'warrior',
      name: 'Warrior',
    },
    { 
    	id: 'priest',
      name: 'Priest',
    },
    { 
    	id: 'hunter',
      name: 'Hunter',
    },
    { 
    	id: 'mage',
      name: 'Mage',
    },
    { 
    	id: 'paladin',
      name: 'Paladin',
    },
    { 
    	id: 'shaman',
      name: 'Shaman',
    },
    { 
    	id: 'druid',
      name: 'Druid',
    },
    { 
    	id: 'rogue',
      name: 'Rogue',
    },
    { 
    	id: 'demon_hunter',
      name: 'Demon Hunter',
    },
    { 
    	id: 'warlock',
      name: 'Warlock',
    }
];

const decks = [
  {
    name: 'Pirate',
    hero: 'warrior',
  },
  {
    name: 'Control',
    hero: 'warrior',
  },
  {
    name: 'Bomb',
    hero: 'warrior',
  },
  {
    name: 'Face',
    hero: 'hunter',
  },
  {
    name: 'Mid',
    hero: 'hunter',
  },
  {
    name: 'Secret',
    hero: 'rogue',
  },
  {
    name: 'Tempo',
    hero: 'rogue',
  },
  {
    name: 'Tempo',
    hero: 'mage',
  },
  {
    name: 'Secret',
    hero: 'mage',
  }
].map( (deck,i) => {
	const hero = getHeroById(deck.hero);
  
  return {
    ...deck,
    id: i,
    abbr: deck.name + ' ' + hero.name
  };
});

const lastPlayedUserDecks = decks.slice(0,3);
const lastPlayedOponnentsDecks = decks.slice(3,6);

function getHeroById(id) {
	return heroes.find(hero => hero.id  === id);
}

function getDecksByHero( heroId  ) {
	return decks.filter(deck => deck.hero  === heroId);
}

const options = {
  includeScore: true,
  keys: ['abbr']
}

const fuse = new Fuse(decks, options)

function createOption() {

}

Vue.component('deck-card', {
	data() {
    return {

    }
  }
});

new Vue({
  el: "#app",
  data: {
    decks,
    heroes,
    
    lastPlayedUserDecks,
    lastPlayedOponnentsDecks,
    
    fuseResults: [],
    fuseSearchStr: '',
    
    focusedOption: undefined,
    selectedOption: undefined,
    
    selectedHeroId: null,
    
    options: [],
    
    keyActionsMap: {
      Enter(e) {
				this.selectedOption =...