JSFiddle - React, Tailwind, and code Playground

by rgthree

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash-compat/3.10.2/lodash.min.js"></script>

JavaScript

var items = [{
  i: 'a',
  x: 0,
  y: 0,
  w: 1,
  h: 1,
  maxW: 2
}, {
  i: 'b',
  x: 1,
  y: 4,
  w: 1,
  h: 1,
  maxW: 2
}, {
  i: 'c',
  x: 0,
  y: 1,
  w: 1,
  h: 1,
  maxW: 2
}, {
  i: 'd',
  x: 0,
  y: 2,
  w: 1,
  h: 1,
  maxW: 2
}];

function fillEmptySpace(isFilled, startX, startY) {
  _.forEach(items, function(item, i) {
    if (!isFilled) {
      if (!_.isMatch(item, {
          'x': startX,
          'y': startY
        })
        ) {
        console.log("empty spot at", startX, startY);
        isFilled = true;
      } else if (!_.isMatch(item, {
          'x': startX + 1,
          'y': startY
        })) {
        console.log("empty spot at", startX + 1, startY);
        isFilled = true;
      }
    }
  });
  
  if (!isFilled) {
    startY += 1;
    fillEmptySpace(isFilled, startX, startY);
  }
}

fillEmptySpace(false, 0, 0);