JSFiddle - React, Tailwind, and code Playground

by huppen

HTML

<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>

JavaScript

// Replace these with your own values
const kallaxCubes = 8; // Number of cubes in the Kallax unit
const kallaxCubeDimensions = {
  height: 33, // Dimensions of each cube (in cm)
  width: 33,
  depth: 38
};

// Function to calculate the volume of a board game
function calculateVolume(game) {
  return game.height * game.width * game.depth;
}

// Function to calculate the number of games that can fit in each cube
function calculateMaxGamesPerCube(cubeVolume, gameVolume) {
  return Math.floor(cubeVolume / gameVolume);
}

// Function to calculate the free space in each cube
function calculateFreeSpace(cubeVolume, gameVolume, gameCount) {
  return cubeVolume - (gameVolume * gameCount);
}

// Function to distribute games across cubes
function distributeGames(games, cubes) {
  const sortedGames = games.sort((a, b) => b.volume - a.volume); // Sort games by volume (largest to smallest)
  const cubeVolume = kallaxCubeDimensions.height * kallaxCubeDimensions.width * kallaxCubeDimensions.depth;

  for (let i = 0; i < sortedGames.length; i++) {
    let gameCount = sortedGames[i].count;
    for (let j = 0; j < cubes.length; j++) {
      const maxGamesPerCube = calculateMaxGamesPerCube(cubeVolume, sortedGames[i].volume);
      if (maxGamesPerCube > 0) {
        const freeSpace = calculateFreeSpace(cubeVolume, sortedGames[i].volume, gameCount);
        const gamesToAdd = Math.min(maxGamesPerCube, gameCount);
        cubes[j].games.push({ game: sortedGames[i], count: gamesToAdd });
        cubes[j].freeSpace = freeSpace;
        gameCount -= gamesToAdd;
      }
    }
  }

  return cubes;
}

// Function to display the storage arrangement
function displayStorageArrangement(storageArrangement) {
  storageArrangement.forEach((cube, index) => {
    console.log(`Cube ${index + 1}:`);
    console.log(`- Free Space: ${cube.freeSpace} cm³`);
    console.log(`- Games:`);
    cube.games.forEach((game) => {
      console.log(`  - ${game.count}x ${game.game.name}`);
    });
   ...