JamesWP/jsbin.OHECOXu.html

## jsbin.OHECOXu.html
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-git2.js"></script>
<link href="http://code.jquery.com/ui/jquery-ui-git.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/ui/jquery-ui-git.js"></script>
  <!-- <script src="http://ianli.com/infinitedrag/javascripts/jquery.infinitedrag.js"></script> -->
  <script src="http://jsbin.com/iqEYOka/latest"></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 id="viewport">
    <div class=board >

    </div>
  </div>
</body>
</html>

## jsbin.OHECOXu.js

//http://jsbin.com/OHECOXu/8/edit


var tile = (function () {
  var alowedChars =
      [' ','#','-','+','=','<','>','^','~','&','|','_','6'];
  function generateChar (charArray){
    return charArray
        [Math.round(
            Math.random()*(charArray.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 (charArray){
    charArray = charArray || alowedChars;
    this.chars = "";
    for(var xy = this.height*this.width;xy>0;xy--){
      this.chars += generateChar(charArray);
    }

    return this;
  };

  tile.prototype.updateCells = function (){
    this.$el.empty().append(this.getEls());
    return this;
  };

  /**
    * initialises the tile to the el
    **/
  tile.prototype.init = function(){
    this.updateCells();
    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).toggleClass("highlight").toggleClass("highlight2");
    }
  };

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

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


var wall = jQuery.infinitedrag("#viewport .board", {}, {
    width: 300,
	height: 300,
	oncreate: function($element, col, row) {
      $element.addClass("tile")
        .data("pos",{'col':col,'row':row})
        .data("tile",new tile(10,10,$element)
        .generate().init());
    },onupdate :function($element, col, row) {
      $element.data("tile").generate(['G','H']).updateCells();
    }
});

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

body,html{
  background:#f4f4f7;
  width:100%;
  height:100%;
  margin:0;
  padding:0;
}

h1.title {
  background:rgba(255,255,255,0.7);
  border-bottom:1px solid #aec;
  font-family:sans-serif;
  position:relative;
  z-index:100;
  height:20px;
  padding:20px 20px 40px 20px;
  margin:0;
  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:#333;
  //border:1px solid #ece8e9;
  margin:0;
  padding:0;
  b {
    outline:none;
    width:@boxSize;
    height:@boxSize;
    text-align:center;
    overflow:hidden;
    float:left;
  }
  :nth-child(2n){
    background:#fafaff;
  }
  b:hover{
    color:#000;
    width:@boxSize - 2;
    height:@boxSize - 2;
    border:1px solid #ccc;
    background:#efeae8;
  }
  .highlight2 {
    -webkit-animation:glow2 2s ease-in 1;
   animation: glow2 2s ease-in 1;
  }
  .highlight {
   -webkit-animation:glow 2s ease-in 1;
   animation: glow 2s ease-in 1;
  }
}
#viewport{
  overflow:hidden;
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:green;
}
.board{
  .tile{
    float:left;
  }
}

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

@-webkit-keyframes glow2 {
  0% { background:yellow; }
  100% { background:none; }
}
@keyframes glow2 {
  0% { background:yellow; }
  100% { background:none; }
}
	<!DOCTYPE html>
	<html>
	<head>
	<script src="http://code.jquery.com/jquery-git2.js"></script>
	<link href="http://code.jquery.com/ui/jquery-ui-git.css" rel="stylesheet" type="text/css" />
	<script src="http://code.jquery.com/ui/jquery-ui-git.js"></script>
	<!-- <script src="http://ianli.com/infinitedrag/javascripts/jquery.infinitedrag.js"></script> -->
	<script src="http://jsbin.com/iqEYOka/latest"></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 id="viewport">
	<div class=board >

	</div>
	</div>
	</body>
	</html>

	//http://jsbin.com/OHECOXu/8/edit


	var tile = (function () {
	var alowedChars =
	[' ','#','-','+','=','<','>','^','~','&','\|','_','6'];
	function generateChar (charArray){
	return charArray
	[Math.round(
	Math.random()*(charArray.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 (charArray){
	charArray = charArray \|\| alowedChars;
	this.chars = "";
	for(var xy = this.height*this.width;xy>0;xy--){
	this.chars += generateChar(charArray);
	}

	return this;
	};

	tile.prototype.updateCells = function (){
	this.$el.empty().append(this.getEls());
	return this;
	};

	/**
	* initialises the tile to the el
	**/
	tile.prototype.init = function(){
	this.updateCells();
	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).toggleClass("highlight").toggleClass("highlight2");
	}
	};

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

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


	var wall = jQuery.infinitedrag("#viewport .board", {}, {
	width: 300,
	height: 300,
	oncreate: function($element, col, row) {
	$element.addClass("tile")
	.data("pos",{'col':col,'row':row})
	.data("tile",new tile(10,10,$element)
	.generate().init());
	},onupdate :function($element, col, row) {
	$element.data("tile").generate(['G','H']).updateCells();
	}
	});
	@boxSize: 30px;
	@tileSize: 10;

	body,html{
	background:#f4f4f7;
	width:100%;
	height:100%;
	margin:0;
	padding:0;
	}

	h1.title {
	background:rgba(255,255,255,0.7);
	border-bottom:1px solid #aec;
	font-family:sans-serif;
	position:relative;
	z-index:100;
	height:20px;
	padding:20px 20px 40px 20px;
	margin:0;
	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:#333;
	//border:1px solid #ece8e9;
	margin:0;
	padding:0;
	b {
	outline:none;
	width:@boxSize;
	height:@boxSize;
	text-align:center;
	overflow:hidden;
	float:left;
	}
	:nth-child(2n){
	background:#fafaff;
	}
	b:hover{
	color:#000;
	width:@boxSize - 2;
	height:@boxSize - 2;
	border:1px solid #ccc;
	background:#efeae8;
	}
	.highlight2 {
	-webkit-animation:glow2 2s ease-in 1;
	animation: glow2 2s ease-in 1;
	}
	.highlight {
	-webkit-animation:glow 2s ease-in 1;
	animation: glow 2s ease-in 1;
	}
	}
	#viewport{
	overflow:hidden;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:green;
	}
	.board{
	.tile{
	float:left;
	}
	}

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

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