JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<h1>Sprite Generator</h1>
<div class="control">
    <div class="control_content">
        <span class="blockcontrol">
            <span>Packed texture dimensions:</span>
            <span><input id="_width"  value="1024" maxlength="5" size="5"></span>
            <span><input id="_height" value="1024" maxlength="5" size="5"></span>
            <span><input type="button" value="Update canvas size" onclick="updatePacker();"></span>
        </span>
        <span class="blockcontrol">
            <span>Padding:</span>
            <span><input id="_padding" value="2" maxlength="2" size="2"></span>
        </span>
        <span class="blockcontrol">
            <span>Optimize</span>
            <span><input type='checkbox' id='_optimize'></span>
        </span>
        <span class="blockcontrol">
            <span>
                Heuristic:
            </span>
            <span>
                <select onchange="changeHeuristic(this.options[this.selectedIndex].value);">
                    <option selected>Area</option>
                    <option>Width</option>
                    <option>Height</option>
                </select>
            </span>
        </span>
        <span class="blockcontrol">
            <span><input type="button" value="Clear" onclick="clearPacker();"></span>
        </span>
        <span class="blockcontrol">
            <span><input type="button" value="Export Image" onclick="exportImage();"></span>
        </span>
    </div>
</div>

<div>

  <div class="imagesdata block1">
      <div class="pre_edit" id="droparea">
          <div class="middle" id="help_message">Drop images <b>here</b></div>
          <canvas id="s"></canvas>
      </div>
      <div class="drop">

      </div>

      <div class='info'>
          <div class="dropmsg" id="msg">
              A scaled version of the final packet texture will be shown.<br>
              Play with the <code>heuristic</code> values to try different packing layouts.<br>
              Enable...

CSS

html, body{
        font: 0.9em Verdana,Arial,Geneva,Helvetica,sans-serif;
        background: #E7DEC0;
        margin: 0px;
        padding:0px;
        color: #250701;
    }

    .blockcontrol {
        pagging: 5px;
    }

    .control {
        background: #6D4320;
        width: 100%;
        color: #E7DEC0;
        text-shadow: black 0px 1px 0px;
        border-bottom:#250701 2px solid;
    }

    .control_content{
        padding:5px;
    }

    .imagesdata{
        float:left;
    }

    .pre_editDrop{
        border: 5px dashed #9f7653;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
        width: 500px;
        height: 500px;
    }

    .pre_edit{
        border: 5px dashed #6D4320;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
        width: 500px;
        height: 500px;
    }

    .info{
        line-height:1.7em;
    }

    .dropmsg, .dropmsg2{
        background: #333;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
        color:white;
        padding:10px;
    }

    .dropmsg2{
        background: #666;
    }

    #msg{
        margin-top:20px;
    }

    .block1{
        width:500px;
        padding:15px;
    }

    .block2{
        min-width:180px;
        max-width:300px;
        padding:15px;
    }

    .block3{
        min-width:180px;
        max-width:300px;
        padding:15px;
    }

    code{
        font: 1em Verdana,Arial,Geneva,Helvetica,sans-serif;
        background: #222;
        padding:2px;
    }

    .middle{
        font: 4em Verdana,Arial,Geneva,Helvetica,sans-serif;
        position:absolute;
        text-align:center;
        top:250px;
        left:30px;
    }

JavaScript

/**
 * @author  Hyperandroid  ||  http://hyperandroid.com/
 *
 */

/**
 * @license
 * 
 * The MIT License
 * Copyright (c) 2010 Ibon Tolosana, Hyperandroid || http://hyperandroid.com/

 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:

 * The above copyright notice and this permission notice shall be included in
 * all copies or substantial portions of the Software.

 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 * THE SOFTWARE.
 *
 */

/**
 * @namespace
 */
var CAAT= CAAT || {};
CAAT.modules= CAAT.modules || {};

/**
 * Log function which deals with window's Console object.
 */
CAAT.log= function() {
    if(window.console){
        window.console.log( Array.prototype.slice.call(arguments) );
    }
};

(function() {

    CAAT.modules.ImageUtil= function() {
        return this;
    };

    CAAT.modules.ImageUtil.prototype= {
        createAlphaSpriteSheet: function(maxAlpha, minAlpha, sheetSize, image ) {

            if ( maxAlpha<minAlpha ) {
                var t= maxAlpha;
                maxAlpha= minAlpha;
                minAlpha= t;
            }

            var canvas= document.createElement('canvas');
            canvas.width= image.width;
        ...