JSFiddle - React, Tailwind, and code Playground

by Ian Sadovy

HTML

<div id="puzzle"></div>
<img id="img" style="display: none;"...

CSS

.pz-app * {
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
}

.pz-app {
    border: 2px solid black;
}

.pz-app .pz-gameplay {
    width: 100%;
    height: 100%;
    position: relative;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.pz-app .pz-gameplay .pz-score {
    position: absolute;
    left: 0;
    top: 0;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    font-family: monospace;
    z-index: 2;
    padding: 2px 10px;
    padding-bottom: 5px;
}

.pz-app .pz-gameplay .pz-item {
    position: absolute;
    background: #fff;
    cursor: pointer;
    -webkit-transition: all 0.2s; /* Safari */
    transition: all 0.2s;
}

.pz-app .pz-gameplay .pz-item.pz-selected {
    box-shadow: 0 0 0 yellow;
    animation: pulse 1s infinite;
    z-index: 1;
}

@-webkit-keyframes pulse {
  0% {
    -webkit-box-shadow: 0 0 0 10px rgba(255,213,79,1);
  }
  70% {
      -webkit-box-shadow: 0 0 0 10px rgba(255,213,79,0);
  }
  100% {
      -webkit-box-shadow: 0 0 0 10px rgba(255,213,79,0);
  }
}
@keyframes pulse {
  0% {
    -moz-box-shadow: 0 0 0 0 rgba(255,213,79,1);
    box-shadow: 0 0 0 0 rgba(255,213,79,1);
  }
  70% {
      -moz-box-shadow: 0 0 0 10px rgba(255,213,79,0);
      box-shadow: 0 0 0 10px rgba(255,213,79,0);
  }
  100% {
      -moz-box-shadow: 0 0 0 10px rgba(255,213,79,0);
      box-shadow: 0 0 0 10px rgba(255,213,79,0);
  }
}

JavaScript

$(document).ready(function(){
	$("#puzzle").puzzle({
    //imgUrl: "https://cdn.meme.am/cache/instances/folder345/49400345.jpg",
    img: $("#img").get(0),
    width: 400,
    height: 400,
    tileSize: 100
  });
})

var __extends=this&&this.__extends||function(){var t=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var i in e)e.hasOwnProperty(i)&&(t[i]=e[i])};return function(e,i){function n(){this.constructor=e}t(e,i),e.prototype=null===i?Object.create(i):(n.prototype=i.prototype,new n)}}(),com;!function(t){!function(t){!function(t){var e=function(){function t(t){void 0===t&&(t="div"),this.element=$("<"+t+"/>")}return t.prototype.append=function(t){return this.element.append(t.element),this},t}();t.UIElement=e}(t.puzzle||(t.puzzle={}))}(t.sadovy||(t.sadovy={}))}(com||(com={}));var com;!function(t){!function(t){!function(t){var e=function(e){function i(i){var n=e.call(this)||this;n.width=4,n.height=4,n.itemWidth=100,n.itemHeight=100,n.score=0,n.element.addClass("pz-gameplay"),n.itemWidth=n.itemHeight=i,n.items=[],n._image=document.createElement("img");for(var o=0;o<n.width;o++)for(var a=0;a<n.height;a++){var r=new t.TileItem(n.itemWidth,n.itemHeight,a,o);r.element.click(function(t){return n.onItemClick(t)}),n.items.push(r)}return n.scoreLabel=new t.UIElement("div"),n.scoreLabel.element.addClass("pz-score"),n.scoreLabel.element.text("Moves: 0"),n.append(n.scoreLabel),n}return __extends(i,e),Object.defineProperty(i.prototype,"imageUrl",{set:function(t){var e=this;this._image.src=t,this._image.onload=function(){return e.drawTiles()}},enumerable:!0,configurable:!0}),Object.defineProperty(i.prototype,"image",{set:function(t){this._image=t,this.drawTiles()},enumerable:!0,configurable:!0}),i.prototype.drawTiles=function(){for(e=0;e<this.items.length;e++)this.items[e].draw(this._image);var t=this.items.slice();t.sort(function(t,e){return Math.random()<.5?1:-1});for(var e=0;e<t.length;e++){var...