html5-video-slidepuzzle/js/SlidePuzzleController.js

var SLIDE_PUZZLE = window.SLIDE_PUZZLE || {};

SLIDE_PUZZLE.VideoController = function(rows, columns) {
	this.STOPWATCH_DELAY = 500;
	
	this._rows = rows;
	this._columns = columns;
	
	this._model = null;
	this._view = null;
	this._stopwatch = new SLIDE_PUZZLE.Stopwatch(this.STOPWATCH_DELAY);
	
	this._undoing = false;
}

SLIDE_PUZZLE.VideoController.prototype.initView = function() {
	var self = this;
	
	this._view = new SLIDE_PUZZLE.VideoView(this._rows, this._columns);
	
	this._view.addEventListener("pieceClicked", this._tryMove.bind(this));
	this._view.addEventListener('undo', this._undo.bind(this));
	this._view.addEventListener('newGame', this._newGame.bind(this));
	this._stopwatch.addEventListener('tick', function() {
		self._view.timerText = self._stopwatch.elapsedString;
	});
	
	this._newGame();
}

SLIDE_PUZZLE.VideoController.prototype._tryMove = function(event) {
	var index = this._rowColumnToIndex(event.detail.row, event.detail.column);
	var piece = this._rowColumnToIndex(event.detail.correctRow, event.detail.correctColumn);
	
	try {
		this._model.move(piece);
		if (this._model.isSolved()) {
			var listener;
			listener = function() {
				this._endGame();
				this._view.removeEventListener('doneMoving', listener);
			}.bind(this);
			this._view.addEventListener('doneMoving', listener);
		}
		this._view.movePiece(event.detail.row, event.detail.column);
		this._view.canUndo = true;
	} catch (err) {
		console.log(err);
	}
}

SLIDE_PUZZLE.VideoController.prototype._undo = function() {
	if (!this._undoing && !this._view.moving) {
		this._undoing = true;
		try {
			var piece = this._model.getMoves().pop();
			var index = this._model.getPositionOf(piece);
			var rowCol = this._indexToRowColumn(index);
			
			this._model.undo();
			this._view.canUndo = this._model.getMoves().length !== 0;
			this._view.movePiece(rowCol.row, rowCol.column);
		} catch (err) {
			console.log("can't undo: " + err.message);
		}
	}
	this._undoing = false;
};

SLIDE_PUZZLE.VideoController.prototype._newGame = function() {
	this._model = new SLIDE_PUZZLE.Model(this._rows, this._columns);
	
	var modelPos = this._model.getPosition();
	var viewPos = [];
	
	for (var row = 0; row < this._rows; row++) {
		viewPos.push([]);
		for (var col = 0; col < this._columns; col++) {
			var modelPosIndex = row * this._columns + col;
			viewPos[row].push(modelPos[modelPosIndex]);
		}
	}
	
	this._view.setBoard(viewPos);
	this._view.showEmptyPiece = false;
	this._view.canMovePieces = true;
	this._view.canUndo = false;
	
	if (this._stopwatch.isRunning) {
		this._stopwatch.stop();
	}
	this._stopwatch.reset();
	this._view.timerText = this._stopwatch.elapsedString;
	this._stopwatch.start();
}

SLIDE_PUZZLE.VideoController.prototype._endGame = function() {
	// TODO
	this._stopwatch.stop();
	this._view.showEmptyPiece = true;
	this._view.canMovePieces = false;
	this._view.canUndo = false;
	console.log("end game");
}

SLIDE_PUZZLE.VideoController.prototype._rowColumnToIndex = function(row, column) {
	return (row * this._columns) + column;
}

SLIDE_PUZZLE.VideoController.prototype._indexToRowColumn = function(index) {
	var row = Math.floor(index / this._columns);
	var column = index % this._columns;
	return {row:row, column:column};
}