JSFiddle - React, Tailwind, and code Playground

by 3rror404

HTML

<div class="pixels">
 <!--  <div class="pixelarea"></div>
  <div class="pixelarea"></div>
  <div class="pixelarea"></div>
  <div class="pixelarea"></div>
  <div class="pixelarea"></div>
  <div class="pixelarea"></div>
  <div class="pixelarea"></div>
  <div class="pixelarea"></div>
  <div class="pixelarea"></div>
  <div class="pixelarea"></div>
  
  <div class="pixelarea"></div>
  <div class="pixelarea"></div>
  <div class="pixelarea"></div>
  <div class="pixelarea"></div>
  <div class="pixelarea"></div>
  <div class="pixelarea"></div>
  <div class="pixelarea"></div>
  <div class="pixelarea"></div>
  <div class="pixelarea"></div>
  <div class="pixelarea"></div>
  
  <div class="pixelarea"></div>
  <div class="pixelarea"></div>
  <div class="pixelarea"></div>
  <div class="pixelarea"></div>
  <div class="pixelarea"></div>
  <div class="pixelarea"></div>
  <div class="pixelarea"></div>
  <div class="pixelarea"></div>
  <div class="pixelarea"></div>
  <div class="pixelarea"></div>
  
  <div class="pixelarea"></div>
  <div class="pixelarea"></div>
  <div class="pixelarea"></div>
  <div class="pixelarea"></div>
  <div class="pixelarea"></div>
  <div class="pixelarea"></div>
  <div class="pixelarea"></div>
  <div class="pixelarea"></div>
  <div class="pixelarea"></div>
  <div class="pixelarea"></div> -->
</div>

CSS

.pixels {
  display: flex;
  flex-wrap: wrap;
  width: 200px;
}

.pixelarea {
  box-sizing: border-box;
  background: #f2f2f2;
  border: 1px solid #e6e6e6;
  width: 20px;
  height: 20px;
}

.pixelarea:hover {
  background: orange;
}

.pixelarea.selected {
  background: limegreen;
}

JavaScript

/*
* Create pixel grid
*/

const $pixelContainer = $('.pixels');
const $pixeltemplate = $('<div class="pixelarea" />')

for (let i = 0; i < (102*200); i++) {
console.log(i);
	$pixelContainer.append($pixeltemplate);
}


let selectedIndex = -1;

$('.pixelarea').on('click', function() {

	const clickedIndex = $(this).index();
    
  if (clickedIndex === selectedIndex) {
    /*
    * Primary selected elemeent was clicked. Remove all selections;
    */
  	$('.pixelarea.selected').removeClass('selected');
  }

	if (selectedIndex === -1) {
  	selectedIndex = clickedIndex;
  	$(this).addClass('selected');
  }  
  
  if (clickedIndex === selectedIndex - 1 ||
  		clickedIndex === selectedIndex + 1 ||
      clickedIndex === selectedIndex - 10 ||
      clickedIndex === selectedIndex + 10) {
      
      /*
      * Select / Deselect this element
      */ 
  		$(this).toggleClass('selected');    
  }
  
});