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

A memory game component built with Vue and Tailwind CSS

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