Untitled

<script class="text/javascript" src="http://code.jquery.com/jquery-git.js"></script>

<script class="text/javascript" src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>

<script class="text/javascript" src="https://raw.github.com/furf/jquery-ui-touch-punch/master/jquery.ui.touch-punch.min.js"></script>

<link href='http://fonts.googleapis.com/css?family=Archivo+Black' rel='stylesheet' type='text/css'>

<h1>Big Bold and New.</h1>

<div class="stack">

  <div class="row"></div>

  <div class="row"></div>

</div>•

<div class="spot"><div class="place"></div></div>

<div class="spot"><div class="place"></div></div>

@gray: #D5D3D0;

body { background-color: @gray; }

h1 { font-family: "Segoe UI"; color: #302E2F; font-size: 4.6em; font-weight: normal; }

/*PIECES*/

@black: #302E2F; @blue: #00C8FF; @red: #ED1C24; @pink: #EC008C; @green: #56A02B;

.black { color: @black; }

.blue  { color: @blue; }

.red   { color: @red; }

.green { color: @green; }

.empty { color: rgba(0,0,0,0); }

@pbc: beige;

@ph: 40px;

@pw: 26px;

@pp: 3px;

@pm: 1px;

@prh: @ph+(@pp+@pm)*2;

@prw: @pw+(@pp+@pm)*2;

.piece {

  display: inline-block;

  background-color: @pbc;

  border-radius: 2px;

  height: @ph;

  width: @pw;

  text-align: center;

  text-shadow: 1px 1px #FFFFFF;

  padding: @pp;

  cursor: pointer;

  border-radius: @pp;

  font-size: 1em;

  font-family: 'Archivo Black', 'Arial Black'; 

  margin: @pm;

  user-select: none;

}

.piece:after { position: relative; text-align: center; top: -10px; content: "●"; }

.empty:after { position: relative; text-align: center; top: -10px; content: "_"; }

.empty { text-shadow: 0px 0px rgba(0,0,0,0); }

.piece {

    border-top: 2px solid white;

    border-left: 2px solid white;

    border-right: 2px solid gray;

    border-bottom: 2px solid gray;

}

.piece.ui-draggable-dragging { box-shadow: 1px 1px 1px black; transform: scale(1.1) rotateX(-30deg); }

/*PLACES*/

@lw: @prw+4;

.place { display: inline-block; height: @prh; width: @lw; }

.high { background-color: orange; }

.high>.piece:not(.ui-draggable-dragging) { border: 2px solid black; }

/*STACK*/

@rc: #FFD39B;

@rmh: 10px; @rmv: 2px;

.row { background: @rc; margin: @rmv @rmh; }

@sc: @black;

.stack {

  background-color: @sc;

  border-bottom: 2px solid @sc;

  width: @lw*15+(2*@rmh);

  user-select: none;

}

/*SPOT*/

.spot {

  position: relative;

  float: left; 

  /*background-color: @rc;*/ 

  padding: 10px;

  border: @rmv dashed @sc;

  border-radius: 10px;

}

var o = $('body');

var s = $('.stack');

function piece(c,n)

{

  return $('<div/>', { class: c + " piece", text: n }).append("<br/>").draggable({

    revert: true,

    zIndex: 99999, opacity: 0.8

  });

}

//////////

function place() { return $('<div />', { class: "place" }); }

function createStack() { for (var i = 0; i < 15; i++) $('.row').append(place()); }

var zp = { top: 0, left: 0 };

function drop(event,ui) {

  var p = ui.draggable;

  var c = $(this);

  if (c.is(':empty')) dropEmpty(c, p);

  else                dropSwap (c, p);

}

function dropEmpty(c, p) { c.append(p.detach().css(zp)); }

function dropSwap (c, p) {

  var pc = p.parent(); var cp = c.children().first();

  dropEmpty(pc, cp); dropEmpty(c, p);

}

createStack();

$(".place").droppable({ accept: ".piece", drop: drop, hoverClass: "high" });

//////////

function e()  { return piece("empty", ''); }

function g(x) { return piece("green", x); } function d(x) { return piece("black", x); }

function r(x) { return piece("red"  , x); } function b(x) { return piece("blue" , x); }

o.append([g(1),r(8),d(7),b(10),r(5),d(12),d(5),g(10),b(5),b(1),b(9),r(4),r(13),b(4),e()]);

//////////

function rnd(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; }

function rndPick(xs) { return xs[rnd(0,xs.length-1)]; }

function rndPut(e) { rndPick($('.row>.place:empty')).appendChild(e); } 

function rndPutAll(s) { var ps = $(s); for (var i = 0; i < ps.length; i++) rndPut(rndPick($(s))); }

rndPutAll('body>.piece');

//////////

//////////

$('.spot').draggable();

$('.stack').draggable();

$('h1').draggable();