JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Tic Tac Toe - Click Start</title>
<!-- Style-->
<link type="text/css" rel="stylesheet" href="ttt.css" />
<link rel="stylesheet" href="fonts/stylesheet.css" type="text/css" charset="utf-8" />
<!-- get jQuery from the google apis -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.js"></script>
<script type="text/javascript" src="http://localhost:8080/socket.io/socket.io.js"></script>
<script type="text/javascript" src="js/misc.js"></script>
<script type="text/javascript">
gameId = getParameterByName('id');
var socket = io('http://localhost:8080');
username = "user3";
// Exists Room?
socket.emit('existsRoom', {id: gameId});
// If doesn't exists, redirect.
socket.on('kill', function(){
alert("Room doesnt exists");
window.location.href="http://localhost/trs/"
});
// User has entered the to the room.
socket.emit('enterGame', {rId: gameId, user: username});
socket.on('getRoomInfo', function(data){
roomInfo = data.room;
console.log(roomInfo);
$('#roomName').html(roomInfo[0]);
$('#bet').html(roomInfo[5]);
$('#player1').html(roomInfo[1]);
if(roomInfo[3] != "") $('#player2').html(roomInfo[3]);
});
function ready(){
socket.emit('prepared', {id: gameId});
$('#readyB').hide();
}
socket.on('gameReady', function(){
$('#readyB').removeClass('start').addClass('game');
$("#readyB").prop("onclick", null);
$('#readyB').show();
$('.p').show();
$('.gamearea').show();
$('#info').html("Game is ready, you can now play!");
});
function addClick(y, x){
socket.emit('addClick', {id: gameId, y: y, x: x, user:...