JSFiddle - React, Tailwind, and code Playground

by Umar

HTML

<base href="http://joyjs.org/" />
<script type="text/javascript">
/* 
 * joy.js v0.1.0 
 * http://joyjs.org
 * 
 * @copyright 2012-2013 Endel Dreyer 
 * @license MIT
 * @build 2/2/2013
 */
(function(t){var i=t.Joy||{Init:{},Render:{},Input:{},Context:{},Events:{INIT:"init",SCENE_ACTIVE:"sceneActive",ADDED:"added",REMOVED:"removed",UPDATE:"update",COLLISION:"collision",COLLISION_ENTER:"collisionEnter",COLLISION_EXIT:"collisionExit"},debug:!1,deltaTime:1,ready:function(t){document.onload=t}};i.generateUniqueId=function(){return"joy"+(new Date).getTime()},t.Joy=i})(window),function(t){function i(t){return""!==n&&(t=t.charAt(0).toUpperCase()+t.slice(1)),n+t}var e=navigator.userAgent,n=e.match(/opera/i)&&"o"||e.match(/webkit/i)&&"webkit"||e.match(/msie/i)&&"ms"||e.match(/mozilla/i)&&"moz"||"";t.Support={imageSmoothingEnabled:i("imageSmoothingEnabled"),touch:"ontouchstart"in window},window.onEnterFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(t){window.setTimeout(t,1e3/60)}}()}(Joy),function(){var t=!1,i=/xyz/.test(function(){"xyz"})?/\b_super\b/:/.*/;this.Class=function(){},Class.extend=function(e){function n(){!t&&this.init&&this.init.apply(this,arguments)}var s=this.prototype;t=!0;var o=new this;t=!1;for(var h in e)o[h]="function"==typeof e[h]&&"function"==typeof s[h]&&i.test(e[h])?function(t,i){return function(){var e=this._super;this._super=s[t];var n=i.apply(this,arguments);return this._super=e,n}}(h,e[h]):e[h];return n.prototype=o,n.prototype.constructor=n,n.extend=arguments.callee,n},Joy.Object=Class}(Joy),function(t){var i=function(t,i,e,n,s,o){return null!==t&&(this.m11=t),this.m12=i||0,this.m21=e||0,null!==n&&(this.m22=n),this.dx=s||0,this.dy=o||0,this};i.prototype.appendTransform=function(t,e,n,s,o,h,r,a,c){var l,d,u;return...

CSS

body {margin:0;padding:0;}

JavaScript

var tileset = new Joy.Tileset({
    src: "assets/examples/rufus/tilesets/bright.png",
    width: 64,
    height: 64
});

// This map data was generated by Tiled - http://www.mapeditor.org/
var mapdata = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 13, 17, 14, 17, 14, 14, 17, 14, 14, 14, 17, 17, 17, 17, 14, 14, 14, 14, 14, 14, 14, 17, 17, 18, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 25, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 2, 31, 5, 2, 2, 6, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 13, 14, 14, 17, 18, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 20, 8, 9, 11, 11, 10, 19, 6, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 4, 5, 4, 4, 4, 20, 10, 10, 10, 8, 11, 9, 9, 19, 6, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 2, 5, 2, 5, 4, 5, 5, 2, 2, 20, 8, 10, 11, 8, 10, 10, 11, 10, 8, 8, 9, 8, 8, 8, 19, 2, 2, 3, 3, 3, 2, 2, 3, 3, 5, 4, 4, 3, 3, 3, 3, 2, 5, 4, 4, 4, 3, 5, 2, 2, 5, 5, 2, 0, 0, 0, 0, 0, 1, 20, 9, 10, 10, 9, 10, 8, 9, 10, 11, 8, 8, 9, 11, 10, 8, 8, 8, 8, 10, 11, 11, 8, 9, 8, 10, 10, 10, 10, 10, 10, 10, 10, 10, 8, 11, 8, 11, 11, 11, 10, 10, 10, 8, 8, 8, 10, 8, 8, 11, 11, 8, 11, 10, 3, 5, 3, 5, 2, 20, 8, 9, 11, 8, 8, 8, 11, 10, 11, 10, 10, 8, 11, 10, 9, 11, 10, 8, 10, 11,...