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

A memory game web component.

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) } })); }

import { html } from '@leofavre/elmnt';
import '@leofavre/flip-card-component';
import sequence from '../helpers/sequence.js';
import { getNumberOfCards, getCardAtPosition, isCardRevealed, isCardMatched } from '../state/memoryGameSelectors.js';

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

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

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