Mapper 0.4 - React Version

Starting point for creating JSFiddles with React.

by Sam Fereday

HTML

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/recompose/0.26.0/Recompose.min.js"></script>
<div id="container">
  <!-- This element's contents will be replaced with your component. -->
</div>

CSS

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  box-sizing: border-box
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block
}

body {
  line-height: 1
}

ol,
ul {
  list-style: none
}

blockquote,
q {
  quotes: none
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none
}

table {
  border-collapse: collapse;
  border-spacing: 0
}

input {
  box-sizing: border-box
}

html {
  height: 100%
}

body {
  padding: 0;
  margin: 0;
  font: 75%/1.4em 'Lato', sans-serif;
  background: #ccc;
  height: 100%
}

button {
  width: 100%;
  border: 0;
  padding: 0.5em 1em;
  margin-bottom: 1em;
  color: #EEE;
  background: #28aadc;
  cursor: pointer;
  transition: all 0.2s ease
}

button:hover {
  background: #70B2EB
}

.checkbox {
  margin: 10px 0 20px;
  position: relative
}

.checkbox label {
  cursor: pointer;
  position: absolute;
  width: 20px;
  height: 20px;
  top: 0;
  left: 0;
  border-radius: 4px;
  -webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.4);
  -moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.4);
  box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.4);
  background: -webkit-linear-gradient(top, #222 0%, #45484d 100%);
  background: -moz-linear-gradient(top, #222 0%, #45484d 100%);
  background:...

Babel + JSX

const { compose, withState, withHandlers, lifecycle } = Recompose;

// SETUP //
const guid = () => {
  function s4() {
    return Math.floor((1 + Math.random()) * 0x10000)
      .toString(16)
      .substring(1);
  }
  return s4() + s4() + '-' + s4() + '-' + s4() + '-' +
    s4() + '-' + s4() + s4() + s4();
};

const transpose = (matrix) => {
    // TODO: Make functional, no side-effects.
    // reverse the rows
    matrix = matrix.reverse();

    // swap the symmetric elements
    for (var i = 0; i < matrix.length; i++) {
      for (var j = 0; j < i; j++) {
        var temp = matrix[i][j];
        matrix[i][j] = matrix[j][i];
        matrix[j][i] = temp;
      }
    }

    return matrix;
};

const convertToCSharp = (arr, index) => {
	const newLine = index > 0 ? '\n' : '';
  let built = '';

  arr.forEach(function (row, i) {
    built += i !== arr.length - 1 ? '{' + row.toString() + '},\n' : '{' + row.toString() + '}';
  });

  return newLine + 'int[,] array' + index + ' = {\n' + built + '};';
};

const getCellsByRow = (arr, n) => {
  return arr.filter(function (item) {
    return item.y === n;
  });
};

const extractAsTypes = (arr) => {
  return arr.map(function (item) {
    return item.selectedTileType;
  });
};

// Data generator
const createGrid = (w, h, layer) => {
  let arr = [];
  for (let x = 0; x < h; x++) {
    for (let y = 0; y < w; y++) {
      arr.push({
      	id: guid() + layer,
        x, y,
        layer,
        selectedTileType: TILE_TYPES.EMPTY,
      });
    }
  }
  return arr;
};

// ...
const getTileByType = (type) => {
	return TILE_DATA.find(td => td.tileType === type);
};

const getTileById = (id) => {
	return TILE_DATA.find(td => td.id === id);
};

// ...
const MAP_OPTIONS = {
	TILE_SCALE: 32,
  WIDTH: 9,
  HEIGHT: 9
}

const TILE_TYPES = {
  EMPTY: 0,
  FLOOR_TILE: 1,
  WALL_TILE: 2,
  PILLAR_DECOR: 3,
  WALL_DECOR: 4,
  KEY_SPAWN: 5,
  PUZZLE_SPAWN: 6,
  ENEMY_SPAWN: 7,
  TREASURE_SPAWN: 8,
  TRAP_SPAWN: 9,
  ENTRANCE: 10,
  EXIT: 11,
...