pointer progressing based on command

by sujit km

HTML

<table id="city_table" style="width: 150px">
  <tr>
    <td id="cellX1Y5" align="center" class="city"></td>
    <td id="cellX2Y5" align="center" class="city"></td>
    <td id="cellX3Y5" align="center" class="city"></td>
    <td id="cellX4Y5" align="center" class="city"></td>
    <td id="cellX5Y5" align="center" class="city"></td>
  </tr>
  <tr>
    <td id="cellX1Y4" align="center" class="city"></td>
    <td id="cellX2Y4" align="center" class="city"></td>
    <td id="cellX3Y4" align="center" class="city"></td>
    <td id="cellX4Y4" align="center" class="city"></td>
    <td id="cellX5Y4" align="center" class="city"></td>
  </tr>
  <tr>
    <td id="cellX1Y3" align="center" class="city"></td>
    <td id="cellX2Y3" align="center" class="city"></td>
    <td id="cellX3Y3" align="center" class="city"></td>
    <td id="cellX4Y3" align="center" class="city"></td>
    <td id="cellX5Y3" align="center" class="city"></td>
  </tr>
  <tr>
    <td id="cellX1Y2" align="center" class="city"></td>
    <td id="cellX2Y2" align="center" class="city"></td>
    <td id="cellX3Y2" align="center" class="city"></td>
    <td id="cellX4Y2" align="center" class="city"></td>
    <td id="cellX5Y2" align="center" class="city"></td>
  </tr>
  <tr>
    <td id="cellX1Y1" align="center" class="city">X</td>
    <td id="cellX2Y1" align="center" class="city"></td>
    <td id="cellX3Y1" align="center" class="city"></td>
    <td id="cellX4Y1" align="center" class="city"></td>
    <td id="cellX5Y1" align="center" class="city"></td>
  </tr>
</table>
<input type="text" style="width: 300px; text-transform: uppercase" name="prg" id="prg" />
<button onclick="glPos.run();">Run</button>

CSS

.city {
  border: 1px solid black;
  width: 30px;
  height: 30px;
}

JavaScript

function curState_prototype(pos, cStr, parent) {
  this.pos = pos;
  this.cStr = cStr;
  this.parent = parent;
  this.update = function () {
    this.pos++;
    var self = this;
    setTimeout(function () {
      self.exec()
    }, 500);
  };
  this.exec = function () {
    var aProgram = [];
    aProgram = this.cStr.trim().toUpperCase().split(" ");
    if (this.pos < aProgram.length) {
      executeElementaryCommand(aProgram[this.pos], this);
    } else {
      this.pos = -1;
      this.parent && this.parent.update();
    }
  };
  this.run = function () {
    this.cStr = document.getElementById('prg').value;
    this.pos = -1;
    this.update();
  };
}

var glPos = new curState_prototype;

function runSubRoutine(str, parentMover) {
  var loopMover = new curState_prototype(-1, str, parentMover);
  loopMover.update();
  //increment for the 3 up's, so that parent can continue process
  //after this loop ends.
  //parentMover.pos+=; 
}

function executeElementaryCommand(cmd_param, mover) {
  var rtrn;
  switch (cmd_param) {
  case "UP": //MOVE
    rtrn = ObjectX.stepUp();
    mover.update();
    break;
  case "RIGHT": //TURN
    rtrn = ObjectX.stepRight();
    mover.update();
    break;
  case "LOOP":
    runSubRoutine("UP UP UP", mover);
    //Hard coded for this fiddle
    //We consider a loop repeat 3 times
    rtrn = 10;
    break;
  default:
    alert("Unknown command!");
    break;
  } //switch end
  
  return rtrn;
}

function objectXPrototype(rName, rX, rY) {
  this.rName = rName;
  this.rX = rX;
  this.rY = rY;
  this.stepUp = function () {
    var result = 0;
    this.updatePosition("clean");
    var a = this.rY + 1;
    if (a > 5) {
      result = 1;
    } else {
      this.rY = a;
    };
    this.updatePosition("show");
    return result;
  };
  this.stepRight = function () {
    var result = 0;
    this.updatePosition("clean");
    a = this.rX + 1;
    if (a > 5) {
      result = 1;
    } else {
      this.rX = a;
    };
   ...