Изменить цвет текста выигрышной линии

Question

Итак, я работаю над игрой JS ti c ta c toe. Он в значительной степени готов к go, последнее, что я хочу сделать, это изменить цвет текста выигрышной строки, но я не могу найти способ получить точную содержащуюся выигрышную линию, чтобы затем изменить цвет текста.

Вот код для моих условий выигрыша:

function findCell(x) {
  return document.getElementById("cell" + x).innerText;
}

function checkLine(x, y, z, letter) {
  var triple = false;

  if (findCell(x) == letter && findCell(y) == letter && findCell(z) == letter) {
    triple = true;
  }
  return triple;
}

function victory(letter) {

  var winner = false;

  if (checkLine(1, 2, 3, letter) ||
    checkLine(4, 5, 6, letter) ||
    checkLine(7, 8, 9, letter) ||

    checkLine(1, 4, 7, letter) ||
    checkLine(2, 5, 8, letter) ||
    checkLine(3, 6, 9, letter) ||

    checkLine(1, 5, 9, letter) ||
    checkLine(3, 5, 7, letter)) {
    winner = true;
  }
  return winner;
}   

У меня также есть функция для изменения цвета, я просто не знаю, где его применить

var lettercolor = [0, 0, 0];
var color = ["red"]

function changeColor(i) {
  lettercolor[i] = (lettercolor[i] + 1) % color.length;
  document.getElementById( ? ? ? ? ? ).style.color = color[lettercolor[i]];
}

Кроме того, я не хочу никаких jQuery вещей ... Я хочу сделать эту простую ваниль JS.

Answer 1

Поскольку в checkLine вы найдете тройки, вы можете выделить все такие ячейки в этой функции, если тройка найдена, итерируя по параметрам ячейки x y z:

function checkLine(x, y, z, letter) {
  const cells = [x, y z].map(num => document.getElementById("cell" + num));
  if (cells.every(cell => cell.textContent === letter)) {
    for (const cell of cells) {
      cell.style.color = 'red';
    }
    return true;
  }
}

Answer 2

Просто разделите ваш оператор if на разные выигрышные наборы. Затем, после возврата логического значения winner, вы можете применить стили.

function victory(letter) {
    if (checkLine(1, 2, 3, letter)) {
        changeWinnerColors([1, 2, 3]);
        return true;
    }
    // Check your other combinations...

    // If no combination matches, thereis no winner
    return false;
}

function changeWinnerColors(cells) {
    for(var cell of cells)
        changeColor(cell);
}

function changeColor(i) {
    lettercolor[i] = (lettercolor[i] + 1) % color.length;
    document.getElementById(`cell${i}`).style.color = color[lettercolor[i]];
}