JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

<div id="puzzle-containment" style="border:1px solid grey;background:#fafafa;margin:30px 0;padding:10px;text-align:center">
       
            
 <img id="source_image" src="https://goodies.pixabay.com/jquery/snap-puzzle/image.jpg">
             
<div id="pile" style="border:1px dotted red;margin:10px"></div>
            
</div>

<div id="puzzle_solved" style="z-index:60;border:1px solid green;border-radius:10px;background-color:white;padding:10px;height:200px;width:600px;display:none;text-align:center;position:fixed;top:50%;left:50%;margin-top:-200px;margin-left:-300px;">
  <h2>Well done! Retry?</h2>
  <img class='choose' data-pic='1' src='http://griffusion.elementfx.com/pics/bgs/nest1.jpg' style='height:50px;width:auto;'> <img class='choose' data-pic='2' src='http://griffusion.elementfx.com/pics/bgs/nest2.jpg' style='height:50px;width:auto;'> <img class='choose' data-pic='3' src='http://griffusion.elementfx.com/pics/bgs/nest3.jpg' style='height:50px;width:auto;'> <img class='choose' data-pic='4' src='http://griffusion.elementfx.com/pics/bgs/nest4.jpg' style='height:50px;width:auto;'> <img class='choose' data-pic='5' src='http://griffusion.elementfx.com/pics/bgs/nest5.jpg' style='height:50px;width:auto;'> <img class='choose' data-pic='6' src='http://griffusion.elementfx.com/pics/bgs/nest6.jpg' style='height:50px;width:auto;'> <img class='choose' data-pic='7' src='http://griffusion.elementfx.com/pics/bgs/nest7.jpg' style='height:50px;width:auto;'> <img class='choose' data-pic='8' src='http://griffusion.elementfx.com/pics/bgs/nest8.jpg' style='height:50px;width:auto;'> <img class='choose' data-pic='9' src='http://griffusion.elementfx.com/pics/bgs/nest9.jpg' style='height:50px;width:auto;'><br>
                        <button class="restart-puzzle" data-grid="2">Lol (2 x 2)</button>
                        <br>
                        <button class="restart-puzzle" data-grid="3">Easy (3 x 3)</button>
                        <br>
                        <button...

CSS

.snappuzzle-wrap {position:relative;display:block;}
.snappuzzle-pile {position:relative;}
.snappuzzle-piece {cursor:move;}
.snappuzzle-slot {position:absolute;background:#fff;opacity:0.8;}
.snappuzzle-slot-hover {background:#eee;}
.choose:hover {cursor:pointer;border:1px solid red;border-radius:5px;}
.chosen {border:2px solid red;border-radius:5px;}

JavaScript

var chosen = 1;
$('.choose').click(function(){
$('.choose').removeClass('chosen');
chosen = $(this).data('pic');
$(this).addClass('chosen');
});
function updateImage(){
$('#source_image').attr('src','http://griffusion.elementfx.com/pics/bgs/nest'+chosen+'.jpg');
}

// unused
function randomImage(){
var pics = [1,2,3,4,5,6,7,8,9];
var pic = pics[Math.floor(Math.random() * pics.length)];
$('#source_image').attr('src','http://griffusion.elementfx.com/pics/bgs/nest'+pic+'.jpg');
}

function start_puzzle(x){
  $('#puzzle_solved').fadeOut(300);
  $('#source_image').snapPuzzle({
    rows: x, columns: x,
    pile: '#pile',
    containment: '#puzzle-containment',
     onComplete: function(){
        $('#source_image').fadeOut(300).fadeIn(300);
        $('#puzzle_solved').fadeIn(300);
     }
   });
}

$(function(){
  $('#pile').height($('#source_image').height());
  start_puzzle(2);
  
  $('.restart-puzzle').click(function(){
    $('#source_image').snapPuzzle('destroy');
    //randomImage();
    updateImage();
    start_puzzle($(this).data('grid'));
  });

  $(window).resize(function(){
    $('#pile').height($('#source_image').height());
    $('#source_image').snapPuzzle('refresh');
  });
});