JSFiddle - React, Tailwind, and code Playground

by blesh

HTML

<table id="tictactoe">
    <tbody>
        <tr class="r0">
            <td class="c0"></td>
            <td class="c1"></td>
            <td class="c2"></td>
        </tr>
        <tr class="r1">
            <td class="c0"></td>
            <td class="c1"></td>
            <td class="c2"></td>
        </tr>
        <tr class="r2">
            <td class="c0"></td>
            <td class="c1"></td>
            <td class="c2"></td>
        </tr>
    </tbody>
</table>

CSS

#tictactoe td {
    width: 100px;
    height: 100px;
    border: 1px solid black;
    font-size: 90px;
    text-align: center;
    vertical-align: middle;
    font-family: Arial;
}

JavaScript

function addClass(elem, cl) {
    if (!hasClass(elem, cl)) elem.className += ' ' + cl;
}

function forEach(coll, fn) {
    for (var i = 0; i < coll.length; i++) {
        fn(coll[i], i);
    }
}

function hasClass(elem, cl) {
    return elem.className && elem.className.split(' ').indexOf(cl) >= 0;
}

function filter(coll, fn) {
    var results = [];
    forEach(coll, function (item, i) {
        if (fn(item, i)) results.push(item);
    });
    return results;
}

function setText(elem, text) {
    elem.textContent = text;
}

var tictactoe = document.getElementById('tictactoe'),
    tds = document.querySelectorAll('#tictactoe td');

function markX(e) {
    var src = e.target;
    console.log(src);
    if (src.tagName === 'TD') {
        ticTac(src, 'X');
        checkForWinCondition();
        beginCpuTurn();
        e.preventDefault();
    }
}

function checkForWinCondition() {
    var values = {};
    for (var x = 0; x < 3; x++) {
        var c = 'abc'[x];
        for (var y = 0; y < 3; y++) {
            values[c + y] = document.querySelector('.r' + x + ' .c' + y).textContent;
        }
    }

    var matchFound = colMatch('a') || colMatch('b') || colMatch('c') || rowMatch('0') || rowMatch('1') || rowMatch('2') || diagMatch();
    
    var winner = matchFound;
    if (winner) {
        alert(winner + ' wins!');
    }

    function colMatch(c) {
        var result = values[c + 0] === values[c + 1] === values[c + 2];
        if (result) {
            return values.c0;
        }
    }

    function diagMatch() {
        var alpha = 'abc',
            i = 0,
            result = values[alpha[i] + i++] === values[alpha[i] + i++] === values[alpha[i] + i++];

        if (result) {
            return values[alpha[i] + i].textContent;
        }

        i = 2;

        result = values[alpha[i] + i++] === values[alpha[i]] + i++ === values[alpha[i]] + i++;

        if (result) {
            return values.a2.textContent;
        }
    }

    function rowMatch(r) {
       ...