var model = {
currentRobot: null,
init: {
x: 0,
y: 0,
f: "north"
}
};
var controller = {
init: function () {
model.currentRobot = model.init;
inputView.init();
reportView.init();
canvasView.init();
},
getCurrentRobot: function () {
return model.currentRobot;
},
setCurrentRobot: function (robot) {
model.currentRobot = robot;
},
resetContents: function () {
reportView.clear();
},
/* --------------------------------------------------- */
/* the following are command functions
/* --------------------------------------------------- */
place: function (cmd) {
var newPos = cmd.split(","); // get x y f from the command
if (newPos.length < 3) {
this.printErrors("incorrect position / direction");
} else {
var newX = parseInt(newPos[0].trim()),
newY = parseInt(newPos[1].trim()),
newF = newPos[2].trim().toLowerCase();
if (canvasView.validateBound(newX, "maxX") && canvasView.validateBound(newY, "maxY") && canvasView.validateFacing(newF)) {
this.clearOriginalRobot(); // clear the original robot first
this.setCurrentRobot({
x: newX,
y: newY,
f: newF
});
canvasView.renderRobot();
}
}
},
move: function () {
var currentRobot = this.getCurrentRobot(),
newRobot = {
x: currentRobot.x,
y: currentRobot.y,
f: currentRobot.f
};
switch (currentRobot.f) {
case "north":
newY = currentRobot.y + 1;
if (canvasView.validateBound(newY, "maxY")) {
this.clearOriginalRobot();
newRobot.y = newY;
this.setCurrentRobot(newRobot);
canvasView.renderRobot();
}
break;
case "south":
newY = currentRobot.y - 1;
if (canvasView.validateBound(newY, "maxY")) {
this.clearOriginalRobot();
newRobot.y = newY;
this.setCurrentRobot(newRobot);
canvasView.renderRobot();
}
break;
case "east":
newX = currentRobot.x + 1;
if (canvasView.validateBound(newX, "maxX")) {
this.clearOriginalRobot();
newRobot.x = newX;
this.setCurrentRobot(newRobot);
canvasView.renderRobot();
}
break;
case "west":
newX = currentRobot.x - 1;
if (canvasView.validateBound(newX, "maxX")) {
this.clearOriginalRobot();
newRobot.x = newX;
this.setCurrentRobot(newRobot);
canvasView.renderRobot();
}
break;
default:
break;
}
},
left: function () {
this.rotate(false); // get the next from this.robotFacing array in anti-clockwise direction
},
right: function () {
this.rotate(true); // get the next from this.robotFacing array in clockwise direction
},
report: function () {
reportView.renderReport();
},
rotate: function (clockwise) {
this.clearOriginalRobot();
var currentRobot = this.getCurrentRobot(),
originalFacing = currentRobot.f,
originalFacingIndex = canvasView.robotFacing.indexOf(originalFacing),
newFacingIndex,
totalFacing = canvasView.robotFacing.length,
newRobot = {
x: currentRobot.x,
y: currentRobot.y,
f: currentRobot.f
};
if (clockwise) {
if (originalFacingIndex === (totalFacing - 1)) {
newFacingIndex = 0;
} else {
newFacingIndex = originalFacingIndex + 1;
}
} else {
if (originalFacingIndex === 0) {
newFacingIndex = totalFacing - 1;
} else {
newFacingIndex = originalFacingIndex - 1;
}
}
newRobot.f = canvasView.robotFacing[newFacingIndex];
this.setCurrentRobot(newRobot);
canvasView.renderRobot();
},
clearOriginalRobot: function () {
var origRobot = this.getCurrentRobot();
canvasView.clearOriginalRobot(origRobot.x, origRobot.y); // clear the original robot first
},
/* --------------------------------------------------- */
/* end of command functions
/* --------------------------------------------------- */
printErrors: function (msg) {
reportView.renderErrors(msg);
},
reset: function () {
this.clearOriginalRobot();
this.setCurrentRobot(model.init);
canvasView.renderRobot();
inputView.reset();
}
};
var inputView = {
init: function () {
this.commandBox = document.getElementById('command');
this.allowedInput = ["place", "move", "left", "right", "report"];
this.render();
},
render: function () {
this.commandBox.addEventListener('click', function () {
this.select();
});
},
reset: function () {
this.commandBox.innerHTML = '';
},
processCommand: function (value) {
this.commandBox.select(); // auto select all input for easier editing
controller.resetContents(); // remove previous status and errors
var self = this,
sanitizedValue = value.trim().toLocaleLowerCase(),
sanitizedValueArray = sanitizedValue.split(' '),
firstWordEntered = sanitizedValueArray.splice(0, 1)[0];
if (self.allowedInput.indexOf(firstWordEntered) > -1) {
controller[firstWordEntered](sanitizedValueArray.join()); // call controller functions by name
} else {
controller.printErrors("Incorrect command");
}
}
};
var canvasView = {
init: function () {
this.maxX = 5; // x total
this.maxY = 5; // y total
this.squareSize = 100; // all grids are equal width and height
this.xStart = 50; // axis x starts from 50px
this.yStart = 50; // axis y starts from 50px
this.xEnd = this.xStart + this.squareSize * this.maxX; // axis x starts from 50px
this.yEnd = this.yStart + this.squareSize * this.maxY; // axis y starts from 50px
this.canvas = document.getElementById("c");
this.context = this.canvas.getContext("2d");
this.renderCanvas();
this.robotFacing = ['north', 'east', 'south', 'west']; // clockwise
this.robotSize = 25; // is the arrow size actually
this.renderRobot();
this.resetButton = document.getElementById('restart');
this.renderControls();
},
renderControls: function () {
var self = this;
this.resetButton.addEventListener('click', function () {
controller.reset();
});
},
renderCanvas: function () {
for (var x = 0; x < (this.maxX + 1); x++) { // draw 6 lines
var currentAxisX = this.xStart + x * this.squareSize;
this.context.moveTo(currentAxisX, this.yStart);
this.context.lineTo(currentAxisX, this.yEnd);
this.context.strokeText(x, currentAxisX + 50, this.yEnd + 20); // mark x index
}
for (var y = 0; y < (this.maxY + 1); y++) {
var currentAxisY = this.yStart + y * this.squareSize;
this.context.moveTo(this.xStart, currentAxisY);
this.context.lineTo(this.xEnd, currentAxisY);
this.context.strokeText((this.maxY - 1 - y), this.xStart - 20, currentAxisY + 50); // mark y index
}
this.context.strokeStyle = "#000";
this.context.stroke();
},
validateBound: function (input, toCheckAxis) {
if (isNaN(input)) {
controller.printErrors("Please enter a numeric coordinates!");
return false;
} else if (input < 0 || input > (this[toCheckAxis] - 1)) {
controller.printErrors("Coordinates out of range!");
return false;
} else {
return true;
}
},
validateFacing: function (face) {
if (this.robotFacing.indexOf(face.toLowerCase()) < 0) {
controller.printErrors("Wrong facing!");
return false;
} else {
return true;
}
},
clearOriginalRobot: function (origX, origY) {
var axisX = origX * 100 + 51; // left most point of the current grid deduct stroke width
var axisY = (this.maxY - origY) * 100 - 49; // top most point of the current grid deduct stroke width
this.context.clearRect(axisX, axisY, 98, 98);
},
renderRobot: function () {
var robot = controller.getCurrentRobot(),
robotAxisX = (robot.x + 1) * 100, // the center of the destination grid horizontally
robotAxisY = (this.maxY - robot.y) * 100; // the center of the destination grid vertically
var path = new Path2D();
this.context.beginPath();
switch (robot.f) {
case "north":
path.moveTo(robotAxisX, robotAxisY - this.robotSize);
path.lineTo(robotAxisX - this.robotSize, robotAxisY);
path.lineTo(robotAxisX + this.robotSize, robotAxisY);
break;
case "south":
path.moveTo(robotAxisX, robotAxisY + this.robotSize);
path.lineTo(robotAxisX - this.robotSize, robotAxisY);
path.lineTo(robotAxisX + this.robotSize, robotAxisY);
break;
case "east":
path.moveTo(robotAxisX + this.robotSize, robotAxisY);
path.lineTo(robotAxisX, robotAxisY - this.robotSize);
path.lineTo(robotAxisX, robotAxisY + this.robotSize);
break;
case "west":
path.moveTo(robotAxisX - this.robotSize, robotAxisY);
path.lineTo(robotAxisX, robotAxisY - this.robotSize);
path.lineTo(robotAxisX, robotAxisY + this.robotSize);
break;
default:
break;
}
this.context.closePath();
this.context.fill(path);
controller.report();
}
};
var reportView = {
init: function () {
// this.errorMessageEle = document.getElementById("error");
this.reportMessageEle = document.getElementById("report");
},
renderReport: function () {
var currentRobot = controller.getCurrentRobot();
this.reportMessageEle.innerHTML = '<span>' + 'Axis X: ' + currentRobot.x + '</span>' +
'<span>' + 'Axis Y: ' + currentRobot.y + '</span>' +
'<span>' + 'Facing: ' + currentRobot.f + '</span>';
},
renderErrors: function (msg) {
this.reportMessageEle.innerHTML = '<span id="error">' + msg + '</span>';
},
clear: function () {
this.reportMessageEle.innerHTML = '';
// this.errorMessageEle.innerHTML = '';
}
};
window.onload = function () {
controller.init();
};
<h2>JavaScript Robot Simulator (Updated)</h2>
<p>The application can read commands in following format (case insensitive):
<ul>
<li>PLACE X,Y,F</li>
<li>MOVE</li>
<li>LEFT</li>
<li>RIGHT</li>
<li>REPORT</li>
</ul>
</p>
<main>
<div class="input-area">
<label for="command">Enter Command:</label>
<input type="text" id="command" onfocusout="inputView.processCommand(this.value)" onkeydown="if (event.keyCode == 13) inputView.processCommand(this.value);" autofocus>
</div>
<div class="content">
<h4>Current Status:</h4>
<p id="report"></p>
<button id="restart">Restart</button>
</div>
<canvas id="c" width="551
" height="580"></canvas>
</main>
main {
text-align: center;
}
label {
font-weight: bold;
}
#command {
font-size: 1em;
}
#report {
height: 20px;
color: #0892d0;
}
#report span {
padding-right: 10px;
}
#report #error {
color: #FF0000;
}