app.index.ts

// 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[];
    totalSeconds = 0;
    timer: any = 0;
    currentTime: PolyTest.Time = { hour: 0, minute: 0, second: 0 };
    isGameCompleted = false;

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

    constructor() {
        super();
    }

    static get properties() {
        // all the properties that need to show in template        
        return {
            isGameCompleted: Boolean
        };
    }

    // lifecycle hook
    ready() {
        super.ready();
        this.cards = this.shuffleCards();
    }

    private shuffleCards(): PolyTest.Card[] {
        // ... logic to shuffle cards
        return shuffle(list);
    }

    resetGame() {
        // ... logic to reset game
    }

    // when click on any card first time, start the game timer 
    startGame() {
        // no action if game is already started
        if (this.timer) return;

        // ... logic to start the game
    }

    stopGame() {
        // ... logic to start the game
    }

    updateTime() {
        // ... logic to update the time every second
    }
}