JSFiddle - React, Tailwind, and code Playground

by Shawn Lackey

HTML

<script src="jquery.js"></script>
<script src="jquery.jqpuzzle.js"></script>
<link rel="stylesheet" href="jquery.jqpuzzle.css">
<script src="jquery-ui.js"></script>
<title>Shuffle Picture Game</title>
<img src="http://lackeyinnovations.azurewebsites.net/images/mountain.jpg" alt="Mountain" class="jqPuzzle jqp-r3-c5-h5"></img>
<img id="portrait" src="http://lackeyinnovations.azurewebsites.net/images/mountain.png" alt="Mountain"></img>

CSS

.jqPuzzle {
    padding: 5px;
    border: 1px solid #222222;
    background-color: #DDDDFF;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}
.jqPuzzle div {
    background-color: transparent;
    margin: 0px;
    padding: 0px;
    border-style: none;
}
/* div wrapper which holds the puzzle pieces and the solution image */
 .jqPuzzle .jqp-wrapper {
    padding: 2px;
    border: 1px solid #FFFFFF;
    background-color: #444455;
}
.jqPuzzle .jqp-piece {
    border: 1px solid #FFFFFF;
    color: #FFFFFF;
    font-size: 36px;
}
.jqPuzzle .jqp-piece:hover {
    border-style: dashed;
}
.jqPuzzle.jqp-solved .jqp-piece:hover {
    border-style: solid;
}
.jqPuzzle .jqp-controls {
    float: left;
}
.jqPuzzle .jqp-controls a {
    margin-top: 5px;
    margin-right: 8px;
    padding: 3px 5px;
    border: 1px outset #FFFFFF;
    background-color: #777799;
    color: #FFFFFF;
    font-size: 14px;
    line-height: normal;
    float: left;
}
.jqPuzzle .jqp-controls a:hover {
    background-color: #7777BB;
}
.jqPuzzle .jqp-controls a.jqp-toggle, .jqPuzzle .jqp-controls a.jqp-down {
    padding-left: 4px;
    padding-right: 6px;
    border-style: inset;
    background-color: #BBBBFF;
}
.jqPuzzle .jqp-controls a.jqp-disabled {
    background-color: #DDDDEE;
    color: #FFFFFF;
}
.jqPuzzle .jqp-controls span {
    margin-top: 5px;
    padding: 2px 4px;
    padding-left: 0px;
    border: none;
    background-color: transparent;
    color: #666666;
    font-size: 14px;
    float: left;
}
/ .jqPuzzle .jqp-controls span.jqp-disabled {
    color: #AAAAAA;
}
.jqPuzzle.jqp-solved .jqp-controls span {
    padding: 1px 3px;
    border: 1px dotted #0F8F08;
    background-color: #9FEF86;
    color: #0F8F08;
}
.jqPuzzle .jqp-controls span input {
    margin: 0px 3px;
    padding: 3px;
    padding-bottom: 2px;
    border-style: none;
    background-color: #FFFFFF;
    color: #666666;
    font-weight: bold;
    text-align: right;
}
.jqPuzzle .jqp-controls span.jqp-disabled input {
   ...

JavaScript

$.fn.jqPuzzle = function (settings, texts) {

    var defaults = {

        rows: 4,
        cols: 4,
        hole: 16,
        shuffle: false,
        numbers: true,


        control: {
            shufflePieces: true,
            confirmShuffle: true,
            toggleOriginal: true,
            toggleNumbers: true,
            counter: true,
            timer: true,
            pauseTimer: false
        },


        success: {
            fadeOriginal: true,
            callback: undefined,

            callbackTimeout: 300
        };

        animation: {
            shuffleRounds: 3,
            shuffleSpeed: 800,
            slidingSpeed: 200,
            fadeOriginalSpeed: 600
        },


        style: {
            gridSize: 2,
            overlap: true,

            backgroundOpacity: 0.1
        }
    };


    if (settings && !settings.hole && (settings.rows || settings.cols)) {
        settings.hole = (settings.rows || defaults.rows) * (settings.cols || defaults.cols);
    }

    settings = $.extend(true, {}, defaults, settings);


    texts = $.extend((i18n[settings.language] || i18n[defaults.language]), texts);

    var rows = settings.rows,
        cols = settings.cols,
        hole = settings.hole;
    var control = settings.control,
        success = settings.success,
        animation = settings.animation,
        style = settings.style;


    if (rows < 3 || rows > 9) rows = defaults.rows;
    if (cols < 3 || cols > 9) cols = defaults.rows;


    if ((hole > (rows * cols)) || (hole < 1)) hole = rows * cols;
    hole--;


    if (animation.slidingSpeed < 1) animation.slidingSpeed = 1;
    if (animation.shuffleSpeed < 1) animation.shuffleSpeed = 1;
    if (animation.fadeOriginalSpeed < 1) animation.fadeOriginalSpeed = 1;


    if (animation.shuffleRounds < 1) animation.shuffleRounds = 1;



    var checkSolution = function ($pieces) {

        for (var i = 0; i < $pieces.length; i++) {

            var pieceIndex = (i < hole) ? i : i + 1;


  ...