jecfish

import puppeteer from 'puppeteer';

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  await page.goto('https://developer.chrome.com/blog/extend-recorder/');

  // Use unique text as selector
  // It's not neccessary to specify full text in the selector

jecfish

const gid = (id) => document.getElementById(id);
gid('idtype').value = "1"; // 1=IC
gid('nric').value = "Replace_your_IC"; // e.g. 901231032468
gid('ic-numbern').value = "Replace_your_IC"; // e.g. 901231032468
checkic();
gid('msid').value = "Replace_your_MySejahteraID"; // your phone or email
gid('phone').value = "Replce_your_phone";
gid('phone-numbern').value = "Replace_your_phone";
boxclickppv('kl'); // or replace with "selangor"

jecfish

/* test webp support, add .webp class to body */
{
   canvas = typeof document === 'object' ? 
  document.createElement('canvas') : {};
  canvas.width = canvas.height = 1;

  if (canvas.toDataURL && canvas.toDataURL('image/webp').indexOf('image/webp') === 5) {
    document.querySelector('body').classList.add('webp')
  }
}

jecfish

// app.component.ts

import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; // add this line
// ...
@NgModule({
declarations: [
// ...
schemas: [CUSTOM_ELEMENTS_SCHEMA], // add this line
})
export class AppModule { }

jecfish

// app.component.ts

import { Component, OnInit } from '@angular/core';
import * as shuffle from 'lodash/fp/shuffle';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

jecfish

<!-- app.component.html -->
<my-top-bar (reset-clicked)="resetGame()"></my-top-bar>
<my-top-message [time]="currentTime"></my-top-message>
<my-cards [cards]="cards" (card-flipped)="startGame()" (all-cards-matched)="stopGame()"></my-cards>
<my-pop-up-modal *ngIf="isGameCompleted" [time]="currentTime" (reset-clicked)="resetGame()"></my-pop-up-modal>

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 = {

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

<!-- 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 * as view from './top-message.template.html';
import { timeFormatter } from '../../utils';

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