JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

<div id='edit-map'></div>

ID: <span id='tile-id'></span> - X: <span id='tile-x'>?</span> - Y: <span id='tile-y'>?</span>
<br>
Name: <span id='tile-name'>Click on a tile...</span>
<br>

CSS

div, button, img, p, select, input {
    box-sizing: border-box;
}

#edit-map {
    width: 504px;
    height: 504px;
    border: 2px solid black;
    line-height: 0px;
}

#edit-map .map-tile {
    width: 25px;
    height: 25px;
    display: inline-block;
}
#edit-map .map-tile:nth-child(even) {
    background-color: silver;
}

#edit-map .map-tile:hover {
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.8);
    cursor: pointer;
}

.selected-tile {
    box-shadow: inset 0 0 0 2px #000;
}

JavaScript

const db = {
    
    mapTiles: [
    ],
    
    
    exploreEvents: [
        {
            id: 1, region: 0, daytime: 0, weather: 0, season: 0,
            text: "Most generic event. Anywhere, any time, any weather, any season."
        },{
            id: 2, region: 0, daytime: 1, weather: 0, season: 0,
            text: "Morning time. Anywhere, any weather, any season."
        },{
            id: 3, region: 0, daytime: 2, weather: 0, season: 0,
            text: "Afternoon time. Anywhere, any weather, any season."
        },{
            id: 4, region: 0, daytime: 4, weather: 0, season: 0,
            text: "Night time. Anywhere, any weather, any season."
        },{
            id: 5, region: 0, daytime: 0, weather: 1, season: 0,
            text: "Evening time. Anywhere, any time, any season."
        },{
            id: 6, region: 0, daytime: 0, weather: 0, season: 0,
            text: "Morning time. Anywhere, any weather, any season."
        },{
            id: 7, region: 0, daytime: 0, weather: 0, season: 0,
            text: "Evening time. Anywhere, any weather, any season."
        }
    
    ]

};



function randomNumber(n1, n2){
    if(n1 == n2){ return n1; }
    n1 = Number(n1); n2 = Number(n2);
    let min = n1, max = n2;
    if(n1 > n2){ min = n2; max = n1; }
    return Math.floor(Math.random() * (max - min + 1) + min);
}
function randomArray(array){
    return array[Math.floor(Math.random() * array.length)];
}
function MR(){
    return Math.random();
}

function syllable(length){
   let consonants = "bcdfghjklmnprstvwz".split(""),
       vowels = "aeiou".split(""),
       all = [...consonants, ...vowels],
       text = "",
       char;

    for(var i = 0; i < length; i++){
        if(i === 0){
            char = randomArray(all);
        }else if(consonants.indexOf(char) === -1){
            char = randomArray(consonants);
        }else{
            char = randomArray(vowels);
        }
        text += char;
    }

    return...