<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h2>Current Player: <span id="currentPlayer"></span></h2>
<div class="grid"></div>
<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
<script src="script.js"></script>
</body>
</html>
var currentRow = 0;
var currentCol = 0;
var currentCell = 0;
for(var i = 0; i < (7*7); i++){
if(i == 0){
$(".grid").append("<div class='cell'></div>")
} else if(i > 0 && i < 7){
$(".grid").append("<div class='cell col-head' data-col-id='" + i + "'></div>");
} else if (i % 7 == 0){
currentRow++;
$(".grid").append("<div class='cell row-head' data-row-id='" + currentRow + "'></div>");
} else {
currentCol++;
currentCell++
$(".grid").append("<div class='cell play-cell' data-cell-id='" + currentCell + "' data-row-id='" + currentRow + "' data-col-id='" + currentCol + "'></div>");
if(currentCol % 6 == 0) currentCol = 0;
}
}
var winners = [];
var firstWin = Math.floor(Math.random() * 36);
if(firstWin == 0) firstWin++;
var secondWin, thirdWin, fourthWin = 0;
if($("div[data-cell-id=" + firstWin + "]").attr("data-col-id") == 6){
secondWin = firstWin-1;
} else {
secondWin = firstWin+1;
}
if($("div[data-cell-id=" + firstWin+ "]").attr("data-row-id") == 6){
thirdWin = firstWin - 6;
fourthWin = secondWin - 6;
} else {
thirdWin = firstWin + 6;
fourthWin = secondWin + 6;
}
winners.push(firstWin, secondWin, thirdWin, fourthWin);
console.log(winners);
for(var i = 0; i < 4; i++) {
$("div[data-cell-id=" + winners[i] + "]").addClass("bggreen")
}
$(".cell").click(function(e) {
console.log("cell: " + $(this).data("cell-id"));
console.log("row: " + $(this).data("row-id"));
console.log("col: " + $(this).data("col-id"));
})
html body{
min-height: 100vh;
background-color: blue;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.grid{
width: 640px;
height: 640px;
display: grid;
grid-template-columns: repeat(7, 1fr);
grid-template-rows: repeat(7, 1fr);
grid-gap: 10px;
}
.cell{
background-color: #fff;
}
.cell:nth-child(1){
background-color: blue;
}
.bggreen{
background-color: green;
}
.row-head{
background: none;
border-top: 42px solid transparent;
border-bottom: 42px solid transparent;
border-left: 50px solid white;
}
.col-head{
background: none;
border-top: 50px solid white;
border-right: 42px solid transparent;
border-left: 42px solid transparent;
}
