css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <div id="main">
  <h1>Map generation<small> - work in progress</small></h1>
  <p>A repo is available on <a href="https://github.com/mtancoigne/js-map-generation" target="_blank">Github</a></p>
  <p><strong>This demo uses the version 0.2</strong></p>
  <div class="panel">
    <pre class="info">&gt;<span id="position"></span></pre>
  </div>
  <div id="content">
    <div id="menu" class="panel">
      <button id="toggleRooms">Show/hide rooms bounding boxes</button>
      <button id="togglePathes">Show/hide pathes</button>
      <button id="toggleRoomLimits" disabled>Show/hide rooms frontiers</button>
      <h2>Options</h2>
      <p>
        The only options that changes the map size/behaviour are the options of the <em>Map generation</em> and <em>Map cleaning</em> sections.
      </p>
      <p>There is a known bug happening when generating non-square maps.
      </p>
      <button class="mapReGenerateBtn">Re-generate</button>
      <div class="accordion">
        <div class="menu-button">&gt; Map generation</div>
        <div class="menu-content">
          <div class="opt-group">
            <label for="oOptionsX">Initial width <code>mapOptions.x</code></label>
            <input type="number" id="oOptionsX" value="5" />
            <span class="help">Initial number of blocks on X axis</span>
          </div>
          <div class="opt-group">
            <label for="oOptionsY">Initial height <code>mapOptions.y</code></label>
            <input type="number" id="oOptionsY" value="5"/>
            <span class="help">Initial number of blocks on Y axis</span>
          </div>
          <div class="opt-group">
            <label for="oOptionsPasses">Number of passes <code>mapOptions.passes</code></label>
            <input type="number" id="oOptionsPasses" value="3"/>
            <span class="help">Number of times the initial grid will be expended</span>
          </div>
          <div class="opt-group">
            <label for="oOptionsCleanLevel">Cleanness level<code>mapOptions.cleanLevel</code></label>
            <input type="number" id="oOptionsCleanLevel" value="2"/>
            <span class="help">0-5, defines the precision to remove lonely cells. To keep all the cells, use 0.</span>
          </div>
          <div class="opt-group">
            <label for="oOptionsWallPercent">Wall percentage<code>mapOptions.wallPercent</code></label>
            <input type="number" id="oOptionsWallPercent" value="30"/>
            <span class="help">Percentage of walls against other cells</span>
          </div>
          <div class="opt-group">
            <label for="oOptionsSameSubCellPercent">Same sub cell percentage<code>mapOptions.sameSubCellPercent</code></label>
            <input type="number" id="oOptionsSameSubCellPercent" value="80"/>
            <span class="help">Defines the percentage of chances for a subcell to be of the same cell as its parent</span>
          </div>
          <div class="opt-group disabled">
            <label> Css prefix:<code>mapOptions.cssPrefix</code></label>
            <input type="text" value="map-" disabled/>
            <span class="help">Prefix used for rendered Html elements. Disabled here for obvious reasons.</span>
          </div>
        </div>

        <div class="menu-button">&gt; Map cleaning</div>
        <div class="menu-content">
          <div class="opt-group">
            <label for="oCleanSmallRooms"><input type="checkbox" id="oCleanSmallRooms" checked/> Clean small rooms ?<code>cleanSmallRooms</code></label>
            <span class="help">After the map generation, some small rooms may exists. Checking this will remove them</span>
          </div>
          <div class="opt-group">
            <label for="oMinRoomSize">Min room size<code>minRoomSize</code></label>
            <input type="number" id="oMinRoomSize" value="50"/>
            <span class="help">When cleaning, defines the min size of rooms (in cells) to keep</span>
          </div>
        </div>

        <div class="menu-button">&gt; Content: enemies</div>
        <div class="menu-content">
          <div class="opt-group">
            <label for="oCreateEnemies"><input type="checkbox" id="oCreateEnemies" checked /> Generate enemies<code>createEnemies</code></label>
            <span class="help">Will generate random ennemies, based on the available cells and player level</span>
          </div>
          <div class="opt-group">
            <label for="oEnemiesPercent">Percentage of enemies<code>enemiesPercent</code></label>
            <input type="number" id="oEnemiesPercent" value="2"/>
            <span class="help">Determines the number of ennemies to generate, in percentage of <em>walkable</em>, non damaging cells.</span>
          </div>
          <div class="opt-group">
            <label for="oCreateBoss"><input type="checkbox" id="oCreateBoss" checked /> Create a boss ?<code>createBoss</code></label>
            <span class="help">Will generate a random boss</span>
          </div>
        </div>

        <div class="menu-button">&gt; Content: items</div>
        <div class="menu-content">
          <div class="opt-group">
            <label for="oCreateLifePotions"><input type="checkbox" id="oCreateLifePotions"  checked/> Create some life potions ?<code>createLifePotions</code></label>
            <span class="help">Will generate some life potions</span>
          </div>
          <div class="opt-group">
            <label for="oLifePotionsMapPercent">Percentage of life potions<code>lifePotionsMapPercent</code></label>
            <input type="number" id="oLifePotionsMapPercent" value="2" />
            <span class="help">This defines the number of life potions to be generated. Computed in percentage of <em>walkable</em> cells</span>
          </div>
          <div class="opt-group">
            <label for="oCreateStrenghtTokens"><input type="checkbox" id="oCreateStrenghtTokens"  checked/> Create tokens of strenght ?<code>createStrenghtTokens</code></label>
            <span class="help">Will generate tokens of strenght</span>
          </div>
          <div class="opt-group">
            <label for="oStenghtTokenMapPercent"><code>strenghtTokenMapPercent</code></label>
            <input type="number" id="oStrenghtTokenMapPercent" value="3" />
            <span class="help">This defines the number of tokens of strenght to be generated. Computed in percentage of <em>walkable</em> cells</span>
          </div>
          <div class="opt-group">
            <label for="oCreateDamageTokens"><input type="checkbox" id="oCreateDamageTokens"  checked/> Create tokens of damage ?<code>createDamageTokens</code></label>
            <span class="help">Will generate tokens of damage</span>
          </div>
          <div class="opt-group">
            <label for="oDamageTokenMapPercent"><code>damageTokenMapPercent</code></label>
            <input type="number" id="oDamageTokenMapPercent"  value="3"/>
            <span class="help">This defines the number of tokens of damage to be generated. Computed in percentage of <em>walkable</em> cells</span>
          </div>
          <div class="opt-group">
            <label for="oPlaceObjectsOnDamagingCells"><input type="checkbox" id="oPlaceObjectsOnDamagingCells" checked /> Place objects on damaging cells ?<code>placeObjectsOnDamagingCells</code></label>
            <span class="help">Items may pop up on lava</span>
          </div>
        </div>

        <div class="menu-button">&gt; Content: general options</div>
        <div class="menu-content">
          <div class="opt-group">
            <label for="oPlaceLivingThings"><input type="checkbox" id="oPlaceLivingThings" checked /> Place living objects ?<code>placeLivingThings</code></label>
            <span class="help">Will generate and place the player, ennemies and boss on the map.</span>
          </div>
          <div class="opt-group">
            <label for="oPlaceDeadThings"><input type="checkbox" id="oPlaceDeadThings" checked /> Place items<code>placeDeadThings</code></label>
            <span class="help">Will generate and place some life potions and tokens</span>
          </div>
        </div>

        <div class="menu-button">&gt; Debug</div>
        <div class="menu-content">
          <div class="opt-group">
            <label for="oDrawPathes"><input type="checkbox" id="oDrawPathes" checked /> Draw the pathes<code>drawPathes</code></label>
            <span class="help">Draw the pathes between rooms centers</span>
          </div>
          <div class="opt-group">
            <label for="oDrawRooms"><input type="checkbox" id="oDrawRooms" checked /> Draw rooms ?<code>drawRooms</code></label>
            <span class="help">Creates the rooms overlay.</span>
          </div>
          <div class="opt-group disabled">
            <label for="oUseSample"><input type="checkbox" id="oUseSample" disabled/> Use a custom sample ?<code>useSample</code></label>
            <span class="help"></span>
          </div>
        </div>
        <!--
        // Menu entry snippet
        <div class="menu-button"></div>
        <div class="menu-content">
        </div>
        // Option snippet
        <div class="opt-group">
          <label for="o"><code></code></label>
          <input type="number" id="o" />
          <span class="help"></span>
        </div>
        // Checkbox option snippet
        <div class="opt-group">
          <label for="o"><input type="checkbox" id="o" /> <code></code></label>
          <span class="help"></span>
        </div>
        -->
      </div>
      <button class="mapReGenerateBtn">Re-generate !</button>
    </div>

    <div id="grid" class="panel">
      <!-- Div for rooms overlay will go here -->
      <!-- Canva for pathes will go here -->
    </div>
  </div>

<pre>
[X] - Generating random map
[X] - Cleaning up the map (isolated 1x1 cells)
[X] - Find rooms
[X] - Extra room cleanup (remove small rooms)
[X] - Find rooms boundaries
[X] - Find all possible pathes (from rooms virtual centers)
[ ] - Create pathes between rooms
[X] - Place random objects
[X] - Render the map
</pre>
</div>

            
          
!
            
              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; }

/* HTML5 display-role reset for older browsers */
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; }

/*
  Variables
*/
* {
  box-sizing: border-box; }

body {
  background-color: #DDD;
  font-family: sans-serif;
  font-size: 12px;
  color: #444;
  line-height: 18px;
  padding: 10px; }

h1 {
  font-size: 2em;
  font-weight: bold; }

h2 {
  font-size: 1.5em;
  font-weight: bold; }

small {
  font-size: 0.8em;
  color: #999; }

pre {
  font-family: monospace; }
pre.info {
  border-bottom: 3px solid #c4c4c4;
  font-size: 1.5em;
  margin-bottom: 5px;
  color: #2b2b2b; }

button {
  background-color: #d0d0d0;
  border: 1px solid #c4c4c4;
  border-radius: 3px;
  padding: 3px 10px;
  border-bottom-width: 3px; }
button:hover {
  background-color: #eaeaea; }
button .active {
  top: 3px;
  border-top: 3px;
  border-bottom-width: 1px;
  background-color: #dddddd; }

input {
  background-color: #DDD;
  border: 1px solid #c4c4c4;
  padding: 3px;
  border-bottom-width: 3px; }

input:focus {
  background-color: #f7f7f7; }

/* Remove controls from Firefox */
input[type=number] {
  -moz-appearance: textfield;
  text-align: right; }

/* Re-applies the controls on :hover and :focus */
input[type="number"]:hover, input[type="number"]:focus {
  -moz-appearance: number-input; }

textarea, input {
  outline: none; }

#main {
  width: 100%;
  margin-left: 50%;
  transform: translateX(-50%); }
@media (max-width: 100%) {
  #main {
    transform: none;
    margin-left: 0px; } }

#content {
  display: flex;
  margin: 15px 0px; }

#menu {
  width: 250px;
  margin-right: 15px; }
#menu button {
  display: block;
  width: 100%;
  margin-bottom: 5px; }

#position {
  padding: 10px;
  color: #444; }

#rooms {
  position: relative;
  top: 0;
  left: 0;
  float: left; }

.mapReGenerateBtn {
  padding: 10px;
  background-color: #77e577;
  border-color: #62e162;
  font-weight: bold; }
.mapReGenerateBtn:hover {
  background-color: #a2eda2; }
.mapReGenerateBtn .active {
  background-color: #8de98d; }

.disabled {
  opacity: 0.7; }

.panel {
  border: 1px solid #c4c4c4;
  background-color: #eaeaea;
  padding: 10px; }

.tooltip {
  display: none;
  position: absolute;
  border: 1px solid #333;
  background-color: #161616;
  border-radius: 3px;
  padding: 3px 10px;
  color: #fff;
  font-size: 0.8em;
  font-family: monospace; }
.tooltip li {
  margin-left: 15px; }
.tooltip strong {
  text-decoration: underline; }

.accordion {
  margin-bottom: 3px; }

.menu-button {
  cursor: pointer;
  margin-top: 0px;
  margin-bottom: 0px;
  margin-left: -10px;
  margin-right: -10px;
  padding: 3px 10px;
  background-color: #c4c4c4;
  font-weight: bold;
  font-size: 1.2em; }
.menu-button:hover {
  background-color: #dddddd; }

.menu-content {
  display: none;
  padding-bottom: 10px; }
.menu-content:last-child {
  padding-bottom: 0px; }

.opt-group {
  margin-top: 5px;
  margin-bottom: 15px;
  border-bottom: 1px dashed #c4c4c4; }
.opt-group:last-child {
  border-bottom: none;
  margin-bottom: 0px; }
.opt-group label {
  font-weight: bold; }
.opt-group input[type=text], .opt-group input[type=number] {
  display: block;
  width: 100%; }
.opt-group .help {
  clear: both;
  display: block;
  font-size: 0.8em; }
.opt-group code {
  float: right;
  font-weight: lighter;
  font-size: 0.8em;
  background-color: #a2a2ed;
  padding: 0 3px;
  font-family: monospace; }

/*
  VARIABLES
*/
/*
  CLASSES
*/
.map-row {
  display: table-row; }

/* Cell */
.map-cell {
  display: table-cell;
  width: 14px;
  border: none; }

.map-cell:after {
  content: "";
  display: block;
  padding-bottom: 100%;
  border: none; }

/* Specific cells */
.map-cell-wall {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAnUlEQVQokY1SuxLDIAxTOW8MjMwZkp/qh7Tf2g6ZGRnYfNcMLa1NHKdaeJxlIZnL7X594QMuDQCwVsa8JHgII8kClwYuDc9H1URJkmpes3BEAgDKUa1Toq8q9UsAmLNrSzUmv/QHylE1DlaRFcaIXTheIDui9Cn3Hv72KF+zVn6Pw/IyjkZamBLZimOCFsLZv+xKlKPO4uwzj2H18waURVCVLdhS4wAAAABJRU5ErkJggg==");
  background-size: 100% auto;
  background-color: #CCC; }

.map-cell-floor {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAL0lEQVQIW2NkgAAfKI1CMUIltlBNUpKBgeE5yFhsAC4JcgzITpAAMgDrhElimAAA2UEIVBhnGn4AAAAASUVORK5CYII=");
  background-size: 50% auto;
  background-color: #c1ac53; }

.map-cell-water {
  /*background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAMElEQVQIW2NkwAMYoXLGUPosMh8kCZJAEYTxYTqxGg6SlITKPIfScD6yTgxFeI0FAHc5BlSOgEKdAAAAAElFTkSuQmCC);*/
  background-image: url("data:image/gif;base64,R0lGODdhDgAOAKIAAAAAADJubnevtsbZ6MHH33yZuwAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQJHgAAACwAAAAADgAOAAADKyi63BJhwPAkhWOQLHWOGiGKITkypyA6UcNN2faV3DiGqo2uTu//wKCwlwAAIfkECR4AAAAsAAAAAA4ADgAAAysoutwaYcAg4oRjkCw1z0QoamLJiMrmRM0mYV4WjWC5Eam5oE7v/8Cg0JEAACH5BAkeAAAALAAAAAAOAA4AAAMrKLrMsSGM+KSNY5A8tc9EKGpiyYjL0AgS81EgF5RcGWqKfRJr7//AoLCXAAAh+QQJHgAAACwAAAAADgAOAAADKyi63BphwCDihGOQLDXPRChqYsmIyuZEzSZhXhaNYLkRqbmgTu//wKDQkQAAOw==");
  background-size: 100% auto;
  background-color: #1d67f9 !important; }

.map-cell-lava {
  background-image: url("data:image/gif;base64,R0lGODdhDgAOACcAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQJHgAAACwAAAAADgAOAIIAAAC2dwBuMjLoWADBxwBuMgC2WAAAAAADMBi63CFiQPEkhWOQLHWOGiGKITkyZyA6UcNN2faV3DiGqo2uTu8vBUMj2BAWf8hGAgAh+QQJHgAAACwAAAAADgAOAIIAAAC2dwBuMjLoWADBxwBuMgC2WAAAAAADMBi63CpiQBHihGOQLDXPRChqYsmIyuZEzSZhXhaNYLkRqbmgTu8rBUMj2BAWf8hGAgAh+QQJHgAAACwAAAAADgAOAIIAAAC2dwBuMjLoWADBxwBuMgC2WAAAAAADMBi6zLJCjPikjWOQPLXPRChqYsmIy9AEEvNRICeUXBlqin0Sa+8vBUMj2BAWf8hGAgAh+QQJHgAAACwAAAAADgAOAIIAAAC2dwBuMjLoWADBxwBuMgC2WAAAAAADMBi63CpiQBHihGOQLDXPRChqYsmIyuZEzSZhXhaNYLkRqbmgTu8rBUMj2BAWf8hGAgA7");
  background-size: 100% auto;
  background-color: #f9d51d !important; }

.map-cell-item-enemy:after {
  background-size: 100% auto;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAQAAAC1QeVaAAAAeUlEQVQYlX2Q0Q3DMAgFD6tzdCxL2SNjOHNEolt5kdePkgasqucfi0PPBgMAiS9mZCTK2bQolyQNedar8qQbgNM5ePEEoDMis13hOzPUTUhPpfv+qKVZ2lqO6tGwr1O6JJc00igNzARMjMlnORunld/+4q+MVyvXbt9QxF+28/K7hAAAAABJRU5ErkJggg=="); }

.map-cell-item-chest:after {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAw0lEQVQokWNgIBMwovH/E6seWeP/NEtDBgYGBoapO1kZst1/Y7BnHT8P1wPT+L8/zJqBgYGBIWfOb4YpKawYVl1//I1BU5aLoXDVUQYGBgZGFmQJhOm/MTRC5L5huPm/koIJAe9BwL0HZxgYGBgYmWACLpJ/GW5eYmJwkfzLwMDAwLC9wYhhe4MRVjkGBgYGJhTT1hkQZSsDAwMDCzZBF8m/DJ4N5+BshKGnsduoFHQBRTOy05DlKHIqPFSJ1oGqj44AAG86PtaEiWBfAAAAAElFTkSuQmCC"); }

.map-cell-item-health:after {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAnklEQVQokcWRsQ6CMBRFD8YQQxgKLh0hfoGjf+DnMrowOzLKD5jg1sFoQkjKVFPbp4ycrS/3pPflwao0ZW2bsrZLM4CtH8jPJwC6dmePj1sizVw+cdJUFQCkSpFpzfNyZaoKUqUAyLRm33Y4eRNWGI3hNQy4n0ZjxLUi0YVN33+9Qz6d/boSh/ubaMclOZQiUZIlSRR9+Zf0F+no6zIDbk1Pu03MjqgAAAAASUVORK5CYII="); }

.map-cell-item-boss:after {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAuklEQVQokZ2SsQ3EIAxFv6NrMkKaG4CWNdJeJskYySJcmzVoKSloMoJLX3EJB4TkpHwJ2cZ+2BImJBIRwYmIiLI4hYpclc+cFDJa49V1AIDZezzbFoO1B5j+QbtKuNk9ozUGazF7j/e6HqBJqWzmBoVG5xCYzzrVQaN1tah2/7gqCsynj8WO5UhpHJgxOnekt48XAGK0Fun7aCelYm47v45ERPvSBGbQskRbiDLwjm6D2a5eFn63K9Z/AKl/YS7wMRjiAAAAAElFTkSuQmCC"); }

.map-cell-item-player:after {
  background: url("data:image/gif;base64,R0lGODdhDgAOAHcAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQJCgAAACwAAAAADgAOAIMAAAAiIDRFKDysMjJmOTGpdVDGclCEnkO2n1eNa1FgWJgAAAAAAAAAAAAAAAAAAAAETxBIGaa9QIgxwKhUNhDkoFkmMRaFMRwCSqrEgXDTVmoHUagVAU0QSAh/Mc+MmCqYAIHRQKHYjFRJz/S6k3QECm4JNzFJTTEQtIPuYDAgdwQAIfkECQoAAAAsAAAAAA4ADgCDAAAAIiA0rDIyRSg8ZjkxYFiYqXVQxnJQjWtRhJ5DAAAAAAAAAAAAAAAAAAAAAAAABE8QSBmmnUIKMQYQFQUMAmFuXvYJxWYchulNZFGYhLFhJduVsUFlgBMiSEEJ6QQixjKBzamTSGxUIxzOOlNKcYIEycL5cgAhdKYzvrjRGkkEACH5BAkKAAAALAAAAAAOAA4AgwAAACIgNKwyMkUoPGY5Mal1UGBYmKeCe8ZyUI1rUYSeQwAAAAAAAAAAAAAAAAAAAARQEEgZpp1CijGyqBTACQKxZYBHEkThCsZgdSwrHOREm5thIKbKrpMYtEwSI2sQCBiBskCJpRjZZBqBQmGqoZKKlY3Q0Yh2puhEmtpgL/DKNwIAIfkECQoAAAAsAAAAAA4ADgCDAAAAIiA0rDIyRSg8ZjkxhJ5DqXVQxnJQYFiYAAAAAAAAAAAAAAAAAAAAAAAAAAAABE8QSBmmvUCMnSsFg0AQgiZIp1aIRlsOVliMo0HAaFkUG1tWotEgcPDhBiNNIIC0wZg0zQAhKk1KNAKCipMgkyQB9TQJBUnPSeDUI1vc6ksEADs="); }

/* Rooms */
.map-cell-room-0 {
  background-color: #ba96ca; }

.map-room-0-overlay {
  background-color: rgba(186, 150, 202, 0.5);
  color: #8d54a6;
  border: 1px solid #8d54a6; }

.map-cell-room-1 {
  background-color: #fdf29c; }

.map-room-1-overlay {
  background-color: rgba(253, 242, 156, 0.5);
  color: #fbe538;
  border: 1px solid #fbe538; }

.map-cell-room-2 {
  background-color: #a2b2ef; }

.map-room-2-overlay {
  background-color: rgba(162, 178, 239, 0.5);
  color: #4b6ae0;
  border: 1px solid #4b6ae0; }

.map-cell-room-3 {
  background-color: #abe38d; }

.map-room-3-overlay {
  background-color: rgba(171, 227, 141, 0.5);
  color: #6fcf3b;
  border: 1px solid #6fcf3b; }

.map-cell-room-4 {
  background-color: #c3dd83; }

.map-room-4-overlay {
  background-color: rgba(195, 221, 131, 0.5);
  color: #9bc436;
  border: 1px solid #9bc436; }

.map-cell-room-5 {
  background-color: #f9c4a7; }

.map-room-5-overlay {
  background-color: rgba(249, 196, 167, 0.5);
  color: #f28448;
  border: 1px solid #f28448; }

.map-cell-room-6 {
  background-color: #a1c77d; }

.map-room-6-overlay {
  background-color: rgba(161, 199, 125, 0.5);
  color: #6e9b43;
  border: 1px solid #6e9b43; }

.map-cell-room-7 {
  background-color: #9ad5eb; }

.map-room-7-overlay {
  background-color: rgba(154, 213, 235, 0.5);
  color: #45b2da;
  border: 1px solid #45b2da; }

.map-cell-room-8 {
  background-color: #c677bb; }

.map-room-8-overlay {
  background-color: rgba(198, 119, 187, 0.5);
  color: #983f8b;
  border: 1px solid #983f8b; }

.map-cell-room-9 {
  background-color: #97ca8d; }

.map-room-9-overlay {
  background-color: rgba(151, 202, 141, 0.5);
  color: #5ba54c;
  border: 1px solid #5ba54c; }

.map-cell-room-10 {
  background-color: #cb7296; }

.map-room-10-overlay {
  background-color: rgba(203, 114, 150, 0.5);
  color: #9d3a62;
  border: 1px solid #9d3a62; }

.map-cell-room-11 {
  background-color: #d89f7e; }

.map-room-11-overlay {
  background-color: rgba(216, 159, 126, 0.5);
  color: #b86738;
  border: 1px solid #b86738; }

.map-cell-room-12 {
  background-color: #dcfec1; }

.map-room-12-overlay {
  background-color: rgba(220, 254, 193, 0.5);
  color: #a3fc5d;
  border: 1px solid #a3fc5d; }

.map-cell-room-13 {
  background-color: #95a4f2; }

.map-room-13-overlay {
  background-color: rgba(149, 164, 242, 0.5);
  color: #3a56e7;
  border: 1px solid #3a56e7; }

.map-cell-room-14 {
  background-color: #e78fa1; }

.map-room-14-overlay {
  background-color: rgba(231, 143, 161, 0.5);
  color: #d53b5a;
  border: 1px solid #d53b5a; }

.map-cell-room-15 {
  background-color: #e9bc80; }

.map-room-15-overlay {
  background-color: rgba(233, 188, 128, 0.5);
  color: #da8e29;
  border: 1px solid #da8e29; }

.map-cell-room-16 {
  background-color: #a7e6e4; }

.map-room-16-overlay {
  background-color: rgba(167, 230, 228, 0.5);
  color: #58cfcc;
  border: 1px solid #58cfcc; }

.map-cell-room-17 {
  background-color: #68fbbc; }

.map-room-17-overlay {
  background-color: rgba(104, 251, 188, 0.5);
  color: #07f690;
  border: 1px solid #07f690; }

.map-cell-room-18 {
  background-color: #78c2ae; }

.map-room-18-overlay {
  background-color: rgba(120, 194, 174, 0.5);
  color: #42927c;
  border: 1px solid #42927c; }

.map-cell-room-19 {
  background-color: #dfff94; }

.map-room-19-overlay {
  background-color: rgba(223, 255, 148, 0.5);
  color: #c0ff2e;
  border: 1px solid #c0ff2e; }

.map-cell-room-20 {
  background-color: #ddbf69; }

.map-room-20-overlay {
  background-color: rgba(221, 191, 105, 0.5);
  color: #b79229;
  border: 1px solid #b79229; }

.map-cell-room-21 {
  background-color: #8783df; }

.map-room-21-overlay {
  background-color: rgba(135, 131, 223, 0.5);
  color: #3a34c8;
  border: 1px solid #3a34c8; }

.map-cell-room-22 {
  background-color: #f9a8fd; }

.map-room-22-overlay {
  background-color: rgba(249, 168, 253, 0.5);
  color: #f244fb;
  border: 1px solid #f244fb; }

.map-cell-room-23 {
  background-color: #b2bdc2; }

.map-room-23-overlay {
  background-color: rgba(178, 189, 194, 0.5);
  color: #798c95;
  border: 1px solid #798c95; }

.map-cell-room-24 {
  background-color: #8be9de; }

.map-room-24-overlay {
  background-color: rgba(139, 233, 222, 0.5);
  color: #35d9c6;
  border: 1px solid #35d9c6; }

.map-cell-room-25 {
  background-color: #909f98; }

.map-room-25-overlay {
  background-color: rgba(144, 159, 152, 0.5);
  color: #5d6c65;
  border: 1px solid #5d6c65; }

.map-cell-room-26 {
  background-color: #d1cb97; }

.map-room-26-overlay {
  background-color: rgba(209, 203, 151, 0.5);
  color: #b2a850;
  border: 1px solid #b2a850; }

.map-cell-room-27 {
  background-color: #ac8d8a; }

.map-room-27-overlay {
  background-color: rgba(172, 141, 138, 0.5);
  color: #7a5956;
  border: 1px solid #7a5956; }

.map-cell-room-28 {
  background-color: #aaeef3; }

.map-room-28-overlay {
  background-color: rgba(170, 238, 243, 0.5);
  color: #51dce6;
  border: 1px solid #51dce6; }

.map-cell-room-29 {
  background-color: #71f1b0; }

.map-room-29-overlay {
  background-color: rgba(113, 241, 176, 0.5);
  color: #17e57c;
  border: 1px solid #17e57c; }

.map-cell-room-30 {
  background-color: #90ae7f; }

.map-room-30-overlay {
  background-color: rgba(144, 174, 127, 0.5);
  color: #5d7a4d;
  border: 1px solid #5d7a4d; }

.map-cell-room-31 {
  background-color: #8e7ead; }

.map-room-31-overlay {
  background-color: rgba(142, 126, 173, 0.5);
  color: #5b4d78;
  border: 1px solid #5b4d78; }

.map-cell-room-32 {
  background-color: #6bbf69; }

.map-room-32-overlay {
  background-color: rgba(107, 191, 105, 0.5);
  color: #3c883a;
  border: 1px solid #3c883a; }

.map-cell-room-33 {
  background-color: #b175f3; }

.map-room-33-overlay {
  background-color: rgba(177, 117, 243, 0.5);
  color: #7c17eb;
  border: 1px solid #7c17eb; }

.map-cell-room-34 {
  background-color: #cf7685; }

.map-room-34-overlay {
  background-color: rgba(207, 118, 133, 0.5);
  color: #a53a4c;
  border: 1px solid #a53a4c; }

.map-cell-room-35 {
  background-color: #fbba67; }

.map-room-35-overlay {
  background-color: rgba(251, 186, 103, 0.5);
  color: #f68d06;
  border: 1px solid #f68d06; }

.map-cell-room-36 {
  background-color: #7197ee; }

.map-room-36-overlay {
  background-color: rgba(113, 151, 238, 0.5);
  color: #1b56de;
  border: 1px solid #1b56de; }

.map-cell-room-37 {
  background-color: #ebcef1; }

.map-room-37-overlay {
  background-color: rgba(235, 206, 241, 0.5);
  color: #cb7fda;
  border: 1px solid #cb7fda; }

.map-cell-room-38 {
  background-color: #f79f72; }

.map-room-38-overlay {
  background-color: rgba(247, 159, 114, 0.5);
  color: #f25d11;
  border: 1px solid #f25d11; }

.map-cell-room-39 {
  background-color: #ea6e78; }

.map-room-39-overlay {
  background-color: rgba(234, 110, 120, 0.5);
  color: #d31f2d;
  border: 1px solid #d31f2d; }

.map-cell-room-40 {
  background-color: #d4edae; }

.map-room-40-overlay {
  background-color: rgba(212, 237, 174, 0.5);
  color: #a8da5b;
  border: 1px solid #a8da5b; }

.map-cell-room-41 {
  background-color: #bad2ae; }

.map-room-41-overlay {
  background-color: rgba(186, 210, 174, 0.5);
  color: #82ae6c;
  border: 1px solid #82ae6c; }

.map-cell-room-42 {
  background-color: #9f9afa; }

.map-room-42-overlay {
  background-color: rgba(159, 154, 250, 0.5);
  color: #4339f5;
  border: 1px solid #4339f5; }

.map-cell-room-43 {
  background-color: #e369f1; }

.map-room-43-overlay {
  background-color: rgba(227, 105, 241, 0.5);
  color: #ca15df;
  border: 1px solid #ca15df; }

.map-cell-room-44 {
  background-color: #6e88f0; }

.map-room-44-overlay {
  background-color: rgba(110, 136, 240, 0.5);
  color: #1740e1;
  border: 1px solid #1740e1; }

.map-cell-room-45 {
  background-color: #b0fcd3; }

.map-room-45-overlay {
  background-color: rgba(176, 252, 211, 0.5);
  color: #4ef89c;
  border: 1px solid #4ef89c; }

.map-cell-room-46 {
  background-color: #e8d2b2; }

.map-room-46-overlay {
  background-color: rgba(232, 210, 178, 0.5);
  color: #d1a463;
  border: 1px solid #d1a463; }

.map-cell-room-47 {
  background-color: #a8a3fb; }

.map-room-47-overlay {
  background-color: rgba(168, 163, 251, 0.5);
  color: #4c41f7;
  border: 1px solid #4c41f7; }

.map-cell-room-48 {
  background-color: #be85f1; }

.map-room-48-overlay {
  background-color: rgba(190, 133, 241, 0.5);
  color: #8d2ae7;
  border: 1px solid #8d2ae7; }

.map-cell-room-49 {
  background-color: #65aee4; }

.map-room-49-overlay {
  background-color: rgba(101, 174, 228, 0.5);
  color: #227dc1;
  border: 1px solid #227dc1; }

.map-cell-room-50 {
  background-color: #ccf880; }

.map-room-50-overlay {
  background-color: rgba(204, 248, 128, 0.5);
  color: #a5f31f;
  border: 1px solid #a5f31f; }

.map-room, #map-pathes {
  position: absolute;
  text-shadow: -1px -1px 0 #FFF, 1px -1px 0 #FFF, -1px 1px 0 #FFF, 1px 1px 0 #FFF; }
.map-room h2, #map-pathes h2 {
  font-size: 1.5em;
  font-weight: bold; }

            
          
!
            
              console.clear();

var map=null;
var options={};

/**
  Events on buttons
*/
$('#toggleRooms').click(function(){
  $('#rooms').toggle();
})

$('#togglePathes').click(function(){
  $('#map-pathes').toggle();
})

$('.mapReGenerateBtn').click(function(){
  createAndRenderMap(getOptions());
});

$(document).ready(function() {
  // Accordion, code found here : http://www.stemkoski.com/stupid-simple-jquery-accordion-menu/
  jQuery(function() {
    jQuery('.menu-button').on('click',function() {
      jQuery('.menu-content').slideUp('fast');
      jQuery(this).next('.menu-content').slideDown('fast');
    });
  });
  createAndRenderMap(getOptions());
});
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console