JSFiddle - React, Tailwind, and code Playground

by polm23

HTML

<div id="box" style="width:280px;height:110px;border: 1px solid black">
</div>

JavaScript

function room(x,y,w,h,color){
    var unit = 10;
var newbox = $('<div></div>')
                  .css('border','1px dotted black')
                  .css('position','absolute')
                  .css('background',color ? color : '')       
                  .css('left',unit * x)
                  .css('top',unit * y)
                  .css('width', unit * w)
                  .css('height', unit * h);
      $('#box').append(newbox);
}

function door(x,y,top){
    //Not on the top = on the right
    var unit=10;
    var thedoor = $('<div></div>')
        .css('background','white')
        .css('position','absolute')
        .css('z-index',1000)
        .css('left',(unit * x) + (top ? (unit/4) : (unit/2)))
        .css('top',(unit * y) + (top ? (-unit/2) : (unit/4)))
        .css('width', top? unit/2 : unit)
        .css('height', top? unit : unit/2);
    $('#box').append(thedoor);
}
    
room(0,0,2,4);
room(2,0,2,4);
room(0,4,4,4);
room(0,8,4,3);
room(4,0,4,2);
room(4,2,4,1);
room(4,3,3,3);
room(4,6,2,5);
room(8,0,4,3);
room(7,3,5,3);
room(6,6,4,3);
room(6,9,4,2);
room(10,6,2,2);
room(10,8,2,3);
room(12,0,4,3);
room(12,3,4,8);

door(1,2,false);