JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

explore test.
<div id='test'></div>
<div id='tileInfo'>Click on a tile for info.</div>

CSS

div, img, canvas, p, button, a {
    box-sizing: border-box;
}

.tile {
    display: inline-block;
    width: 35px;
    height: 25px;
    text-align: center;
}

.tile:hover {
    cursor: pointer;
    box-shadow: inset 0px 0px 0px 2px rgba(0, 0, 0, 0.5);
}

JavaScript

// Save data about current pet.
// Some landmarks may have requirements before
// interacting with them; certain skill etc.
// Normal tiles can be interacted with, too.
// Graze on grass, dive in water.
// Again, may need skills or certain breed.
const pet = {
    
};

// Will be generated using seed later.
const altitudeMap = [
    [1,1,1,1,1,4,4,4,4,4],
    [1,1,1,1,1,4,4,4,4,4],
    [5,5,5,5,5,3,3,3,3,3],
    [5,5,5,5,5,3,3,3,3,3],
    [7,7,7,7,7,2,2,2,2,2],
    [7,7,7,7,7,2,2,2,2,2],
    [6,6,6,6,6,8,8,8,8,8],
    [6,6,6,6,6,8,8,8,8,8],
    [2,2,2,2,2,1,1,1,1,1],
    [4,4,4,4,4,8,8,8,8,8]
];

// All tiles that can appear, their hex code and name.
// If no 'desc' property for tile, use alt's 'default' text.
const tileData = [
    [ // Biome 1: Test
        { // Altitude 1
            name: "Icy peak",
            desc: "You're at the top of a mountain.",
            default: "There's ice all around.",
            tiles:[
                {name: "ice1", hex: "F0F0F0"},
                {name: "ice2", hex: "D9D9D9"},
                {name: "ice3", hex: "F2F6F7", desc: "Ice glitters brightly."},
                {name: "ice4", hex: "E4EAEB"}
            ]
        },{ // Altitude 2
            name: "Mountain",
            desc: "You're on a rocky mountainside.",
            default: "There's greyish stone under your feet.",
            tiles:[
                {name: "mtn1", hex: "909596", desc: "Smooth grey stone."},
                {name: "mtn2", hex: "787F80", desc: "Craggy sharp stones."},
                {name: "mtn3", hex: "878787"},
                {name: "mtn4", hex: "727478"}
            ]
        },{ // Altitude 3
            name: "Taiga",
            desc: "You're in chilly frosty forest.",
            default: "There are coniferous trees scattered around.",
            tiles:[
                {name: "tai1", hex: "81A191", desc: "Pine tree here."},
                {name: "tai2", hex: "7B9488", desc: "Fur tree here."},
                {name: "tai3", hex:...