map parser

Takes an array and return an html mapping

by de Montalembert Jonathan

HTML

<div id="field"></div>

CSS

.tile {
  width: 10px;
  height: 10px;
  position: relative;
  float: left;
}

.row {
  clear: both;
}

.wall {
  background: grey;
}

.path {
  background: green;
}

.charactere {
  background: pink;
}

.box {
  background: brown;
}

.goal {
  background: black;
}

Babel + JSX

var map = [
  [0, 0, 0, 0, 0, 0],
  [0, 1, 1, 1, 1, 0],
  [0, 1, 2, 3, 1, 0],
  [0, 1, 1, 1, 1, 0],
  [0, 1, 1, 0, 1, 0],
  [0, 1, 1, 1, 1, 0],
  [0, 0, 0, 0, 0, 0]
]
var configuration = ['wall', 'path', 'charactere', 'box', 'goal']

function buildMap(map) {
  var fieldEl = document.getElementById('field');
  var fieldElShadow = document.createElement('div');
  var rows = [];
  map.forEach(row => {
    var rowEl = document.createElement('div');
    rowEl.className = 'row';
    row.forEach(tile => {
      var tileEl = document.createElement('div');
      tileEl.className = `tile ${configuration[tile]}`;
      rowEl.appendChild(tileEl);
    });
    fieldElShadow.appendChild(rowEl)
  });
  fieldEl.appendChild(fieldElShadow)
}

buildMap(map)