JSFiddle - React, Tailwind, and code Playground

by levchenko_d

HTML

<div class="canvas">
  <div class="safe-area"></div>
</div>

CSS

.canvas {
  position: relative;
  background: black;
  width: 100%;
  height: 500px;
}

.square,
.circle,
.triangle{
  width: 20px;
  height: 20px;
  background: red;
}

.square{
    background: transparent;
    border: solid 4px red;
    box-sizing: border-box;
}

.safe-area{
  position: relative;
  top: 20px;
  width: 80%;
  height: 300px;
  margin: 0 auto;
  border: solid 1px white;
}


.circle{
  background: blue;
  border-radius: 50%;
}

.triangle{
  background: transparent;
}

.triangle:before{
  content: '';
  position: absolute;
  top:0;
  left:0;
  border: solid 10px transparent;
  border-bottom-color: green;
}

.transition{
  transition: 0.5s ease-out;
  
}

JavaScript

/**
	* getRandomListItems(list, amount, callback)
	* - returns limited amount of random items grabbed from given list
	* @list{Array<Any>}[Required] - array with any item type
	* @amount{Int}[Required] - Number in given range [email protected]
	* @callback{Function}[Required] - Runs when everything is done, returns @randomList parameter
	*
	* Example:

		var list = [2,4,1,3,5,6,7,20,414],
			amount = 5;

		function handleRandomList(randomList){
			console.log(randomList);
		}

		getRandomListItems(list, amount, handleRandomList);
	*/

	function getRandomListItems(list, amount, callback){
		var listSize = list.length,
			randomList = [];


		//Make sure amount is valid
		amount = Math.max(0, parseInt(amount));

		function next(){
			if(randomList.length < amount){
				getRandomItem();
			} else {
				callback(randomList);
			}
		}

		function getRandomItem(){
			var randomIndex = Math.round(Math.random() * listSize),
				randomItem = list[randomIndex];

			randomList.push(randomItem);
			next();
		}

		next();

	}




	/**
	* RandomShapesGenerator(options)
	* - draws random shapes
	* @options.canvasAreaDOM{DOM}[Required] - DOM element where shapes will be drawn
	* @options.safeAreaDOM{DOM}[Optional] - DOM element where shapes should not be drawn
	* @options.templates{Array<DOM>}[Required] - Array of shapes DOM templates
	* @options.shapeLifetime{Int}[Optional](300) - Time in MS before generated shape will be deleted
	* @options.count{Int}[Optional](10) - Amount of random elements from 0...n
	* @options.beforeShow{Function}[Optional] - Fires before element placed in @canvasAreaDOM and @t.randomShapeStorage
  * @options.beforeHide{Function}[Optional] - Fires before element removed from @canvasAreaDOM and @t.randomShapeStorage
	*
	* Example:

		var secMS = 1000,
			generatorOptions = {
				canvasAreaDOM: document.getQuerySelector('.canvas'),
				safeAreaDOM: document.getQuerySelector('.safe-are'),
				templates: [Object,Object,Object]
				shapeLifetime:...