Card Trick Sim

by therealklanni

HTML

<p>think of a number between 1 and 27 and press 'begin'.
    <br>watch carefully for your chosen number to appear in one of the boxes below, and select the stack that you saw your number appear in.</p>
<br>
<!-- input placeholder="number between 1 and 27" -->
<button id="begin">begin</button>
<br>
<br>
<stack>
     <h1>1</h1>

    <value></value>
    <button disabled>here</button>
</stack>
<stack>
     <h1>2</h1>

    <value></value>
    <button disabled>here</button>
</stack>
<stack>
     <h1>3</h1>

    <value></value>
    <button disabled>here</button>
</stack>

CSS

stack {
    display: inline-block;
}
value {
    margin: 0 auto;
    display: block;
    line-height: 12px;
    height: 26px;
    width: 18px;
    border: 1px solid black;
}
stack h1 {
    text-align: center;
}

JavaScript

var $stacks = [$('stack value').eq(0), $('stack value').eq(1), $('stack value').eq(2)],
    cards = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27],
    stacks, iteration,
    deck;

function shuffle() {
    deck = new Array(27),
        iteration = 0;
    
    cards.forEach(function(card) {
        var pos;
        
        do {
            pos = Math.floor(Math.random()*27);
        } while (deck[pos]);
        
        deck[pos] = card;
    });
}

function deal() {
    var sPos = 0;
    
    for (i = 0; i < 27; i++) {
        if (i>0 && !(i % 3)) sPos = 0;
        stacks[sPos].push(deck[i]);
        sPos++;
    }
    console.debug(stacks);
}

function restack(stackId, targetPos) {
    // for now
    targetPos = 0;
    newStacks = [];
    //calcStackPos()[iteration]
}

function calcStackPos(int) { return [Math.floor(int/9), Math.floor(int%9/3), int%9%3]; }

$('#begin').click(function () {
    stacks = [[], [], []];
    
    $stacks.forEach(function ($stack) {
        $stack.text('');
    });
    
    shuffle();
    console.debug(deck);
    
    deal();
});