JSFiddle - React, Tailwind, and code Playground

by icodeforlove

HTML

<script type="text/javascript">
var Task=function(t){var e={};function r(n){if(e[n])return e[n].exports;var o=e[n]={i:n,l:!1,exports:{}};return t[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}return r.m=t,r.c=e,r.d=function(t,e,n){r.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:n})},r.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},r.t=function(t,e){if(1&e&&(t=r(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var o in t)r.d(n,o,function(e){return t[e]}.bind(null,o));return n},r.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return r.d(e,"a",e),e},r.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},r.p="",r(r.s=1)}([function(t,e){t.exports=function(t){var e,r=t.toString();r=r.substring(r.indexOf("{")+1,r.lastIndexOf("}"));try{e=new Blob([r],{type:"text/javascript"})}catch(t){window.BlobBuilder=window.BlobBuilder||window.WebKitBlobBuilder||window.MozBlobBuilder,(e=new BlobBuilder).append(r),e=e.getBlob()}return(window.URL||window.webkitURL).createObjectURL(e)}},function(t,e,r){function n(t){return(n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function o(t,e){return!e||"object"!==n(e)&&"function"!=typeof e?function(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}(t):e}function i(t){return(i=Object.setPrototypeOf?Object.getPrototypeOf:function(t){return t.__proto__||Object.getPrototypeOf(t)})(t)}function s(t,e){return(s=Object.setPrototypeOf||function(t,e){return t.__proto__=e,t})(t,e)}var...

CSS

body {
  font-family: helvetica;
  color: #fff;
}
.queue {
	position: absolute;
  left: calc(50% - 25px);
  top: 50px;
  background: #af3527;
  border-radius: 200px;
  text-align: center;
  width: 50px;
  height: 50px;
  line-height: 50px;
  font-size: 12px;
}

.completed {
	position: absolute;
  left: calc(50% - 25px);
  top: 250px;
  background: #af3527;
  border-radius: 200px;
  text-align: center;
  width: 50px;
  height: 50px;
  line-height: 50px;
  font-size: 12px;
}

.workers {
  border: 10px solid #999;
  padding: 10px;
	position: absolute;
  left: 50px;
  right: 50px;
  top: 150px;
  display: flex;
  justify-content: space-between;
}
.worker {
  background: #af3527;
  border-radius: 200px;
  text-align: center;
  width: 50px;
  height: 50px;
  line-height: 50px;
  font-size: 24px;
}

JavaScript

function createElement(name, parent) {
	let element = document.createElement('div');
	(parent || document.body).appendChild(element);
	element.className = name;
	return element;
}

let workerContainerElement = createElement('workers');
let completedElement = createElement('completed');
let queueElement = createElement('queue');
let workerElements = [];
let completedCount = 0;

let maxWorkers = 4//navigator.hardwareConcurrency;
let workerTaskConcurrency = 2;

let task = new Task({
  warmStart: true,
  maxWorkers,
  workerTaskConcurrency,
  debug: true,
  logger: onEvent
});

let lockCore = task.wrap(ms => {
	let date = Date.now(),
    	curDate = null;
      
	do { curDate = Date.now(); }
	
  while(curDate-date < ms);
	
  return 0;
});

//console.log(task)
function onEvent (event) {
  if (event.action === 'create_new_pool') {
  	for (let i = 0; i < event.config.maxWorkers; i++) {
    	let element = createElement('worker', workerContainerElement);
      element.innerHTML = 0;
      workerElements.push(element);
    }
  } else if (event.action === 'task_completed') {
	  completedElement.innerHTML = ++completedCount;
  }
 // try {
 // console.log(task._queue)
 // } catch (error){}
 // console.log(event)
}

(async () => {
	for (let i = 0; i < 1000; i++) {
  	lockCore(100);
  }
})().catch(console.error);

function draw () { 
//console.log(task._queue);
  queueElement.innerHTML = task._queue.length;
  task._workers.forEach((worker, index) => {
	  let element = workerElements[index];
    element.innerHTML = worker.tasks.length;
    element.style.opacity = 0.3 + (0.7 * (worker.tasks.length / workerTaskConcurrency));
    
  })
//console.log(task);
	requestAnimationFrame(draw);	
}
requestAnimationFrame(draw);
/*
let canvas = document.createElement('canvas');
canvas.width = 400;
canvas.height = 400;
context = canvas.getContext('2d');
context.scale(2, 2);
document.body.appendChild(canvas);

let animations = [];

(async () => {
	for (let i = 0; i < 10; i++) {
	 ...