JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

Dungeon movement and 'chunking'. When leaving a 10x10 chunk, next section of map should load, and griff appears running from the last chunk. Will be essential for large maps 50+ wide/high.<br><br>
<div class='around_map'><div class='map_holder'></div></div>
<span class='tile_info'></span><br>
<span class='coords'></span><br>

<button class='move_button' data-direction='n'>North</button>
<br><button class='move_button' data-direction='w'>West</button><button class='move_button' data-direction='e'>East</button>
<br><button class='move_button' data-direction='s'>South</button>

<br><button class='import_js'>Import map</button>
<br><textarea class='imported_map'></textarea>

CSS

img, div {
  box-sizing: border-box;
}

/* Map holder gets messed up with own border.
So this div contains it. */
.around_map {
    padding: 5px;
    background-color: grey;
    margin: auto;
    width: 410px;
}

/* large enough for 5x5 tiles. later 10x10 */
.map_holder {
  width: 400px;
  height: 400px;
  position: relative;
  font-size: 0;
  overflow: hidden;
}

.map_tile {
  width: 40px;
  height: 40px;
  padding: 0px;
  margin: 0px;
  display: inline-block;
  position: relative;
  border: 0px dotted black;
}

/* Items, monsters etc must fit inside tile exactly. */
.map_tile img {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 40px; /* or 100% */
  height: 40px; /* or auto */
}

#map_griff {
  position: absolute;
  top: 40px;
  left: 40px;
  width: 40px;
  height: 40px;
  background-repeat: no-repeat;
  background-position: center;
  /* temporary, scale 30px sprite to 50px */
  background-size: 100%;
}


/* Sprite classes to switch #map_griff between. */
.map_griff_idle {
  background-image: url(http://griffusion.elementfx.com/pics/tinygriffidle.gif);
}
.map_griff_n {
  background-image: url(http://griffusion.elementfx.com/pics/tinygriffn.gif);
}
.map_griff_s {
  background-image: url(http://griffusion.elementfx.com/pics/tinygriffs.gif);
}
.map_griff_e {
  background-image: url(http://griffusion.elementfx.com/pics/tinygriffe.gif);
}
.map_griff_w {
  background-image: url(http://griffusion.elementfx.com/pics/tinygriffw.gif);
}
.map_griff_n_idle {
  background-image: url(http://griffusion.elementfx.com/pics/tinygriffidle.gif);
  background-color: red;
}
.map_griff_s_idle {
  background-image: url(http://griffusion.elementfx.com/pics/tinygriffidle.gif);
}
.map_griff_e_idle {
  background-image: url(http://griffusion.elementfx.com/pics/tinygriffidle.gif);
  background-color: blue;
}
.map_griff_w_idle {
  background-image: url(http://griffusion.elementfx.com/pics/tinygriffidle.gif);
  background-color: yellow;
}

/* Terrain tiles. Add variation later....

JavaScript

$(function(){

const db = {
    /*
    * Some of these regenerate daily. Others are one-time.
    * Some only appear on certain days, or seasons.
    */
    exploreItems: [],
    
    /*
    * Isometric layouts: which tiles are walkable, etc.
    * Graphics are all pre-drawn
    */
    exploreMaps: [
        {
            id: 1, name: "Talak Village",
            tiles: []
        }
    ],
    
    /*
    * Images which are positioned above map, and fade away
    * while player is inside a room; certain tiles.
    */
    exploreBuildings: [],
    
};


var items = [
    {x: 3, y: 3, i: 2},
    {x: 2, y: 7, i: 4},
    {x: 6, y: 9, i: 3}
];

var monsters = [
    {x: 6, y: 6, m: 6},
    {x: 8, y: 1, m: 3},
    {x: 7, y: 8, m: 9},
    {x: 5, y: 6, m: 5}
];

// simple 2d array.
var terrain = [[]];

// t = terrain, i = item, m = monster
var object_map = [
  [
    {t: 1, i: 0, m: 0},
    {t: 4, i: 0, m: 0},
    {t: 1, i: 0, m: 0},
    {t: 1, i: 0, m: 9},
    {t: 2, i: 5, m: 0},
    {t: 3, i: 8, m: 0},
    {t: 1, i: 0, m: 9},
    {t: 2, i: 0, m: 0},
    {t: 1, i: 1, m: 0},
    {t: 2, i: 0, m: 0}
  ],[
    {t: 3, i: 0, m: 0},
    {t: 1, i: 0, m: 9},
    {t: 2, i: 0, m: 0},
    {t: 1, i: 0, m: 0},
    {t: 1, i: 0, m: 0},
    {t: 1, i: 3, m: 0},
    {t: 2, i: 0, m: 6},
    {t: 3, i: 4, m: 8},
    {t: 1, i: 0, m: 0},
    {t: 1, i: 0, m: 1},
  ],[
    {t: 1, i: 0, m: 5},
    {t: 3, i: 0, m: 0},
    {t: 1, i: 0, m: 1},
    {t: 1, i: 2, m: 0},
    {t: 1, i: 4, m: 0},
    {t: 3, i: 0, m: 5},
    {t: 1, i: 0, m: 0},
    {t: 2, i: 0, m: 0},
    {t: 1, i: 0, m: 0},
    {t: 3, i: 5, m: 6},
  ],[
    {t: 3, i: 0, m: 0},
    {t: 1, i: 0, m: 0},
    {t: 1, i: 0, m: 0},
    {t: 1, i: 0, m: 0},
    {t: 2, i: 0, m: 0},
    {t: 3, i: 7, m: 0},
    {t: 1, i: 4, m: 0},
    {t: 2, i: 0, m: 0},
    {t: 1, i: 8, m: 0},
    {t: 2, i: 0, m: 0},
  ],[
    {t: 3, i: 0, m: 9},
    {t: 1, i: 1, m: 0},
    {t: 1, i: 0, m: 0},
    {t: 1, i: 6, m: 0},
    {t: 1, i: 0, m: 0},
    {t: 3, i: 0, m: 0},
   ...