Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
352 lines (339 sloc) 29.9 KB
<template>
<div id="home">
<div class="container">
<div class="row py-4">
<div class="col-xl-6 col-12">
<span class="h2">Magic: The Gathering Card Search</span>
</div>
<div class="col-xl-6 col-12">
<div class="row">
<div class="col-xl-5 col-12 search-fields">
<v-select v-on:input="submitSearch()" label="name" :options="setList" :clearable="false" v-model="params.set" class="set-select">
<template slot="option" slot-scope="option">
<img class="set-select-img" :src="option.logo"/>
{{ option.name }}
</template>
<template slot="selected-option" slot-scope="option">
<img class="set-select-img vs__selected" :src="option.logo"/>
<span class="vs__selected">{{ option.name }}</span>
</template>
</v-select>
</div>
<div class="col-xl-3 col-6 search-fields">
<v-select v-on:input="submitSearch()" label="name" :options="colorList" :clearable="false" v-model="params.color" class="color-select">
<template slot="option" slot-scope="option">
<img class="color-select-img" :src="option.logo"/>
{{ option.name }}
</template>
<template slot="selected-option" slot-scope="option">
<img class="color-select-img vs__selected" :src="option.logo"/>
<span class="vs__selected">{{ option.name }}</span>
</template>
</v-select>
</div>
<!-- <div class="col-xl-1 col-3 text-center search-fields search-button">
<button type="button" class="btn btn-light" v-on:click="submitSearch()">Submit</button>
</div> -->
<div class="col-xl-4 col-6 search-fields by-name">
<v-select placeholder="Search name" @search="fetchOptions" v-on:input="searchByName()" :options="nameList" v-model="nameSelected" :clearable="false" class="name-search">
<div slot="no-options">Enter at least two letters</div>
<template slot="selected-option" slot-scope="option">
<span class="vs__selected">{{ option.label }}</span>
</template>
</v-select>
</div>
</div>
</div>
</div>
</div>
<div v-show="loading === false">
<div v-show="cards.length > 20">
<nav aria-label="page navigation">
<ul class="pagination justify-content-center">
<li class="page-item" :class="{ disabled : page === 0 }">
<a class="page-link" v-on:click="prevPage()">Previous</a>
</li>
<li class="page-item" :class="{ disabled : thisPage === page+1 }" v-for="thisPage in Math.ceil(cards.length/24)" :key="thisPage">
<a class="page-link" v-on:click="pageLink(thisPage)">
{{ thisPage }}
</a>
</li>
<li class="page-item" :class="{ disabled : (page+1)*24 >= cards.length }">
<a class="page-link" v-on:click="nextPage()">Next</a>
</li>
</ul>
</nav>
</div>
<div class="container">
<div v-if="cards.length > 1" class="row multi-card">
<div v-for="card in cards.slice(page*24, (page+1)*24)" :key="card.id" class="col-lg-2 col-md-4 col-sm-6 col-6 px-1">
<mtg-card :card="card"></mtg-card>
</div>
</div>
<div v-if="cards.length === 1" class="row single-card justify-content-center">
<div class="col-xl-2 col-lg-3 col-md-4 col-sm-10 col-10 px-1">
<mtg-card :card="cards[0]"></mtg-card>
</div>
</div>
</div>
<div v-show="cards.length > 20">
<nav aria-label="page navigation">
<ul class="pagination justify-content-center">
<li class="page-item" :class="{ disabled : page === 0 }">
<a class="page-link" v-on:click="prevPage()">Previous</a>
</li>
<li class="page-item" :class="{ disabled : thisPage === page+1 }" v-for="thisPage in Math.ceil(cards.length/24)" :key="thisPage">
<a class="page-link" v-on:click="pageLink(thisPage)">
{{ thisPage }}
</a>
</li>
<li class="page-item" :class="{ disabled : (page+1)*24 >= cards.length }">
<a class="page-link" v-on:click="nextPage()">Next</a>
</li>
</ul>
</nav>
</div>
</div>
<div class="container">
<div v-show="loading === true">Loading...</div>
</div>
</div>
</template>
<script>
// @ is an alias to /src
import mtgCard from '@/components/mtgCard.vue'
export default {
name: 'home',
components: {
'mtg-card': mtgCard
},
data () {
return {
cards: [],
page: 0,
pageLimit: 20,
params: {
color: null,
set: null
},
loading: true,
setList: [],
colorList: [
{ id: 'red', name: 'Red', logo: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdC b3g9JzAgMCAxMDAgMTAwJz48ZyBmaWxsPSdub25lJz48Y2lyY2xlIGZpbGw9 JyNFNDk5NzcnIGN4PSc1MCcgY3k9JzUwJyByPSc1MCcvPjxwYXRoIGQ9J005 MS45NjUgNjYuNjE3Yy0zLjczNiA4LjkxMi0xMS4xNiAxMy4zNjctMjIuMjc1 IDEzLjM2Ny0yLjAzNyAwLTQuMjQ2LjI1NC02LjYyMS43NjItMy41NjQuNzY0 LTUuMzQ2IDEuODI4LTUuMzQ2IDMuMTg2IDAgLjQyNC4yOTUuOTEuODkxIDEu NDYzLjU5Mi41NTMgMS4xMDQuODI2IDEuNTI3LjgyNi0yLjEyMyAwLS42OC4w NjQgNC4zMjYuMTkxIDUuMDA4LjEyNyA4LjE0OC4xOTEgOS40MjIuMTkxLTcu MzgzIDQuMzI2LTE5LjczMiA2LjMxOS0zNy4wNDMgNS45ODEtNS42ODgtLjA4 NC0xMC41NjYtMi41ODgtMTQuNjM5LTcuNTEtMy45OTItNC42NjktNS45ODQt OS44ODgtNS45ODQtMTUuNjU4IDAtNi4xMDggMi4wNTctMTEuMzA4IDYuMTc2 LTE1LjU5NSA0LjExMy00LjI4MiA5LjIyOS02LjQyNyAxNS4zMzgtNi40Mjcg MS4zNTcgMCAzLjE2LjI5NyA1LjQxLjg5MSAyLjI0OC41OTQgMy43NTYuODkx IDQuNTE4Ljg5MSAzLjEzOSAwIDcuMDQ1LTEuMjkzIDExLjcxMy0zLjg4MyA0 LjY2Ni0yLjU4OCA2Ljg3NS0zLjg4MyA2LjYyMS0zLjg4My0uODUgOC45MTIt My44MiAxNC44OTYtOC45MTQgMTcuOTQ4LTMuNjQ4IDIuMTIzLTUuNDczIDQu MjAxLTUuNDczIDYuMjM2IDAgMS4yNzMuNzY0IDIuMjkzIDIuMjkxIDMuMDU3 IDEuMTg4LjU5NSAyLjUwMi44OTIgMy45NDUuODkyIDIuMjA3IDAgNC4zNzEt MS4zNTYgNi40OTQtNC4wNzEgMi4xMTktMi43MTggMy4wNTUtNS4xNzcgMi44 MDEtNy4zODYtLjI1NC0yLjU0NS0uMDg0LTUuNjAzLjUxLTkuMTY0LjE2OC0x LjAyLjc4My0yLjI3IDEuODQ0LTMuNzU0IDEuMDYxLTEuNDg2IDIuMDE2LTIu Mzk4IDIuODY1LTIuNzM4IDAgLjc2Mi0uMjc1IDIuMDM3LS44MjggMy44MTgt LjU1MyAxLjc4MS0uODI2IDMuMS0uODI2IDMuOTQ3IDAgMS44NjcuNTA4IDMu MzA5IDEuNTI3IDQuMzI2IDEuNTI1LS41OTIgMi44ODMtMi41MDIgNC4wNzQt NS43MjkgMS4wMTYtMi40NTkgMS42MDktNC44MzYgMS43ODEtNy4xMjctMy41 NjYtLjE3LTYuOTgyLTEuNzgxLTEwLjI0OC00LjgzOC0zLjI2OC0zLjA1Ny00 LjktNi4zNjUtNC45LTkuOTI4IDAtLjU5NC4wODItMS4xODguMjU2LTEuNzgz LjUwOC43NjQgMS4yNzEgMS45NTMgMi4yODkgMy41NjQgMS40NDMgMi4xMjEg Mi41NDcgMy4xODIgMy4zMTMgMy4xODIgMS4wMTYgMCAxLjUyNS0xLjA2MSAx LjUyNS0zLjE4MiAwLTIuNzE1LS43MjMtNS4xNzYtMi4xNjQtNy4zODMtMS42 MTMtMi42MzEtMy42OTMtMy45NDctNi4yMzgtMy45NDctMS4xODkgMC0yLjk3 MS42MzctNS4zNDQgMS45MS0yLjM3OSAxLjI3MS00LjU0MyAxLjkxLTYuNDky IDEuOTEtLjU5NiAwLTMuMjI5LS43NjYtNy44OTUtMi4yOTMgOC4yMy0xLjM1 NSAxMi4zNDgtMi41ODYgMTIuMzQ4LTMuNjkxIDAtMi44ODUtNS42NDUtNC44 MzgtMTYuOTMtNS44NTUtMS4xMDUtLjA4NC0zLjE0MS0uMjU0LTYuMTExLS41 MS4zMzgtLjQyNCAyLjc1OC0uODkxIDcuMjU4LTEuNCAzLjgxOC0uNDIyIDYu NDkyLS42MzcgOC4wMTgtLjYzNyAyMC4xOTcgMCAzMy4wMTIgOS44MDUgMzgu NDQzIDI5LjQwOC45MzQtLjc3MyAxLjQwMi0yLjA2NiAxLjQwMi0zLjg3MSAw LTIuMzI0LS42OC01LjI1LTIuMDM3LTguNzc3LS41MTItMS4zNzUtMS4zMTgt My40NDEtMi40Mi02LjE5MyA2Ljk1NyA4Ljg2NyAxMC40MzkgMTcuMjcgMTAu NDM5IDI1LjE5OSAwIDQuMTc4LS45NzkgNy45NzMtMi45MyAxMS4zODEtMS4y NyAyLjMwMy0zLjY1IDUuMjQ0LTcuMTI3IDguODI2LTMuNDggMy41OC01Ljg1 NyA2LjM1Mi03LjEzMSA4LjMxMyA0LjY2OC0xLjI3MSA3LjcyNS0yLjI0OCA5 LjE2OC0yLjkyOCAzLjIyMy0xLjQ0IDYuMTUtMy42MDYgOC43ODMtNi40OTIg MCAxLjEwNi0uNDY3IDIuNzYyLTEuNCA0Ljk2N3ptLTU1LjUwMi01MC4wMjVj MCAxLjUyNS0uODUgMi41MDItMi41NDUgMi45MjZsLTMuMzExLjUxYy0xLjE4 OS41OTQtMi45MjggMi45MjgtNS4yMTkgNy0uMjU2LTEuMjcxLS42MzctMy4w NTMtMS4xNDYtNS4zNDYtLjc2NC4wODYtMi4wMzUuNzY0LTMuODE4IDIuMDM3 LS43NjQuNTk0LTEuOTk2IDEuNDg0LTMuNjkzIDIuNjcyLjUxMi0zLjA1NSAy LjIwNy02LjE0OCA1LjA5NC05LjI5MyAzLjA1NS0zLjQ3NyA2LjAyNS01LjIx NyA4LjkxLTUuMjE3IDMuODE4IDAgNS43MjggMS41NzIgNS43MjggNC43MTF6 bTIyLjE1IDExLjcwOWMwIDEuNDQzLS43ODUgMi42NTQtMi4zNTUgMy42Mjkt MS41Ny45NzctMy4xMTkgMS40NjUtNC42NDYgMS40NjUtMi4wMzcgMC0zLjg2 My0xLjE0Ni01LjQ3My0zLjQzOC0xLjk1NS0yLjgwMS0zLjk0Ny00LjYyNS01 Ljk4NC01LjQ3Ny40MjQtLjQyMi45MzQtLjYzNSAxLjUyOS0uNjM1Ljc2NCAw IDIuMDU1LjU5NCAzLjg4MSAxLjc4MSAxLjgyNCAxLjE4OSAyLjk5IDEuNzgz IDMuNTAyIDEuNzgzLjQyNCAwIDEuMTIzLS41OTQgMi4xLTEuNzgzLjk3NS0x LjE4OCAyLjA1Ny0xLjc4MSAzLjI0Ni0xLjc4MSAyLjguMDAxIDQuMiAxLjQ4 NyA0LjIgNC40NTZ6JyBmaWxsPScjMEQwRjBGJy8+PC9nPjwvc3ZnPgo=' },
{ id: 'blue', name: 'Blue', logo: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdC b3g9JzAgMCAxMDAgMTAwJz48ZyBmaWxsPSdub25lJz48Y2lyY2xlIGZpbGw9 JyNDMUQ3RTknIGN4PSc1MCcgY3k9JzUwJyByPSc1MCcvPjxwYXRoIGQ9J002 Ny40ODggODMuNzE5Yy00Ljc4NyA0Ljg3MS0xMC42ODQgNy4zMDctMTcuNjg4 IDcuMzA3LTcuODYxIDAtMTQuMDk4LTIuNjktMTguNzExLTguMDczLTQuMzU5 LTUuMTI3LTYuNTM3LTExLjY2Mi02LjUzNy0xOS42MDYgMC04LjU0MyAzLjcx Ny0xOC4yODYgMTEuMTUtMjkuMjI0IDYuMDY0LTguOTY5IDEzLjE5OS0xNi44 MyAyMS40MDItMjMuNTgtMS4xOTcgNS40NjktMS43OTMgOS4zNTUtMS43OTMg MTEuNjYyIDAgNS4yOTkgMS42NjQgMTAuNDY3IDQuOTk2IDE1LjUwOCA0LjEw MiA1Ljk4IDcuMjE5IDEwLjQyNiA5LjM1NyAxMy4zMjggMy4zMzIgNS4wNDMg NC45OTggOS45NTUgNC45OTggMTQuNzM3LjAwMiA3LjA5My0yLjM5MSAxMy4w NzQtNy4xNzQgMTcuOTQxem0tLjEyOS0yNy4zNjJjLTEuMjgxLTIuODYxLTIu Nzc3LTQuNzYyLTQuNDg2LTUuNzAzLjI1Ni41MTQuMzg1IDEuMjQuMzg1IDIu MTggMCAxLjc5NS0uNTEyIDQuMzU3LTEuNTM5IDcuNjg5bC0xLjY2NCA1LjEy N2MwIDIuOTkgMS40OTIgNC40ODYgNC40ODQgNC40ODYgMy4xNiAwIDQuNzQy LTIuMDk1IDQuNzQyLTYuMjgxIDAtMi4xMzQtLjY0LTQuNjMyLTEuOTIyLTcu NDk4eicgZmlsbD0nIzBEMEYwRicvPjwvZz48L3N2Zz4K' },
{ id: 'black', name: 'Black', logo: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdC b3g9JzAgMCAxMDAgMTAwJz48ZyB0cmFuc2Zvcm09J3RyYW5zbGF0ZSgwIC0x KScgZmlsbD0nbm9uZSc+PGNpcmNsZSBmaWxsPScjQkFCMUFCJyBjeD0nNTAn IGN5PSc1MC45OTgnIHI9JzUwJy8+PHBhdGggZD0nTTkwLjY5NSA0OS42MTlj MCA1LjUxOC0yLjAwOCA5LjI4MS02LjAyIDExLjI4Ny0xLjE3Mi41ODYtNC44 NSAxLjM3OS0xMS4wMzcgMi4zODMtNC4wMTIuNjctNi4wMTggMi4yMTctNi4w MTggNC42Mzl2MTAuMTU4YzAgLjQyMi4xMjUgMS43MTUuMzc1IDMuODg5bC4z NzcgNC4wMTRjMCAxLjI1NS0uMjkzIDMuMzA2LS44NzkgNi4xNDYtMS41ODgu MzM0LTMuNDI4LjcwOS01LjUxOCAxLjEzMi0uNjctMi41MTEtMS4wMDQtNC4y MjQtMS4wMDQtNS4xNDYgMC0uNDE2LjEwNS0xLjA0NS4zMTMtMS44ODIuMjA3 LS44MzQuMzE2LTEuNDYxLjMxNi0xLjg4MyAwLS41OC0uNTItMi4yMTMtMS41 NTktNC44ODdoLTEuOTQ1Yy0uMjU4LjQxOC0uMzQ0Ljk2MS0uMjYgMS42Mjku MzM0IDEuNDIyLjQ1OSAyLjYzMy4zNzcgMy42MzctMS40MjIgMS4wMDQtMy4z ODcgMi4zNDEtNS44OTUgNC4wMTMtLjU4Ni0uMTY2LS43OTMtLjI1LS42Mjkt LjI1di04LjkwNGMtLjE2NC0uNDE2LS41ODQtLjU4MS0xLjI1NC0uNTAyaC0x LjUwNGwtMS41MDQgMTEuNzg3Yy0xLjE3NC4wODQtMi41OTIuMDg0LTQuMjY0 IDAtLjU4OC0yLjc1OC0xLjYzMS02Ljg1My0zLjEzNS0xMi4yODloLTEuMDA0 Yy0uOTIyIDIuOTI5LTEuNDIyIDQuNTE5LTEuNTA2IDQuNzY5IDAgLjMzNC4x MDQuOTgxLjMxNCAxLjk0Mi4yMDcuOTYyLjMxMyAxLjYwOS4zMTMgMS45NDMg MCAuMjUtLjA4NC44NzctLjI1IDEuODgxbC0uMzc3IDMuMDFjLS4xNjguMTY2 LS4zNzcuMjUtLjYyNy4yNS0yLjUwOCAwLTQuMTgyLS42MjctNS4wMTYtMS44 NzktLjgzNi0xLjI1Ni0xLjE3Mi0zLjAxMi0xLjAwNC01LjI3MWwxLjAwNC0x NS4wNDdjMC0uMjUyLjA4Mi0uNTg2LjI1LTEuMDA0LjE2NC0uNDE4LjI1LS43 MTEuMjUtLjg3NyAwLS42Ny0uNzExLTIuMDA4LTIuMTMxLTQuMDE0LS4yNDgt LjA4Mi0xLjU0OS0uMzc3LTMuODg3LS44NzktMS40MjQtLjMzNC00LjIyNS0u OTE4LTguNDAyLTEuNzU2LTUuNzcxLTEuMDg0LTguNjU0LTUuNzI1LTguNjU0 LTEzLjkyIDAtMTIuMjA3IDUuMDE4LTIyLjM2NSAxNS4wNTEtMzAuNDc1LjQx NCAyLjI1OCAxLjEyNyA1LjI2NiAyLjEyOSA5LjAyOS43NTQuMTcgMi4zODUu NTQ1IDQuODkxIDEuMTI5LjUwNC4xNjggMy4wNTMgMS4wODggNy42NTIgMi43 Ni0yLjM0NC0xLjQyMi01LjM5My0zLjcxOS05LjE1Ni02Ljg5OC0xLjQyMi0x LjY3Mi0yLjEzMy00LjQ3MS0yLjEzMy04LjQgMC0uOTIgMS41OS0yLjAwOCA0 Ljc2OC0zLjI2NCAyLjg0LTEuMTcgNC45NzUtMS44MzYgNi4zOTYtMi4wMDYg NC41MTQtLjU4MiA3Ljk4NC0uODc5IDEwLjQxLS44NzkgMTAuNDQ5IDAgMTgu ODkxIDIuNjc4IDI1LjMyOCA4LjAyOS0yLjA4OCAyLjQyNi01LjY4NCA1LjAx NC0xMC43ODMgNy43NzMgMi4wMDguMDg0IDQuOTM0LS43MDcgOC43NzktMi4z ODMgMy44NDQtMS42NyA1LjQ3NS0yLjUwOCA0Ljg5MS0yLjUwOC42NjggMCAy LjAwOCAxLjM0IDQuMDE0IDQuMDE0IDEuNTA0IDIuMDA2IDIuNzE1IDMuODA3 IDMuNjM3IDUuMzkxIDIuNjc0IDQuNzY4IDQuNDcxIDkuOTA4IDUuMzkzIDE1 LjQyNiAwIDEuOTI2LjA0MSAzLjMwNS4xMjUgNC4xMzl2MS4wMDRoLjAwMnpt LTQ4LjAzMSAyLjI1OGMwLTMuNTk0LTEuNTY4LTcuMDAyLTQuNzAzLTEwLjIy My0zLjEzNy0zLjIxOS02LjUwMi00LjgyNi0xMC4wOTYtNC44MjYtMy4xNzgg MC01Ljk3NyAxLjM0OC04LjQwMiA0LjAzOS0yLjQyNiAyLjY5My0zLjYzNyA1 LjY4Mi0zLjYzNyA4Ljk2MyAwIDIuODU5IDEuMzc5IDQuNzEzIDQuMTM5IDUu NTUzIDEuNzU2LjUwNiA0LjIxOS44MDEgNy4zOTguODgzaDYuODk4YzUuNTk4 LjA4NCA4LjQwMy0xLjM3OSA4LjQwMy00LjM4OXptMTMuNjY4IDE1LjU1M3Yt My44ODljLS41ODQtMS4wODYtMS4xNy0yLjIxNS0xLjc1NC0zLjM4Ny0uNTAy LTEuNjc0LTEuNDIyLTQuMDE0LTIuNzYtNy4wMjVsLTEuMzgxIDE0LjY3NGMw IDEuMTcyLS4yNSAxLjc1Ni0uNzUyIDEuNzU2LS4zMzQgMC0uNTg0LS4wODIt Ljc1Mi0uMjQ4LS41ODYtOC44NjMtLjg3OS0xMi43MDktLjg3OS0xMS41NDF2 LTQuMzg3Yy0uMTY4LS4yNTQtLjM3NS0uMzc5LS42MjUtLjM3OS0yLjg0NCAy LjkzLTQuMjY0IDcuNjUyLTQuMjY0IDE0LjE3MiAwIDMuNTk2LjMzIDUuODEx IDEuMDAyIDYuNjQ4LjY3LS4xNjYgMS40MjItLjQ1OSAyLjI1OC0uODc3LjMz NC0uMTY4IDEuMjk1LS4yNTIgMi44ODctLjI1MiAxLjU4NCAwIDMuNTEuNTAy IDUuNzY2IDEuNTA0LjgzNiAwIDEuMjU0LTIuMjU2IDEuMjU0LTYuNzY5em0y OC4zNDQtMTcuNDc1YzAtMy4zNjctMS4yNTQtNi4zNzUtMy43NjItOS4wMjUt Mi41MS0yLjY0OC01LjM5NS0zLjk3NS04LjY1Mi0zLjk3NS0zLjUxMiAwLTYu Nzk1IDEuNjA3LTkuODQ2IDQuODI2LTMuMDUzIDMuMjE5LTQuNTc4IDYuNTg0 LTQuNTc4IDEwLjA5NiAwIDIuOTI4IDEuNDIgNC4zODkgNC4yNjQgNC4zODlo MTQuNDIyYzUuNDMzLS4wODIgOC4xNTItMi4xODYgOC4xNTItNi4zMTF6JyBm aWxsPScjMEQwRjBGJy8+PC9nPjwvc3ZnPgo=' },
{ id: 'green', name: 'Green', logo: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdC b3g9JzAgMCAxMDAgMTAwJz48ZyBmaWxsPSdub25lJz48cGF0aCBkPSdNMTAw IDQ5Ljk5OGMwIDI3LjYxNS0yMi4zODUgNTAuMDAyLTUwLjAwMiA1MC4wMDIt MjcuNjEzIDAtNDkuOTk4LTIyLjM4Ny00OS45OTgtNTAuMDAyIDAtMjcuNjEz IDIyLjM4NS00OS45OTggNDkuOTk4LTQ5Ljk5OCAyNy42MTcgMCA1MC4wMDIg MjIuMzg1IDUwLjAwMiA0OS45OTh6JyBpZD0nU2hhcGUnIGZpbGw9JyNBM0Mw OTUnLz48cGF0aCBkPSdNOTMuNzYyIDU2LjIyNWMwIDEuNjY4LS42NDUgMy4x NjQtMS45MzYgNC40OTgtMS4yODkgMS4zMzItMi43NyAxLjk5OC00LjQzNiAx Ljk5OC0yLjY2MiAwLTQuNjIzLTEuMjUtNS44NjktMy43NDhsLTUuODcxLS4y NWMtMS4yNTIgMC0zLjcwOS41NDMtNy4zNzEgMS42MjUtMy45MTQgMS4wODIt Ni4xNjQgMS45NTctNi43NDYgMi42MjMtLjkxNi45OTgtMS42NjQgMy4zMzIt Mi4yNDggNi45OTYtLjUwMiAyLjk5OC0uNzQ4IDUuMjA1LS43NDggNi42MjEg MCAyLjI0Ni4zNTIgMy44OTMgMS4wNjEgNC45MzQuNzA5IDEuMDQxIDIuMTY2 IDEuOTE2IDQuMzcxIDIuNjIzIDIuMjA1LjcwNyAzLjU2MSAxLjEwNCA0LjA2 MSAxLjE4Ny4zMzIgMCAuODczLS4wNDEgMS42MjUtLjEyNWgxLjQ5OGMxLjA4 IDAgMi4yMDUuMTcgMy4zNzMuNSAxLjY2Ni41IDIuMzc1IDEuMTY2IDIuMTI1 IDItMS4xNjgtLjE2Ni0zLjIwNy4wODQtNi4xMjEuNzVsMy40OTYgMS43NDhj MCAxLTEuNDE2IDEuNDk4LTQuMjQ2IDEuNDk4LS43NTIgMC0xLjc3MS0uMTY2 LTMuMDYzLS40OTgtMS4yOTEtLjMzNi0yLjE0NS0uNS0yLjU1OS0uNWgtMS42 MjVjLS4wODIuODMyLS4zMzQgMi4wOC0uNzUgMy43NDYtMS40MTgtLjA4NC0z LjA4LS45MTgtNC45OTYtMi40OTgtMS45MTgtMS41OC0zLjEyMy0yLjM3My0z LjYyMS0yLjM3My0uNTAyIDAtMS4yMTEuNzkzLTIuMTI1IDIuMzczLS45MTgg MS41OC0xLjM3NSAyLjY2NC0xLjM3NSAzLjI0OC0xLjA4Mi0uNTg0LTEuOTk2 LTEuNjY4LTIuNzUtMy4yNDgtLjMzMi0xLjA4NC0uNzA3LTIuMTY2LTEuMTIx LTMuMjQ4LS44MzIuMDg0LTIuMzc1IDEuODM0LTQuNjIxIDUuMjQ4aC0uNjI3 Yy0uMTY2LS4yNTItLjc5NS0yLTEuODczLTUuMjQ4LTIuNTgyLS44MzItNC45 OTYtMS4yNDgtNy4yNDYtMS4yNDgtMS4wODIgMC0yLjc0OC4yNS00Ljk5Ni43 NDhsLTMuNDk2LS4yNDhjLjQ5OC0uNSAxLjk1NS0xLjQ1NyA0LjM3MS0yLjg3 MyAyLjgzLTEuNjY2IDQuOTk2LTIuNSA2LjQ5Ni0yLjUuMjQ2IDAgLjU3OC4w NDMgMSAuMTI1LjQxNC4wODYuNzUuMTI1IDEgLjEyNS41NzggMCAxLjUxOC0u MzEyIDIuODA5LS45MzggMS4yOTEtLjYyMyAyLjAzOS0xLjE4NiAyLjI0Ni0x LjY4NC4yMTEtLjUwNC4zMTYtMS43OTMuMzE2LTMuODc1IDAtNC43NDYtMS4y NS04LjI4NS0zLjc1LTEwLjYxNy0yLjE2OC0yLjA4Mi01Ljc0Ni0zLjU4LTEw Ljc0NC00LjQ5OC0xLjMzMiA0Ljc0Ni01LjA4IDcuMTIzLTExLjI0IDcuMTIz LTIgMC0zLjk5OC0xLjIwNy01Ljk5Ni0zLjYyMy0xLjk5Ni0yLjQxNi0yLjk5 Ni00LjYyMy0yLjk5Ni02LjYyMSAwLTMuMDgyIDEuMjg3LTUuNjIxIDMuODY5 LTcuNjIzLTIuMDgtMi4xNjItMy4xMjEtNC4zNjktMy4xMjEtNi42MTcgMC0y LjA4NC42NDMtMy45MTQgMS45MzYtNS41IDEuMjkxLTEuNTc4IDIuOTc3LTIu NDk2IDUuMDU5LTIuNzQ4LS4xNjYtMi42NjIuNzA3LTQuNDk2IDIuNjIzLTUu NDk2LS45MTYtLjkxNC0xLjM3My0yLjUzNy0xLjM3My00Ljg2OSAwLTIuNzQ4 LjkxNi01LjAzOSAyLjc0OC02Ljg3MSAxLjgzLTEuODMyIDQuMTIxLTIuNzUg Ni44NjktMi43NSAzIDAgNS40NTcgMS4wNDUgNy4zNzEgMy4xMjUgMi40MTYt OC4yNDQgNy42MjEtMTIuMzY3IDE1LjYxMy0xMi4zNjcgNC4xNjQgMCA3Ljgy OCAxLjY2NiAxMC45OTQgNC45OTggMS4xNjYgMS4yNDggMS43NDggMS45MTYg MS43NDggMS45OTYtMSAwLS40OTgtLjE4OCAxLjUtLjU2MSAxLjk5Ni0uMzc1 IDMuNDUzLS41NjMgNC4zNzMtLjU2MyAzLjI0NiAwIDYuMTE5IDEuMjA3IDgu NjE5IDMuNjIzIDIuMTY0IDIuMTY2IDMuNjY0IDQuOTEyIDQuNDk4IDguMjQ0 LjU4LjA4NCAxLjQ5OC4zMzIgMi43NDguNzQ4IDEuODMuOTIgMi43NDggMi40 OTggMi43NDggNC43NDggMCAuNDE4LS4zMzYgMS4yMDktMSAyLjM3MyA1LjMy OCAyLjk5OCA3Ljk5NCA3LjE2MiA3Ljk5NCAxMi40OTIgMCAxLjQ5OC0uNTgy IDMuNTg0LTEuNzQ4IDYuMjQ3IDIuMTY2IDEuMjQ3IDMuMjQ2IDMuMDgxIDMu MjQ2IDUuNDk1em0tNTEuNDY3IDUuNDk2di0xLjYyM2MwLTEuOTE0LS45MzYt My42NjQtMi44MDktNS4yNDYtMS44NzUtMS41ODItMy43Ny0yLjM3My01LjY4 NC0yLjM3My0yLjMzNCAwLTQuNDk2LjU0MS02LjQ5NiAxLjYyMSA0LjQxMy0u MjQ4IDkuNDExIDIuMjkzIDE0Ljk4OSA3LjYyMXptLTIuMjQ2LTE1LjQ4OWMt MS4yNS0xLjQxOC0yLjMzMi0yLjg3NS0zLjI1LTQuMzczLTMuNDk4LjkxNi01 LjI0NiAxLjk1Ny01LjI0NiAzLjEyMSAxLS4wOCAyLjQ1Ny4xMDUgNC4zNzEu NTY0IDEuOTE0LjQ1OSAzLjI5MS42ODggNC4xMjUuNjg4em03LjYyMS0zLjg3 M3YtNS40OTZjLTItLjMzMi0zLjIxMS0uNS0zLjYyMy0uNXYxLjg3M2wzLjYy MyA0LjEyM3ptMTYuMjM4LTMuNDk4Yy0xLS40MTYtMi44NzUtMS4yNS01LjYy MS0yLjQ5OHYxMC43NDJjMy45MTItMi4yNSA1Ljc4NS00Ljk5OCA1LjYyMS04 LjI0NHptNi44NjcgMTQuNzQxbC0yLjc0Ni0zLjM3M2MtMS42NjQgMS4xNjct My4zNTIgMi4zNTQtNS4wNjEgMy41NjEtMS43MDkgMS4yMDctMy4xODYgMi41 NjMtNC40MzIgNC4wNiAzLjc0Ny0yLjAwMiA3LjgyOS0zLjQxNCAxMi4yMzkt NC4yNDh6JyBmaWxsPScjMEQwRjBGJy8+PC9nPjwvc3ZnPgo=' },
{ id: 'white', name: 'White', logo: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdC b3g9JzAgMCAxMDAgMTAwJz48ZyBmaWxsPSdub25lJz48Y2lyY2xlIGZpbGw9 JyNGOEY2RDgnIGN4PSc1MCcgY3k9JzUwJyByPSc1MCcvPjxwYXRoIGQ9J005 Ny42OTEgNTcuMDY0Yy02LjU2MS0zLjY5OS0xMC43NjgtNS41NTEtMTIuNjE3 LTUuNTUxLTEuMzQ0IDAtMi4zOTUgMS4wMzItMy4xNTQgMy4wOTItLjc1OCAy LjA2My0yLjI3IDMuMDktNC41NDEgMy4wOS0uOTI2IDAtMi44MTgtLjMzNi01 LjY3OC0xLjAwOC0xLjU5OCAyLjQ0LTIuMzk4IDMuOTk2LTIuMzk4IDQuNjY4 IDAgLjkyNi42ODkgMi4wMTYgMi4wNjQgMy4yODEgMS4zNzUgMS4yNjIgMi41 MzUgMS44OTEgMy40ODIgMS44OTEuNjAyIDAgMS40MTYtLjEyNSAyLjQ0OS0u Mzc5IDEuMDMxLS4yNSAxLjcyMS0uMzc3IDIuMDY0LS4zNzcgMS4wMzMgMCAx LjU0NyAxLjg5MyAxLjU0NyA1LjY3OCAwIDMuNjE3LS44NCA5LjE2OC0yLjUy MyAxNi42NTQtMi4xODgtOC41OC00LjUtMTIuODcxLTYuOTM4LTEyLjg3MS0u MzM4IDAtMS4wMzEuMjUyLTIuMDgyLjc2LTEuMDUzLjUwMi0xLjgzLjc1NC0y LjMzNC43NTQtMi40MzggMC00LjYyNS0yLjIyNy02LjU2MS02LjY4OC0zLjg2 OS41OS01LjgwNSAyLjU2Ny01LjgwNSA1LjkzNCAwIDEuNjg0Ljc3NyAzLjAy NyAyLjMzNiA0LjAzNSAxLjU1MyAxLjAwOCAyLjMzNCAxLjcyNyAyLjMzNCAy LjE0NSAwIDIuMjczLTMuMzI0IDUuNzY0LTkuOTY5IDEwLjQ3My0zLjUzMSAy LjUyMy01Ljk3MyA0LjI4OS03LjMxNiA1LjI5NyAxLjE3NC0xLjUxMiAyLjM1 Mi0zLjQ4NyAzLjUzMy01LjkyOCAxLjM0NC0yLjc3NSAyLjAxOC00LjkyIDIu MDE4LTYuNDM2IDAtLjg0LS45NjctMi4wMi0yLjkwMi0zLjUzMy0xLjkzNi0x LjUxMi0yLjktMy4xMTEtMi45LTQuNzkzIDAtMS40MjguNTAyLTMuMTkzIDEu NTEyLTUuMjk5LTEuMDk0LTEuMjYyLTIuMzk1LTEuODk1LTMuOTEtMS44OTUt My4zNjUgMC01LjA0NSAxLjA5Ni01LjA0NSAzLjI4djMuNDA2Yy4wODIgMi43 NzYtMi4wMiA0LjE2NC02LjMxMSA0LjE2NC0zLjI3OSAwLTguNzkxLS43NTkt MTYuNTI3LTIuMjcxIDguNzQ4LTIuMTg4IDEzLjEyMS00LjcxMSAxMy4xMjEt Ny41NyAwIC4zMzYtLjE2OC0uNjcyLS41MDQtMy4wMjgtLjMzOC0yLjYwNCAx LjUxNC00Ljk2MSA1LjU1MS03LjA2My0uNzU4LTMuODY3LTIuNzczLTUuODA2 LTYuMDU3LTUuODA2LS41MDQgMC0xLjQzMi44ODQtMi43NzUgMi42NDctMS4z NDYgMS43NzEtMi42MDcgMi42NTItMy43ODMgMi42NTItMi4wMiAwLTQuNjI5 LTIuMTg2LTcuODIyLTYuNTYzLTEuNTE2LTIuMTg0LTMuODMtNS40MjQtNi45 NDEtOS43MTUgMS45MzQgMS4wMTIgMy44NjkgMi4wMiA1LjgwNSAzLjAzMSAy LjUyMyAxLjE3NiA0LjU0MSAxLjc2NiA2LjA1NyAxLjc2NiAxLjE3OCAwIDIu MzM0LTEuMDMxIDMuNDY5LTMuMDkyIDEuMTM1LTIuMDYxIDIuNjI5LTMuMDky IDQuNDc5LTMuMDkyLjI1NCAwIDEuOTM2LjUwNCA1LjA0NyAxLjUxNiAxLjU5 Ni0yLjQzOSAyLjM5OC00LjI0OCAyLjM5OC01LjQyNiAwLTEuMDEtLjYxMS0y LjE2Ni0xLjgzLTMuNDcxLTEuMjIxLTEuMzAzLTIuMzM0LTEuOTU1LTMuMzQ0 LTEuOTU1LS40MjIgMC0xLjA3Mi4xMjUtMS45NTcuMzc5LS44ODEuMjUyLTEu NTMzLjM3OS0xLjk1My4zNzktMS41MTYgMC0yLjI3My0xLjg5My0yLjI3My01 LjY3OCAwLTEuMDEuOTY5LTYuNzcgMi45MDQtMTcuMjg1LS4wODYgMS4yNi40 NjEgMy42MTcgMS42MzkgNy4wNjQgMS40MyA0LjIwNyAzLjExMSA2LjMwOSA1 LjA0OSA2LjMwOS4zMzQgMCAxLjAwOC0uMjUyIDIuMDE4LS43NTggMS4wMDgt LjUwNCAxLjgwNy0uNzU0IDIuMzk2LS43NTQgMS45MzQgMCAzLjUzMSAxLjA5 NCA0Ljc5NSAzLjI3N2wxLjg5MyAzLjQwNmMxLjc2NiAwIDMuMjM4LS42Mjkg NC40MTQtMS44OTEgMS4xNzgtMS4yNjIgMS43NjgtMi43NzcgMS43NjgtNC41 NDMgMC0xLjg1LS43NzctMy4yNi0yLjMzNC00LjIyNy0xLjU1OS0uOTY3LTIu MzM2LTEuNzAzLTIuMzM2LTIuMjA3IDAtMS43NjggMi43NzctNC43NTIgOC4z MjgtOC45NTggNC40NTctMy4zNjMgNy4zNTktNS4zNCA4LjcwNy01LjkzLTMu NjE3IDQuODc5LTUuNDI2IDguNDUxLTUuNDI2IDEwLjcyNCAwIDEuMTc4Ljcx MyAyLjQ0MSAyLjE0NSAzLjc4NSAxLjc2NiAxLjU5OCAyLjc3NSAyLjczNCAz LjAyNyAzLjQwNi44NCAxLjkzOC43NTYgNC41ODYtLjI1MiA3Ljk0OSAyLjI3 MSAxLjYgMy45OTQgMi4zOTYgNS4xNzQgMi4zOTYgMi40MzYgMCAzLjY1OC0x LjI2NCAzLjY1OC0zLjc4NSAwLS4yNTItLjEwNS0xLjA1MS0uMzE0LTIuMzk2 LS4yMTMtMS4zNDQtLjI3My0yLjEwMi0uMTkxLTIuMjcxLjMzNi0xLjE3OCAy LjY1LTEuNzY4IDYuOTM5LTEuNzY4IDIuNjkxIDAgOC4yODMuNzU4IDE2Ljc4 MSAyLjI3My0xLjg1Mi41MDQtNC42MjcgMS4yNi04LjMyNiAyLjI3LTMuMzY1 IDEuMDEtNS4wNDkgMi4xNDUtNS4wNDkgMy40MDYgMCAuNTkuMjA5IDEuNTk4 LjYzMSAzLjAyNy40MiAxLjQzMi42MzMgMi40OC42MzMgMy4xNTYgMCAxLjE3 Ni0uNzU4IDIuMjctMi4yNzEgMy4yNzdsLTQuMjkxIDMuMDMxYzEuMDEgMS44 NTIgMS42ODIgMi45NDUgMi4wMiAzLjI3OS44NCAxLjAwOCAxLjk3NSAxLjUx NCAzLjQwNiAxLjUxNCAxLjAxIDAgMS45MzQtLjg4MyAyLjc3NS0yLjY0OC44 NC0xLjc2OCAyLjE4OC0yLjY1IDQuMDM3LTIuNjUgMi4yNyAwIDQuODM4IDIu MTA0IDcuNjk3IDYuMzExIDEuNTkzIDIuMzYgNC4wNzUgNS45MzMgNy40NCAx MC43Mjd6bS0yOC4wMDctNy4zMTZjMC01LjM4MS0xLjk3OS0xMC4wNTEtNS45 MzItMTQuMDA2LTMuOTUzLTMuOTUzLTguNjIxLTUuOTMtMTQuMDA0LTUuOTMt NS40NjkgMC0xMC4xOCAxLjk1Ny0xNC4xMzEgNS44NjktMy45NTMgMy45MS01 Ljk3MyA4LjYtNi4wNTUgMTQuMDY2LS4wODYgNS4zODMgMS45MTIgMTAuMDMg NS45OTIgMTMuOTM4IDQuMDggMy45MTIgOC44MTEgNS44NjkgMTQuMTkzIDUu ODY5IDUuNzE5IDAgMTAuNDkyLTEuODczIDE0LjMxOC01LjYxNSAzLjgzLTMu NzQgNS43MDEtOC40NyA1LjYxOS0xNC4xOTF6bS0xLjg5MyAwYzAgNS4xMzEt MS43MjUgOS4zODEtNS4xNzQgMTIuNzQtMy40NTEgMy4zNjctNy43NCA1LjA0 OS0xMi44NjkgNS4wNDktNC45NjMgMC05LjIxMS0xLjcyMy0xMi43NDItNS4x NzQtMy41MzEtMy40NDUtNS4yOTktNy42NTItNS4yOTktMTIuNjE1IDAtNC44 NzcgMS43ODUtOS4wNjQgNS4zNTktMTIuNTUzIDMuNTc4LTMuNDkgNy44MDMt NS4yMzggMTIuNjgyLTUuMjM4IDQuODc3IDAgOS4xMDQgMS43NjYgMTIuNjgg NS4zMDEgMy41NzQgMy41MzMgNS4zNjMgNy42OTUgNS4zNjMgMTIuNDl6JyBm aWxsPScjMEQwRjBGJy8+PC9nPjwvc3ZnPgo=' },
{ id: 'all', name: 'All', logo: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdC b3g9JzAgMCAxMDAgMTAwJz48ZyBmaWxsPSdub25lJz48cGF0aCBkPSdNMTAw IDUwYzAgMjcuNjA5LTIyLjM4MiA1MC01MCA1MHMtNTAtMjIuMzkxLTUwLTUw IDIyLjM4Mi01MCA1MC01MCA1MCAyMi4zOTEgNTAgNTB6JyBpZD0nU2hhcGUn IGZpbGw9JyNDQUM1QzAnLz48cGF0aCBkPSdNNDkuNjg3IDEyLjAyNmMyLjQ3 NSA0Ljk2OCA1LjUwNCA5Ljc5MyA5LjA5NiAxNC40NzUgMS41MjggMS45NjYg My4yNzkgNC4wMjEgNS4yNTQgNi4xNDcgMS45NDggMi4xMjYgNC4xMSA0LjI1 MyA2LjQ1MSA2LjM0NCAyLjM1OSAyLjA5MSA0Ljk0MSA0LjA3NCA3Ljc1NiA1 Ljk1MSAyLjgxNSAxLjg3NiA1Ljg0MyAzLjU5MiA5LjA5NiA1LjEyOS00Ljc4 IDIuNTU2LTkuNTE2IDUuNjY1LTE0LjIyNSA5LjM0Ni0xLjk1NiAxLjUzNy00 LjAwMyAzLjMwNi02LjE0NyA1LjMyNS0yLjEyNiAyLjAwMi00LjIxNyA0LjIt Ni4yNjMgNi41NzYtMi4wNDYgMi40MTItNC4wMTIgNS4wMDQtNS44OTcgNy44 MjctMS44NzcgMi44MDYtMy41ODMgNS43OS01LjEyIDguOTUzLTIuMzk1LTQu Ny01LjM3OS05LjM0Ni04Ljk2Mi0xMy45NTYtMy4wNzQtMy45MzEtNi45Ni04 LjA1OS0xMS42Ni0xMi40Mi00LjY5MS00LjM2LTEwLjM3My04LjIzOC0xNy4w My0xMS42NTEgNC43ODktMi40ODQgOS41MjUtNS41NTcgMTQuMjI0LTkuMjIx IDQuMDEyLTMuMTYzIDguMTQ5LTcuMTEyIDEyLjQxMS0xMS44NDggNC4yNy00 LjczNiA3LjkzMy0xMC4zODMgMTEuMDE2LTE2Ljk3N3ptLTUuNTA0IDUyLjg5 NWMyLjIyNSAyLjgyNCA0LjA1NiA1LjY4MyA1LjUwNCA4LjU3OCAxLjg4NS00 LjAyMSA0LjE0Ni03LjQ3IDYuNzgxLTEwLjM2NSAyLjY0NS0yLjkxMyA1LjIx OC01LjM0MyA3LjY5My03LjMwOSAyLjgxNC0yLjE5OCA1Ljc1NC00LjEyOCA4 LjgzNy01Ljc3Mi00LjEwMS0xLjg1OS03LjU4Ni00LjEyOC0xMC40MzYtNi43 NzMtMi44NjgtMi42NDUtNS4yODEtNS4yLTcuMjM3LTcuNjg0LTIuMjI1LTIu ODA1LTQuMTEtNS43OS01LjYzOC04Ljk1My0xLjg3NiA0LjA5Mi00LjEyOCA3 LjU5NS02LjcxOSAxMC40OS0yLjYwOSAyLjkxMy01LjE0NiA1LjMyNS03LjYy MiA3LjMwOS0yLjgyMyAyLjIxNi01Ljc2MyA0LjA3NC04LjgzNyA1LjYyOSA0 LjEwMSAyLjEyNyA3LjU5NSA0LjUyMSAxMC40OTkgNy4xNjYgMi45MDQgMi42 NDUgNS4yOTkgNS4yMTggNy4xNzUgNy42ODR6JyBmaWxsPScjMDAwJy8+PC9n Pjwvc3ZnPgo=' }
],
nameList: [],
nameSelected: null
}
},
mounted () {
this.pullSets().then(() => {
this.setInitialParams()
if (this.nameSelected) {
this.searchByName(this.$route.query.name)
} else {
this.pullCards(this.params.set.id, this.params.color.id)
}
})
},
methods: {
pullSets () {
return axios
.get('https://api.scryfall.com/sets', {}
)
.then((response) => {
this.sets = response.data.data
for (var i = 0; i < this.sets.length; i++) {
if (this.sets[i].set_type === 'core' || this.sets[i].set_type === 'expansion') {
if (!(this.sets[i].parent_set_code)) {
this.setList.push(
{ id: this.sets[i].code, name: this.sets[i].name, logo: this.sets[i].icon_svg_uri }
)
}
}
}
})
},
setInitialParams () {
console.log('before params set...', this.$route.query)
if (this.$route.query.name) {
this.nameSelected = this.$route.query.name
}
if (this.$route.query.color && this.$route.query.set) {
if (this.$route.query.page) {
this.page = this.$route.query.page - 1
} else {
this.page = 0
}
for (let i = 0; i < this.colorList.length; i++) {
if (this.$route.query.color === this.colorList[i].id) {
this.params.color = this.colorList[i]
}
}
for (let i = 0; i < this.setList.length; i++) {
if (this.$route.query.set === this.setList[i].id) {
this.params.set = this.setList[i]
}
}
} else {
let randomColorIndex = Math.floor(Math.random() * Math.floor(4))
this.params.color = this.colorList[randomColorIndex]
let randomSetIndex = Math.floor(Math.random() * Math.floor(16))
this.params.set = this.setList[randomSetIndex]
console.log('after initial random params set...', this.params.color.name, this.params.set.name)
}
},
async pullCards (setId, colorId) {
if (this.nameSelected) {
this.nameSelected = null
}
let params = null
this.loading = true
if (colorId === 'all') {
params = { q: 'set:' + setId }
} else {
params = { q: 'set:' + setId + ' c:' + colorId }
}
let response = await axios.get('https://api.scryfall.com/cards/search?order=cmc&', { params })
this.cards = response.data.data
while (response.data.has_more === true) {
response = await axios.get(response.data.next_page)
this.cards.push(...response.data.data)
}
setTimeout(() => { this.loading = false }, 150)
},
submitSearch () {
this.page = 0
var setId = this.params.set.id
var colorId = this.params.color.id
this.$router.push({ query: { 'color': colorId, 'set': setId, 'page': this.page + 1 } })
this.pullCards(setId, colorId)
},
fetchOptions (search, loading) {
console.log('fetchOptions...', search)
if (!search || (search && search.length < 2)) {
console.log('search is empty')
this.nameList = []
return
}
loading(true)
return axios
.get('https://api.scryfall.com/cards/autocomplete?', {
params: { q: search }
})
.then((response) => {
this.nameList = response.data.data
loading(false)
})
},
searchByName () {
this.loading = true
console.log('search by name function...', this.nameSelected)
return axios
.get('https://api.scryfall.com/cards/named?', {
params: { fuzzy: this.nameSelected }
})
.then((response) => {
this.cards = [response.data]
if (this.$route.query.name !== this.cards[0].name) {
this.$router.push({ query: { 'name': this.cards[0].name } })
}
console.log('add card name to query string...', this.cards[0].name)
console.log('return searched by name card... ', this.cards)
this.loading = false
})
},
nextPage () {
this.page = this.page + 1
this.$router.push({ query: { 'color': this.params.color.id, 'set': this.params.set.id, 'page': this.page + 1 } })
window.scrollTo(0, 0)
},
prevPage () {
this.page = this.page - 1
this.$router.push({ query: { 'color': this.params.color.id, 'set': this.params.set.id, 'page': this.page + 1 } })
window.scrollTo(0, 0)
},
pageLink (thisPage) {
this.page = thisPage - 1
this.$router.push({ query: { 'color': this.params.color.id, 'set': this.params.set.id, 'page': this.page + 1 } })
window.scrollTo(0, 0)
},
alertDescription (card) {
console.log(card)
alert(card.type_line)
}
}
}
</script>
<style lang="scss">
.single-card {
padding-top: 30px;
}
.search-fields {
padding: 10px 5px;
}
@media screen and (min-width: 1200px) {
.search-fields {
padding: 0px 5px;
}
}
.vs__selected-options {
max-height: 28px;
}
.color-select-img {
height: 20px;
width: 20px;
}
.set-select-img {
height: 20px;
width: 20px;
}
/* THIS IS A BIG HACK: We need to have .vs__selected on all of our elements
within the selected option slot for the dropdown to work. So we need to remove
the styles on these nested vs__selected elements else we get double margins/padding/etc */
.vs__selected .vs__selected {
border: none;
margin: 0;
padding: 0;
display: inline;
}
.vs--open .vs__selected .vs__selected {
position: static;
opacity: 1;
}
/* Ellipsis for selected option */
.vs__selected-options, .vs__selected {
min-width: 0;
}
.vs__selected span {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.vs__selected .color-select-img {
height: 20px;
width: 20px;
margin: 0 10px 0 10px;
}
.vs__selected .set-select-img {
height: 20px;
width: 20px;
margin: 0 10px 0 10px;
}
.pagination .page-item {
cursor: pointer;
}
.pagination .page-item.disabled {
cursor: auto;
}
.page-buttons a {
cursor: pointer;
}
.page-buttons a.disabled {
cursor: auto;
}
</style>
You can’t perform that action at this time.