1

I need help with the concept of randomizing html-element positions and sizes within a grid I've defined. I'm working on my first project using React and I've been tasked to create an app where I display two set of black "cards" (rectangles) to the user of which he/she has to choose one.

In the design description I've been given I've been told to randomize the position and size of these rectangle sets, but the amount on each side is always set.

In other words I'm rendering say 3 rectangles on the left side of the screen and then 4 on the right side and then the user tries to answer which side has more rectangles in it.

Below I have a snippet of the relevant code (I hope it shows up reasonably, quite new to this). The itemContents-array just pulls from my server values regarding the item being processed, so in this case it will just return a single digit number as a string, which is used to determine the correct amount of rectangles to render.

for (let index = 0; index < parseInt(itemContents[0]); index++) { 
leftSideCards.push(<li id="left-side-items"> &#9608; </li>)
}

for (let index = 0; index < parseInt(itemContents[1]); index++) {
rightSideCards.push(<li id="left-side-items"> &#9608; </li>)
}

choiceArea = (
                <div className="card-compare-choiceArea">
                    <div id="card-first-choice">{leftSideCards}</div>
                    <span id="space"></span>
                    <div id="card-second-choice">{rightSideCards}</div>
                    <label id="saku">Text!</label>
                    <span id="space2" key="space2">{feedback}</span>
                    <label id="late">Text!</label>
                </div>
            );
        }

return (
        <div className="neure-number-compare">
             {choiceArea}
        </div>
       );
    }

As for my CSS:

#card-first-choice {
    display: grid;
    list-style-type: none;
    grid-template-columns: 30% 30% 30%;
    grid-gap: 5px;
    width: 30vw;
    height: 60vh;
    border: 2px solid black;
    margin-top: 1em;
}

#card-second-choice {
    display: grid;
    list-style-type: none;
    grid-template-columns: 30% 30% 30%;
    grid-gap: 10px;
    width: 30vw;
    height: 60vh;
    border: 2px solid black;
    margin-top: 10px;
}

So my logic was to create two grids, one for each side ("card-first-choice & card-second-choice") and then have a set amount of columns (3) and then set the array of rectangles as its contents. And so we are at my issues of randomizing to which grid part does a rectangle go and randomizing the size of said rectangle.

Right now my code works fine otherwise but it obviously just renders the squares in order filling the columns one by one and adding rows accordingly.

I'm not sure either if using the UTF-8 geometric shapes to create the black rectangles is a good approach in regards to randomizing it's properties or if I should be using something else to create rectangles (it was just the easiest way I found to do it). Please suggest others if you have a working solution for my problem with it!

Obviously if there's a simpler and better way to go about doing this (I can only assume that's a given), I'm willing to learn/listen to alternatives!

As I'm a a junior dev in my first real project dealing with React for the first time and not being that versed in CSS either, I wholly assume that there are a bunch of things that are redundant or could be done more optimally (be gentle).

KsK
  • 167
  • 1
  • 2
  • 8

1 Answers1

1

For randomizing array you can use How to randomize (shuffle) a JavaScript array?

You can set the size of your grids as maxSize of right and left sizes + 1/3 of total size like this

let gridSize = Math.max(...itemContents.map((item) => parseInt(item)));
gridSize = Math.ceil(gridSize + gridSize / 3);

There is my variant of code

  const itemContents = ["5", "7"];
  const leftSideCards = [];
  const rightSideCards = [];

  let gridSize = Math.max(...itemContents.map((item) => parseInt(item)));
  gridSize = Math.ceil(gridSize + gridSize / 3);

  const addInitialSet = (cardsList) => {
    for (let index = 0; index < gridSize; index++) {
      cardsList.push(<li id="left-side-items" />);
    }
  };

  const addCards = (cardsList, itemNumber) => {
    for (let index = 0; index < itemNumber; index++) {
      cardsList[index] = <li id="left-side-items"> &#9608; </li>;
    }
  };

  const shuffle = (array) => {
    let currentIndex = array.length,
      temporaryValue,
      randomIndex;

    // While there remain elements to shuffle...
    while (0 !== currentIndex) {
      // Pick a remaining element...
      randomIndex = Math.floor(Math.random() * currentIndex);
      currentIndex -= 1;

      // And swap it with the current element.
      temporaryValue = array[currentIndex];
      array[currentIndex] = array[randomIndex];
      array[randomIndex] = temporaryValue;
    }

    return array;
  };

  addInitialSet(leftSideCards);
  addInitialSet(rightSideCards);
  addCards(leftSideCards, parseInt(itemContents[0]));
  addCards(rightSideCards, parseInt(itemContents[1]));
  shuffle(leftSideCards);
  shuffle(rightSideCards);

  const choiceArea = (
    <div className="card-compare-choiceArea">
      <div id="card-first-choice">{leftSideCards}</div>
      <span id="space" />
      <div id="card-second-choice">{rightSideCards}</div>
      <label id="saku">Text!</label>
      <span id="space2" key="space2">
        "feedback"
      </span>
      <label id="late">Grid size {gridSize}</label>
    </div>
  );

  return <div className="neure-number-compare">{choiceArea}</div>;
}
Ryu
  • 386
  • 1
  • 6