HW19 - draw rectangles

index.html

@@ -22,8 +22,8 @@
     <script src="models/monsters/snake.js"></script>
     <script src="models/monsters/monkey.js"></script>
     <script src="models/character.js"></script>
-    <script src="models/battleground.js"></script>
     <script src="utils/dom.js"></script>
+    <script src="models/battleground.js"></script>
     <script src="script.js"></script>
   </body>
 </html>

models/battleground.js

@@ -1,8 +1,8 @@
 var BattleGround = (function() {
   function BattleGround(element, size, amountOfMonsters) {
-    this.wrapperElement = null;
-    this.cellsElement = null;
-    this.controllsElement = null;
+    this.gameWrapper = null;
+    this.gameCells = null;
+    this.gameControls = null;
     this.element = element;
     this.size = size;
     this.characterIndex = 0;
@@ -12,7 +12,8 @@ var BattleGround = (function() {
     this.area = new Array(size).fill(1).map(function() {
       return new Grass();
     });
-    this.render();
+    this.drawGameField();
+    this.drawElements();
     this.update();
   }
 
@@ -29,33 +30,32 @@ var BattleGround = (function() {
     this.update();
   };
 
-  BattleGround.prototype.render = function() {
-    this.wrapper = document.createElement('div');
-    this.wrapper.classList.add('game__wrapper');
-    this.wrapper.innerHTML =
-      '<div class="game__cells"></div> \
-        <div class="game__controls"></div>\
-      ';
-
-    this.cellsElement = this.wrapper.querySelector('.game__cells');
-    this.controllsElement = this.wrapper.querySelector('.game__controls');
-    this.wrapper.appendChild(this.cellsElement);
-    this.wrapper.appendChild(this.controllsElement);
-    this.element.appendChild(this.wrapper);
-  };
+  BattleGround.prototype.drawGameField = function(){
+    this.gameWrapper = createElementWithClass('div', 'game__wrapper');
+    this.gameCells = createElementWithClass('div', 'game__cells');
+    this.gameControls = createElementWithClass('div', 'game__controls');
+    this.gameWrapper.appendChild(this.gameCells);
+    this.gameWrapper.appendChild(this.gameControls);
+    this.element.appendChild(this.gameWrapper);
+    return {
+      gameWrapper: this.gameWrapper,
+      gameCells: this.gameCells,
+      gameControls: this.gameControls
+    }
+  }
 
-  BattleGround.prototype.update = function() {
-    var self = this;
-    this.cellsElement.innerHTML = '';
-    this.area.forEach(function(el) {
-      var cell = document.createElement('div');
-      var cellElement = el.render();
+  BattleGround.prototype.drawElements = function(){
+    var game = this.drawGameField();
+    this.area.forEach(function() {
+      var cell = createElementWithClass('div', 'game__cells__item');
+      game.gameCells.appendChild(cell);
+          })
+  } 
 
-      cell.classList.add('game__cells__item');
-      cell.appendChild(cellElement);
-      self.cellsElement.appendChild(cell);
-    });
-  };
+  BattleGround.prototype.update = function(){
+    this.element.innerHTML = '';
+    this.drawElements();
+  }
 
   BattleGround.prototype.addCharacter = function(character) {
     this.beforeElement = this.area[this.characterIndex];

style.css

@@ -29,7 +29,7 @@ body,
 .game__cells .game__cells__item {
   display: flex;
   width: 30px;
-  height: 100%;
+  height: 30px;
   margin-left: 10px;
   border: 1px solid rgb(144, 144, 144);
   border-radius: 2px;

utils/dom.js

@@ -14,3 +14,9 @@ function consoleNodesRecursive(root) {
     }
   });
 }
+
+function  createElementWithClass(el, cl) {
+  var element = document.createElement(el);
+  element.classList.add(cl);
+  return element;
+}