Edit in JSFiddle

/*
For exampple your txt-file should look like this:
Buildorder Lorem ipsum, used
Buildorder Lorem ipsum, used
Buildorder Lorem ipsum, used
Buildorder Lorem ipsum, used
Buildorder Lorem ipsum, used
Buildorder Lorem ipsum, unused
Buildorder Lorem ipsum, unused
Buildorder Lorem ipsum, unused
Buildorder Lorem ipsum, unused
Buildorder Lorem ipsum, unused
Buildorder Lorem ipsum, unused
Buildorder Lorem ipsum, unused
Buildorder Lorem ipsum, unused
Buildorder Lorem ipsum, unused
Buildorder Lorem ipsum, unused
Buildorder Lorem ipsum, unused
Buildorder Lorem ipsum, unused
Buildorder Lorem ipsum, unused
Buildorder Lorem ipsum, unused
Buildorder Lorem ipsum, unused
Buildorder Lorem ipsum, unused
Buildorder Lorem ipsum, unused
Buildorder Lorem ipsum, used
Buildorder Lorem ipsum, used
Buildorder Lorem ipsum, used
Buildorder Lorem ipsum, active
Buildorder Lorem ipsum, used
Buildorder Lorem ipsum, used
Buildorder Lorem ipsum, used
Buildorder Lorem ipsum, used
Buildorder Lorem ipsum, unused
Buildorder Lorem ipsum, used
Buildorder Lorem ipsum, used
Buildorder Lorem ipsum, unused
Buildorder Lorem ipsum, used
Buildorder Lorem ipsum, unused
Buildorder Lorem ipsum, used
Buildorder Lorem ipsum, unused
Buildorder Lorem ipsum, used
Buildorder Lorem ipsum, used
Buildorder Lorem ipsum, used
Buildorder Lorem ipsum, unused
Buildorder Lorem ipsum, used
Buildorder Lorem ipsum, unused
Buildorder Lorem ipsum, used
Buildorder Lorem ipsum, used
Buildorder Lorem ipsum, used
Buildorder Lorem ipsum, unused
Buildorder Lorem ipsum, unused
Buildorder Lorem ipsum, unused
*/

//---
// adjustments

var NUMERATION = true;
var FONT_SIZE = 15;
var BORDER_DISTANCE = 50;

var ANIMATION_COLORS = ['#46b7f1FF', '#000e25FF' ];
var ANIMATION_COLORS_SPEED = 1500;
var ANIMATION_SELECTOR_SPEED = 500;

//---
// internal vars

var columnsCount = 5;
var cloumnsCountMax = 10;
var columnHolder = [];
var rowHolder = [];
var rowsPerColumn;

var textFile = null;
var textFileName;

var buildOrderString;
var buildOrderHolder;
var buildOrdersToUseIndex;
var buildOrdersToUseHolder;
var buildOrderActive;

//---

var btLoadTxtFile = document.getElementById( 'btLoadTxtFile' );
var btSaveTxtFile = document.getElementById( 'btSaveTxtFile' ); 
var btGenerate = document.getElementById( 'btGenerate' ); 
var btGenerateLost = document.getElementById( 'btGenerateLost' ); 
var btLessColumns = document.getElementById( 'btLessColumns' ); 
var btMoreColumns = document.getElementById( 'btMoreColumns' ); 

btLoadTxtFile.addEventListener( 'change', btLoadTxtFileHandler, false );
btSaveTxtFile.addEventListener( 'click', btSaveTxtFileHandler, false );
btGenerate.addEventListener( 'click', btGenerateHandler, false );
btGenerateLost.addEventListener( 'click', btGenerateLostHandler, false );
btLessColumns.addEventListener( 'click', btLessColumnsHandler, false );
btMoreColumns.addEventListener( 'click', btMoreColumnsHandler, false );

function btLoadTxtFileHandler( e ) {

  loadTxtFile( e, loadTxtFileCompleteHandler );

};

function btSaveTxtFileHandler( e ) {

  if ( typeof textFileName == 'undefined' ) {
  
    alert( 'Before that you have to load a file.' );
  
  }
  
  this.download = textFileName;
  this.href = createTxtFile( convertDataToString( buildOrderHolder ) );

};

function btGenerateHandler( e ) {

  generate( 'won' );

};

function btGenerateLostHandler( e ) {

  generate( 'lost' );

};

function btLessColumnsHandler( e ) {

  changeColumns( -1 );

};

function btMoreColumnsHandler( e ) {

  changeColumns( 1 );

};

//---

function init() {

  resize();

}

//---

function addElements() {

  if ( ( buildOrderHolder.length % columnsCount ) === 0 ) {
  
    rowsPerColumn = buildOrderHolder.length / columnsCount;
    
  } else {
  
    rowsPerColumn = Math.floor( buildOrderHolder.length / columnsCount ) + 1;

  }
  
  var rowCount = 0;

  for ( var i = 0; i < columnsCount; i++ ) {
  
    $( '#columns' ).append( '<div id="column_' +  i + '" class="column"></div>');
    
    var divColumn = $( '#column_' + i );

    columnHolder.push( divColumn );
    
    //---
    
    for ( var j = 0; j < rowsPerColumn; j++ ) {
      
      var buildOrderObject = buildOrderHolder[ rowCount ];
      
      if ( buildOrderObject != null ) {
    
        divColumn.append( '<div id="row_' +  rowCount + '" class="row fontStyle"><span></span></div>');

        var divRow = $( '#row_' + rowCount );
        		divRow.css( 'font-size', FONT_SIZE + 'px' );

        rowHolder.push( divRow );
        
        buildOrderObject.element = divRow;
        buildOrderObject.elementParent = divColumn;
        buildOrderObject.elementLabel = $( '#row_' + rowCount +  ' span' );
        buildOrderObject.animationIndex = 0;
        buildOrderObject.animationInterval;
        buildOrderObject.index = rowCount;

      }
      
      rowCount++;
    
    }
  
  }

  //---

  resize();
  
  //---
  
  for ( var k = 0; k < buildOrderHolder.length; k++ ) {
    
    var buildOrderObject = buildOrderHolder[ k ];
    
    setElement( buildOrderObject, buildOrderObject.status );

  }

};

function removeElements() {

  $( '.row' ).remove();
	$( '.column' ).remove();
  
};

//---

function setElement( obj, status ) {

  obj.status = status;

  if ( NUMERATION ) {
        
		obj.elementLabel.html( ( obj.index + 1 ) + ' ' + obj.label ); 	
        
  } else {
  
  	obj.elementLabel.html( obj.label );

  }
  
  obj.element.removeClass( 'rowunused rowactive rowused' );
  obj.element.addClass( 'row' + status );
  
  if ( status === 'active' ) {
  
  	animateElement( obj );
    
		buildOrderActive = obj;
    
    setSelector( buildOrderActive );
    
  }

};

//---

function setSelector( obj ) {

	var offset = obj.element.offset();
  
  var left = offset.left - parseInt( $( '#selector' ).css( 'border-left-width' ) ) + 1 + 'px';
  var top = offset.top - parseInt( $( '#selector' ).css( 'border-top-width' ) ) + 1 + 'px';
    
	$( '#selector' ).animate( { left: left, top: top }, ANIMATION_SELECTOR_SPEED );

};

//---

function generate( game ) {

	var buildOrderObject;

  if ( typeof buildOrdersToUseIndex == 'undefined' ) {
  
    alert( 'Before that you have to load a file.' );
    
    return;
  
  }
  
  $( '#selector' ).stop();
  
  $( '.row' ).stop();
  $( '.row' ).css( 'background-color', '' );

	for ( var i = 0; i < buildOrderHolder.length; i++ ) {
  
  	buildOrderObject = buildOrderHolder[ i ];
    
    if ( buildOrderObject.status === 'active' ) {
    
    	if ( game === 'won' ) {
    
        buildOrderObject.status = 'used';

        buildOrderObject.element.removeClass( 'rowunused rowactive rowused' );
        buildOrderObject.element.addClass( 'rowused' );
        
      } else if ( game === 'lost' ) {
      
      	buildOrderObject.status = 'unused';

        buildOrderObject.element.removeClass( 'rowunused rowactive rowused' );
        buildOrderObject.element.addClass( 'rowunused' );
      
      }
    
    }
  
  }

  if ( buildOrdersToUseIndex === buildOrdersToUseHolder.length - 1 && game != 'lost' ) {
  
  	//alert( 'No more builds to select.' );
    
    return;
  
  }

	if ( game === 'lost' ) {

    buildOrderObject = buildOrdersToUseHolder[ buildOrdersToUseIndex ];
		buildOrdersToUseHolder.splice( buildOrdersToUseIndex + Math.floor( Math.random() * ( buildOrdersToUseHolder.length - buildOrdersToUseIndex - 1 ) ) + 2, 0, buildOrderObject );//<--------------------------------

  }
  
  buildOrdersToUseIndex++;

  setElement( buildOrdersToUseHolder[ buildOrdersToUseIndex ], 'active' );

};

//---

function animateElement( obj ) {

  var animate_loop = function() {
  
    obj.element.animate( { backgroundColor:ANIMATION_COLORS[ ( obj.animationIndex++ ) % ANIMATION_COLORS.length ] }, ANIMATION_COLORS_SPEED, function() {
    
      animate_loop();
      
    } );
    
  };
  
  animate_loop();

}

//---

function loadTxtFile( e, callback ) {

    var input = e.target;
    var reader = new FileReader();
    
    reader.onload = function () {
        
        callback( this.result );
        
    };

    reader.readAsText( input.files[ 0 ] );
    
    textFileName = input.files[ 0 ].name;
    
};

function loadTxtFileCompleteHandler( result ) {

	removeElements();

  buildOrderString = result;
  buildOrderHolder = convertDataFromString( buildOrderString );
  buildOrdersToUseIndex = 0;
  buildOrdersToUseHolder = getBuildOrderToUse( buildOrderHolder );

  addElements();
        
};

//---

function createTxtFile( str ) {

  var file = new Blob( [ str ], { type: 'text/plain' } );

  if ( textFile !== null ) {

    window.URL.revokeObjectURL( textFile );

  }

  textFile = window.URL.createObjectURL( file );

  return textFile;
    
};

//---

function convertDataFromString( str ) {
  
  var buildOrdersTempArray = str.split( /\r\n|\r|\n/g );
  var buildOrderObject;
  
  for ( var i = 0; i < buildOrdersTempArray.length; i++ ) {
    
    var buildOrderTempArray = buildOrdersTempArray[ i ].split( ',' );
    
    if ( buildOrderTempArray && buildOrderTempArray.length === 2 ) {
    
      buildOrderObject = {};
      buildOrderObject.label = buildOrderTempArray[ 0 ];
      //buildOrderObject.used = ( buildOrderTempArray[ 1 ].replace( / /g, '' ) == 'true' );
      buildOrderObject.status = buildOrderTempArray[ 1 ].replace( / /g, '' );

      buildOrdersTempArray[ i ] = buildOrderObject;
      
		} 
    
  }
  
  var j = buildOrdersTempArray.length;
  
  while ( j-- ) {
  
  	if ( typeof buildOrdersTempArray[ j ] === 'string' ) {
    
    	buildOrdersTempArray.splice( j, 1 );
    
    }

  }
  
  return buildOrdersTempArray;
  
};

function convertDataToString( arr ) {
  
  var buildOrdersTempString = '';
  
  for ( var i = 0; i < arr.length; i++ ) {
    
    var buildOrderObject = arr[ i ];
    
    buildOrdersTempString += buildOrderObject.label + ', ';
    //buildOrdersTempString += buildOrderObject.used.toString() + '\r\n';
    buildOrdersTempString += buildOrderObject.status;// + '\r\n';
    
    if ( i < arr.length - 1 ) {
    
    	buildOrdersTempString += '\r\n';
    
    }
    
  }

  return buildOrdersTempString;
  
};

//---

function getBuildOrderToUse( arr ) {

	var arrayTemp = [];
  var objTemp;
  
  for ( var i = 0; i < arr.length; i++ ) {
  
  	var obj = arr[ i ];
    
    if ( obj.status === 'unused' ) {
    
    	arrayTemp.push( obj );
    
    } else if ( obj.status === 'active' ) {
    
    	objTemp = obj;
    
    }
  
  }
  
  shuffle( arrayTemp );
  
  arrayTemp.splice( 0, 0, objTemp );
  
  return arrayTemp;

};

function shuffle( arr ) {

    for ( var i = arr.length - 1; i >= 0; i-- ) {
     
        var randomIndex = Math.floor( Math.random() * ( i + 1 ) ); 
        var itemAtIndex = arr[ randomIndex ]; 
         
        arr[ randomIndex ] = arr[ i ]; 
        arr[ i ] = itemAtIndex;
        
    }
    
};

//---

function changeColumns( dir ) {

  columnsCount += dir;
  
  if ( columnsCount < 1 ) {
  
  	columnsCount = 1;
  
  } else if ( columnsCount > cloumnsCountMax ) {
  
  	columnsCount = cloumnsCountMax;
  
  }
  
  //---
  
  removeElements();
  addElements();
  
  //---
  
  resize();

};

//---

function resize() {

  var w = $( window ).width();
  var h = $( window ).height();

  var borderWidth = parseInt( $( '#content' ).css( 'border-left-width' ) );

  var divWidth = w - ( borderWidth * 2 ) - ( BORDER_DISTANCE * 2 );
  var divHeight = h - ( borderWidth * 2 ) - ( BORDER_DISTANCE * 2 );

  $( '#content' ).width( divWidth ).height( divHeight );
  
  //---
  
  var divColumnWidth = ( divWidth - parseInt( $( '#columns' ).css( 'margin-left' ) ) * 2 ) / columnsCount;
  var divColumnHeight = divHeight - parseInt( $( '#columns' ).css( 'margin-top' ) ) * 2;
  
  for ( var i = 0; i < columnHolder.length; i++ ) {
  
    var divColumn = $( columnHolder[ i ] );

    divColumn.width( divColumnWidth );
    divColumn.height( divColumnHeight );
  
  }
  
  for ( var j = 0; j < rowHolder.length; j++ ) {
    
    var divRow = $( rowHolder[ j ] );
    
    var divRowWidth = divColumnWidth - ( parseInt( divRow.css( 'border-left-width' ) ) * 2 + parseInt( divRow.css( 'margin-left' ) ) );
  	var divRowHeight = divColumnHeight / rowsPerColumn - ( parseInt( divRow.css( 'border-left-width' ) ) * 2 + parseInt( divRow.css( 'margin-bottom' ) ) );

    divRow.width( divRowWidth );
    divRow.height( divRowHeight );

  }
  
  //---
  
  $( '#selector' ).width( divRowWidth ).height( divRowHeight );
  
  if ( buildOrderActive ) {
  
  	var offset = buildOrderActive.element.offset();
    
    var left = offset.left - parseInt( $( '#selector' ).css( 'border-left-width' ) ) + 1 + 'px';
  	var top = offset.top - parseInt( $( '#selector' ).css( 'border-top-width' ) ) + 1 + 'px';
    
    $( '#selector' ).css( { left: left, top: top } );
  
  }

};

$( window ).resize( function() {

    resize();
    
} );

//---

init();

//---
<div id="content" class="content">

  <div id="columns" class="columns">

  </div>

</div>

<div id="selector">

</div>

<div id="menu">
  <input id="btLoadTxtFile" type="file" accept="text/plain"/><label for="btLoadTxtFile" class="fontStyle inputFile">LOAD FILE</label>
  <a download="data.txt" id="btSaveTxtFile" class="fontStyle">SAVE FILE</a>
  &nbsp;&nbsp;<span>|</span>&nbsp;&nbsp;
  <button type="button" id="btGenerate" class="fontStyle">NEXT BUILD (WON)</button>
  <button type="button" id="btGenerateLost" class="fontStyle">NEXT BUILD (LOST)</button>
  &nbsp;&nbsp;<span>|</span>&nbsp;&nbsp;
  <button type="button" id="btLessColumns" class="fontStyle">LESS COLUMNS</button>
  <button type="button" id="btMoreColumns" class="fontStyle">MORE COLUMNS</button>
</div>

<div id="headerWrapper">
  <div id="header" class="fontStyle">
    <span>
      BEASTYQT <img src="http://www.nkunited.de/ExternalImages/jsfiddle/BeastyqtLogo_min.png" alt="BEASTYQT" height="30" width="37"> RANDOM BUILDS
    </span>
  </div>
</div>
@import url(//fonts.googleapis.com/css?family=Share+Tech+Mono);

body {
  background-color: #000;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

#selector {
  border: 9px solid transparent;
  padding: 0px;
  -webkit-border-image: url(http://www.nkunited.de/ExternalImages/jsfiddle/SC2_BorderImage_min.png) 9 round; /* Safari 3.1-5 */
  -o-border-image: url(http://www.nkunited.de/ExternalImages/jsfiddle/SC2_BorderImage_min.png) 9 round; /* Opera 11-12.1 */
  border-image: url(http://www.nkunited.de/ExternalImages/jsfiddle/SC2_BorderImage_min.png) 9 round;
  position: absolute;
  /*
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	border-radius: 2px;
	border: 1px solid #fff;
  */
  width: 200px;
  height: 100px;
  top: -200px;
  left: -400px;
  /*background-color: #000e25;*/
  /*
  background-color: rgba(0, 14, 37, 0.1);
  color: #46b7f1;
  -webkit-user-select: none;    
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  pointer-events: none;
  */
  -webkit-box-shadow: 0px 0px 15px 5px rgba(0, 14, 37, .75); 
  -moz-box-shadow: 0px 0px 15px 5px rgba(0, 14, 37, .75); 
  box-shadow: 0px 0px 15px 5px rgba(0, 14, 37, .75); 
}

#menu {
  position:absolute;
  left:0;
  bottom:0;
  width: 100%;
  text-align: center;
}
#menu span {
  color: #3687af;
}

#headerWrapper {
  position: absolute;
  left:0;
  top:8px;
  width: 100%;
  text-align: center;
}
#header {
  border: 9px solid transparent;
  padding: 0px;
  -webkit-border-image: url(http://www.nkunited.de/ExternalImages/jsfiddle/SC2_BorderImage_min.png) 9 round; /* Safari 3.1-5 */
  -o-border-image: url(http://www.nkunited.de/ExternalImages/jsfiddle/SC2_BorderImage_min.png) 9 round; /* Opera 11-12.1 */
  border-image: url(http://www.nkunited.de/ExternalImages/jsfiddle/SC2_BorderImage_min.png) 9 round;
  margin: 0 auto;
  width: 260px;
  height: 50px;
  text-align: center;
  display: table;
  color: #3687af;
  background-color: #000e25;
  background-image: url(http://www.nkunited.de/ExternalImages/jsfiddle/BeastyqtLogoBGAnim.gif);
  background-repeat: repeat;
  -webkit-box-shadow: 0px 0px 15px 5px rgba(0, 14, 37, .75); 
  -moz-box-shadow: 0px 0px 15px 5px rgba(0, 14, 37, .75); 
  box-shadow: 0px 0px 15px 5px rgba(0, 14, 37, .75); 
}
#header span {
  display: table-cell;
  vertical-align: middle;
}

/*https://stackoverflow.com/questions/572768/styling-an-input-type-file-button*/
input[type="file"] {
    display: none;
}

button, .inputFile, #btSaveTxtFile {
  margin: 1px 1px 16px 1px;
	background-color: #000e25;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	border-radius: 2px;
	border: 1px solid #0a3770;
	display: inline-block;
	font-size: 11px;
	padding: 2px 10px;
	text-decoration: none;
  cursor: pointer;
  -webkit-user-select: none;    
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  color: #3687af;
}
button:active, .inputFile:active, #btSaveTxtFile:active {
	position:relative;
	top:1px;
}

.content {
  border: 106px solid transparent;
  padding: 0px;
  -webkit-border-image: url(http://www.nkunited.de/ExternalImages/jsfiddle/SC2_BorderImage.png) 106 round; /* Safari 3.1-5 */
  -o-border-image: url(http://www.nkunited.de/ExternalImages/jsfiddle/SC2_BorderImage.png) 106 round; /* Opera 11-12.1 */
  border-image: url(http://www.nkunited.de/ExternalImages/jsfiddle/SC2_BorderImage.png) 106 round;
  /*
	width: 70%;
  height: 70%;
  */
	background-color: #000e25;
  /*
  background-image: url(http://www.nkunited.de/ExternalImages/jsfiddle/BeastyqtLogoBGAnim.gif);
  background-repeat: repeat;
  */
	position:absolute;
  left:0; right:0;
  top:0; bottom:0;
	margin:auto;
  text-align: center;
}

.columns {
  margin: -70px;
  /*background-color: #ffff00;*/
}

.column {
  float: left;
  /*background-color: #ff00ff;*/
}
.row span {
  display: table-cell;
  vertical-align: middle;
}
.row {
  display: table;
  text-align: center;
  /*vertical-align: middle;*/
  
  /*background-color: #ccc;*/
  /*line-height: 25px;*/
  /*border: 1px solid #46b8f1;*/
  
  /*
	-moz-box-shadow: inset 0px -3px 7px 0px #29bbff;
	-webkit-box-shadow: inset 0px -3px 7px 0px #29bbff;
	box-shadow: inset 0px -3px 7px 0px #29bbff;*/
  /*
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #000e25), color-stop(1, #000e25));
	background: -moz-linear-gradient(top, #000e25 5%, #000e25 100%);
	background: -webkit-linear-gradient(top, #000e25 5%, #000e25 100%);
	background: -o-linear-gradient(top, #000e25 5%, #000e25 100%);
	background: -ms-linear-gradient(top, #000e25 5%, #000e25 100%);
	background: linear-gradient(to bottom, #000e25 5%, #000e25 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000e25', endColorstr='#000e25',GradientType=0);
  */
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	border-radius: 2px;
	border: 1px solid #46b8f1;
	/*display: inline-block;*/
	text-decoration: none;
  margin-bottom: 1px;
  margin-left: 1px;
  /*background-color: #000e25;*/
  background-color: rgba(0, 14, 37, 0.1);
  color: #46b7f1;
  -webkit-user-select: none;    
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  pointer-events: none;
}
.rowunused {
  background-color: rgba(0, 14, 37, 0.1);
  color: #46b7f1;
}
.rowactive {
  background-color: rgba(70, 183, 241, 0.75);
  /*color: #000e25;*/
  color: #ffffff;
}
.rowused {
  background-color: rgba(10, 39, 67, 0.75);
  color: #3687af;
  text-decoration: line-through;
}

.fontStyle {
  font-family: 'Share Tech Mono', monospace;
}