JSFiddle - React, Tailwind, and code Playground

by Ccile

HTML

<div id='table'>
		</div>
		<div id='text'>
			<p>
				Placez les cellules vivantes en cliquant sur les cases ou en choisissant le placement aléatoire, puis lancez le jeu.
			</p>
			<p id='alea_li'>
			</p>
		</div>
		<button id="button">Lancer</button>
		<button id='stop'>Stop</button>
		<button id='alea'>Aléatoire</button>
		<button id="clear">Mise à zéro</button>

CSS

#game 
{
    border-collapse: separate;
    border: 1px solid #000;
}

#game td 
{
    width: 4px;
    height: 4px;
    border: 1px solid #ccc;
    background: #fff;
    -webkit-border-radius: 2px;/*Pour d'anciens navigateurs, for old browser*/
    -moz-border-radius: 2px;/*P.A.N., F.O.B.*/
    border-radius: 2px;
}

#game td.alive{
    background: #000;
}

#text
{
	position:absolute;
	left:77%;
	top:5%;
}

JavaScript

/*fonctions à réutiliser sans modification*/

/*fonction qui gère la rétrocompatibilité*/
function addEvent(element,event,func,bool)
{
	bool=bool||true;
	element.addEventListener? element.addEventListener(event,func,bool):element.attachEvent('on'+event,func);/*P.A.N./F.O.B.*/
}

/*crée une matrice à line ligne, col colonnes et dont chaque case à la valeur value*/
function makeMatrix(line,col,value)
{
	var tab=new Array(line);
	
	for(var i=0;i<line;i++)
	{
		tab[i]=new Array(col);
		for(var j=0;j<col;j++)
		{
			tab[i][j]=value;
		}
	}
	
	return tab;
}

				/*fonctions pour le jeu*/
function changeColor(e)
{
	if(!game_started)
	{
		var current_td=e.target||e.srcElement,/*P.A.N./F.O.B.*/
			current_class=current_td.className,
			current_tr=current_td.parentNode,
			i=current_tr.rowIndex,
			j=current_td.cellIndex;
	
		current_td.className=(current_class=="")?"alive":"";
		tab[i+1][j+1]=!tab[i+1][j+1];
	}
}

function changeTextButton()
{
	var text=button.innerHTML;
	
	button.innerHTML=(text=="Lancer")?"Modifier":"Lancer";
	game_started=!game_started;
	if(game_started)
	{
		game();
	}
}

function textAlea()
{
	var p=document.getElementById('alea_li'),
		ul=document.createElement('ul'),
		li=[	document.createElement('li'),
				document.createElement('li'),
				document.createElement('li')
			],
		button_tab=[	document.createElement('button'),
						document.createElement('button'),
						document.createElement('button'),
					],
		text_p=document.createTextNode('Choisissez le taux de population :'),
		button_text=[	document.createTextNode('Faiblement : 25%'),
						document.createTextNode('Moyennement : 50%'),
						document.createTextNode('Fortement : 75%')
					];
			
		
		for(var...