Tic Tac Toe

class TicTacToeApp extends App{
	
	cells = [``, ``, ``, ``, ``, ``, ``, ``, ``]
	
	nextTurn = `X`
	
	reset(){
		a.cells = [``, ``, ``, ``, ``, ``, ``, ``, ``]
		a.nextTurn = `X`
	}
	
	placeNextInCell(cellIndex){
		a.cells[cellIndex] = a.nextTurn
		if(a.nextTurn == `X`){
			a.nextTurn = `O`
		}else{
			a.nextTurn = `X`
		}
	}
	
	createStartPage(){
		return StartPage
	}
	
	hasGameStarted(){
		
		if(a.cells[0] != ``){
			return true
		}
		
		if(a.cells[1] != ``){
			return true
		}
		
		if(a.cells[2] != ``){
			return true
		}
		
		if(a.cells[3] != ``){
			return true
		}
		
		if(a.cells[4] != ``){
			return true
		}
		
		if(a.cells[5] != ``){
			return true
		}
		
		if(a.cells[6] != ``){
			return true
		}
		
		if(a.cells[7] != ``){
			return true
		}
		
		if(a.cells[8] != ``){
			return true
		}
		
		return false
		
	}
	
	getWinner(){
		
		// First row.
		if(a.cells[0] != `` && a.cells[0] == a.cells[1] && a.cells[1] == a.cells[2]){
			return a.cells[0]
		}
		
		// Second row.
		if(a.cells[3] != `` && a.cells[3] == a.cells[4] && a.cells[4] == a.cells[5]){
			return a.cells[3]
		}
		
		// Third row.
		if(a.cells[6] != `` && a.cells[6] == a.cells[7] && a.cells[7] == a.cells[8]){
			return a.cells[6]
		}
		
		// First column.
		if(a.cells[0] != `` && a.cells[0] == a.cells[3] && a.cells[3] == a.cells[6]){
			return a.cells[0]
		}
		
		// Second column.
		if(a.cells[1] != `` && a.cells[1] == a.cells[4] && a.cells[4] == a.cells[7]){
			return a.cells[1]
		}
		
		// Third column.
		if(a.cells[2] != `` && a.cells[2] == a.cells[5] && a.cells[5] == a.cells[8]){
			return a.cells[2]
		}
		
		// Diagonal top left to bottom right.
		if(a.cells[0] != `` && a.cells[0] == a.cells[4] && a.cells[4] == a.cells[8]){
			return a.cells[0]
		}
		
		// Diagonal top right to bottom left.
		if(a.cells[2] != `` && a.cells[2] == a.cells[4] && a.cells[4] == a.cells[6]){
			return a.cells[2]
		}
		
		return ``
		
	}
	
	isGameOver(){
		
		if(a.getWinner() != ``){
			return true
		}
		
		if(a.cells[0] == ``){
			return false
		}
		
		if(a.cells[1] == ``){
			return false
		}
		
		if(a.cells[2] == ``){
			return false
		}
		
		if(a.cells[3] == ``){
			return false
		}
		
		if(a.cells[4] == ``){
			return false
		}
		
		if(a.cells[5] == ``){
			return false
		}
		
		if(a.cells[6] == ``){
			return false
		}
		
		if(a.cells[7] == ``){
			return false
		}
		
		if(a.cells[8] == ``){
			return false
		}
		
		return true
		
	}
	
}

class StartPage extends Page{
	
	createButton(cellIndex){
		return Button
			.keepIf(a.cells[cellIndex] == `` && a.getWinner() == ``)
			.size(1)
			.border(1, `black`)
			.text(a.nextTurn)
			.onClick(a.placeNextInCell, cellIndex)
	}
	
	createText(cellIndex){
		return Text
			.keepIf(a.cells[cellIndex] != `` || a.getWinner() != ``)
			.size(1)
			.text(a.cells[cellIndex])
	}
	
	createGui(){
		return Rows.padding(1).children(
			Text.text(`Tic Tac Toe!`).padding(5),
			Box.size(1).aspectRatio(1, 1).child(
				Rows.backgroundColor(`red`).border(1, `black`).children(
					Box.height(1),
					Columns.size(1).children(
						Box.width(1),
						p.createButton(0),
						p.createText(0),
						Box.width(1),
						p.createButton(1),
						p.createText(1),
						Box.width(1),
						p.createButton(2),
						p.createText(2),
						Box.width(1),
					),
					Box.height(1),
					Columns.size(1).children(
						Box.width(1),
						p.createButton(3),
						p.createText(3),
						Box.width(1),
						p.createButton(4),
						p.createText(4),
						Box.width(1),
						p.createButton(5),
						p.createText(5),
						Box.width(1),
					),
					Box.height(1),
					Columns.size(1).children(
						Box.width(1),
						p.createButton(6),
						p.createText(6),
						Box.width(1),
						p.createButton(7),
						p.createText(7),
						Box.width(1),
						p.createButton(8),
						p.createText(8),
						Box.width(1),
					),
					Box.height(1),
				),
			),
			Text.text(p.getBottomText()).padding(5),
			Button.text(`Restart`).onClick(a.reset).showIf(a.isGameOver()),
		)
	}
	
	getBottomText(){
		
		if(a.getWinner() != ``){
			return `${a.getWinner()} wins!`
		}
		
		if(a.isGameOver()){
			return `Game Over!`
		}
		
		if(a.hasGameStarted()){
			return `${a.nextTurn} turn to act!`
		}
		
		return `Good luck :)`
		
	}
	
}