Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js" defer></script>
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
<!-- Memory Game -->
<div x-data="game()" class="px-10 flex items-center justify-center min-h-screen">
<h1 class="fixed top-0 right-0 p-10 font-bold text-3xl">
<span x-text="points"></span>
<span class="text-xs">pts</span>
</h1>
<div class="flex-1 grid grid-cols-4 gap-10">
<template x-for="(card, index) in cards" :key="index">
<div>
<button x-show="! card.cleared"
:style="'background: ' + (card.flipped ? card.color : '#999')"
:disabled="flippedCards.length >= 2"
class="w-full h-32"
@click="flipCard(card)"
>
</button>
</div>
</template>
</div>
</div>
<!-- Flash Message -->
<div x-data="{ show: false, message: '' }"
x-show.transition.opacity="show"
x-text="message"
@flash.window="
message = $event.detail.message;
show = true;
setTimeout(() => show = false, 1000)
"
class="fixed bottom-0 right-0 bg-green-500 text-white p-2 mb-4 mr-4 rounded"
>
</div>
<script>
function pause(milliseconds = 1000) {
return new Promise(resolve => setTimeout(resolve, milliseconds));
}
function flash(message) {
window.dispatchEvent(new CustomEvent('flash', {
detail: { message }
}));
}
function game() {
return {
cards: [
{ color: 'green', flipped: false, cleared: false },
{ color: 'red', flipped: false, cleared: false },
{ color: 'blue', flipped: false, cleared: false },
{ color: 'yellow', flipped: false, cleared: false },
{ color: 'green', flipped: false, cleared: false },
{ color: 'red', flipped: false, cleared: false },
{ color: 'blue', flipped: false, cleared: false },
{ color: 'yellow', flipped: false, cleared: false },
].sort(() => Math.random() - .5),
get flippedCards() {
return this.cards.filter(card => card.flipped);
},
get clearedCards() {
return this.cards.filter(card => card.cleared);
},
get remainingCards() {
return this.cards.filter(card => ! card.cleared);
},
get points() {
return this.clearedCards.length;
},
async flipCard(card) {
card.flipped = ! card.flipped;
if (this.flippedCards.length !== 2) return;
if (this.hasMatch()) {
flash('You found a match!');
await pause();
this.flippedCards.forEach(card => card.cleared = true);
if (! this.remainingCards.length) {
alert('You Won!');
}
} else {
await pause();
}
this.flippedCards.forEach(card => card.flipped = false);
},
hasMatch() {
return this.flippedCards[0]['color'] === this.flippedCards[1]['color'];
}
};
}
</script>
</body>
</html>
@anindyaCISPL

This comment has been minimized.

Copy link

@anindyaCISPL anindyaCISPL commented Jun 19, 2020

https://www.screencast.com/t/xedkdeHHU

Please see the above screen-cast. The matched cards again re-appeared.
What could be the issue ?

@bvorjohan

This comment has been minimized.

Copy link

@bvorjohan bvorjohan commented Jun 20, 2020

https://www.screencast.com/t/xedkdeHHU

Please see the above screen-cast. The matched cards again re-appeared.
What could be the issue ?

I have been seeing this issue, too. We ought to open an issue.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.