JamesWP/jsbin.OHECOXu.html

## jsbin.OHECOXu.html
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-git2.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <h1 class=title >Press Some Keys...<b>#</b><b>&lt;</b><b>&gt;</b><b>_</b>...</h1>
  <div class=board >
    <div class=tile ></div><div class=tile ></div><div class=tile ></div><div class=tile ></div><div class=tile ></div><div class=tile ></div>
  </div>
</body>
</html>

## jsbin.OHECOXu.js
var tile = (function () {
  var alowedChars =
      ['#','-','+','=','<','>','^','~','&','|','_','6'];
  function generateChar (){
    return alowedChars
        [Math.round(
            Math.random()*(alowedChars.length-1)
        )];
  }

  // constructor
  var tile = function (pwidth,pheight,$el) {
    this.height = pheight;
    this.width = pwidth;
    this.$el = $el;
  };

  // prototype

  /**
    * generates random chars
    **/
  tile.prototype.generate = function (){
    this.chars = "";
    for(var xy = this.height*this.width;xy>0;xy--){
      this.chars += generateChar();
    }

    return this;
  };

  /**
    * initialises the tile to the el
    **/
  tile.prototype.init = function(){
    this.$el.empty().append(this.getEls());
    this.$el
      .on('keypress','b',this.onKeyup)
      .on('mouseenter','b',this.onMouseEnter)
      .children().attr("tabindex","0");
    return this;
  };
  tile.prototype.onMouseEnter = function(){
    $(this).focus();
  };
  tile.prototype.onKeyup = function(e){
    var char = String.fromCharCode(e.keyCode);
    var isChar = $.inArray(char,alowedChars)!=-1;
    if(isChar){
      $(this).text(char).addClass("highlight");
    }
  };

  tile.prototype.toString = function(){return "Tile";};
  /**
    * returns the chars
    **/
  tile.prototype.getEls = function(){
    var $chars = $('<div>');
    for(var i=0;i<this.chars.length;i++){
      $chars.append($('<b>').text(this.chars[i]));
    }
    return $chars.children();
  };

  // return module
  return tile;
})();


$('.tile').each(function(){
  $(this).data("tile",new tile(10,10,$(this))
  .generate().init());
});

## jsbin.OHECOXu.less
@boxSize: 30px;
@tileSize: 10;

body{
  background:#f4f4f7;
}

h1.title {
  font-family:sans-serif;
  margin:20px;
  b{
    width:@boxSize;
    height:@boxSize;
    background:#fff;
    font-family:monospace;
    border:#ece8e9 1px solid;
    margin:0 3px;
  }
}

.tile {
  background:#fefcfa;
  font-family:monospace;
  width:@boxSize*@tileSize;
  height:@boxSize*@tileSize;
  font-size:26px;
  color:#023;
  //border:1px solid #ece8e9;
  margin:0;
  padding:0;
  b {
    outline:none;
    width:@boxSize;
    height:@boxSize;
    text-align:center;
    overflow:hidden;
    float:left;
  }
  :nth-child(3n){
    background:#fafaff;
  }
  b:hover{
    color:#000;
    width:@boxSize - 2;
    height:@boxSize - 2;
    border:1px solid #ccc;
    background:#efeae8;
  }
  .highlight {
   -webkit-animation:glow 2s ease-in 1;
   animation: glow 2s ease-in 1;
}
}
.board{
  margin:50px;
  .tile{
    float:left;
  }
}

@-webkit-keyframes glow {
  0% { background:yellow; }
  100% { background:none; }
}
@keyframes glow {
  0% { background:yellow; }
  100% { background:none; }
}
	<!DOCTYPE html>
	<html>
	<head>
	<script src="http://code.jquery.com/jquery-git2.js"></script>
	<meta charset=utf-8 />
	<title>JS Bin</title>
	</head>
	<body>
	<h1 class=title >Press Some Keys...<b>#</b><b><</b><b>></b><b>_</b>...</h1>
	<div class=board >
	<div class=tile ></div><div class=tile ></div><div class=tile ></div><div class=tile ></div><div class=tile ></div><div class=tile ></div>
	</div>
	</body>
	</html>
	var tile = (function () {
	var alowedChars =
	['#','-','+','=','<','>','^','~','&','\|','_','6'];
	function generateChar (){
	return alowedChars
	[Math.round(
	Math.random()*(alowedChars.length-1)
	)];
	}

	// constructor
	var tile = function (pwidth,pheight,$el) {
	this.height = pheight;
	this.width = pwidth;
	this.$el = $el;
	};

	// prototype

	/**
	* generates random chars
	**/
	tile.prototype.generate = function (){
	this.chars = "";
	for(var xy = this.height*this.width;xy>0;xy--){
	this.chars += generateChar();
	}

	return this;
	};

	/**
	* initialises the tile to the el
	**/
	tile.prototype.init = function(){
	this.$el.empty().append(this.getEls());
	this.$el
	.on('keypress','b',this.onKeyup)
	.on('mouseenter','b',this.onMouseEnter)
	.children().attr("tabindex","0");
	return this;
	};
	tile.prototype.onMouseEnter = function(){
	$(this).focus();
	};
	tile.prototype.onKeyup = function(e){
	var char = String.fromCharCode(e.keyCode);
	var isChar = $.inArray(char,alowedChars)!=-1;
	if(isChar){
	$(this).text(char).addClass("highlight");
	}
	};

	tile.prototype.toString = function(){return "Tile";};
	/**
	* returns the chars
	**/
	tile.prototype.getEls = function(){
	var $chars = $('<div>');
	for(var i=0;i<this.chars.length;i++){
	$chars.append($('<b>').text(this.chars[i]));
	}
	return $chars.children();
	};

	// return module
	return tile;
	})();


	$('.tile').each(function(){
	$(this).data("tile",new tile(10,10,$(this))
	.generate().init());
	});
	@boxSize: 30px;
	@tileSize: 10;

	body{
	background:#f4f4f7;
	}

	h1.title {
	font-family:sans-serif;
	margin:20px;
	b{
	width:@boxSize;
	height:@boxSize;
	background:#fff;
	font-family:monospace;
	border:#ece8e9 1px solid;
	margin:0 3px;
	}
	}

	.tile {
	background:#fefcfa;
	font-family:monospace;
	width:@boxSize*@tileSize;
	height:@boxSize*@tileSize;
	font-size:26px;
	color:#023;
	//border:1px solid #ece8e9;
	margin:0;
	padding:0;
	b {
	outline:none;
	width:@boxSize;
	height:@boxSize;
	text-align:center;
	overflow:hidden;
	float:left;
	}
	:nth-child(3n){
	background:#fafaff;
	}
	b:hover{
	color:#000;
	width:@boxSize - 2;
	height:@boxSize - 2;
	border:1px solid #ccc;
	background:#efeae8;
	}
	.highlight {
	-webkit-animation:glow 2s ease-in 1;
	animation: glow 2s ease-in 1;
	}
	}
	.board{
	margin:50px;
	.tile{
	float:left;
	}
	}

	@-webkit-keyframes glow {
	0% { background:yellow; }
	100% { background:none; }
	}
	@keyframes glow {
	0% { background:yellow; }
	100% { background:none; }
	}