Cribbage Breakdown

Explains a 5+ card Cribbage hand. Assumes the cut card is last.

by subskybox

HTML

<link rel="stylesheet" href="http://selfthinker.github.com/CSS-Playing-Cards/cards.css">
<link rel="stylesheet" href="http://selfthinker.github.com/CSS-Playing-Cards/cards-ie9.css">
<h1 class="skewed"><span>Cribbage&nbsp;&nbsp;Breakdown</span></h1>
<div>
  <span>
     <input id="cardInput" size="30" type="text" placeholder="10♠ J♣ Q♥ K♦ A♠ [A♦ K♠]"
      pattern="((?:\s*)(10|[2-9]|[J|Q|K|A])(?:\s*)[♠|♣|♥|♦](?:\s*)){5,}"/>
  </span>
</div>
<div id="output" class="output"><kbd class="light">S</kbd>pades, <kbd class="light">C</kbd>lubs, <kbd class="light">D</kbd>iamonds, <kbd class="light">H</kbd>earts</div>
<div id="outerWrapper" class="centered2">
    <div id="innerWrapper" class="centered3">
    </div>
</div>

CSS

/**
 * Styles for the main document
 *
 * @author   Pat Wilson <[email protected]>
 * @license  
 * @version  2012-10-31
 * @link     
 */

body {
    margin: 4em auto;
    font-family:"Calibri", Arial, serif;
}

small{
    font-size:12px;
    color: #666;
}

big{
    font-size:18px;
    color: #111;
}

div.clear {
    clear: both;
    height: 0;
    line-height: 0;
    font-size: 1px;
    visibility: hidden;
}
[required] {
border-color: #88a;
-webkit-box-shadow: 0 0 3px rgba(0, 0, 255, .5);
}
:invalid {
border-color: #e88;
-webkit-box-shadow: 0 0 5px rgba(255, 0, 0, .8);
}
html {
    background: #ffe;
    text-align: center;
    overflow-y: scroll;
}
.skewed {
    display: inline-block;
    font: 2em/1 impact, sans-serif;
    margin-top: 0.5em;
    position: relative;
    -webkit-transform: rotate(-10deg) skew(-10deg, 0);
       -moz-transform: rotate(-10deg) skew(-10deg, 0);
        -ms-transform: rotate(-10deg) skew(-10deg, 0);
         -o-transform: rotate(-10deg) skew(-10deg, 0);
            transform: rotate(-10deg) skew(-10deg, 0);
}
.skewed:after,
.skewed:before {
    background: #666;
    box-shadow: inset 0 0 0 .5em #666,
                inset 0 .7em 0 #666,
                inset 0 .9em 0 #888,
                inset 0 1.4em 0 #666,
                inset 0 1.6em 0 #888,
                inset 0 2.1em 0 #666,
                inset 0 2.3em 0 #888,
                inset 0 2.5em 0 #666;
    content: '';
    height: 2.5em;
    position: absolute;
    top: 0em;
    width: 3.5em;
    z-index: -1;
}
.skewed:after {
    border-radius: .25em 0 0 .25em;
    left: -2.5em;
}
.skewed:before {
    border-radius: 0 .25em .25em 0;
    right: -2.5em;
}
.skewed span {
    background: #666;
    box-shadow: 0 0 0 .2em #ffe;
    color: #ffe;
    padding: 1em;
    position: relative;
    text-shadow: 1px 2px 0 #666,
                 2px 3px 0 #888;
    text-transform: uppercase;
}
.centered {
    width:425px;
    margin:auto;
    margin-top: 2em;
}
input {
   ...

JavaScript

// Cribbage Hand Evaluator by Pat Wilson -Nov 2012- (Chrome|IE9+|Safari|Opera)

function showExplanation(cs,ss) {
    //Initialize
    var cardObjs = [], runCollector = [], pairCollector = [], fifteenCollector = [], subSetHTML = [];
    var subSets = [], descriptions = [], sad = 1, points = 0, innerHTML, i, j, fc, v, L = cs.length;
    var suitMap = {"♠":"spades", "♣":"clubs", "♥":"hearts", "♦":"diams"};
    var rankMap = {1:"a", 11:"j", 12:"q", 13:"k"};
    for (i=0; i < L; i++) { cardObjs.push({v:cs[i], s:ss[i]});}

    //Flush
    for (i=1, as=true; i < L-1 && as; as = (cardObjs[i].s == cardObjs[0].s), i++){}
    if (as) {
        var f = (cardObjs[0].s == cardObjs[L-1].s) ? L : L-1;
        subSets.push(cardObjs.slice(0,f));
        descriptions.push("Flush for " + f);
        points += f;
    }
    //Nobs
    for (i=0; i < L-1; i++) { 
        if (cardObjs[i].v == "11" && cardObjs[i].s == cardObjs[L-1].s) { 
            subSets.push([cardObjs[i]]);
            descriptions.push("Nobs for 1");
            points++;
            break; 
        }
    }

    //Find Runs, Pairs
    cardObjs.sort(function(a,b){return a.v-b.v;});
    runCollector.push([cardObjs[0]]);  
    for (i=1; i < L; i++) {
        if (cardObjs[i].v == cardObjs[i-1].v && (j = i)) {
            //Add each pair |cardObjs[i-1]| with all its predecessors
            while (--j >= 0 && cardObjs[j].v == cardObjs[i].v) {
                pairCollector.push([cardObjs[i], cardObjs[j]]);
            }
            
            //Clone runCollector with splice(0,-1) for |sad|
            for (j=0; j < sad; j++) {
                runCollector.push(runCollector[j].slice(0,-1).concat([cardObjs[i]]));
            }

        }
        else if (cardObjs[i].v - cardObjs[i-1].v == 1) {
            //Add the card to the runCollector
            for (j=0; j < runCollector.length; j++) {
                runCollector[j].push(cardObjs[i]);
            }
            
            sad = runCollector.length; // |sad|...