<main class="main">

   <div class="title">
      <p></p>
   </div>

   <section class="frame">
      <div class="line">
         <label class="container">
            <input type="checkbox" name="00" class="column0 line0 diagonal0">
            <span class="checkmark"></span>
         </label>
         <label class="container">
            <input type="checkbox" name="01" class="column1 line0">
            <span class="checkmark"></span>
         </label>
         <label class="container">
            <input type="checkbox" name="02" class="column2 line0 diagonal1">
            <span class="checkmark"></span>
         </label>
      </div>
      <div  class="line">

         <label class="container">
            <input type="checkbox" name="10" class="column0 line1">
            <span class="checkmark"></span>
         </label>
         <label class="container">
            <input type="checkbox" name="11" class="column1 line1 diagonal0 diagonal1">
            <span class="checkmark"></span>
         </label>
         <label class="container">
            <input type="checkbox" name="12" class="column2 line1">
            <span class="checkmark"></span>
         </label>
      </div>
      <div  class="line">
         <label class="container">
            <input type="checkbox" name="20" class="column0 line2 diagonal1">
            <span class="checkmark"></span>
         </label>
         <label class="container">
            <input type="checkbox" name="21" class="column1 line2">
            <span class="checkmark"></span>
         </label>
         <label class="container">
            <input type="checkbox" name="22" class="column2 line2 diagonal0">
            <span class="checkmark"></span>
         </label>
      </div>
      <div class="line t2">
                    <button value="Refresh Page" disabled>Reset</button>
      </div>
   </section>
</main>
.line {
    float: left;
    clear: left;
}

.title {
    width: 100%;
    text-align: center;
}

.title p {
    font-size: 2em;
    font-family: monospace;
    font-weight: bold;
}

section.frame {
    width: 162px;
    margin: auto;
}

.t2 {
    margin-top: 2em;
    width: 100%;
}

button {
    font-family: monospace;
    font-size: 2em;
    font-weight: bold;
    width: 100%;
}

/* checkbox styling section */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.checkmark {
    float: left;
    border: 2px solid #fff;
    height: 50px;
    width: 50px;
    background-color: #eee;
}

.container:hover input ~ .checkmark {
  background-color: #ccc;
}

.container .victory:checked ~ .checkmark{
    background-color: #0F0 !important;
}

.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.container .p1 ~ .checkmark:after {
  left: 9px;
  top: -10px;
  position: relative;
  content: "\d7";
  font-size: 62px;
}

.container .p2 ~ .checkmark:after {
    left: 5px;
      top: -17px;
      position: relative;
      content: "\25cb";
      font-size: 68px;
}
/* checkbox styling section */
var matrix = new Matrix();
var player = new Player();

var boxes = document.querySelectorAll('input');
var p = document.querySelector('p');
p.textContent = "It's player "+player.getTurn()+"'s turn";
var button = document.querySelector('button');

for (i=0;i<boxes.length;i++) {
    boxes[i].addEventListener('click', function(event) {
        var result = matrix.check(this.name, player.turn);
        this.classList.add("p"+player.turn);
        if (Array.isArray(result)) {
            var keys = Object.keys(result);
            for (i=0;i<boxes.length;i++) {
                boxes[i].disabled = true;
            }
            p.textContent = "The player "+result["player"]+" has won!";
            button.disabled = false;

            var victory = document.querySelectorAll('.'+keys[0]+result[keys[0]]);

            for (i=0;i<victory.length;i++) {
                victory[i].classList.add("victory");
            }
            return true;
        }

        this.disabled = true;
        player.play();
        if (player.round == 9) {
            p.textContent = "No more moves!";
            button.disabled = false;
        } else {
            p.textContent = "It's player "+player.getTurn()+"'s turn";
        }
    });
}

button.addEventListener('click', function(event) {
    this.preventDefault;
    reset();
})

function reset() {
    for (i=0;i<boxes.length;i++) {
        boxes[i].checked = false;
        boxes[i].disabled = false;
        boxes[i].classList.remove('p1');
        boxes[i].classList.remove('p2');
        boxes[i].classList.remove('victory');
        button.disabled = true;
    }

    matrix = new Matrix();
    player = new Player();

    p.textContent = "It's player "+player.getTurn()+"'s turn";
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdn.jsdelivr.net/gh/iagocalazans/tic-tac-toe-matrix@latest/js/Matrix.js
  2. https://cdn.jsdelivr.net/gh/iagocalazans/tic-tac-toe-matrix@51e9b09/js/Player.js