JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
 <body>
    <div class="container-fluid">
          <button class="btn btn-primary btn-lg btn-block" id="start">GO !</button>

          <div class="affiche" id="j1Affichage"></div>

          <div class="affiche" id="j2Affichage"></div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>

CSS

.plateau{
	background-color: #F0F0F0;
	border-style: solid;
	border-width:1px;
	width: 30em;
	height: 30em;
	border-style: solid;
	border-width:1px;
	margin: 0 auto;
	clear:left;
}

.affiche{
	display: block;
	margin: 0 auto;
	width: 30em;
}
/*case porte-avion*/
.casePA{
	background-image: url("../img/pa.png");
}
/*case croiseur*/
.caseCR{
	background-image: url("../img/cr.png");
}
/*case contre-torpilleur*/
.caseCT{
	background-image: url("../img/ct.png");
}
/*case sous-marin*/
.caseSM{
	background-image: url("../img/sm.png");
}
/*case torpilleur*/
.caseTO{
	background-image: url("../img/to.png");
}
/*case manquée*/
.caseMQ{
	background-image: url("../img/mq.png");
}
/*case touchée*/
.caseTC{
	background-image: url("../img/tc.png");
}
/*case coulée*/
.caseCL{
	background-image: url("../img/cl.png");
}
/*case recherche*/
.caseRE{
	background-image: url("../img/re.png");
}

#start {
 	margin-bottom: 15px;
 }

body {
	background-color: #E4F1FE;
}

table {
	float: left;
}

td { 
 border-width:1px;
 border-style:solid; 
 width:10%;
 }

 tr { 
 border-width:1px;
 border-style:solid;
 height:10%;
 }

JavaScript

var casePA 	="casePA";
var caseCR 	="caseCR";
var caseCT 	="caseCT";
var caseSM 	="caseSM";
var caseTO 	="caseTO";
var caseVD 	="caseVD";
var numJ	=1;


function Bateau(nom, taille, nomClass, nomJoueur)
{	 
	this.nom		= nom;
	this.taille		= taille;
	this.className 	= nomClass;
	this.proprio	= nomJoueur;
	this.statut		= false;
	this.positionX	= null;
	this.positionY	= null;
	this.direction	= null;

	Bateau.prototype.verifPlacement = function(positionX, positionY, direction) {
		if (direction == "gauche") {
			if (this.taille - positionY < 0) {
				return 0;
			}else {
				this.positionX	= positionX;
				this.positionY	= positionY;
				this.direction	= direction;
				return 1;
			}
		}else if (direction == "droite") {
			if (this.taille + positionY > 10) {
				return 0;
			}else{
				this.positionX	= positionX;
				this.positionY	= positionY;
				this.direction	= direction;
				return 1;
			}
		}else if (direction == "haut") {
			if (this.taille - positionX < 0) {
				return 0;
			}else {
				this.positionX	= positionX;
				this.positionY	= positionY;
				this.direction	= direction;
				return 1;
			}
		}else if (direction == "bas"){
			if (this.taille + positionX > 10) {
				return 0;
			}else {
				this.positionX	= positionX;
				this.positionY	= positionY;
				this.direction	= direction;
				return 1;
			}
		}else if (direction == "vide"){
			this.positionX	= positionX;
			this.positionY	= positionY;
			this.direction	= direction;
			return 1;
		}			
	};

}

var Grille = function (nom) {
	this.plateau	= [new Array(10), new Array(10), new Array(10), new Array(10), new Array(10), new Array(10), new Array(10), new Array(10), new Array(10), new Array(10)];
	this.nom 		= nom;
}

var Joueur = function (nomJoueur) {

	this.nom			= nomJoueur;
	this.ship1			= new Bateau("Porte-avion", 5, casePA, this.nom);
	this.ship2			= new Bateau("Croiseur", 4, caseCR, this.nom);
	this.ship3			= new Bateau("Contre-torpilleur", 3, caseCT, this.nom);
	this.ship4			= new...