JSFiddle - React, Tailwind, and code Playground

by dievardump

HTML

<canvas id='heat-map'></canvas>
        <div class='game' id='game'></div>

CSS

body, html {
    margin: 0;
    padding: 0;
    font-family: Arial;
}

.game, canvas {
    position: absolute;
    top: 0;
    left: 0;
}

canvas {
    z-indez: 10;
    display: none;
}

.block {
    position: absolute;
    top: 0;
    left: 0;
    width: 25px;
    height: 25px;
    background-color: red;
    cursor: pointer;
}

JavaScript

/**
 * @author dievardump (https://twitter.com/dievardump, http://stackoverflow.com/users/1170900/dievardump)
 * Trial-licensed:
 * MIT license (http://www.opensource.org/licenses/mit-license.php)
 * WTFPL Licence (http://en.wikipedia.org/wiki/WTFPL)
 * Beerware Licence (http://en.wikipedia.org/wiki/Beerware) .
 * Last update: 2012-08-31
 */
(function () {
    'use strict';

    var store = function (container, dataSet) {
        this.data = [];
        this.max = 0;

        if (!container) {
            throw new Error('Need to set a container');
        }
        this.container = container;

        if (dataSet) {
            this.setDataSet(dataSet);
        }
    };

    store.prototype = {
        setDataSet: function (dataSet) {
            if (!dataSet.data) {
                throw new Error('Need to set data');
            }

            var max = this.max = dataSet.max;
            this.data = dataSet.data;

            // set max if undefined by looping threw the all the elements
            if (typeof max === 'undefined') {
                dataSet.data.forEach( function (data) {
                    if (data.weigth > max) {
                        max = data.weigth;
                    }
                });
                this.max = max;
            } 
        },

        getDataSet: function () {
            return {
                max: this.max,
                data: this.data
            };

        },

        addPoint: function (point) {
            this.data.push(point);
        },


        /**
         * Convert a DataSet.data according to the mapping object
         * @param data DataSetData
         * @param mapping Mapping Object
         */
        convert: function(data, mapping) {
            var result = [];

            data.forEach(function (point) {
                result.push({
                    position: new Float32Array([point[mapping.x], point[mapping.y]]),
                    weight: point[mapping.weight]
                });
...