// @ts-ignore
import { Component, OnInit } from '@angular/core';
import { count } from 'rxjs';
@Component({
selector: 'app-root',
template: `
<div id="statusArea" className="status">
Next player: <span>{{ nextPlayer }}</span>
</div>
<div id="winnerArea" className="winner">
Winner: <span [[Link]]="winner ? 'winner' : ''">{{ winner }}</span>
</div>
<button (click)="resetGame()" class="button">Reset</button>
<section style="margin-top:10px">
<div class="row" *ngFor="let row of [1, 2, 3]">
<button
*ngFor="let col of [1, 2, 3]"
(click)="play(col, row)"
class="square"
style="width:40px;height:40px;position:relative"
>
<span
class="span"
style="position:absolute; left: 0;
right: 0;
margin:auto"
>{{ arrayPlayers[row - 1][col - 1] }}</span
>
</button>
</div>
</section>
`,
styles: [
`
.winner {
color: white;
font-size: 15px;
font: bold;
background: green;
padding: 5px;
border-radius: 5px;
}
#winnerArea {
margin-top: 5px;
}
.span {
font-size: 15px;
}
`,
],
})
export class AppComponent implements OnInit {
// code goes here
public arrayPlayers: String[][] = [[], [], []];
public newPlayer = <any[]>[];
public winner: string = '';
nextPlayer = <any[]>['X'];
ngOnInit() {}
play(col: any, row: any) {
[Link] = [Link](-1);
if ([Link][0] === 'X') {
if ([Link][row - 1][col - 1]) {
[Link] = ['O'];
return;
}
[Link][row - 1][col - 1] = 'O';
[Link] = ['X'];
} else {
if ([Link][row - 1][col - 1]) {
[Link] = ['X'];
return;
}
[Link][row - 1][col - 1] = 'X';
[Link] = ['O'];
}
for (let i = 0; i < [Link]; i++) {
if (
[Link][i][0] === 'X' &&
[Link][i][1] === 'X' &&
[Link][i][2] === 'X'
) {
[Link] = 'X Winner';
}
if (
[Link][i][0] === 'O' &&
[Link][i][1] === 'O' &&
[Link][i][2] === 'O'
) {
[Link] = 'O Winner';
}
for (let j = 0; j <= [Link][i].length; j++) {
if (
[Link][0][j] === 'X' &&
[Link][1][j] === 'X' &&
[Link][2][j] === 'X'
) {
[Link] = 'X Winner';
}
if (
[Link][0][j] === 'O' &&
[Link][1][j] === 'O' &&
[Link][2][j] === 'O'
) {
[Link] = 'O Winner';
}
if (
([Link][0][j] === 'X' &&
[Link][1][j + 1] === 'X' &&
[Link][2][j + 2] === 'X') ||
([Link][0][j + 2] === 'X' &&
[Link][1][j + 1] === 'X' &&
[Link][2][j] === 'X')
) {
[Link] = 'X Winner';
}
if (
([Link][0][j] === 'O' &&
[Link][1][j + 1] === 'O' &&
[Link][2][j + 2] === 'O') ||
([Link][0][j + 2] === 'O' &&
[Link][1][j + 1] === 'O' &&
[Link][2][j] === 'O')
) {
[Link] = 'O Winner';
}
}
}
[Link]([Link][row - 1][col - 1]);
}
resetGame() {
[Link] = [];
[Link] = [[], [], []];
[Link] = '';
}
}