Note: This is a pre-release of BagaWork. Many things will likely change before the first stable release.

Tic Tac Toe

This example shows how to create an app where the user can play Tic Tac Toe against another human (on the same device).

Open in Online Editor
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 :)`
		
	}
	
}