tictactoe

by vikikamath

HTML

<div class="container">
    <ul>
        <li class="table" id="2">
             <h1></h1>

        </li>
        <li class="table" id="7">
             <h1></h1>

        </li>
        <li class="table" id="6">
             <h1></h1>

        </li>
        <li class="table" id="9">
             <h1></h1>

        </li>
        <li class="table" id="5">
             <h1></h1>

        </li>
        <li class="table" id="1">
             <h1></h1>

        </li>
        <li class="table" id="4">
             <h1></h1>

        </li>
        <li class="table" id="3">
             <h1></h1>

        </li>
        <li class="table" id="8">
             <h1></h1>

        </li>
    </ul>
</div>

CSS

.container {
    width: 400px;
    height: 300px;
}
.container ul li {
    height: 100px;
    width: 100px;
    background: #FFE;
    border: #CCC 1px solid;
    float: left;
    padding: 1 1 1 1;
}
.container ul {
    padding: 0;
    margin: 0;
    list-style-type: none;
}
li.table {
    display: table-cell;
    font: Arial 4em;
    font-weight: bolder;
    margin: 0 auto;
    text-align: center;
}

JavaScript

(function () {

    var all = [1, 2, 3, 4, 5, 6, 7, 8, 9], // all element ids
        available = [1, 2, 3, 4, 5, 6, 7, 8, 9], // init
        CENTER = 5,
        MAGICSUM = 15,
        CHECK_WIN_THRESHOLD = 2,
        corners = [2, 4, 6, 8], // corner vertices
        network = { // network is the graph object.
            1: [5, 6, 8, 9],
            2: [4, 5, 6, 7, 8, 9],
            3: [4, 5, 7, 8],
            4: [2, 3, 5, 6, 8, 9],
            5: [1, 2, 3, 4, 6, 7, 8, 9],
            6: [1, 2, 4, 5, 7, 8],
            7: [2, 3, 5, 6],
            8: [1, 3, 4, 6],
            9: [1, 2, 4, 5]
        },
        winningCombinations = [
            [2, 7, 6],
            [9, 5, 1],
            [4, 3, 8],
            [2, 9, 4],
            [7, 5, 3],
            [6, 1, 8],
            [2, 5, 8],
            [4, 5, 6]
        ],
        Xs = [], // init
        Os = [], // init
        humanSelection = "X",
        machineSelection = "O", // default
        inputLocked = false, // input lock status
        stepMachine = 0,
        stepHuman = 0;

    /************************** Util *************************/
    // given an array of arrays containing pair of elements:
    // example [[1,2], [1,7], [2,7]]
    // returns choices 6
    // returns the choices available after in
    function availableChoices(elementPairsArr) { //[[1,2],[1,7],[2,7]]
        var filteredChoices = new Array();
        elementPairsArr.map(function (elementArr) {
            elementArr.reduce(function (a, b) {
                var sum = MAGICSUM - (a + b);
                if (sum !== a && sum !== b && sum < 10 && available.indexOf(sum) > -1) {
                    filteredChoices.push(sum);
                }
            });
        });
        return filteredChoices;
    }


    function pluckRandom(arr) {
        return arr.splice(Math.ceil(Math.random() * Math.random() * arr.length) - 1, 1);
    }

    // given two arrays returns the intersection as an array
    function...