zladuric/app.js

## app.js
'use strict';
window.onload = function() {
  const TILE_TYPES = {
    FULL: 'full',
    EMPTY: 'empty',
    HALF_FULL: 'half-full',
  };
  const template = document.getElementById('tile');
  class TileElement extends HTMLElement {
    connectedCallback () {
      if (!this.shadowRoot) {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.appendChild(template.content.cloneNode(true));
        this.shadowRoot.querySelector('.tile').classList.add(
          this.getAttribute('type'));
      }
    }
  }

  const register = () => customElements.define('a-tile', TileElement)
  window.WebComponents ? window.WebComponents.waitFor(register) : register();

  class World {
    constructor(height = 10, width = 10) {
      this.tiles = [];
      this.tilePointers = {};
      for (let i = 0; i < height; i++) {
        this.tiles[i] = [];
        for (let j = 0; j < width; j++) {
          this.tiles[i][j] = this.getRandomTilePointer();
        }
      }
    }

    getRandomTilePointer() {
      const random = Math.floor(Math.random() * 10);
      if (random > 7) {
        return this.getTilePointer(TILE_TYPES.FULL);
      } else if (random > 1) {
        return this.getTilePointer(TILE_TYPES.EMPTY);
      } else {
        return this.getTilePointer(TILE_TYPES.HALF_FULL);
      }
    }

    getTilePointer(type) {
      if (!this.tilePointers[type]) {
        this.tilePointers[type] = new Tile(type);
      }
      return this.tilePointers[type];
    }

    render(container) {
      container = container || document.querySelector('.tiles');
      for (const row of this.tiles) {
        for (const tile of row) {
          const el = document.createElement('a-tile');
          el.classList.add(tile.type);
          container.appendChild(el);
        }
      }
    }
  }

  class Tile {
    constructor(type) {
      this.type = type;
    }
  }


  const App = window.App || {};
  App.world = new World();
  window.App = App;
  App.world.render();

  const button = document.querySelector('#regenerate');
  button.addEventListener('click', () => {
    const tiles = document.querySelector('.tiles');
    while(tiles.firstChild) {
      tiles.removeChild(tiles.firstChild);
    }
    App.world.render();
  });

}

## index.html
<!doctype html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="style.css">
  <title>Tiles</title>
</head>
<body>
  <h1>Tiles</h1>
  <div class="toolbar">
    <button id="regenerate">Regenerate</button>
    <hr>
  </div>
  <div class="tiles"></div>


  <template id="tile">
    <div class="tile"></div>
  </template>
  <script type="text/javascript" src="app.js"></script>
</body>
</html>

## style.css
body {
  height: 100%;
  padding: 1rem;
  background-color: gray;
}

.tiles {
  width: 17rem;
  display: block;
}

a-tile {
  margin: 0.1rem;
  display: inline-block;
  height: 1.5rem;
  width: 1.5rem;
}

a-tile.empty {
  background-color: white;
}

a-tile.full {
  background-color: black;
}

a-tile.half-full {
  background: repeating-linear-gradient(
    -45deg,
    white 5px,
    black 10px
  );
}
	'use strict';
	window.onload = function() {
	const TILE_TYPES = {
	FULL: 'full',
	EMPTY: 'empty',
	HALF_FULL: 'half-full',
	};
	const template = document.getElementById('tile');
	class TileElement extends HTMLElement {
	connectedCallback () {
	if (!this.shadowRoot) {
	this.attachShadow({ mode: 'open' });
	this.shadowRoot.appendChild(template.content.cloneNode(true));
	this.shadowRoot.querySelector('.tile').classList.add(
	this.getAttribute('type'));
	}
	}
	}

	const register = () => customElements.define('a-tile', TileElement)
	window.WebComponents ? window.WebComponents.waitFor(register) : register();

	class World {
	constructor(height = 10, width = 10) {
	this.tiles = [];
	this.tilePointers = {};
	for (let i = 0; i < height; i++) {
	this.tiles[i] = [];
	for (let j = 0; j < width; j++) {
	this.tiles[i][j] = this.getRandomTilePointer();
	}
	}
	}

	getRandomTilePointer() {
	const random = Math.floor(Math.random() * 10);
	if (random > 7) {
	return this.getTilePointer(TILE_TYPES.FULL);
	} else if (random > 1) {
	return this.getTilePointer(TILE_TYPES.EMPTY);
	} else {
	return this.getTilePointer(TILE_TYPES.HALF_FULL);
	}
	}

	getTilePointer(type) {
	if (!this.tilePointers[type]) {
	this.tilePointers[type] = new Tile(type);
	}
	return this.tilePointers[type];
	}

	render(container) {
	container = container \|\| document.querySelector('.tiles');
	for (const row of this.tiles) {
	for (const tile of row) {
	const el = document.createElement('a-tile');
	el.classList.add(tile.type);
	container.appendChild(el);
	}
	}
	}
	}

	class Tile {
	constructor(type) {
	this.type = type;
	}
	}


	const App = window.App \|\| {};
	App.world = new World();
	window.App = App;
	App.world.render();

	const button = document.querySelector('#regenerate');
	button.addEventListener('click', () => {
	const tiles = document.querySelector('.tiles');
	while(tiles.firstChild) {
	tiles.removeChild(tiles.firstChild);
	}
	App.world.render();
	});

	}
	<!doctype html>
	<html>
	<head>
	<link rel="stylesheet" type="text/css" href="style.css">
	<title>Tiles</title>
	</head>
	<body>
	<h1>Tiles</h1>
	<div class="toolbar">
	<button id="regenerate">Regenerate</button>
	<hr>
	</div>
	<div class="tiles"></div>


	<template id="tile">
	<div class="tile"></div>
	</template>
	<script type="text/javascript" src="app.js"></script>
	</body>
	</html>
	body {
	height: 100%;
	padding: 1rem;
	background-color: gray;
	}

	.tiles {
	width: 17rem;
	display: block;
	}

	a-tile {
	margin: 0.1rem;
	display: inline-block;
	height: 1.5rem;
	width: 1.5rem;
	}

	a-tile.empty {
	background-color: white;
	}

	a-tile.full {
	background-color: black;
	}

	a-tile.half-full {
	background: repeating-linear-gradient(
	-45deg,
	white 5px,
	black 10px
	);
	}