JavaScript Vier Gewinnt

by Sebastian Kay

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/5.3.1/darkly/bootstrap.min.css">
<div id="gameOuterWrapper" class="container-fluid d-flex justify-content-center align-items-center">
  <div id="gameBoard" class="d-flex">
    <div class="d-flex flex-column" data-row="0">
      <div class="row-toggle">
        <div class="disc player1" style="transition-duration: 0.6s"> </div>
      </div>
      <div class="cell" data-column="0"></div>
      <div class="cell" data-column="1"></div>
      <div class="cell" data-column="2"></div>
      <div class="cell" data-column="3"></div>
      <div class="cell" data-column="4"></div>
      <div class="cell" data-column="5"></div>
    </div>
    <div class="d-flex flex-column" data-row="1">
      <div class="row-toggle">
        <div class="disc player1" style="transition-duration: 0.6s"> </div>
      </div>
      <div class="cell" data-column="0"></div>
      <div class="cell" data-column="1"></div>
      <div class="cell" data-column="2"></div>
      <div class="cell" data-column="3"></div>
      <div class="cell" data-column="4"></div>
      <div class="cell" data-column="5"></div>
    </div>
    <div class="d-flex flex-column" data-row="2">
      <div class="row-toggle">
        <div class="disc player1" style="transition-duration: 0.6s"> </div>
      </div>
      <div class="cell" data-column="0"></div>
      <div class="cell" data-column="1"></div>
      <div class="cell" data-column="2"></div>
      <div class="cell" data-column="3"></div>
      <div class="cell" data-column="4"></div>
      <div class="cell" data-column="5"></div>
    </div>
    <div class="d-flex flex-column" data-row="3">
      <div class="row-toggle">
        <div class="disc player1" style="transition-duration: 0.6s"> </div>
      </div>
      <div class="cell" data-column="0"></div>
      <div class="cell" data-column="1"></div>
      <div class="cell" data-column="2"></div>
      <div class="cell"...

CSS

#gameOuterWrapper {
  --border-size: 14px;
  height: 100vh;
  overflow: hidden;
  transition: background 0.6s;

  --cell-around-bg: hsl(240, 16%, 19%);

}

#gameOuterWrapper.player1 {
  background: var(--p1-bgColor) !important;
}

#gameOuterWrapper.player2 {
  background: var(--p2-bgColor) !important;
}


#gameBoard {
  position: relative;
  width: 500px;
  min-height: 300px;
  border: var(--border-size) solid hsl(240, 16%, 9%);
  border-radius: var(--border-size) var(--border-size) 0 0;
  background-color: hsl(240, 16%, 14%);
}

#gameBoard:before {
  position: absolute;
  top: calc(0px - var(--border-size));
  content: "";
  height: var(--border-size);
  width: 100%;
  background-color: hsl(240, 16%, 9%);
  z-index: 30;
}

[data-row] {
  position: relative;
}

.cell {
  position: relative;
  /*background: radial-gradient(circle, transparent 0%, transparent 60%, rgba(0, 212, 255, 1) 60%, rgba(0, 212, 255, 1) 100%);*/
  background: radial-gradient(circle, transparent 0%, transparent 60%, var(--cell-around-bg) 60%, var(--cell-around-bg) 100%);
  z-index: 21;
}

.cell[data-player="1"] {
  background: radial-gradient(circle, var(--p1-cellColor) 0%, var(--p1-cellColor) 50%, var(--p1-cellBorderColor) 50%, var(--p1-cellBorderColor) 60%, var(--cell-around-bg) 60%, var(--cell-around-bg) 100%);
}

.cell[data-player="2"] {
  background: radial-gradient(circle, var(--p2-cellColor) 0%, var(--p2-cellColor) 50%, var(--p2-cellBorderColor) 50%, var(--p2-cellBorderColor) 60%, var(--cell-around-bg) 60%, var(--cell-around-bg) 100%);
}

.row-toggle {
  position: absolute;
  z-index: 20;
}

.row-toggle:hover .disc {
  visibility: visible;
}

.disc {
  position: relative;
  visibility: hidden;
  top: 0;
  transition-property: top;
  /*transition: top 0.5s;*/
  pointer-events: none;
}

.row-toggle:hover .disc:hover,
[data-row]:hover .disc,
.disc.show {
  visibility: visible;
}

#gameOuterWrapper.player1 .disc {
  background: radial-gradient(circle, var(--p1-cellColor) 0%,...

JavaScript

const player1 = {
  id: 1,
  name: "Blau",
  winns: 0,
  cellColor: "hls(190°, 88%, 29%)",
  cellBorderColor: "hls(190°, 88%, 20%)",
  bgColor: "hls(190°, 40%, 40%)"
};
const player2 = {
  id: 2,
  name: "Gelb",
  winns: 0,
  cellColor: "hls(70°, 88%, 40%)",
  cellBorderColor: "hls(70°, 88%, 20%)",
  bgColor: "hls(70°, 44%, 40%)"
};
const StartPlayerNumber = Math.floor(Math.random() * 2 + 1);
const gameBoard = document.getElementById("gameBoard");
const gameOuterWrapper = document.getElementById("gameOuterWrapper");
gameOuterWrapper.style.cssText = "--p1-cellColor: hsl(190 88% 29%); --p1-cellBorderColor: hsl(190 88% 20%); --p1-bgColor: hsl(190 40% 40%); --p2-cellColor: hsl(70 88% 40%); --p2-cellBorderColor: hsl(70 88% 20%); --p2-bgColor: hsl(70 44% 40%);";


function createGameboard() {
  (StartPlayerNumber == 1) ? currentPlayer = player1: currentPlayer = player2;
  gameBoard.querySelectorAll("[data-row]").forEach(function(_) {
    if (gameOuterWrapper.classList.contains("player1")) gameOuterWrapper.classList.remove("player1");
    if (gameOuterWrapper.classList.contains("player2")) gameOuterWrapper.classList.remove("player2");
    gameOuterWrapper.classList.add("player" + currentPlayer.id);
    _
    //_.style.backgroundColor = "#ff00ff";
    _.style.width = gameBoard.clientWidth / 7 + "px";
  });
  gameBoard.querySelectorAll(".cell").forEach(function(_) {
    _
    //_.style.backgroundColor = "#ddd";
    _.style.width = gameBoard.clientWidth / 7 + "px";
    _.style.height = gameBoard.clientWidth / 7 + "px";
  });

  gameBoard.querySelectorAll(".row-toggle").forEach(function(_) {
    _.style.width = gameBoard.clientWidth / 7 + "px";
    _.style.height = gameBoard.clientWidth / 7 * 7 + "px";
    _.style.top = "-" + gameBoard.clientWidth / 7 + "px";
    _.querySelector(".disc").style.width = gameBoard.clientWidth / 7 + "px";
    _.querySelector(".disc").style.height = gameBoard.clientWidth / 7 + "px";
  });
}

function onRowToggleClick(event) {
  const rowToggle =...