JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

img to array to tile map. <select id='select_map'>
    <option value='1'>One</option>
    <option value='2'>Two</option>
</select>
<button id='load_map'>Load</button>
<br>
<img id='map1' src='http://mythstable.epizy.com/mapstuff/maptest1.png'> 
<img id='map2' src='http://mythstable.epizy.com/mapstuff/maptest2.png'> ... 
<canvas id='mapCanvas' width='64' height='64'></canvas>

<p>
<div id='map_grid'></div>
</p>
Image R, G, B, alpha values:<br>
<textarea id='image_data'></textarea>
<br>
Turned into map tiles:
<br>
<textarea id='map_data'></textarea>
<p>.</p>.<p>.</p>.<p>.</p>.

CSS

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

/* 
    Tileset images.
    Apply this class to #map_grid.
    All tiles inside will share it.
*/
.tileset_1 div {
    background-image: url("http://griffusion.elementfx.com/pics/ui/flockiconspng.png");
}

/* Stop <br> causing gap between rows. */
#map_grid {
    font-size: 0px;
	margin: 10px auto;
}

/* All tiles inside map. */
#map_grid div {
    font-size: 12px;
    display: inline-block;
	box-shadow: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.3);
}



/* Sizes for tiles. */
.px_5 {
	width: 5px;
    height: 5px;
}
.px_8 {
	width: 8px;
    height: 8px;
}
.px_10 {
	width: 10px;
    height: 10px;
}
.px_15 {
	width: 15px;
    height: 15px;
}
.px_20 {
	width: 20px;
    height: 20px;
}
.px_25 {
	width: 25px;
    height: 25px;
}
.px_30 {
	width: 30px;
    height: 30px;
}




/* Tile positions - work regardless of tileset image. */
/*
.t1 {background-position: 0 0;}
.t2 {background-position: 0 -25px;}
.t3 {background-position: -25px 0;}
.t4 {background-position: -25px -25px;}
.t5 {background-position: -50px 0;}
.t6 {background-position: -50px -25px;}
.t7 {background-position: -75px 0;}
.t8 {background-position: -75px -25px;}
.t9 {background-position: -100px 0;}
.t10 {background-position: -100px -25px;}
.t11 {background-position: -125px 0;}
.t12 {background-position: -125px -25px;}
.t13 {background-position: -150px 0;}
.t14 {background-position: -150px -25px;}
.t15 {background-position: -175px 0;}
.t16 {background-position: -175px -25px;}
.t17 {background-position: -200px 0;}
.t18 {background-position: -200px -25px;}
.t19 {background-position: -225px 0;}
.t20 {background-position: -225px -25px;}
.t21 {background-position: -250px 0;}
.t22 {background-position: -250px -25px;}
.t23 {background-position: -275px 0;}
.t24 {background-position: -275px -25px;}
.t25 {background-position: -300px 0;}
.t26 {background-position: -300px -25px;}
.t27 {background-position: -325px 0;}
.t28 {background-position: -325px -25px;}
.t29...

JavaScript

function randomNumber(n1, n2){
    if(n1 == n2){ return n1; }
    var min = n1; var max = n2;
    if(n1 > n2){ min = n2; max = n1; }
    return Math.floor(Math.random()*(max-min+1)+min);
}

let rgbTiles = ["000","001","002","003","004","005","010","011","012","013","014","015","020","021","022","023","024","025","030","031","032","033","034","035","040","041","042","043","044","045","050","051","052","053","054","055","100","101","102","103","104","105","110","111","112","113","114","115","120","121","122","123","124","125","130","131","132","133","134","135","140","141","142","143","144","145","150","151","152","153","154","155","200","201","202","203","204","205","210","211","212","213","214","215","220","221","222","223","224","225","230","231","232","233","234","235","240","241","242","243","244","245","250","251","252","253","254","255","300","301","302","303","304","305","310","311","312","313","314","315","320","321","322","323","324","325","330","331","332","333","334","335","340","341","342","343","344","345","350","351","352","353","354","355","400","401","402","403","404","405","410","411","412","413","414","415","420","421","422","423","424","425","430","431","432","433","434","435","440","441","442","443","444","445","450","451","452","453","454","455","500","501","502","503","504","505","510","511","512","513","514","515","520","521","522","523","524","525","530","531","532","533","534","535","540","541","542","543","544","545","550","551","552","553","554","555"];

function generateRGB(){
    let r = 0; let g = 0; let b = 0;
    for(let r = 0; r < 6; r++){
        for(let g = 0; g < 6; g++){
            for(let b = 0; b < 6; b++){
            }
        }
    }
}

class ImgToMap {
    constructor(){
        this.tileSize = 25;
        this.loadMap(1);
    }
    
    loadMap(n){
        this.setMapNumber(n);
        this.downloadMap(n);
    }
    
    setTileSize(px){
        this.tileSize = px;
        this.renderMap();
    }
    
   ...