kenan - added draw eutriangle

helpers.js

@@ -0,0 +1,183 @@
+// general utilities
+class Command {
+  constructor(subject){
+    this._subject = subject;
+    this.commandsExecuted = [];
+  }
+
+  execute(command) {
+    this.commandsExecuted.push(command);
+    return this._subject[command]();
+  }
+
+}
+
+// Receiver:
+// knows how to carry out the operations associated with the command
+class UI {
+  constructor(userInput) {
+    this._userInput = userInput;
+    this._emoji = "🍍";
+  }
+
+  set userInput (userInput) {
+    this._userInput = userInput;
+  }
+
+  set emoji(newEmoji) {
+    this._emoji = newEmoji || "🍍";
+  }
+
+  // draw pineapples
+  // input: number of pineapples to draw
+  // out  : html element
+  draw() {
+    const numElemToDraw  = this._userInput;
+    return this._draw(numElemToDraw, 'p');
+  }
+
+
+  drawMultiple() {
+    // in: column row
+    // out htmlDocFragElement
+    const instructions = this._userInput.split(' ');
+    const columns = instructions[0];
+    const rows = instructions[1];
+    const docFragment = document.createDocumentFragment();
+    for (let i = 0; i < rows; i++ ) {
+      docFragment.appendChild(this._draw(columns,'p'))
+    }
+    return docFragment;
+  }
+
+  drawTriangle() {
+    const baseNumber = this._userInput.split(' ')[1];
+    const docFrag = document.createDocumentFragment();
+    for (let i = 1; i <= baseNumber; i++) {
+      docFrag.appendChild(this._draw(i, 'p'));
+    }
+    return docFrag;
+  }
+
+  drawRTriangle() {
+    const baseNumber = this._userInput.split(' ')[1];
+    const docFrag = document.createDocumentFragment();
+    for (let i = 1; i <= baseNumber; i++ ) {
+      const spacesToInsertBefore = baseNumber - i;
+      let trianglePartialElem = this._draw(i, 'p');
+      let temp = trianglePartialElem.textContent;
+      temp = this._insertSpace(spacesToInsertBefore) + temp;
+      trianglePartialElem.innerHTML = temp;
+      docFrag.appendChild(trianglePartialElem);
+    }
+    return docFrag;
+  }
+
+  drawETriangle() {
+    console.log("draw e triangle");
+    const baseNumber = parseInt(this._userInput.split(' ')[1]);
+    const docFrag = document.createDocumentFragment();
+    for (let i = baseNumber; i > 0; i-- ) {
+      const spacesToInsertBefore = i + (i-1);
+      let trianglePartialElem = this._draw( baseNumber - i + 1, 'p');
+      let temp = trianglePartialElem.textContent;
+      temp = this._insertSpace(spacesToInsertBefore) + temp;
+      trianglePartialElem.innerHTML = temp;
+      docFrag.appendChild(trianglePartialElem);
+    }
+    return docFrag;
+  }
+
+  drawEuTriangle() {
+    console.log("draw eu triangle");
+    const baseNumber = parseInt(this._userInput.split(' ')[1]);
+    const docFrag = document.createDocumentFragment();
+    for (let i = 0; i < baseNumber; i++ ) {
+      const spacesToInsertBefore = i + (i);
+      let trianglePartialElem = this._draw( baseNumber - i , 'p');
+      let temp = trianglePartialElem.textContent;
+      temp = this._insertSpace(spacesToInsertBefore) + temp;
+      trianglePartialElem.innerHTML = temp;
+      docFrag.appendChild(trianglePartialElem);
+    }
+    return docFrag;
+  }
+
+  _draw (colsToDraw, elementToReturn, symbol = this._emoji){
+    let newElem = document.createElement(elementToReturn);
+    for (let i = 0; i < colsToDraw; i++)  {
+      newElem .textContent += symbol;
+    }
+    return newElem;
+  }
+
+  _insertSpace(numSpace) {
+    return "&nbsp;".repeat(numSpace);
+  }
+
+  drawSquare() {
+    const size = this._userInput.split(' ')[2];
+    const docFrag = document.createDocumentFragment();
+    for (let i = 1 ; i <= size; i++ ) {
+      docFrag.appendChild(this._draw(size, 'p', "⬜"))
+    }
+    return docFrag;
+  }
+
+  // takes in direction, distance, current x, current y, size
+  // returns new square
+  moveCursor() {
+  }
+
+}
+
+class Helpers {
+  static isInputANumber (input) {
+    return !isNaN(parseInt(input));
+  }
+
+  static isDrawSingleRowCommand(input) {
+    return Helpers.isInputANumber(input) && input.split(' ').length === 1;
+  }
+
+  static isDrawMultipleColumnCommand(input) {
+    return Helpers.isInputANumber(input) && input.split(' ').length === 2;
+  }
+
+  static isClearCommand(input) {
+    return input === "clear" ;
+  }
+
+  static isDrawTriangleCommand(input) {
+    let re = new RegExp('^\\btriangle\\b \\d+$');
+    return re.test(input);
+  }
+
+  static isDrawSquareCommand(input) {
+    return input.includes("draw square");
+  }
+
+  static isDrawReverseTriangleCommand(input) {
+    let re = new RegExp('^\\brtriangle\\b \\d+$');
+    return re.test(input);
+  }
+
+  static isMoveCommand(input) {
+    let re = new RegExp('^\\bmove(up|down|left|right)\\b \\d+$');
+    return re.test(input);
+  }
+
+  static isEtriangleCommand(input) {
+    let re = new RegExp('^\\betriangle\\b \\d+$');
+    return re.test(input);
+  }
+
+  static isEuTriangleCommand(input) {
+    let re = new RegExp('^\\beutriangle\\b \\d+$');
+    return re.test(input);
+  }
+}
+String.prototype.replaceAt=function(index, replacement) {
+  return this.substr(0, index) + replacement+ this.substr(index + replacement.length);
+};
+

index.html

@@ -14,6 +14,7 @@ <h2>output:</h2>
       });
 
     </script>
+    <script src="helpers.js"></script>
     <script src="script.js"></script>
   </body>
 </html>

script.js

@@ -1,11 +1,91 @@
-console.log("hello script js");
 
+let isFirstRun = false;
+const ui = new UI();
+const command = new Command(ui);
+const outputElement = document.getElementById("output");
+const cursorLocation = [0,0]; // cursor coordinates x, y
+// given x, y coordinates, find square location and replace with by cursor
+const placeCursor = (coordinates, cursorSymbol) => {
+  const x = coordinates[0];
+  const y = coordinates[1];
+  const rowElement = outputElement.children[y];
+  const rowInnerterText = rowElement.innerText;
+  rowElement.innerText = rowInnerterText.replaceAt(x, cursorSymbol);
+  // y indicates row
+};
+const setEmoji = userInput => {
+  document.getElementById("input").setAttribute('placeholder', "Please enter an emoji you want.")
+};
+let testInput = null;
 var inputHappened = function(currentInput){
-  console.log( currentInput );
-  display( "WOW SOMETHING HAPPENED" );
+  ui.userInput = currentInput;
+  outputElement.innerText = currentInput;
+  testInput = currentInput;
+  console.log(testInput);
+  if (Helpers.isDrawSingleRowCommand(currentInput)) {
+    const newElement = command.execute('draw');
+    console.log("drawSingle");
+    display( newElement );
+  }
+  if (Helpers.isClearCommand(currentInput)) {
+    console.log("clear");
+    document.getElementById("output").innerHTML ="";
+  }
+
+  if (Helpers.isDrawMultipleColumnCommand(currentInput)) {
+    console.log("drawMultiple");
+    display(command.execute('drawMultiple'));
+  }
+
+  if (Helpers.isDrawTriangleCommand(currentInput)) {
+    console.log("draw triangle");
+    display(command.execute('drawTriangle'))
+  }
+
+  if (Helpers.isDrawReverseTriangleCommand(currentInput)) {
+    console.log("draw reverse triangle");
+    display(command.execute('drawRTriangle'))
+  }
+
+  // requires special handling
+  if (Helpers.isDrawSquareCommand(currentInput)) {
+    // place a cursor at top right corner first
+    const cursor = "C";
+    display(command.execute('drawSquare'));
+    console.log("draw square");
+    placeCursor(cursorLocation, "C");
+  }
+
+  if (Helpers.isEtriangleCommand(currentInput)) {
+    console.log("draw e triangle");
+    display(command.execute('drawETriangle'));
+  }
+
+  if (Helpers.isEuTriangleCommand(currentInput)) {
+    console.log("drawuing eu triangle");
+    display(command.execute("drawEuTriangle"));
+  }
+
+  // special handling
+  // pass moveCursor command
+  // moveCursor command interface
+  // in: direction, distance, current x, current y, size
+  // out: html fragment
+  // todo: check square exist else do nothing
+  if (Helpers.isMoveCommand(currentInput)) {
+    console.log("moving cursor");
+    const instruction = currentInput.split(' ');
+    const distanceToMove = instruction[1];
+    const directionCommandStr = instruction[0];
+    const directionToMove = directionCommandStr.substr("move".length, directionCommandStr );
+    const squareCollection = document.getElementById("output").children;
+    const squareSize = squareCollection.length;
+    const commandString =
+    display(command.execute('moveCursor'))
+  }
 };
 
 var display = function(stuffToDisplay){
-  // your DOM manipulation code here
-
+  const outputContainer = document.getElementById("output");
+  outputContainer.appendChild(stuffToDisplay);
 };