Reverbe/app.html

## app.html
<template>

 <require from="./piece"></require>

 <table>
   <tr repeat.for="item of items">
     <td as-element="piece"
         repeat.for="itemm of item"
         style="background: ${itemm.color}">
       <span>
         ${itemm.name}
       </span>
     </td>
   </tr>
 </table>
</template>

## app.js
let disease = "#b3b300";
let disease2 = "#42ff00";

let colMap = {
  1: '#bd3366',
  2: '#5dcee2',
  3: '#699e96',
  4: '#642e39',
  5: '#2e0578'
};

let rand = (minimum, maximum) => {
  return Math.floor(Math.random() * (maximum - minimum + 1)) + minimum;
}

export class App {
  maxY = 30;
  maxZ = 30;
  items = [];
  interval;
  interval2;

  buildMatrix() {
    for (let y = 0; y < 20; y++) {
      this.items[y] = [];

      for (let x = 0; x < 20; x++) {
        this.items[y][x] = {
          name: `${x}, ${y}`,
          color: colMap[rand(1,5)]
        };
      }
    }
  };

  infest(sx, sy, ex, ey, disCol) {
    let picked = this.items[rand(sy,ey)][rand(sx,ex)];
    let found = false;
    let tries = 0;
    let triesMax = 1000;

    // !found && tries < triesMax;

    while (!found && tries < triesMax) {
      if (picked.color !== disCol) {
        picked.color = disCol;
        found = true;
      } else {
        picked = this.items[rand(sy,ey)][rand(sx,ex)];
        tries = tries + 1;
      }
    }

    return found;
  }

  constructor() {
    this.buildMatrix();

    this.interval = setInterval(() => {
      this.infest(2, 2, 6, 6, disease);
    }, 1000);

    this.interval2 = setInterval(() => {
        this.infest(10, 11, 15, 16, disease2);
    }, 1000);
  }
}

## index.html
<!doctype html>
<html>
  <head>
    <title>Aurelia</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <style>
  table {
    margin: 10px;
  }
  td{
    padding: 7px;
    border: 1px solid black;
    border-collapse: collapse;
    color: white;
  }
  .piece {
    background: rgba(0,0,0, 0.5);
    padding: 0 3px;
  }
</style>
  </head>
  <body aurelia-app="main">
    <h1>Loading...</h1>

    <script src="https://jdanyow.github.io/rjs-bundle/node_modules/requirejs/require.js"></script>
    <script src="https://jdanyow.github.io/rjs-bundle/config.js"></script>
    <script src="https://jdanyow.github.io/rjs-bundle/bundles/aurelia.js"></script>
    <script src="https://jdanyow.github.io/rjs-bundle/bundles/babel.js"></script>
    <script>
      require(['aurelia-bootstrapper']);
    </script>
  </body>
</html>

## main.js
export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging();

  aurelia.start().then(() => aurelia.setRoot());
}

## piece.html
<template>
  <div class="piece">
    <slot></slot>
  </div>
</template>

## piece.js
import {inject} from 'aurelia-framework';

export class Piece {

}
	<template>

	<require from="./piece"></require>

	<table>
	<tr repeat.for="item of items">
	<td as-element="piece"
	repeat.for="itemm of item"
	style="background: ${itemm.color}">
	<span>
	${itemm.name}
	</span>
	</td>
	</tr>
	</table>
	</template>
	let disease = "#b3b300";
	let disease2 = "#42ff00";

	let colMap = {
	1: '#bd3366',
	2: '#5dcee2',
	3: '#699e96',
	4: '#642e39',
	5: '#2e0578'
	};

	let rand = (minimum, maximum) => {
	return Math.floor(Math.random() * (maximum - minimum + 1)) + minimum;
	}

	export class App {
	maxY = 30;
	maxZ = 30;
	items = [];
	interval;
	interval2;

	buildMatrix() {
	for (let y = 0; y < 20; y++) {
	this.items[y] = [];

	for (let x = 0; x < 20; x++) {
	this.items[y][x] = {
	name: `${x}, ${y}`,
	color: colMap[rand(1,5)]
	};
	}
	}
	};

	infest(sx, sy, ex, ey, disCol) {
	let picked = this.items[rand(sy,ey)][rand(sx,ex)];
	let found = false;
	let tries = 0;
	let triesMax = 1000;

	// !found && tries < triesMax;

	while (!found && tries < triesMax) {
	if (picked.color !== disCol) {
	picked.color = disCol;
	found = true;
	} else {
	picked = this.items[rand(sy,ey)][rand(sx,ex)];
	tries = tries + 1;
	}
	}

	return found;
	}

	constructor() {
	this.buildMatrix();

	this.interval = setInterval(() => {
	this.infest(2, 2, 6, 6, disease);
	}, 1000);

	this.interval2 = setInterval(() => {
	this.infest(10, 11, 15, 16, disease2);
	}, 1000);
	}
	}
	<!doctype html>
	<html>
	<head>
	<title>Aurelia</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
	<style>
	table {
	margin: 10px;
	}
	td{
	padding: 7px;
	border: 1px solid black;
	border-collapse: collapse;
	color: white;
	}
	.piece {
	background: rgba(0,0,0, 0.5);
	padding: 0 3px;
	}
	</style>
	</head>
	<body aurelia-app="main">
	<h1>Loading...</h1>

	<script src="https://jdanyow.github.io/rjs-bundle/node_modules/requirejs/require.js"></script>
	<script src="https://jdanyow.github.io/rjs-bundle/config.js"></script>
	<script src="https://jdanyow.github.io/rjs-bundle/bundles/aurelia.js"></script>
	<script src="https://jdanyow.github.io/rjs-bundle/bundles/babel.js"></script>
	<script>
	require(['aurelia-bootstrapper']);
	</script>
	</body>
	</html>
	export function configure(aurelia) {
	aurelia.use
	.standardConfiguration()
	.developmentLogging();

	aurelia.start().then(() => aurelia.setRoot());
	}
	import {inject} from 'aurelia-framework';

	export class Piece {

	}