Как сделать линию которая покаэет кто победил

делаю игру крестики нолики, логика работает но не могу сделать так, что когда кто то из игроков достигает 3х "Х" или "О", что бы там отображалась линия.

как это сделать пишу на тайпскрипте

вот этот код проверяет кто победил

    checkWinConditionPc(){
  const bool = this.arrayComputer[0];
  this.winArray.forEach(array => {

    const field1 = array[0];
    const field2 = array[1];
    const field3 = array[2];

    if (this.arrayComputer[array[0]] && this.arrayComputer[array[1]] && this.arrayComputer[array[2]]){
      console.log("Computerwin")
      alert(this.player2 + " WON");
      setTimeout(()=>{this.reload()}, 1000);
    }

  })
}

checkWinCondition() {
  const bool = this.arrayPlayer[0];

  this.winArray.forEach(array => {
    // [0, 1, 2]
    const feld1 = array[0];
    const feld2 = array[1];
    const feld3 = array[2];

    // if (false & 1 & 2)
    if (this.arrayPlayer[array[0]] && this.arrayPlayer[array[1]] && this.arrayPlayer[array[2]]) {
      console.log("Playerwin")
      this.dis.fill(true);
      alert(this.player + " WON")
     setTimeout(()=>{this.reload()}, 1000);
    }
  })
}

Ответы (1 шт):

Автор решения: SwaD

Я не мастер css и верстки, поэтому на пальцах. Идея такая: Создаете внутри вашего div такую конструкцию

<div class="inner">
    <div class="line"></div>
</div>

Примерные стили:

.inner {
    width: 90px;
    height: 5px;
    position: absolute;
    justify-content: center;
    align-items: center;
    display: flex;
}
.line {
    width: 90px;
    height: 5px;
    background-color: #0a58ca;
    border: 1px solid red;
    justify-content: center;
    align-items: center;
    z-index: 1;
}

Если выигрыш по горизонтали, делаете смещение в стиле line

margin-top: xxpx;

Так что бы линия съехала на нужную линию - поиграйтесь Если по горизонтали, добавляете к line стили

margin-left: xxpx;
transform: rotate(90deg);

Если по диагонали, то меняете width в классах по формуле(корень из суммы квадратов высоты и ширины вашего div)

width: XXXpx;
margin-top:YYYpx;
transform: rotate(45deg);

Сам div с классом inner делаете невидимым до появления победителя(что собственно логично)

→ Ссылка