JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://dl.dropboxusercontent.com/u/5308045/canvas-puzzle/js/event-emiter.min.js"></script>
<script src="https://dl.dropboxusercontent.com/u/5308045/canvas-puzzle/js/canvas-event.min.js"></script>
<script src="https://dl.dropboxusercontent.com/u/5308045/canvas-puzzle/js/canvas-puzzle.min.js"></script>
<link rel="stylesheet" href="https://dl.dropboxusercontent.com/u/5308045/canvas-puzzle/css/modal.css">
<link rel="stylesheet" href="https://dl.dropboxusercontent.com/u/5308045/canvas-puzzle/css/style.css">
<link rel="stylesheet" href="https://dl.dropboxusercontent.com/u/5308045/canvas-puzzle/css/buttons.css">
<!-- JIGSAW CANVAS -->
<div id="canvas-wrap">
    <canvas id="canvas"></canvas>
    <canvas class="hide" id="image"></canvas>
    <canvas class="hide" id="image-preview"></canvas>
</div>
<!-- GAME OPTIONS -->
<div id="game-options">
    <ul>
        <li><b id="clock" class="button">00:00:00</b>
        </li>
        <li><a href="#" id="SHOW_EDGE" class="button left" title="Show edge pieces only">Border</a>
        </li>
        <li><a href="#" id="SHOW_MIDDLE" class="button middle" title="Show middle pieces only">Middle</a>
        </li>
        <li><a href="#" id="SHOW_ALL" class="button right" title="Show all pieces">All</a>
        </li>
        <li><a href="#" id="JIGSAW_SHUFFLE" class="button left" title="Shuffle">Shuffle</a>
        </li>
        <li><a href="#" id="SHOW_PREVIEW" class="button middle" title="Preview">Preview</a>
        </li>
        <li><a href="#" id="SHOW_HELP" class="button help right" title="Help">Help</a>
        </li>
        <!-- INSERT CUSTOM BUTTONS -->
        <!-- END INSERT CUSTOM BUTTONS -->
        <li>
            <div class="styled-select">
                <select id="set-parts" selected-index="8"></select>
            </div>
        </li>
        <!-- Insert custom buttons here -->
        <li id="create"><a href="#" class="button add" id="SHOW_FILEPICKER" title="Create puzzle">Create puzzle</a>
       ...

JavaScript

(function () {
    "use strict";
    window.Util = {
        randint: function (n) {
            return~~ (Math.random() * n)
        }
    };
    if (!("bind" in Function)) {
        Function.prototype.bind = function (context) {
            var self = this;
            return function () {
                return self.apply(context, arguments)
            }
        }
    }
    var $ = Class.extend({
        init: function (id) {
            this.elem = document.getElementById(id)
        }
    });
    var addEvent = function (elem, event, callback) {
        if (document.addEventListener) {
            return function (elem, type, callback) {
                elem.addEventListener(type, callback, false)
            }
        } else {
            return function (elem, type, callback) {
                elem.attachEvent("on" + type, function (e) {
                    e = e || event;
                    e.preventDefault = e.preventDefault || function () {
                        this.returnValue = false
                    };
                    e.stopPropagation = e.stopPropagation || function () {
                        this.cancelBubble = true
                    };
                    return callback.call(e.target || e.srcElement, e)
                })
            }
        }
    }();
    var events = ("mousemove mouseover mouseout mousedown mouseup click touchstart " + "dblclick focus blur submit change").split(" ");
    for (var i = 0; i < events.length; i++) {
        var event = events[i];
        $.prototype[event] = function (event) {
            return function (selector, fn) {
                if (typeof selector == "function") {
                    addEvent(this.elem, event, selector)
                } else {
                    addEvent(this.elem, event, function (e) {
                        var elem = e.target || e.srcElement;
                        if (elem.tagName.toLowerCase() == selector) {
                            e.stopPropagation();
      ...