JSFiddle - React, Tailwind, and code Playground

by huppen

HTML

<div>
    <label for="filter">Storage Option:</label>
    <select id="filter">
      <option value="all">All</option>
      <option value="horizontal">Horizontal</option>
      <option value="vertical">Vertical</option>
    </select>
  </div>

  <div id="shelf"></div>

CSS

#shelf {
      width: 600px;
      height: 600px;
      border: 1px solid black;
      position: relative;
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      grid-template-rows: repeat(5, 1fr);
    }
    .box {
      border: 1px solid black;
      position: absolute;
      background-color: lightblue;
      padding: 5px;
    }

JavaScript

var boxDimensionsMap = new Map(); // Define the boxDimensionsMap variable

    $(document).ready(function() {
      var username = 'huppen';
      var collectionUrl = 'https://www.boardgamegeek.com/xmlapi2/collection?username=' + username;

      $.get(collectionUrl, function(data) {
        var games = $(data).find('item');
        var gridWidth = 5;
        var gridHeight = 5;
        var boxSize = 100; // Size of each box in pixels
        var gapSize = 10; // Gap between boxes in pixels

        var shelfWidth = (boxSize + gapSize) * gridWidth - gapSize;
        var shelfHeight = (boxSize + gapSize) * gridHeight - gapSize;
        $('#shelf').css({ width: shelfWidth + 'px', height: shelfHeight + 'px' });

        var boxCounter = 0;
        games.each(function() {
          var gameId = $(this).attr('objectid');
          var gameName = $(this).find('name').text();
          var gameThumbnail = $(this).find('thumbnail').text();

          getBoxDimensions(gameId, function(boxDimensions) {
            var storageOption = $('#filter').val();

            if (storageOption === 'all' || (storageOption === 'horizontal' && boxDimensions.width >= boxDimensions.height) || (storageOption === 'vertical' && boxDimensions.height >= boxDimensions.width)) {
              var rowIndex = Math.floor(boxCounter / gridWidth);
              var columnIndex = boxCounter % gridWidth;

              var boxLeft = (boxSize + gapSize) * columnIndex;
              var boxTop = (boxSize + gapSize) * rowIndex;

              var $box = $('<div class="box"></div>');
              $box.css({
                width: boxSize + 'px',
                height: boxSize + 'px',
                gridColumn: (columnIndex + 1) + ' / span 1',
                gridRow: (rowIndex + 1) + ' / span 1',
                left: boxLeft + 'px',
                top: boxTop + 'px'
              });
              $box.html('<img src="' + gameThumbnail + '" alt="' + gameName + '">');
             ...