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;
       ...

JavaScript

var settings = {
    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: true // pause timer if 'Original' button is activated 
        // [true|false] 
    },

    // perform actions when the puzzle is solved sucessfully 
    success: {
        fadeOriginal: false, // 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, adjacent piece borders will overlap 
        // applies only if gridSize is set to 0 
        backgroundOpacity: 0.1 // opacity of the original image behind the pieces 
        // [0 ... 1] (0...