@leofavre/memory-game-component/dist/cjs/es5/view/MemoryGameView.js

A memory game web component.

"use strict";

function _templateObject2() {
  var data = _taggedTemplateLiteral(["\n    <style>\n      :host {\n  --flip-card-perspective: none;\n  --flip-card-proportion: 3.5/4.2;\n  --flip-card-border: #91a4a4;\n  --flip-card-border-radius: 2px;\n  --flip-card-background: #aab9b9;\n\n  display: block;\n  width: 100%;\n  font-family: \"Whitney SSm A\", \"Whitney SSm B\", sans-serif;\n  font-style: normal;\n  font-weight: 400;\n  perspective: 1800px;\n}\n\n.memory-game--wrapper {\n  display: grid;\n  grid-template-columns: repeat(var(--memory-game-cards-per-line, 6), 1fr);\n  grid-gap: var(--memory-game-gap, 20px) var(--memory-game-gap, 20px);\n  pointer-events: none;\n}\n\n.memory-game--wrapper-interactive {\n  pointer-events: all;\n}\n\n.memory-game--wrapper-interactive .memory-game--card {\n  cursor: pointer;\n}\n\n.memory-game--media {\n  position: absolute;\n  display: block;\n  top: calc(4% * var(--flip-card-proportion));\n  left: 4%;\n  width: 92%;\n  height: auto;\n  background: #fff;\n}\n\n.memory-game--text {\n  position: absolute;\n  top: 82.5%;\n  left: 4%;\n  font-size: 12px;\n}\n\n.memory-game--bg {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background: #fff;\n}\n\n    </style>\n    <div class=\"memory-game--wrapper", "\">\n      ", "\n    </div>\n  "]);

  _templateObject2 = function _templateObject2() {
    return data;
  };

  return data;
}

function _templateObject() {
  var data = _taggedTemplateLiteral(["\n    <flip-card\n      ?revealed=", "\n      @click=", "\n      class=\"memory-game--card\">\n      <span class=\"memory-game--bg\"></span>\n      <span class=\"memory-game--text\">", "</span>\n      <img class=\"memory-game--media\" src=\"", "\">\n    </flip-card>\n  "]);

  _templateObject = function _templateObject() {
    return data;
  };

  return data;
}

function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _elmnt = require("@leofavre/elmnt");

require("@leofavre/flip-card-component");

var _sequence = _interopRequireDefault(require("../helpers/sequence.js"));

var _memoryGameSelectors = require("../state/memoryGameSelectors.js");

function _interopRequireDefault(obj) {
  return obj && obj.__esModule ? obj : {
    default: obj
  };
}

var renderCard = function renderCard(_ref) {
  var state = _ref.state,
      handleClick = _ref.handleClick;
  return function (position) {
    var _ref2 = (0, _memoryGameSelectors.getCardAtPosition)(position, state),
        name = _ref2.name,
        img = _ref2.img;

    var revealed = (0, _memoryGameSelectors.isCardRevealed)(position, state) || (0, _memoryGameSelectors.isCardMatched)(position, state);
    return _elmnt.html(_templateObject(), revealed, handleClick(position), name, img);
  };
};

var _default = function _default(props) {
  var interactiveClass = props.state.isInteractive ? ' memory-game--wrapper-interactive' : '';
  return _elmnt.html(_templateObject2(), interactiveClass, (0, _sequence.default)((0, _memoryGameSelectors.getNumberOfCards)(props.state)).map(renderCard(props)));
};

exports.default = _default;