SwapCounter

A simple example interface.

by danShumway

HTML

<div class="game"> 
    <div class="hand" >
        <div class="card hidden"></div>
        <div class="card hidden"></div>
        <div class="card hidden"></div>
    </div>
    <div class="board">
        <div class="playArea">
            <div class="card hidden"></div>
            <div class="card hidden rotated"></div>
        </div>
        <div class="betArea">
            <div class="card"></div>
            <div class="card hidden"></div>
        </div>
        <div class="playArea">
            <div class="card"></div>
            <div class="card"></div>
            <div class="card"></div>
        </div>
    </div>
    <div class="hand">
        <div class="card"></div>
        <div class="card"></div>
        <div class="card"></div>
        <div class="card"></div>
    </div>
</div>
<div style="clear:both;">Stake: 15 points. <br/>5 Advantage </div>

CSS

.game{
    background-color:gray;
    width:400px;
    height:400px;
}

.board {
    width:400px;
    height:200px;
    background-color:rgb(240, 240, 240);
}

.board .betArea {
    clear:both;
    width:400px;
    height:60px;
    background-color:rgb(230, 230, 230);
}

.board .playArea {
    clear:both;
    width:400px;
    height:50px;
}

.board .stake {
    
}

.hand {
    clear:both;
    padding:5px;
    width:380px;
    height:80px;
    /*background-color:rgb(250, 250, 250);*/
}

.card {
    float:left;
    background-color:rgb(100, 200, 200);
    width:30px;
    height:50px;
    margin:10px;
    margin-top:5px;
    margin-bottom:5px;
}

.hidden {
    background-color:rgb(200, 200, 100);
}

.rotated {
    width:50px;
    height:30px;
    margin-bottom:25px;
    margin-top:25px;
}