Logical Error - 2D array using ArrayList in Kotlin - arrays

Question

I am making a simpel tic tac toe game while learning Kotlin, following a tutorial.
When I input and combination as my turn in the game, let's say 1, 3 : The X appears in all places of that column. I have spent almost 3 hours finding the erorr but I think it's somthing to do with Arraylist making. Kinldy help me. Code is shown below.
var board = arrayListOf<ArrayList<String>>()
fun main(args: Array<String>) {
for (i in 0..2){
val row = arrayListOf<String>()
for (j in 0..2){
row.add("")
board.add(row)
}
}
printBoard()
var continueGame = true
do{
println("Please enter a position. (e.g: 1, 3)")
val input = readLine()?:""
var x = 0
var y = 0
try {
val positions = input.split(",")
x = positions[0].trim().toInt()
y = positions[1].trim().toInt()
println("x is $x")
println("x is $y")
if(board[x-1][y-1] != "") {
println("position already taken")
}else{
board[x-1][y-1] ="X"
printBoard()
}
}catch (e: Exception){
println("Invalid input, please try again")
}
}while(continueGame)
}
fun printBoard(){
println("----------------")
for (i in 0..2){
for (j in 0..2){
when (board[i][j]){
"X" -> print("| X ")
"O" -> print("| O ")
else -> print("| ")
}
}
println("|")
println("----------------")
}
}

Answer 1

Move board.add(row) outside your inner for loop (the for (j... loop). You are adding each row to the outer ArrayList three times, so when you start using the 2D list later and assume it only has three rows, all three of those rows are the same first row repeated, and you're ignoring the last six rows.
But actually, when you know that your collections will not ever change size, Arrays are a cleaner solution than Lists. You can create your 3x3 2D Array in one line like this:
val board = Array(3) { Array(3) { "" } }

Answer 2

Here's how I looked at the problem.
Debug printBoard()
I first looked at the printBoard() function. I put a breakpoint in, and saw that board already had 3 Xs in it.
So the problem is happening further up the chain.
Debugging the X assignment
There's only once place in your code where X's are added to the board, so let's take a look there.
board[x - 1][y - 1] = "X"
I put a breakpoint on that line, and ran the program in debug mode.
When I inspect the board object, I see it's an ArrayList with 9 elements. Each element is also an ArrayList, each with 3 elements.
In total that's 27 squares, and a tic-tac-toe board only has 9! board only needs 3 ArrayLists.
Debugging board creation
If we take a look at where board is created...
for (i in 0..2) {
val row = arrayListOf<String>()
for (j in 0..2) {
row.add("")
board.add(row) // hmmmm
}
}
board.add(row) is nested inside both for loops. That means it will be called 9 times in total.
The Fix
So, quick fix, move add to the outer loop.
for (i in 0..2) {
val row = arrayListOf<String>()
for (j in 0..2) {
row.add("")
}
board.add(row) // better!
}
The program now works!
Why were there 3 X's?
I think it's interesting to understand why the X was appearing on the board three times.
If we look at the two for loops, the row list is being created in the outer loop - which means only 3 rows will be created. But because board.add(row) was in the inner loop, it will add the same row 3 times!
We can actually see that in the debug inspection. ArrayList#1073 is a unique ID for a specific row object, and it appears 3 times. So do ArrayList#1074 and ArrayList#1075
board[0], board[1], and board[2] all fetch the same row object, so in the printBoard() function, it loops over the first 3 elements of board... which are all exactly the same object!
Preventing the problem
The next step is to think about how to stop this problem from happening in the first place. I think that the for loops were confusing - they're easy to get wrong, and have 'magic numbers'. Fortunately Kotlin has lots of useful tools we can use to write clearer code.
Kotlin's Array class has a constructor that accepts an size: Int and an initialising lambda, that is used to fill each element of the array.
Here's a demo:
println(
Array(5) { i -> "I'm element $i" }.joinToString()
)
// output:
// I'm element 0, I'm element 1, I'm element 2, I'm element 3, I'm element 4
Each element of the Array has a value, based on i (the index of the array). For the tic-tac-toe board we don't care about the index, so we can ignore it.
// var board = arrayListOf<ArrayList<String>>() // old
var board = Array(3) { Array(3) { "" } } // new!
Output:
----------------
| | | |
----------------
| | | |
----------------
| | | |
----------------
Please enter a position. (e.g: 1, 3)
There we go, a 3x3 board - nice and clear!
I hope this helps!