JSFiddle - React, Tailwind, and code Playground

by samonela

HTML

<center>
<br/>
<div style="font-family:Arial,sans-serif; font-size:14pt; font-weight:bold; color: black" id="p1">Velkommen til fire på stribe</div><br/>
<div style="font-family:Arial,sans-serif; font-size:14pt; font-weight:bold; color: blue" id="spiller1"></div>
<div style="font-family:Arial,sans-serif; font-size:14pt; font-weight:bold; color: red" id="spiller2"></div><br/>
<button id = "col1" > - - 1 - -</button>
<button id = "col2"> - - 2 - -</button>
<button id = "col3"> - - 3 - -</button>
<button id = "col4"> - - 4 - -</button>
<button id = "col5"> - - 5 - -</button>
<button id = "col6"> - - 6 - -</button>
<button id = "col7"> - - 7 - -</button><br>
<canvas id="mycanvas" width="420" height="420"></canvas>
</center>
<center><button style="border-radius:16px; background-color: antiquewhite" id="restart">Genstart spillet</button></center><br/>

CSS

button[id^='col'] {
  background-color: antiquewhite; border-radius: 16px;
}

JavaScript

console.log('loeading JS');
let context = document.getElementById("mycanvas").getContext('2d');
console.log('context',context);
context.fillStyle = "antiqueWhite";
context.fillRect(0,0,420,375);

let col = 7; 
let row = 6; 
let x = 28; 
let y = 35; 
let r = 25; 
let activePlayer =1;

/*let column0 = [0,0,0,0,0,0];
let column1 = [0,0,0,0,0,0];
let column2 = [0,0,0,0,0,0];
let column3 = [0,0,0,0,0,0];
let column4 = [0,0,0,0,0,0];
let column5 = [0,0,0,0,0,0];
let column6 = [0,0,0,0,0,0];*/
const columns = new Array(7).fill('');
columns.forEach(function(column, index) {
	columns[index] = [0,0,0,0,0,0];
});

console.log('columns', columns);

//Players:
let name1 = prompt("Indtast spiller 1's navn:");
document.getElementById("spiller1").innerHTML = "Spiller 1: " + name1;

let name2 = prompt("Indtast spiller 2's navn:");
document.getElementById("spiller2").innerHTML = "Spiller 2: " + name2;

drawBoard();

//-------Functions--------

function drawBoard() {
    for(let i = 0; i < col ; i++){
        for (let j = 0 ; j < row ; j++){
            drawCircle(x + i *60, y + j*60, r);
            context.strokeStyle = "black";
            context.stroke();
            context.fillStyle = "white";
            context.fill();
        }
    }
}
document.addEventListener('click', function(event) {
  if(event.target.id === 'restart') {
    reloadPage();
  }
	else if (event.target.id.substr(0, 3) === 'col') { //could also use data-attributes
  	var parts = event.target.id.split('col');
    putPieceInColumnNo(parts[1] - 1);
  }
});

function putPieceInColumnNo(no){
    let activeColumn = columns[no];
    let height = 0;

    for (let i = 0 ; i < activeColumn.length ; i++){
        if (activeColumn[i] === 0){
            activeColumn[i] = activePlayer;
            drawPieceAt(no,5-i,activePlayer);
            height = i;
            i = activeColumn.length
        }
    }
    let winner = checkWinnerVertical(activePlayer,no);
    if (winner===true){
        publishWinner();
    }
   ...