JSFiddle - React, Tailwind, and code Playground

HTML

<h1 id="title">
 Puissance 4
</h1>
<div id="mosaique">
  <table id="tab" width="70%" cellspacing="0" CELLPADDING="0">
    <tr>
      <td><img src="img/vide.gif" /><img src="img/vide.gif" /><img src="img/vide.gif" /><img src="img/vide.gif" /><img src="img/vide.gif" /><img src="img/vide.gif" /><img src="img/vide.gif" /></td>
    </tr>
    <tr>
      <td><img src="img/vide.gif" \><img src="img/vide.gif" \><img src="img/vide.gif" \><img src="img/vide.gif" \><img src="img/vide.gif" \><img src="img/vide.gif" \><img src="img/vide.gif" \></td>
    </tr>

    <tr>
      <td><img src="img/vide.gif" \><img src="img/vide.gif" \><img src="img/vide.gif" \><img src="img/vide.gif" \><img src="img/vide.gif" \><img src="img/vide.gif" \><img src="img/vide.gif" \></td>
    </tr>

    <tr>
      <td><img src="img/vide.gif" \><img src="img/vide.gif" \><img src="img/vide.gif" \><img src="img/vide.gif" \><img src="img/vide.gif" \><img src="img/vide.gif" \><img src="img/vide.gif" \></td>
    </tr>

    <tr>
      <td><img src="img/vide.gif" \><img src="img/vide.gif" \><img src="img/vide.gif" \><img src="img/vide.gif" \><img src="img/vide.gif" \><img src="img/vide.gif" \><img src="img/vide.gif" \></td>
    </tr>

    <tr>
      <td><img src="img/vide.gif" \><img src="img/vide.gif" \><img src="img/vide.gif" \><img src="img/vide.gif" \><img src="img/vide.gif" \><img src="img/vide.gif" \><img src="img/vide.gif" \></td>
    </tr>



  </table>
</div>
<br \>
<p id="couleur"> C'est au tour du joueur 1 (rouge) </p>

<!-- Ce code permet de rafraichir la page, et donc le jeu -->
<input type="button" value="Recommencer" name="btnActualiser" onclick="document.location.reload(); return false;" />

<p> Changer la couleur du plateau</p>
<form>
  <select name="liste1" size="1" id="select">
    <option id="Vide">Vide</option>
    <option id="Bleu">Bleu</option>
    <option id="Rouge">Rouge</option>
    <option id="Vert">Vert</option>
  </select>
</form>

CSS

img { width: 32px; height: 32px; border: 1px solid black; }
img[src~="img/vide.gif"] {
  background: black;
}
img[src~="img/rouge.gif"] {
  background: red;
}
img[src~="img/jaune.gif"] {
  background: yellow;
}
img[src~="img/green.gif"] {
  background: green;
}
img[src~="img/blue.gif"] {
  background: blue;
}
img[src~="img/red.gif"] {
  background: #cc0000;
}

JavaScript

// /!\ Ce document s'adapte a la page HTML, si vous ajoutez des cases dans le jeu
// /!\ cela sera pris en compte automatiquement :) !! 

//La balise HTML table
var table = document.getElementById("tab");
//Les balises img de la table
var tableImg = table.getElementsByTagName("img");

var path = "http://test.progysm.com:82/irc/puissance4/";
var srcVide = path + "vide.gif";

// Le nombre de colonne de la table
var nbX = table.getElementsByTagName("tr")[0].getElementsByTagName("img").length;
// Le nombre de ligne de la table 
var nbY = table.getElementsByTagName("tr").length;

var couleurdujoueur = true;

//abscisse de l'image qui vient d'être cliquée, mis a jour par calculatePosition(). 
var x; // /!\ de 0 a nbX-1
//ordonnée de l'image qui vient d'être cliquée, mis a jour par calculatePosition().
var y; // /!\ de 0 a nbY-1

var matrice = nouvelleMatrice();
var canPlay = true;

function nouvelleMatrice() {
  var matrice = [];
  for (var i = 0; i < nbX; i++) {
    matrice[i] = [];
    for (var j = 0; j < nbY; j++) {
      matrice[i][j] = "vide";
    }
  }
  return matrice;
}


// /!\ Calcul et met dans les variables globales x et y la position en absisse/ordonné suivant le numéro de l'image
function calculatePosition(num) {
  x = 0;
  y = 0;
  while (num >= nbX) {
    y++;
    num -= nbX;
  }
  x = num;
}
function getNum(x, y) { return y * nbX + x; }

function setTitle(t) {
	document.getElementById('title').innerHTML = t;
}

function gagner(x,y,couleur,cases) {
	cases.push(getNum(x,y));
  setTitle("VOUS AVEZ GAGNÉE " + couleur);
  
  var flash = false;
  var cnt = 10;
  function f() {
		var src = flash ? path+couleur+".gif" : srcVide;
    flash = !flash;
    cnt--;
  	cases.forEach(function(n) {
    	tableImg[n].src = src;
    })
    if (cnt) {
    	setTimeout(f, 100);
    }
  }
  f();
}

function clickCase(event) {
	if (!canPlay) return;
  // /!\ On veux savoir sur quelle image on a cliquée parmis tous les images de tableImg
  var num = 0;
  for (; num <...