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

A memory game web component.

"use strict";

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

const renderCard = ({
  state,
  handleClick
}) => position => {
  const {
    name,
    img
  } = (0, _memoryGameSelectors.getCardAtPosition)(position, state);
  const revealed = (0, _memoryGameSelectors.isCardRevealed)(position, state) || (0, _memoryGameSelectors.isCardMatched)(position, state);
  return _elmnt.html`
    <flip-card
      ?revealed=${revealed}
      @click=${handleClick(position)}
      class="memory-game--card">
      <span class="memory-game--bg"></span>
      <span class="memory-game--text">${name}</span>
      <img class="memory-game--media" src="${img}">
    </flip-card>
  `;
};

var _default = props => {
  const interactiveClass = props.state.isInteractive ? ' memory-game--wrapper-interactive' : '';
  return _elmnt.html`
    <style>
      :host {
  --flip-card-perspective: none;
  --flip-card-proportion: 3.5/4.2;
  --flip-card-border: #91a4a4;
  --flip-card-border-radius: 2px;
  --flip-card-background: #aab9b9;

  display: block;
  width: 100%;
  font-family: "Whitney SSm A", "Whitney SSm B", sans-serif;
  font-style: normal;
  font-weight: 400;
  perspective: 1800px;
}

.memory-game--wrapper {
  display: grid;
  grid-template-columns: repeat(var(--memory-game-cards-per-line, 6), 1fr);
  grid-gap: var(--memory-game-gap, 20px) var(--memory-game-gap, 20px);
  pointer-events: none;
}

.memory-game--wrapper-interactive {
  pointer-events: all;
}

.memory-game--wrapper-interactive .memory-game--card {
  cursor: pointer;
}

.memory-game--media {
  position: absolute;
  display: block;
  top: calc(4% * var(--flip-card-proportion));
  left: 4%;
  width: 92%;
  height: auto;
  background: #fff;
}

.memory-game--text {
  position: absolute;
  top: 82.5%;
  left: 4%;
  font-size: 12px;
}

.memory-game--bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
}

    </style>
    <div class="memory-game--wrapper${interactiveClass}">
      ${(0, _sequence.default)((0, _memoryGameSelectors.getNumberOfCards)(props.state)).map(renderCard(props))}
    </div>
  `;
};

exports.default = _default;