Tiling (movable) 4

components.tileset-component.js

import Ember from 'ember';

const TILE_MAP = {
  '....': 'none',
  '᎘1᎘': 'baseTop1',
  '᎘2᎘': 'baseTop2',
  '᎘3᎘': 'baseTop3',
  '᎘4᎘': 'baseTop4',
  '᎘5᎘': 'baseTop5',
  '᎘6᎘': 'baseTop6',
  '᎘7᎘': 'baseTop7',
  '᎘8᎘': 'baseTop8',
  '᧦|1᎘': 'baseSide1',
  '᧦|2᎘': 'baseSide2',
  '᧦|3᎘': 'baseSide3',
  '▂1▂': 'baseUpper1',
  '▂2▂': 'baseUpper2',
  '▂3▂': 'baseUpper3',
  '▂4▂': 'baseUpper4',
  '▂5▂': 'baseUpper5',
  '▂1▶': 'rightUpper1',
  '▇1▶': 'rightInner1',
  '▇2▶': 'rightInner2',
  '᎘1|├': 'rightSide1',
  '᎘2|├': 'rightSide2',
  '᎘3|├': 'rightSide3',
  '▇1▇': 'baseInner1',
  '▇2▇': 'baseInner2',
  '▇3▇': 'baseInner3',
  '▇X▇': 'baseInnerRock1',
  '▇Y▇': 'baseInnerRock2',
};

export default Ember.Component.extend({
  tilesArray: Ember.computed('tiles', function() {
    const a = [];
    this.get('tiles').split(/(\s+)/).forEach(char => {
      if (TILE_MAP[char]) {
				a.pushObject(TILE_MAP[char]);      
      }
    });
    return a;
  })
});

controllers.application.js

import Ember from 'ember';

const TILE_MAP = {
  '....': 'none',
  '᎘1᎘': 'baseTop1',
  '᎘2᎘': 'baseTop2',
  '᎘3᎘': 'baseTop3',
  '᎘4᎘': 'baseTop4',
  '᎘5᎘': 'baseTop5',
  '᎘6᎘': 'baseTop6',
  '᎘7᎘': 'baseTop7',
  '᎘8᎘': 'baseTop8',
  '᧦|1᎘': 'baseSide1',
  '᧦|2᎘': 'baseSide2',
  '᧦|3᎘': 'baseSide3',
  '▂1▂': 'baseUpper1',
  '▂2▂': 'baseUpper2',
  '▂3▂': 'baseUpper3',
  '▂4▂': 'baseUpper4',
  '▂5▂': 'baseUpper5',
  '▂1▶': 'rightUpper1',
  '▇1▶': 'rightInner1',
  '▇2▶': 'rightInner2',
  '᎘1|├': 'rightSide1',
  '᎘2|├': 'rightSide2',
  '᎘3|├': 'rightSide3',
  '▇1▇': 'baseInner1',
  '▇2▇': 'baseInner2',
  '▇3▇': 'baseInner3',
  '▇X▇': 'baseInnerRock1',
  '▇Y▇': 'baseInnerRock2',
};

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  
  tiles: Ember.computed(function() {
    return `
		.... .... ....  .... ....  .... ....  ....  ....  ....  .... ....  ....  ....  .... ....
		.... .... ....  .... ....  .... ....  ....  ....  ....  .... ....  ....  ....  .... ....
		.... .... ....  .... ....  .... ....  ....  ....  ....  .... ....  ....  ....  .... ....
		.... .... ....  .... ....  .... ....  ....  ....  ....  .... ....  ....  ....  .... ....
		.... .... ....  .... ....  .... ....  ....  ....  ....  .... ....  ....  ....  .... ....
		.... .... ....  .... ....  .... ....  ....  ....  ....  .... ....  ....  ....  .... ....
		.... .... ᎘1᎘ ᎘2᎘ ᎘3᎘ ᎘4᎘ ᎘5᎘ ᎘6᎘ ᎘7᎘ ᎘6᎘ ᎘2᎘ ᎘4᎘ ᎘7᎘ ᎘8᎘  .... ....
		.... .... ᧦|1᎘ ▂1▂ ▂1▂ ▂1▂ ▂1▂ ▂1▂ ▂1▂ ▂4▂ ▂5▂ ▂3▂ ▂1▶ ᎘1|├  .... ....
		.... .... ᧦|2᎘ ▇2▇ ▇X▇ ▇3▇ ▇1▇ ▇3▇ ▇X▇ ▇1▇ ▇3▇ ▇3▇ ▇1▶ ᎘2|├  .... ....
		.... .... ᧦|3᎘ ▇3▇ ▇3▇ ▇Y▇ ▇3▇ ▇3▇ ▇Y▇ ▇3▇ ▇3▇ ▇3▇ ▇2▶ ᎘3|├  .... ....
	`;
  }),
	

});

helpers.tile.js

import Ember from 'ember';

export function tile([name]/*, hash*/) {
  return Ember.String.htmlSafe( `<div class="tile-container"><div class="tile-content ${name}"></div></div>`);
}

export default Ember.Helper.helper(tile);

templates.application.hbs

<h1>Tiling Example</h1>
<br>

{{tileset-component tiles=tiles}}
<br>
<br>

templates.components.tileset-component.hbs

<div class="tileset">
  {{#each tilesArray as |tile|}}
  	{{tile tile}}
	{{/each}}
</div>

twiddle.json

{
  "version": "0.12.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.12.0",
    "ember-template-compiler": "2.12.0",
    "ember-testing": "2.12.0",
    "tileset": "https://rawgit.com/kefavn/dbfb3aed5da7a83cbe32c1ecc45be012/raw/8686df62e76dc0f97be33681c6577aea855c81ec/SassMeister-output.css"
  },
  "addons": {
    "ember-data": "2.12.1"
  }
}