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

// 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-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

// 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

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

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>