wid-tiles-store.html

<link rel="import" href="../polymer/polymer.html">

<link rel="import" href="wid-tile.html">

<!--
An element that display store a set of hexagonal tiles.
The store is indexed twice. Once with the cube layout and once with the
even-q layout.

Example:

```
  <wid-tiles-store id="store"></wid-tiles-store>
```

@group Wid
@element wid-tiles-store
@demo demo/index.html
@hero hero.svg
-->
<script>
(function() {

  Polymer({
    is: 'wid-tiles-store',

    properties: {
      type: {
        type: String,
        value: 'circle'
      },

      tilesXyz: {
        type: Array,
        notify: true,
        value: {}
      },

      tilesIj: {
        type: Array,
        notify: true,
        value: {}
      }
    },

    /**
     * Compute the position of a tile in the even-q and cube layouts.
     * @param  {Tile} tile A tile with at least one set of coordinates in one layout.
     * @return {{i, j, x, y, z: Number}}      The complete coordinates of the tile.
     */
    _getPositions: function (tile) {
      /*jslint bitwise: true */
      var pos = {
        x: tile.x || (tile.j - Math.floor((tile.i - (tile.i&1)) / 2)),
        y: tile.y || (- tile.x - tile.z),
        z: tile.z || tile.i,
        i: tile.i || tile.z,
        j: tile.j || (tile.x + Math.floor((tile.z - (tile.z&1)) / 2))
      };
      pos.x = (!pos.x) ? 0: pos.x;
      pos.y = (!pos.y) ? 0: pos.y;
      pos.z = (!pos.z) ? 0: pos.z;
      pos.i = (!pos.i) ? 0: pos.i;
      pos.j = (!pos.j) ? 0: pos.j;

      return pos;
    },

    /**
     * Add a tile to the store.
     * @param {Tile} tile A tile.
     */
    addTile: function (tile) {
      this._addTileXYZ(tile);
      this._addTileIJ(tile);
    },

    /**
     * Add a tile in the tilesIj Map and notifies parents.
     * @param {Tile} tile A tile.
     */
    _addTileIJ: function (tile) {
      var pos = this._getPositions(tile);

      this.tilesIj[this.type] = this.tilesIj[this.type] || [];
      this.tilesIj[this.type][pos.i] = this.tilesIj[this.type][pos.i] || [];
      this.tilesIj[this.type][pos.i][pos.j] = this.tilesIj[this.type][pos.i][pos.j] || [];
      this.set('tilesIj.' + this.type + '.' + pos.i + '.' + pos.j, tile);

    },

    /**
     * Add a tile in the tilesXyz Map and notifies parents.
     * @param {Tile} tile A tile.
     */
    _addTileXYZ: function (tile) {
      var pos = this._getPositions(tile);

      this.tilesXyz[this.type] = this.tilesXyz[this.type] || [];
      this.tilesXyz[this.type][pos.x] = this.tilesXyz[this.type][pos.x] || [];
      this.tilesXyz[this.type][pos.x][pos.y] = this.tilesXyz[this.type][pos.x][pos.y] || [];
      this.tilesXyz[this.type][pos.x][pos.y][pos.z] = this.tilesXyz[this.type][pos.x][pos.y][pos.z] || [];
      this.set('tilesXyz.' + [this.type] + '.' + pos.x + '.' + pos.y + '.' + pos.z, tile);

    },

    /**
     * Return a tile knowing the cube coordinates.
     * If the tile doesn't exist. We create a fake tile and store it.
     * This fake tile is usefull when the user get the neighbors of a tile.
     * @param  {Number} x X coordinate
     * @param  {Number} y Y coordinate
     * @param  {Number} z Z coordinate
     * @return {Tile}   The tile.
     */
    getTileXYZ: function (x, y, z) {
      try {
        return this.tilesXyz[this.type][x][y][z];
      } catch (e) {
        var emptyTile = document.createElement('wid-tile');

        emptyTile.x = x;
        emptyTile.y = y;
        emptyTile.z = z;
        emptyTile.type = this.type;
        emptyTile.isFake = true;
        emptyTile._store = this;

        this.addTile(emptyTile);

        return emptyTile;
      }
    },

    /**
     * Return a tile knowing the even-q coordinates.
     * If the tile doesn't exist. We create a fake tile and store it.
     * This fake tile is usefull when the user get the neighbors of a tile.
     * @param  {Number} i I coordinate
     * @param  {Number} j J coordinate
     * @return {Tile}   The tile.
     */
    getTileIJ: function (i, j) {
     try {
        return this.tilesIj[this.type][i][j];
      } catch (e) {
        var emptyTile = document.createElement('wid-tile');

        emptyTile.i = i;
        emptyTile.j = j;
        emptyTile.isFake = true;
        emptyTile.type = this.type;
        emptyTile._store = this;

        this.addTile(emptyTile);

        return emptyTile;
      }
    }
  });
})();
</script>