all-handson-solutions.md

app.js

// import styles
import '../styles/app.css';

// import dependencies
import { polyfill as promisePolyfill} from 'es6-promise';
import fetch from 'isomorphic-fetch';
import DOMDisplay from './modules/dom-display';
import Game from './modules/game/game';
import myLevel from './custom-levels/my-level';

// execute promise polyfill
promisePolyfill();

const urls = [
  'basic',
  'easy-start',
  'hard-to-get-drunk',
];

getLevels(urls)
.then((levels) => {
  // create game instance
  const game = new Game();

  // add my custom level to the fetched levels§
  // we use the fancy spread operator (...) for this
  levels.push(...[myLevel]);

  // start
  game.run(levels, DOMDisplay);
});



/**
 * getLevels
 * @param {array} levelNames
 * @return {promise array} levelsPromise
 */
function getLevels(levelNames) {
  let levelPromises = levelNames.map(function(level) {
    return getLevel(level);
  });

  return Promise.all(levelPromises);
}


/**
 * getLevel
 * @param {string} levelName
 * @return {promise array} levelPromises
 */

function getLevel(levelName) {
  let levelUrl = `http://localhost:8080/levels/${levelName}.json`;

  return fetch(levelUrl)
  .then(function(response) {
    return response.json();
  })
  .then(function(level) {
    return level;
  })
  .catch(function(error) {
    console.error('something went wrong');
    return error;
  });
}

custom-levels/my-level.js

/**
 * Create your level from these building blocks:
 *
 * Legende:
 *   @ = Player start position
 *   o = Coins
 *   x = Solid surfaces
 *   ! = Non-moving lava
 *   = = Vertical moving lava
 *   v = Dripping lava
 *   | = Horizontal moving lava
 */


export default [
  "                                                                                ",
  "  o                                                                             ",
  "  o                                                                             ",
  "  o                                                                             ",
  "  o                                                                             ",
  "                                                                   @            ",
  "           xxxxxx                                                 xxx           ",
  "                                                   xx      xx    xx!xx          ",
  "                         x          o o      xx                  x!!!x          ",
  "                                                                 xx!xx          ",
  "                                   xxxxx                          xvx           ",
  "                     xxx                                                    xx  ",
  "  xx                                      o o                                x  ",
  "  x                     o                                                    x  ",
  "  x                                      xxxxx                             o x  ",
  "  x          xxxx       o                                                    x  ",
  "  x          x  x                                                xxxxx       x  ",
  "  xxxxxxxxxxxx  xxxxxxxxxxxxxxx   xxxxxxxxxxxxxxxxxxxx     xxxxxxxxxxxxxxxxxxx  ",
  "       ================       x   x                  x     x       ||||||       ",
  "       ================       x!!!x                  x!!!!!x       ||||||       ",
  "       ================       x!!!x                  x!!!!!x       ||||||       ",
  "       ================       xxxxx                  xxxxxxx       ||||||       ",
  "                                                                                ",
  "                                                                                "
];