JSFiddle - React, Tailwind, and code Playground

by Drath

HTML

"" = nothing
0 = "stonewall"
1 = "cobblestone"
2 = "shallowwater"
3 = "forest"
4 = "grass"
5 = "sand"

JavaScript

//Monument/point of interest templating system with built-in degredation and rotation system (for variation)

var templates = {
    0: { category: "house", name: "Small House", w: 5, h: 4, template: [0,0,0,0,0,0,1,1,1,0,0,1,1,1,1,0,0,0,0,0], degrade: 25},
    1: { category: "house", name: "Small House", w: 6, h: 5, template: [0,0,0,0,0,0,0,1,1,1,1,0,0,1,1,1,1,0,0,1,1,1,1,0,0,0,1,1,0,0], degrade: 25 },
    2: { category: "house", name: "Small House", w: 7, h: 4, template: [0,0,0,0,1,1,0,0,1,1,1,1,1,0,0,1,1,1,1,1,0,0,0,0,0,0,0,0], degrade: 50 },
    3: { category: "house", name: "Small House", w: 8, h: 5, template: [0,0,1,0,0,,,,0,1,1,1,0,,,,0,0,0,1,0,0,0,0,0,1,1,1,1,1,1,0,0,0,0,0,1,0,0,0], degrade: 5 },
    4: { category: "house", name: "Monument", w: 5, h: 3, template: [,1,1,1,,1,1,0,1,1,,1,1,1,], degrade: 100 },
    5: { category: "desert", name: "Oasis", w: 8, h: 8, template: [,,,5,5,5,,,,5,5,4,4,5,5,,,5,3,4,2,4,5,,5,4,2,2,2,2,4,5,5,3,2,2,2,2,3,5,,5,4,2,2,4,5,,,5,5,4,3,5,5,,,,,5,5,,,,] }
};

for (var i in templates) {
    var w = templates[i].w;
    var h = templates[i].h;
    var d = templates[i].degrade;
    var l = 0;
    for (var x = 0; x < w*h; x++) {
        if (templates[i].template[x] >= 0) {
            //if (Math.floor(Math.random() * d + 1) != 1) {
                document.write(templates[i].template[x]);
            //} else {
               // document.write("_");
            //}
        } else {
            document.write("_");
        }
        l++;
        if (w == l) {
            document.write("<br />");
            l = 0;
        }
    }
   document.write("<br />");
}