vue-card-memory-game/dist/vue-card-memory-game.umd.js

A memory game component built with Vue and Tailwind CSS

(function(e,l){typeof exports=="object"&&typeof module<"u"?module.exports=l(require("vue")):typeof define=="function"&&define.amd?define(["vue"],l):(e=typeof globalThis<"u"?globalThis:e||self,e["vue-card-memory-game"]=l(e.Vue))})(this,function(e){"use strict";const l={class:"card-face card-back rounded"},w=e.defineComponent({__name:"GameCard",props:{card:{},reverseClasses:{default:"blue_background"},showCardsForMemorization:{type:Boolean}},emits:["selectCard"],setup(s,{emit:i}){const n=i,a=()=>{s.card.isMatched||n("selectCard",s.card.id)};return(o,m)=>(e.openBlock(),e.createElementBlock("div",{class:"full-size",onClick:a},[e.createVNode(e.Transition,{name:"flip",mode:"out-in"},{default:e.withCtx(()=>[e.createElementVNode("div",{class:e.normalizeClass(["card border",{flipped:o.card.isOpen||o.showCardsForMemorization}])},[e.createElementVNode("div",{class:e.normalizeClass(["card-face card-front",o.reverseClasses])},[e.renderSlot(o.$slots,"reverse",{},void 0,!0)],2),e.createElementVNode("div",l,[e.renderSlot(o.$slots,"content",{},void 0,!0)])],2)]),_:3})]))}}),u=(s,i)=>{const n=s.__vccOpts||s;for(const[a,o]of i)n[a]=o;return n},M=u(w,[["__scopeId","data-v-cd17343c"]]),g=s=>{const i=t=>{const d=t;for(let r=t.length-1;r>0;r--){const p=Math.floor(Math.random()*(r+1));[t[r],t[p]]=[t[p],t[r]]}return d},n=e.reactive(i(s));let a=e.reactive([]);const o=e.computed(()=>n.every(t=>t.isMatched)),m=()=>{n.forEach(t=>{t.isMatched||(t.isOpen=!1)})},f=t=>{if(a.length<2&&a.push(t),a.length===2){const[d,r]=a;d.value===r.value?(d.isMatched=!0,r.isMatched=!0,a=[]):setTimeout(()=>{a=[],m()},900)}},C=t=>{if(c.value)return;const d=n.find(r=>r.id===t);d&&(d.isOpen=!0,f(d))},c=e.ref(!1);async function h(){await new Promise(t=>setTimeout(t,1e3)),c.value=!0,await new Promise(t=>setTimeout(t,3e3)),c.value=!1}return{cardsData:n,markCardAsOpened:C,allCardsMatched:o,showCardsForMemorization:c,displayCards:h}},z={class:"game-container"};return u(e.defineComponent({__name:"MemoryGame",props:{gridSize:{},cards:{default:()=>[]},cardHeight:{default:"400"},reverseClasses:{}},emits:["allCardsAreMatched"],setup(s,{emit:i}){const n=i,{cardsData:a,allCardsMatched:o,markCardAsOpened:m,showCardsForMemorization:f,displayCards:C}=g(s.cards);C(),e.watch(()=>o.value,t=>{t===!0&&n("allCardsAreMatched")});const c=t=>{m(t)},h=e.computed(()=>window.innerWidth<640?s.gridSize-4:window.innerWidth<768?s.gridSize-3:window.innerWidth<1024?s.gridSize-2:s.gridSize);return(t,d)=>(e.openBlock(),e.createElementBlock("div",z,[e.createElementVNode("div",{class:"card-grid",style:e.normalizeStyle({"grid-template-columns":`repeat(${h.value}, minmax(0, 1fr))`})},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(a),r=>(e.openBlock(),e.createBlock(M,{key:r.id,card:r,style:e.normalizeStyle({height:t.cardHeight+"px"}),onSelectCard:c,reverseClasses:t.reverseClasses,showCardsForMemorization:e.unref(f)},{reverse:e.withCtx(()=>[e.renderSlot(t.$slots,"reverse",{},void 0,!0)]),content:e.withCtx(()=>[e.renderSlot(t.$slots,"content",{cardData:r},void 0,!0)]),_:2},1032,["card","style","reverseClasses","showCardsForMemorization"]))),128))],4)]))}}),[["__scopeId","data-v-216bc36f"]])});