<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout.html">

<link rel="import" href="../game-board/game-board.html">
<link rel="import" href="../board-generator/board-generator.html">

<dom-module id="bakers-dozen-app">
  <template>
    <style>
      :host {
        display: block;

        @apply --layout-fit;
        @apply --layout-vertical;
      }

      game-board {
        @apply --layout-flex;
      }
    </style>

    <board-generator id="generator"></board-generator>

    <game-board board-state="[[gameState.boardState]]"></game-board>

  </template>

  <script>
    /**
     * @customElement
     * @polymer
     */
    class BakersDozenApp extends Polymer.Element {
      static get is() { return 'bakers-dozen-app'; }
      static get properties() {
        return {
          gameState: {
            type: Object
          }
        };
      }

      ready() {
        super.ready();
        this.addEventListener('new-game', this.dealNewGame);
        this.dealNewGame();
      }

      dealNewGame() {
        this.set('gameState', {
          boardState: this.$.generator.generateNewBoardState()
        });
      }

    }

    window.customElements.define(BakersDozenApp.is, BakersDozenApp);
  </script>
</dom-module>

<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout.html">

<link rel="import" href="../game-board/game-board.html">
<link rel="import" href="../board-generator/board-generator.html">

<dom-module id="bakers-dozen-app">
  <template>
    <style>
      :host {
        display: block;

        @apply --layout-fit;
        @apply --layout-vertical;
      }

      game-board {
        @apply --layout-flex;
      }
    </style>

    <board-generator id="generator"></board-generator>

    <game-board
      board-state="[[gameState.boardState]]"
      on-new-game="_dealNewGame"></game-board>

  </template>

  <script>
    /**
     * @customElement
     * @polymer
     */
    class BakersDozenApp extends Polymer.Element {
      static get is() { return 'bakers-dozen-app'; }
      static get properties() {
        return {
          gameState: {
            type: Object
          }
        };
      }

      ready() {
        super.ready();
        this._dealNewGame();
      }

      _dealNewGame() {
        this.set('gameState', {
          boardState: this.$.generator.generateNewBoardState()
        });
      }

    }

    window.customElements.define(BakersDozenApp.is, BakersDozenApp);
  </script>
</dom-module>

Use Polymer’s declarative listener syntax instead of `addEventListener()`
Use Polymer’s declarative listener syntax instead of `addEventListener()`
