jecfish

<!-- app.template.html -->
<div>
  <my-top-bar on-reset-clicked="resetGame"></my-top-bar>
  <my-top-message time="{{currentTime}}"></my-top-message>
  <my-cards cards="{{cards}}" on-card-flipped="startGame" on-all-cards-matched="stopGame"></my-cards>
  <template is="dom-if" if="{{isGameCompleted}}">
      <my-pop-up-modal time="{{currentTime}}" on-reset-clicked="resetGame"></my-pop-up-modal>
  </template>
</div>

jecfish

// typings.d.ts
declare module "*.html" {
  const content: string;
  export default content;
}

jecfish

// app/index.ts
import * as shuffle from 'lodash/fp/shuffle';
import { Element as PolymerElement } from '@polymer/polymer/polymer-element';
import '@polymer/polymer/lib/elements/dom-if'; // required because we are using dom-if in template
import * as view from './app.template.html';

// component must be a class
export class MyApp extends PolymerElement {

    cards: PolyTest.Card[];

jecfish

<!-- top-bar.template.html -->
<div class="top-bar">
  <div class="left">FLIP & MATCH</div>
  <div class="right">
  <button on-tap="reset">RESET</button>
</div>
<style>
  // all CSS here
</style>
</div>

jecfish

// top-bar.index.ts
import { Element as PolymerElement } from '@polymer/polymer/polymer-element';
import { GestureEventListeners } from '@polymer/polymer/lib/mixins/gesture-event-listeners';
import * as view from './top-bar.template.html';

export class MyTopBar extends GestureEventListeners(PolymerElement) {

    // Define a string template instead of a `<template>` element.
    static get template() {
        return view;

jecfish

<!-- top-message.template.html -->
<div class="top-message">
  <p>
      Built with:
      <a target="_blank" href="https://www.polymer-project.org/blog/2017-08-23-hands-on-30-preview.html">
        POLYMER 3.0 PREVIEW
      </a>
  </p>
  <p>
    Flip any card to start.

jecfish

// index.ts
import { Element as PolymerElement } from '@polymer/polymer/polymer-element';
import * as view from './top-message.template.html';
import { timeFormatter } from '../../utils';

export class MyTopMessage extends PolymerElement {
    static get template() {
        return view;
    }

jecfish

<!-- cards.template.html -->
<div class="cards">
  <template is="dom-repeat" items="[[cards]]">
    <div class$="[[getClass(item)]]" on-tap="flip">
        <div class="face cover">
          <img src="{{item.coverImageUrl}}" alt="cover">
        </div>
        <div class="face value">
          <img src="{{item.imageUrl}}" alt="card">
        </div>

jecfish

// index.ts

import { Element as PolymerElement } from '@polymer/polymer/polymer-element';
import '@polymer/polymer/lib/elements/dom-repeat';
import { GestureEventListeners } from '@polymer/polymer/lib/mixins/gesture-event-listeners';
import * as view from './cards.template.html';

export class MyCards extends GestureEventListeners(PolymerElement) {
    static get template() {
        return view;

jecfish

// index.ts
import * as kebabCase from 'lodash/fp/kebabCase';
import { MyApp } from './app';
import { MyTopBar } from './top-bar';
import { MyTopMessage } from './top-message';
import { MyCards } from './cards';
import { MyPopUpModal } from './pop-up-modal';

// add custom elements here
const elements = {