Card Game

by Jake Cattrall

HTML

<script src="http://packery.metafizzy.co/packery.pkgd.min.js"></script>
<button onclick="reload()">Reload</button>
<div class="card-container">
    <div class="card c1"></div>
    <div class="card c2"></div>
    <div class="card c3"></div>
    <div class="card c4"></div>
</div>
<div class="card-container">
    <div class="card c5"></div>
    <div class="card c6"></div>
    <div class="card c7"></div>
    <div class="card c8"></div>
</div>

SCSS

$cardSize: 70px;

body{
    background-color: green;    
}

.card{
    float: left;
    border-radius: 5px;
    background-color: white;
    width: $cardSize;
    height: ($cardSize + ($cardSize / 10 * 4));
    border: 1px solid #d7d7d7;
}

.ui-sortable-helper{
    transition: transform 0.2s, box-shadow 0.2s;
    -webkit-transition: -webkit-transform 0.2s, box-shadow 0.2s;
    box-shadow: #555 0px 0px 30px;
    transform: scale(1.1);
    -webkit-transform: scale(1.1);
}

CoffeeScript

cardContainers = $('.card-container')
cardContainers.each (index, cc) ->
    cc.packery
        columnWidth: 74
        gutter: 2
        itemSelector: '.card'

    packeryElements = $(cc.packery('getItemElements'))
    packeryElements.draggable()
    cc.packery 'bindUIDraggableEvents', packeryElements
    
window.reload = ->
    $('.card-container .card').sort ->
        Math.round( Math.random() ) - 0.5
    .appendTo('.card-container')
    cardContainers.packery()