A Pen by Reda

Thumbnail
This awesome code was written by redaaa, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright redaaa ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  Reda</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <title>Rogue Like</title>
  </head>
  <body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <header>Roguelike Dungeon Crawler Game</header>
    <div id="root"></div>
  </body>
</html>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/humane-js/3.2.2/humane.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/redaaa/a-pen-by-reda-yoamWY */
body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  background-color : #222222
}

header{
  background-color: #333;
  font-family: monospace;
  text-shadow: 1px 1px 20px #00ff00;
  color : white;
  font-size:30pt;
  text-align: center;
  padding-bottom: 20px;
  padding-top: 20px;
  letter-spacing: 8px;
  box-shadow: 1px 1px 20px lime;
}
#gameInfo{
  color : white;
  width: 40%;
  font-family: monospace;
  font-size: 20pt;
  margin-left: 30px;
  text-align: left;
}


#app{
  display: flex;
}

#Board{
  background-color: white;
  display: flex;
  flex-wrap: wrap;
  border: 1px black solid;
  height: 500px;
  width : 500px;
  box-shadow: 1px 1px 10px white;
  border : 10px #333 solid;
}

.cell{
  width : 10px;
  height: 10px;
  margin: 0px;
}
#app{
  margin-top: 30px;
}

.empty{
  background-color: beige;
}

.full{
  background-color: #444444;
}


.portal{
  background-color: purple;
}

.enemy{
  background-color: red;
}

.heal{
  background-color: #0bff00;
}

.player{
  background-color: blue;
}
.weapon{
  background-color: orange;
}

.door{
  background-color: #fdfff8;
}

@media all and (max-width: 950px) {
  #app{
    display: block;
  }
}

html,
body {
  min-height: 100%;
}


html,
body {
  min-height: 100%;
}
.humane,
.humane-bigbox {
  position: fixed;
  -moz-transition: all 0.3s ease-out;
  -webkit-transition: all 0.3s ease-out;
  -ms-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
  z-index: 100000;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
}
.humane,
.humane-bigbox {
  font-family: Ubuntu, Verdana, sans-serif;
  line-height: 40px;
  font-size: 35px;
  top: 25%;
  left: 25%;
  opacity: 0;
  width: 50%;
  min-height: 40px;
  padding: 30px;
  text-align: center;
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADICAYAAAAp8ov1AAAABmJLR0QA/wD/AP+gvaeTAAAAc0lEQVQokb2RQQ6EMAwDx/7/n80BtIEC3RYhLlXrVLGTAYiBWBIGtkPSP01SfreTVoV5re9Rcee1scwDk9NurbR62sZJcpzy9O+2X5KsXabyPaQFYNuvkqkRviDTp9Vs8opC0TpkHvJtVjeReW/5kEyX1gKeLEKE9peeWAAAAABJRU5ErkJggg==');
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #000), color-stop(1, rgba(0,0,0,0.9))) no-repeat;
  background: -moz-linear-gradient(top, #000 0%, rgba(0,0,0,0.9) 100%) no-repeat;
  background: -webkit-linear-gradient(top, #000 0%, rgba(0,0,0,0.9) 100%) no-repeat;
  background: -ms-linear-gradient(top, #000 0%, rgba(0,0,0,0.9) 100%) no-repeat;
  background: -o-linear-gradient(top, #000 0%, rgba(0,0,0,0.9) 100%) no-repeat;
  background: linear-gradient(top, #000 0%, rgba(0,0,0,0.9) 100%) no-repeat;
  *background-color: #000;
  color: #fff;
  -webkit-border-radius: 15px;
  border-radius: 15px;
  text-shadow: 0 -1px 1px #ddd;
  -webkit-box-shadow: 0 15px 15px -15px #000;
  box-shadow: 0 15px 15px -15px #000;
  -moz-transform: scale(0.1);
  -webkit-transform: scale(0.1);
  -ms-transform: scale(0.1);
  -o-transform: scale(0.1);
  transform: scale(0.1);
}
.humane p,
.humane-bigbox p,
.humane ul,
.humane-bigbox ul {
  margin: 0;
  padding: 0;
}
.humane ul,
.humane-bigbox ul {
  list-style: none;
}
.humane.humane-bigbox-info,
.humane-bigbox.humane-bigbox-info {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADICAYAAAAp8ov1AAAABmJLR0QA/wD/AP+gvaeTAAAAQElEQVQokWNgYEj5z8TAwPCfiYGBgQGVIEKMTG2DTYwRVez/IHIaNcUGyBnYgpORel6gpvFEJhBqpxIaG8/AAADsKDq/HhYQ2AAAAABJRU5ErkJggg==');
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #000064), color-stop(1, rgba(0,0,100,0.9))) no-repeat;
  background: -moz-linear-gradient(top, #000064 0%, rgba(0,0,100,0.9) 100%) no-repeat;
  background: -webkit-linear-gradient(top, #000064 0%, rgba(0,0,100,0.9) 100%) no-repeat;
  background: -ms-linear-gradient(top, #000064 0%, rgba(0,0,100,0.9) 100%) no-repeat;
  background: -o-linear-gradient(top, #000064 0%, rgba(0,0,100,0.9) 100%) no-repeat;
  background: linear-gradient(top, #000064 0%, rgba(0,0,100,0.9) 100%) no-repeat;
  *background-color: #030;
}
.humane.humane-bigbox-success,
.humane-bigbox.humane-bigbox-success {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADICAYAAAAp8ov1AAAABmJLR0QA/wD/AP+gvaeTAAAAPklEQVQokWNgSGH4z8TAACEYUAkixMjUNsjEGFHF/g8ip1FVbGCcgS04GannBaoaT1wCwWkvmXbQ2HgGBgYA8Yw6v+m4Kh8AAAAASUVORK5CYII=');
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #006400), color-stop(1, rgba(0,100,0,0.9))) no-repeat;
  background: -moz-linear-gradient(top, #006400 0%, rgba(0,100,0,0.9) 100%) no-repeat;
  background: -webkit-linear-gradient(top, #006400 0%, rgba(0,100,0,0.9) 100%) no-repeat;
  background: -ms-linear-gradient(top, #006400 0%, rgba(0,100,0,0.9) 100%) no-repeat;
  background: -o-linear-gradient(top, #006400 0%, rgba(0,100,0,0.9) 100%) no-repeat;
  background: linear-gradient(top, #006400 0%, rgba(0,100,0,0.9) 100%) no-repeat;
  *background-color: #030;
}
.humane.humane-bigbox-error,
.humane-bigbox.humane-bigbox-error {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADICAYAAAAp8ov1AAAABmJLR0QA/wD/AP+gvaeTAAAAPklEQVQokWNIYWD4z8QAJRhQCSLEyNQ2uMQYUcX+DyKnUVdsQJyBLTgZqecF6hpPVALBaS+ZdtDYeAYGBgYA9vA6v4OR3MkAAAAASUVORK5CYII=');
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #640000), color-stop(1, rgba(100,0,0,0.9))) no-repeat;
  background: -moz-linear-gradient(top, #640000 0%, rgba(100,0,0,0.9) 100%) no-repeat;
  background: -webkit-linear-gradient(top, #640000 0%, rgba(100,0,0,0.9) 100%) no-repeat;
  background: -ms-linear-gradient(top, #640000 0%, rgba(100,0,0,0.9) 100%) no-repeat;
  background: -o-linear-gradient(top, #640000 0%, rgba(100,0,0,0.9) 100%) no-repeat;
  background: linear-gradient(top, #640000 0%, rgba(100,0,0,0.9) 100%) no-repeat;
  *background-color: #300;
}
.humane.humane-animate,
.humane-bigbox.humane-bigbox-animate {
  opacity: 1;
  -moz-transform: scale(1);
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
}
.humane.humane-animate:hover,
.humane-bigbox.humane-bigbox-animate:hover {
  opacity: 0.6;
  -moz-transform: scale(0.8);
  -webkit-transform: scale(0.8);
  -ms-transform: scale(0.8);
  -o-transform: scale(0.8);
  transform: scale(0.8);
}
.humane.humane-js-animate,
.humane-bigbox.humane-bigbox-js-animate {
  opacity: 1;
  -moz-transform: scale(1);
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
}
.humane.humane-js-animate:hover,
.humane-bigbox.humane-bigbox-js-animate:hover {
  opacity: 0.6;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60);
}

/*Downloaded from https://www.codeseek.co/redaaa/a-pen-by-reda-yoamWY */
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }

// all Thanks goes to https://medium.com/@victorcatalintorac/dungeon-with-rooms-algorithm-for-javascript-ultimate-begginer-guide-ec1489e90314
// for generating dungeons


humane.addnCls = 'humane-bigbox-info';
humane.baseCls = 'humane-bigbox';
humane.timeout = 3000;
humane.log("Kill Boss and all enemies in last dungeon to Win");
humane.log("Play with arrows or numpad");

var events = {};
var GRID_HEIGHT = 100;
var GRID_WIDTH = 100;
var MAX_ROOMS = 10;
var ROOM_SIZE_RANGE = [7, 25];
var c = { GRID_HEIGHT: GRID_HEIGHT, GRID_WIDTH: GRID_WIDTH, MAX_ROOMS: MAX_ROOMS, ROOM_SIZE_RANGE: ROOM_SIZE_RANGE };
var rooms = [];
var spawnX = void 0,
    spawnY = void 0;
var weapons = [{ name: "knife", attack: 12 }, { name: "Dagger", attack: 15 }, { name: "Sword", attack: 18 }, { name: "Double Sword", attack: 20 }];
function refreshPosition(matrix, before, after) {
    matrix[before.y][before.x].type = "empty";
    matrix[after.y][after.x].type = "player";
    if (matrix[before.y][before.x].id) {
        delete matrix[before.y][before.x].id;
    }
    return matrix;
}
function checkEnemies() {
    for (var i = 0; i < enemies.length; i++) {
        if (!enemies[i].dead) {
            return false;
        }
    }
    return true;
}
var enemies = [];
function placeHeals(grid, healsNumber) {
    var room = void 0;
    var x = void 0;
    var y = void 0;
    var i = 0;
    var num = _.random(0, rooms.length - 1);
    var lastnum = void 0;
    while (i < healsNumber) {
        num = _.random(0, rooms.length - 1);
        room = rooms[num];
        if (num === lastnum) {
            continue;
        }
        lastnum = num;
        x = room.x + _.random(0, room.width - 1);
        y = room.y + _.random(0, room.height - 1);
        if (grid[y][x].type === "heal" || grid[y][x].type === "enemy" || grid[y][x].type === "portal" || grid[y][x].type === "player") {
            continue;
        }
        grid[y][x].type = "heal";
        i++;
    }

    return grid;
}
function placePlayer(grid) {
    while (true) {
        spawnX = rooms[0].x + _.random(0, rooms[0].width - 1);
        spawnY = rooms[0].y + _.random(0, rooms[0].height - 1);
        if (grid[spawnY][spawnX].type === "empty") {
            grid[spawnY][spawnX].type = "player";
            break;
        }
    }
    return grid;
}
function placeEnemies(grid, enemiesNumber, level) {
    var room = void 0;
    var x = void 0;
    var y = void 0;
    var i = 0;
    var num = _.random(0, rooms.length - 1);
    var lastnum = void 0;
    while (i < enemiesNumber) {
        num = _.random(0, rooms.length - 1);
        room = rooms[num];
        if (num === lastnum) {
            continue;
        }
        lastnum = num;
        x = room.x + _.random(0, room.width - 1);
        y = room.y + _.random(0, room.height - 1);
        if (grid[y][x].type === "heal" || grid[y][x].type === "portal" || grid[y][x].type === "player") {
            continue;
        }

        var enemyState = {
            enemyX: x,
            enemyY: y,
            health: 50 + level * 15,
            level: level,
            attack: 5 + 5 * level,
            dead: false,
            id: enemies.length
        };
        enemies.push(enemyState);

        grid[y][x].type = "enemy";
        grid[y][x].id = enemyState.id;
        i++;
    }

    return grid;
}
function placeWeapons(grid, level) {
    var room = void 0;
    var x = void 0;
    var y = void 0;
    while (true) {
        room = rooms[_.random(0, rooms.length - 1)];
        x = room.x + _.random(0, room.width - 1);
        y = room.y + _.random(0, room.height - 1);
        if (grid[y][x].type === "empty") {
            grid[y][x].type = "weapon";
            grid[y][x].id = level;
            break;
        }
    }

    return grid;
}
function placePortal(grid) {
    var room = void 0;
    var x = void 0;
    var y = void 0;
    while (true) {
        room = rooms[_.random(0, rooms.length - 1)];
        x = room.x + _.random(0, room.width - 1);
        y = room.y + _.random(0, room.height - 1);
        if (grid[y][x].type !== "player") {
            grid[y][x].type = "portal";
            break;
        }
    }

    return grid;
}
function placeBoss(grid, level) {
    var x = void 0;
    var y = void 0;
    var room = rooms[_.random(0, rooms.length - 1)];
    x = room.x + _.random(0, room.width - 3);
    y = room.y + _.random(0, room.height - 3);
    var enemyState = {
        enemyX: x,
        enemyY: y,
        health: 100,
        level: level,
        attack: 20,
        dead: false,
        id: enemies.length
    };
    enemies.push(enemyState);
    grid[y][x].type = "enemy";
    grid[y][x].id = enemyState.id;

    enemyState = {
        enemyX: x + 1,
        enemyY: y,
        health: 100,
        level: level,
        attack: 20,
        dead: false,
        id: enemies.length
    };
    enemies.push(enemyState);
    grid[y][x + 1].type = "enemy";
    grid[y][x + 1].id = enemyState.id;

    enemyState = {
        enemyX: x + 1,
        enemyY: y + 1,
        health: 100,
        level: level,
        attack: 20,
        dead: false,
        id: enemies.length
    };
    enemies.push(enemyState);
    grid[y + 1][x + 1].type = "enemy";
    grid[y + 1][x + 1].id = enemyState.id;

    enemyState = {
        enemyX: x,
        enemyY: y + 1,
        health: 100,
        level: level,
        attack: 20,
        dead: false,
        id: enemies.length
    };
    enemies.push(enemyState);
    grid[y + 1][x].type = "enemy";
    grid[y + 1][x].id = enemyState.id;
    return grid;
}
function newDungeon(healsNumber, enemyNumbers) {
    var level = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;

    var grid = void 0;
    enemies = [];
    rooms = [];
    var createDungeon = function createDungeon() {
        // HELPER FUNCTIONS FOR CREATING THE MAP
        var isValidRoomPlacement = function isValidRoomPlacement(grid, _ref) {
            var x = _ref.x,
                y = _ref.y,
                _ref$width = _ref.width,
                width = _ref$width === undefined ? 1 : _ref$width,
                _ref$height = _ref.height,
                height = _ref$height === undefined ? 1 : _ref$height;

            // check if on the edge of or outside of the grid
            if (y < 1 || y + height > grid.length - 1) {
                return false;
            }
            if (x < 1 || x + width > grid[0].length - 1) {
                return false;
            }

            // check if on or adjacent to existing room
            for (var i = y - 1; i < y + height + 1; i++) {
                for (var j = x - 1; j < x + width + 1; j++) {
                    if (grid[i][j].type === 'empty') {
                        return false;
                    }
                }
            }
            // all grid cells are clear
            return true;
        };

        var placeCells = function placeCells(grid, _ref2) {
            var x = _ref2.x,
                y = _ref2.y,
                _ref2$width = _ref2.width,
                width = _ref2$width === undefined ? 1 : _ref2$width,
                _ref2$height = _ref2.height,
                height = _ref2$height === undefined ? 1 : _ref2$height;
            var type = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'empty';

            for (var i = y; i < y + height; i++) {
                for (var j = x; j < x + width; j++) {
                    grid[i][j].type = type;
                }
            }
            if (height !== 1) {
                rooms.push({ x: x, y: y, width: width, height: height });
            }
            return grid;
        };

        var createRoomsFromSeed = function createRoomsFromSeed(grid, _ref3) {
            var x = _ref3.x,
                y = _ref3.y,
                width = _ref3.width,
                height = _ref3.height;
            var range = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : c.ROOM_SIZE_RANGE;

            // range for generating the random room heights and widths
            var _range = _slicedToArray(range, 2),
                min = _range[0],
                max = _range[1];

            // generate room values for each edge of the seed room


            var roomValues = [];

            var north = { height: _.random(min, max), width: _.random(min, max) };
            north.x = _.random(x, x + width - 1);
            north.y = y - north.height - 1;
            north.doorx = _.random(north.x, Math.min(north.x + north.width, x + width) - 1);
            north.doory = y - 1;
            north.id = 'N';
            roomValues.push(north);

            var east = { height: _.random(min, max), width: _.random(min, max) };
            east.x = x + width + 1;
            east.y = _.random(y, height + y - 1);
            east.doorx = east.x - 1;
            east.doory = _.random(east.y, Math.min(east.y + east.height, y + height) - 1);
            east.id = 'E';
            roomValues.push(east);

            var south = { height: _.random(min, max), width: _.random(min, max) };
            south.x = _.random(x, width + x - 1);
            south.y = y + height + 1;
            south.doorx = _.random(south.x, Math.min(south.x + south.width, x + width) - 1);
            south.doory = y + height;
            south.id = 'S';
            roomValues.push(south);

            var west = { height: _.random(min, max), width: _.random(min, max) };
            west.x = x - west.width - 1;
            west.y = _.random(y, height + y - 1);
            west.doorx = x - 1;
            west.doory = _.random(west.y, Math.min(west.y + west.height, y + height) - 1);
            west.id = 'W';
            roomValues.push(west);

            var placedRooms = [];
            roomValues.forEach(function (room) {
                if (isValidRoomPlacement(grid, room)) {
                    // place room
                    grid = placeCells(grid, room);
                    // place door
                    grid = placeCells(grid, { x: room.doorx, y: room.doory }, 'empty');
                    // need placed room values for the next seeds
                    placedRooms.push(room);
                }
            });
            return { grid: grid, placedRooms: placedRooms };
        };

        // BUILD OUT THE MAP

        // 1. make a grid of 'empty' cells, with a random opacity value (for styling)
        var grid = [];
        for (var i = 0; i < c.GRID_HEIGHT; i++) {
            grid.push([]);
            for (var j = 0; j < c.GRID_WIDTH; j++) {
                grid[i].push({ type: "full" });
            }
        }

        // 2. random values for the first room

        var _c$ROOM_SIZE_RANGE = _slicedToArray(c.ROOM_SIZE_RANGE, 2),
            min = _c$ROOM_SIZE_RANGE[0],
            max = _c$ROOM_SIZE_RANGE[1];

        var firstRoom = {
            x: _.random(1, c.GRID_WIDTH - max - 15),
            y: _.random(1, c.GRID_HEIGHT - max - 15),
            height: _.random(min, max),
            width: _.random(min, max),
            id: 'O'
        };

        // 3. place the first room on to grid
        grid = placeCells(grid, firstRoom);

        // 4. using the first room as a seed, recursivley add rooms to the grid
        var growMap = function growMap(grid, seedRooms) {
            var counter = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
            var maxRooms = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : c.MAX_ROOMS;

            if (counter + seedRooms.length > maxRooms || !seedRooms.length) {
                return grid;
            }

            grid = createRoomsFromSeed(grid, seedRooms.pop());
            seedRooms.push.apply(seedRooms, _toConsumableArray(grid.placedRooms));

            counter += grid.placedRooms.length;
            return growMap(grid.grid, seedRooms, counter);
        };

        return growMap(grid, [firstRoom]);
    };
    grid = createDungeon();

    grid = placePlayer(grid);
    if (level !== 4) {
        grid = placePortal(grid);
    }
    grid = placeHeals(grid, healsNumber);
    grid = placeEnemies(grid, enemyNumbers, level);
    grid = placeWeapons(grid, level);
    if (level === 4) {
        grid = placeBoss(grid);
    }
    return grid;
}

var youDied = false;
var _changeLevel = false;

var App = function (_React$Component) {
    _inherits(App, _React$Component);

    function App(props) {
        _classCallCheck(this, App);

        var _this = _possibleConstructorReturn(this, (App.__proto__ || Object.getPrototypeOf(App)).call(this, props));

        _this.state = {
            gameArray: newDungeon(10, 10, 1),
            playerPositionX: spawnX, // horizontal
            playerPositionY: spawnY, // Vertical
            health: 100,
            weapon: "Hands",
            level: 1,
            attack: 8 + 3 * 1, //level
            nextLevel: 100,
            dungeon: 1
        };

        var that = _this;
        $(events).on("move", function (event, data) {
            that.move(data);
        });

        return _this;
    }

    _createClass(App, [{
        key: 'addHealth',
        value: function addHealth() {
            var newHealth = this.state.health + 20;
            newHealth = newHealth > 100 ? 100 : newHealth;
            this.setState({ health: newHealth });
        }
    }, {
        key: 'attackedEnemy',
        value: function attackedEnemy(id) {
            var myheal = this.state.health;
            if (myheal - enemies[id].attack <= 0) {
                youDied = true;
                return false;
            }
            enemies[id].health -= this.state.attack;
            this.setState({ health: this.state.health - enemies[id].attack });
            if (enemies[id].health <= 0) {
                if (this.state.nextLevel - 20 <= 0) {
                    this.setState({ health: this.state.health + 15 * this.state.level, level: this.state.level + 1, nextLevel: 100, attack: this.state.attack + (this.state.level + 1) * 3 });
                } else {
                    this.setState({ nextLevel: this.state.nextLevel - 20 });
                }
                enemies[id].dead = true;
                return true;
            } else {
                return false;
            }
        }
    }, {
        key: 'changeWeapon',
        value: function changeWeapon(id) {
            this.setState({ weapon: weapons[id - 1].name, attack: weapons[id - 1].attack + this.state.attack + this.state.level * 5 });
        }
    }, {
        key: 'changeLevel',
        value: function changeLevel() {
            _changeLevel = true;
        }
    }, {
        key: 'possibleToMove',
        value: function possibleToMove(tile) {
            if (tile.type === "empty") {
                return true;
            }
            if (tile.type === "heal") {
                this.addHealth();
                return true;
            }
            if (tile.type === "enemy") {
                return this.attackedEnemy(tile.id);
            }
            if (tile.type === "weapon") {
                this.changeWeapon(tile.id);
                return true;
            }
            if (tile.type === "portal") {
                this.changeLevel();
                return true;
            }
            return false;
        }
    }, {
        key: 'move',
        value: function move(direction) {
            var helpMatrix = this.state.gameArray;
            var actualPosition = {
                x: this.state.playerPositionX,
                y: this.state.playerPositionY
            };
            var newPosition = $.extend({}, actualPosition); // clone object
            if (direction === "up") {
                if (this.possibleToMove(helpMatrix[actualPosition.y - 1][actualPosition.x])) {
                    newPosition.y -= 1;
                }
            } else if (direction === "down") {
                if (this.possibleToMove(helpMatrix[actualPosition.y + 1][actualPosition.x])) {
                    newPosition.y += 1;
                }
            } else if (direction === "left") {
                if (this.possibleToMove(helpMatrix[actualPosition.y][actualPosition.x - 1])) {
                    newPosition.x -= 1;
                }
            } else if (direction === "right") {
                if (this.possibleToMove(helpMatrix[actualPosition.y][actualPosition.x + 1])) {
                    newPosition.x += 1;
                }
            }
            console.log(enemies);
            if (this.state.dungeon === 4 && checkEnemies()) {
                humane.addnCls = 'humane-bigbox-success';
                humane.baseCls = 'humane-bigbox';
                humane.log("You Won ! ! !");
                this.setState({
                    gameArray: newDungeon(10, 10, 1),
                    playerPositionX: spawnX, // horizontal
                    playerPositionY: spawnY, // Vertical
                    health: 100,
                    weapon: "Hands",
                    level: 1,
                    attack: 8 + 3 * 1, //level
                    nextLevel: 100,
                    dungeon: 1
                });
                return;
            }
            if (_changeLevel) {
                humane.addnCls = 'humane-bigbox-info';
                humane.baseCls = 'humane-bigbox';
                var num = this.state.dungeon + 1;
                humane.log("Dungeon " + num);

                this.setState({
                    gameArray: newDungeon(10, 10, this.state.dungeon + 1),
                    playerPositionX: spawnX, // horizontal
                    playerPositionY: spawnY, // Vertical
                    dungeon: this.state.dungeon + 1
                });
                _changeLevel = false;

                return;
            }
            if (youDied) {
                humane.addnCls = 'humane-bigbox-error';
                humane.baseCls = 'humane-bigbox';
                humane.log("You Died!");

                this.setState({
                    gameArray: newDungeon(10, 10, 1),
                    playerPositionX: spawnX, // horizontal
                    playerPositionY: spawnY, // Vertical
                    health: 100,
                    weapon: "Hands",
                    level: 1,
                    attack: 8 + 3 * 1, //level
                    nextLevel: 100,
                    dungeon: 1
                });
                youDied = false;

                return;
            }
            helpMatrix = refreshPosition(helpMatrix, actualPosition, newPosition);
            this.setState({ gameArray: helpMatrix, playerPositionX: newPosition.x, playerPositionY: newPosition.y });
        }
    }, {
        key: 'render',
        value: function render() {
            return React.createElement(
                'div',
                { id: 'app', className: 'container-fluid' },
                React.createElement(GameState, { gameArray: this.state.gameArray, playerState: {
                        health: this.state.health,
                        weapon: this.state.weapon,
                        attack: this.state.attack,
                        level: this.state.level,
                        nextLevel: this.state.nextLevel,
                        dungeon: this.state.dungeon
                    } }),
                React.createElement(Board, { playerPosition: {
                        x: this.state.playerPositionX,
                        y: this.state.playerPositionY
                    }, gameArray: this.state.gameArray })
            );
        }
    }]);

    return App;
}(React.Component);

// game array [VERTICAL][HORIZONTAL]


var GameState = function (_React$Component2) {
    _inherits(GameState, _React$Component2);

    function GameState(props) {
        _classCallCheck(this, GameState);

        var _this2 = _possibleConstructorReturn(this, (GameState.__proto__ || Object.getPrototypeOf(GameState)).call(this, props));

        _this2.state = {
            health: _this2.props.playerState.health,
            weapon: _this2.props.playerState.weapon,
            attack: _this2.props.playerState.attack,
            level: _this2.props.playerState.level,
            nextLevel: _this2.props.playerState.nextLevel,
            dungeon: _this2.props.playerState.dungeon
        };
        return _this2;
    }

    _createClass(GameState, [{
        key: 'componentWillReceiveProps',
        value: function componentWillReceiveProps(nextProps) {
            this.setState({ health: nextProps.playerState.health,
                weapon: nextProps.playerState.weapon,
                attack: nextProps.playerState.attack,
                level: nextProps.playerState.level,
                nextLevel: nextProps.playerState.nextLevel,
                dungeon: nextProps.playerState.dungeon });
        }
    }, {
        key: 'render',
        value: function render() {
            return React.createElement(
                'div',
                { id: 'gameInfo', className: 'col-md-6' },
                React.createElement(
                    'p',
                    null,
                    'Health: ',
                    this.state.health.toString()
                ),
                React.createElement(
                    'p',
                    null,
                    'Weapon: ',
                    this.state.weapon
                ),
                React.createElement(
                    'p',
                    null,
                    'Attack: ',
                    this.state.attack.toString()
                ),
                React.createElement(
                    'p',
                    null,
                    'Level: ',
                    this.state.level.toString()
                ),
                React.createElement(
                    'p',
                    null,
                    'Next Level in: ',
                    this.state.nextLevel.toString() + " XP",
                    ' '
                ),
                React.createElement(
                    'p',
                    null,
                    'Dungeon: ',
                    this.state.dungeon
                )
            );
        }
    }]);

    return GameState;
}(React.Component);

var Board = function (_React$Component3) {
    _inherits(Board, _React$Component3);

    function Board(props) {
        _classCallCheck(this, Board);

        var _this3 = _possibleConstructorReturn(this, (Board.__proto__ || Object.getPrototypeOf(Board)).call(this, props));

        if (_this3.props.playerPosition.y > 25 && _this3.props.playerPosition.y < 75) {
            if (_this3.props.playerPosition.x >= 25 && _this3.props.playerPosition.x < 75) {
                _this3.state = {
                    displayFromx: 25,
                    displayFromy: 25
                };
            } else if (_this3.props.playerPosition.x <= 25) {
                _this3.state = {
                    displayFromx: 25,
                    displayFromy: 0
                };
            } else if (_this3.props.playerPosition.x >= 75) {
                _this3.state = {
                    displayFromx: 25,
                    displayFromy: 50
                };
            }
        } else if (_this3.props.playerPosition.x <= 50) {
            if (_this3.props.playerPosition.y <= 50) {
                _this3.state = {
                    displayFromx: 0,
                    displayFromy: 0
                };
            } else {
                _this3.state = {
                    displayFromx: 50,
                    displayFromy: 0
                };
            }
        } else {
            if (_this3.props.playerPosition.y <= 50) {
                _this3.state = {
                    displayFromx: 0,
                    displayFromy: 50
                };
            } else {
                _this3.state = {
                    displayFromx: 50,
                    displayFromy: 50
                };
            }
        }
        return _this3;
    }

    _createClass(Board, [{
        key: 'componentWillReceiveProps',
        value: function componentWillReceiveProps(nextProps) {
            if (nextProps.playerPosition.y > 25 && nextProps.playerPosition.y < 75) {
                if (nextProps.playerPosition.x >= 25 && nextProps.playerPosition.x <= 75) {
                    this.setState({
                        displayFromx: 25,
                        displayFromy: 25
                    });
                } else if (nextProps.playerPosition.x <= 25) {
                    this.setState({
                        displayFromx: 25,
                        displayFromy: 0
                    });
                } else if (nextProps.playerPosition.x >= 75) {
                    this.setState({
                        displayFromx: 25,
                        displayFromy: 50
                    });
                }
            } else if (nextProps.playerPosition.x < 50) {
                if (nextProps.playerPosition.y < 50) {
                    this.setState({ displayFromx: 0, displayFromy: 0 });
                } else {
                    this.setState({ displayFromx: 50, displayFromy: 0 });
                }
            } else {
                if (nextProps.playerPosition.y < 50) {
                    this.setState({ displayFromx: 0, displayFromy: 50 });
                } else {
                    this.setState({ displayFromx: 50, displayFromy: 50 });
                }
            }
        }
    }, {
        key: 'render',
        value: function render() {
            var c = [];
            for (var i = this.state.displayFromx; i < this.state.displayFromx + 50; i++) {
                for (var j = this.state.displayFromy; j < this.state.displayFromy + 50; j++) {
                    c.push(React.createElement(Cell, { key: i.toString() + " " + j.toString(), id: i.toString() + " " + j.toString(), type: this.props.gameArray[i][j].type }));
                }
            }
            return React.createElement(
                'div',
                { id: 'Board' },
                c
            );
        }
    }]);

    return Board;
}(React.Component);

var Cell = function (_React$Component4) {
    _inherits(Cell, _React$Component4);

    function Cell() {
        _classCallCheck(this, Cell);

        return _possibleConstructorReturn(this, (Cell.__proto__ || Object.getPrototypeOf(Cell)).apply(this, arguments));
    }

    _createClass(Cell, [{
        key: 'render',
        value: function render() {
            return React.createElement('div', { className: this.props.type.toString() + " cell", id: this.props.id });
        }
    }]);

    return Cell;
}(React.Component);

$(document).keydown(function (e) {
    //if( e.which === 32){
    //space
    // $(events).trigger("onSpacesPress");
    //}
    switch (e.which) {
        case 100:
        case 37:
            $(events).trigger("move", "left");
            break;
        case 38:
        case 104:
            $(events).trigger("move", "up");
            break;
        case 102:
        case 39:
            $(events).trigger("move", "right");
            break;
        case 98:
        case 40:
            $(events).trigger("move", "down");
            break;
        default:
            break;
    }
});

ReactDOM.render(React.createElement(App, null), document.getElementById('root'));

Comments