cards.index.ts

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

    constructor() {
        super();
    }

    static get properties() {
        return {
            cards: Array
        };
    }

    getClass(item) {
        return (item.isFlipped || item.isMatched) ? 'card flipped' : 'card';
    }

    cards: PolyTest.Card[];

    private get isReachMaxFlippedCard() {
        // logic to check max 2 cards flip at any point of time
    }

    private get isAllCardsMatched() {
        // logic to check if all cards matched
    }

    private isMatch([image1, image2]: string[]) {
        // logic to check if two card images matched
    }

    flip({ model }) {
        const card = { ...model.item };
        const index = model.index;
        
        // logic to flip the card
    }
}