fed135/tic-tac-toe-compact.html

## tic-tac-toe-compact.html
<!-- 729 Bytes -->
<style>td{width:64px;height:56px;padding-top:10px;border:2px solid;float:left;text-align:center;font-weight:bolder;font-family:arial;font-size:42px}</style><body/><script>for(_='d.a~===[a]a,b=0;document.body){function} return(e[b])if(l(c");c[r]c[b]4>++for( .map((f.onclick=,b)m;}	%4]}}(d))	aa;var .innerHTML.appendChild(a++)=createElement("t;(nn[f.ac=[],e=["X","O"],g h((};=e[g];g=0g?1:0;k()k(b<e.length;b	f})	d={};d={a:~},a~=0++~----}}l(3a.reduce(p,0)m(a+=a+" won!"p(a(b,db+(da?1:0)}}Cable"),rr;rtr=[];uu;uvd[u]=v;tv);vh.bind(null,r,u)}Ct)}C);';G=/[^ -}]/.exec(_);)with(_.split(G))_=join(shift());eval(_)</script>

## tic-tac-toe-original.html
<style>
    td {
        width: 64px;
        height: 56px;
        padding-top: 10px;
        border: 2px solid;
        float: left;
        text-align: center;
        font-weight: bolder;
        font-family: arial;
        font-size: 42px;
    }
</style>
<body>
<script>
// Tictactoe
const rows = [];
const players = ['X', 'O'];
const gridSize = 4;
const goal = 3;
let turn = 0;

function playMove(x, y) {
    rows[x][y].onclick = () => {};
    rows[x][y].innerHTML = players[turn];
    turn = turn === 0 ? 1 : 0;
    checkWinner();
}

function checkWinner() {
    let i;

    for (let player = 0; player < players.length; player++) {
        // Rows
        for (i = 0; i < gridSize; i++) {
            if (rowCompleted(rows[i], player)) return printVictory(players[player]);
        }
        // Columns
        for (i = 0; i < gridSize; i++) {
            if (rowCompleted(rows.map(row => row[i]), player)) return printVictory(players[player]);
        }
        // Diag
        for (i = 0; i < gridSize; i++) {
            let u = 0;
            if (rowCompleted(rows.map((row) => row[(u++ % gridSize)]), player)) return printVictory(players[player]);
            u--;
            if (rowCompleted(rows.map((row) => row[u-- % gridSize]), player)) return printVictory(players[player]);
        }
    }
}

function rowCompleted(casList, player) {
    return (casList.reduce(pointsReducer(players[player]), 0) === goal);
}

function printVictory(playerName) {
    document.body.innerHTML += `${playerName} won!`;
}

function pointsReducer(player) {
    return (acc, curr) => acc + ((curr.innerHTML === player) ? 1 : 0);
}

const res = document.createElement('table');
for (let x = 0; x < gridSize; x++) {
    const row = document.createElement('tr');
    rows[x] = [];
    for (let y = 0; y < gridSize; y++) {
        const cas = document.createElement('td');
        rows[x][y] = cas;
        row.appendChild(cas);
        cas.onclick = playMove.bind(null, x, y);
    }
    res.appendChild(row);
}
document.body.appendChild(res);
</script>
</body>
	<style>
	td {
	width: 64px;
	height: 56px;
	padding-top: 10px;
	border: 2px solid;
	float: left;
	text-align: center;
	font-weight: bolder;
	font-family: arial;
	font-size: 42px;
	}
	</style>
	<body>
	<script>
	// Tictactoe
	const rows = [];
	const players = ['X', 'O'];
	const gridSize = 4;
	const goal = 3;
	let turn = 0;

	function playMove(x, y) {
	rows[x][y].onclick = () => {};
	rows[x][y].innerHTML = players[turn];
	turn = turn === 0 ? 1 : 0;
	checkWinner();
	}

	function checkWinner() {
	let i;

	for (let player = 0; player < players.length; player++) {
	// Rows
	for (i = 0; i < gridSize; i++) {
	if (rowCompleted(rows[i], player)) return printVictory(players[player]);
	}
	// Columns
	for (i = 0; i < gridSize; i++) {
	if (rowCompleted(rows.map(row => row[i]), player)) return printVictory(players[player]);
	}
	// Diag
	for (i = 0; i < gridSize; i++) {
	let u = 0;
	if (rowCompleted(rows.map((row) => row[(u++ % gridSize)]), player)) return printVictory(players[player]);
	u--;
	if (rowCompleted(rows.map((row) => row[u-- % gridSize]), player)) return printVictory(players[player]);
	}
	}
	}

	function rowCompleted(casList, player) {
	return (casList.reduce(pointsReducer(players[player]), 0) === goal);
	}

	function printVictory(playerName) {
	document.body.innerHTML += `${playerName} won!`;
	}

	function pointsReducer(player) {
	return (acc, curr) => acc + ((curr.innerHTML === player) ? 1 : 0);
	}

	const res = document.createElement('table');
	for (let x = 0; x < gridSize; x++) {
	const row = document.createElement('tr');
	rows[x] = [];
	for (let y = 0; y < gridSize; y++) {
	const cas = document.createElement('td');
	rows[x][y] = cas;
	row.appendChild(cas);
	cas.onclick = playMove.bind(null, x, y);
	}
	res.appendChild(row);
	}
	document.body.appendChild(res);
	</script>
	</body>