JSFiddle - React, Tailwind, and code Playground

by Michael Prosser

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<ul class="game"></ul>

CSS

html{
  height: 100%;
}
body{
  height: 100%;
  margin: 0px;
  font-family: helvetica;
}
ul.game{
  padding: 0px;
  list-style: none;
  width: 1000px;
  margin: auto;
}
ul.game>li{
  margin: 0px;
  padding: 0px;
  width: calc(1000px / 16);
  height: calc(1000px / 16);
  display: inline-block;
  font-size: 9px;
  vertical-align: top;
  text-align: center;
  color: #fff;
}

JavaScript

function Game(jqueryElement){

	var t = this;
  
  t.gems = [
  	{
    	name: "Gold Coin",
      points: 100,
      backgroundColor: '#ff0000'
    },
    {
    	name: "Diamond",
      points: 1000,
      backgroundColor: '#ff6600'
    },
    {
    	name: "Ruby",
      points: 500,
      backgroundColor: '#ff9900'
    },
    {
    	name: "Emerald",
      points: 500,
      backgroundColor: '#ff00ff'
    },
    {
    	name: "Amethyst",
      points: 500,
      backgroundColor: '#ff00cc'
    },
    {
    	name: "Citrine",
      points: 200,
      backgroundColor: '#ff0099'
    }
  ]
  
  t.grid = [];
  
  t.gridX = 0;
  t.gridY = 0;
  
	t.gridXSize = 16;
  t.gridYSize = 16;
  
  t.gridColumns = ['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P'];
  
  t.createGrid = function(){
  
  	jqueryElement.html('');
  
  	for(var y=0;y<t.gridYSize;y++){
    
    	for(var x=0;x<t.gridXSize;x++){
      
      	let gem = t.randomGem();
      
    		t.grid[t.gridColumns[x] + '-' + y] = gem;
        
        let gemElement = $('<li data-grid-x="' + x + '" data-grid-y="' + y + '">' + gem.name + '</li>');
        
        gemElement.attr('data-grid-x',x);
        gemElement.attr('data-grid-y',y);
        
        gemElement.css('background-color',gem.backgroundColor);
        
        
        jqueryElement.append(gemElement);
    
    	}
    
    }
    
    console.log(t.grid);
  
  }
  
  t.randomIntFromRange = function(min, max) { 
    return Math.floor(Math.random() * (max - min + 1) + min)
  }
  
  t.randomGem = function(){
  
  	return t.gems[t.randomIntFromRange(0,t.gems.length-1)];
  
  }
  
  t.createGrid();
  
}

var game = new Game($('ul.game'));