|
|
|
@ -2,7 +2,56 @@
|
|
|
|
|
import { ref } from 'vue'
|
|
|
|
|
import CoverImage from '@/assets/cover01.jpg'
|
|
|
|
|
|
|
|
|
|
// show cover image
|
|
|
|
|
const firstLoad = ref(true)
|
|
|
|
|
// random pokemon of the first generation (No 1 to 151)
|
|
|
|
|
const randomPokemon = ref([...Array(10)].map(() => Math.round(Math.random() * 151)))
|
|
|
|
|
// four rows with five cards each
|
|
|
|
|
const randomCards = ref([...Array(20)])
|
|
|
|
|
// uncovered cards
|
|
|
|
|
const flippedCards = ref([...Array(20)].map(() => false))
|
|
|
|
|
// currently shown card
|
|
|
|
|
const flippedTemp = ref(-1)
|
|
|
|
|
const flippedTemp2 = ref(-1)
|
|
|
|
|
|
|
|
|
|
// fill cards array with random pairs of pokemon
|
|
|
|
|
for (let i = 0, j = 0; i < 20; i += 2, j++) {
|
|
|
|
|
randomCards.value[i] = randomPokemon.value[j]
|
|
|
|
|
randomCards.value[i + 1] = randomPokemon.value[j]
|
|
|
|
|
}
|
|
|
|
|
// randomize cards
|
|
|
|
|
randomCards.value.sort(() => Math.random() - 0.5)
|
|
|
|
|
|
|
|
|
|
function flip(i: number): void {
|
|
|
|
|
if (flippedTemp.value === -1) {
|
|
|
|
|
flippedTemp.value = i
|
|
|
|
|
} else if (flippedTemp2.value === -1) {
|
|
|
|
|
flippedTemp2.value = i
|
|
|
|
|
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
flippedTemp.value = -1
|
|
|
|
|
flippedTemp2.value = -1
|
|
|
|
|
}, 500)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const pokemon1 = randomCards.value[flippedTemp.value]
|
|
|
|
|
const pokemon2 = randomCards.value[flippedTemp2.value]
|
|
|
|
|
|
|
|
|
|
if (pokemon1 === pokemon2) {
|
|
|
|
|
flippedCards.value[flippedTemp.value] = true
|
|
|
|
|
flippedCards.value[flippedTemp2.value] = true
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function restart() {
|
|
|
|
|
randomPokemon.value = [...Array(10)].map(() => Math.round(Math.random() * 151))
|
|
|
|
|
|
|
|
|
|
for (let i = 0, j = 0; i < 20; i += 2, j++) {
|
|
|
|
|
randomCards.value[i] = randomPokemon.value[j]
|
|
|
|
|
randomCards.value[i + 1] = randomPokemon.value[j]
|
|
|
|
|
}
|
|
|
|
|
randomCards.value.sort(() => Math.random() - 0.5)
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<template>
|
|
|
|
@ -10,12 +59,18 @@ const firstLoad = ref(true)
|
|
|
|
|
id="cover"
|
|
|
|
|
@click="firstLoad = false"
|
|
|
|
|
>
|
|
|
|
|
click anywhere to start
|
|
|
|
|
<button>click anywhere to start</button>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div v-else>
|
|
|
|
|
... game not yet implemented ...
|
|
|
|
|
</div>
|
|
|
|
|
<ol v-else>
|
|
|
|
|
<li v-for="card,i in randomCards"
|
|
|
|
|
@click="flip(i)"
|
|
|
|
|
:class="{ flipped: flippedCards[i] || flippedTemp === i || flippedTemp2 === i }"
|
|
|
|
|
:style="{ backgroundImage: `url(https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/${card}.png)` }"
|
|
|
|
|
>
|
|
|
|
|
|
|
|
|
|
</li>
|
|
|
|
|
</ol>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<style scoped>
|
|
|
|
@ -34,4 +89,32 @@ const firstLoad = ref(true)
|
|
|
|
|
text-shadow: 0 0 5px white;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
ol {
|
|
|
|
|
list-style: none;
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-flow: row wrap;
|
|
|
|
|
width: 900px;
|
|
|
|
|
height: 720px;
|
|
|
|
|
padding: 0;
|
|
|
|
|
border: 1px solid white;
|
|
|
|
|
background-color: #222;
|
|
|
|
|
}
|
|
|
|
|
li {
|
|
|
|
|
width: 176px;
|
|
|
|
|
height: 176px;
|
|
|
|
|
background: #111;
|
|
|
|
|
border: 2px solid #222;
|
|
|
|
|
background-color: black;
|
|
|
|
|
background-position: center;
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
background-size: 0;
|
|
|
|
|
transform: rotateX(180deg);
|
|
|
|
|
background-color: #111;
|
|
|
|
|
transition: transform .3s ease;
|
|
|
|
|
}
|
|
|
|
|
li.flipped {
|
|
|
|
|
transform: rotateX(0deg);
|
|
|
|
|
transform-origin: center;
|
|
|
|
|
background-size: contain;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|