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;
}
/* only needed if external css rules set defaults for divs,
   this rule only resets the most common properties */
 .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;
}
/* a single puzzle piece */
 .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;
}
/* the controls area which holds the buttons and the display */
 .jqPuzzle .jqp-controls {
    float: left;
}
/* a button */
 .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;
}
/* toggle/down state for buttons */
 .jqPuzzle .jqp-controls a.jqp-toggle, .jqPuzzle .jqp-controls a.jqp-down {
    padding-left: 4px;
    padding-right: 6px;
    border-style: inset;
    background-color: #BBBBFF;
}
/* disabled state for buttons */
 .jqPuzzle .jqp-controls a.jqp-disabled {
    background-color: #DDDDEE;
    color: #FFFFFF;
}
/* the area which holds the moves/seconds display */
 .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;
}
/* disabled state for the display (non-shuffled puzzle) */
 .jqPuzzle .jqp-controls span.jqp-disabled {
    color: #AAAAAA;
}
/* solved state for...

JavaScript

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

    // default settings
    var defaults = {

        rows: 4, // number of rows [3 ... 9]
        cols: 4, // number of columns [3 ... 9]
        hole: 16, // initial hole position [1 ... rows*columns]
        shuffle: false, // initially show shuffled pieces [true|false]
        numbers: true, // initially show numbers on pieces [true|false]

        // display additional gui controls
        control: {
            shufflePieces: true, // display 'Shuffle' button [true|false]
            confirmShuffle: true, // ask before shuffling [true|false]
            toggleOriginal: true, // display 'Original' button [true|false]
            toggleNumbers: true, // display 'Numbers' button [true|false]
            counter: true, // display moves counter [true|false]
            timer: true, // display timer (seconds) [true|false]
            pauseTimer: false // pause timer if 'Original' button is activated 
            // [true|false]
        },

        // perform actions when the puzzle is solved sucessfully
        success: {
            fadeOriginal: true, // cross-fade original image [true|false]
            callback: undefined, // callback a user-defined function [function]
            // the function is passed an object as its argument
            // which includes the fields 'moves' and 'seconds'
            callbackTimeout: 300 // time in ms after which the callback is called
        },

        // animation speeds and settings
        animation: {
            shuffleRounds: 3, // number of shuffle rounds [1 ... ]
            shuffleSpeed: 800, // time in ms to perform a shuffle round
            slidingSpeed: 200, // time in ms for a single move
            fadeOriginalSpeed: 600 // time in ms to cross-fade original image
        },

        // additional style information not specified via css
        style: {
            gridSize: 2, // space between two pieces in px
            overlap: true, // if true,...