Surprising Feature of Our Unfinished Chess App

Marius will go to Japan tomorrow, meaning this class suddenly becomes the last one before he comes back 5 days later.

What we left from last class is something shown below. We drew 2 kings in the middle using the new way. The other 32 pieces on board implemented in old way, using UIImageView, have to be removed. Also notice that there is an issue for the bottom black pieces at the bottom. They go out of the board.

what we have when class starts

We don’t know how far we can go in this class. So Marius first deleted all 32 pieces in the form of UIImageView.

pieces implemented with UIImageView cleaned up

Marius tried to put kings back to their home. At the same time he added 2 queens. Those are the only 4 pieces which for loop can’t help, as he mentioned. But he messed up with col and row.

drawPiece(col: 3, row: 0, imageName: "King-white")
drawPiece(col: 3, row: 7, imageName: "King-black")
drawPiece(col: 4, row: 0, imageName: "Queen-white")
drawPiece(col: 4, row: 7, imageName: "Queen-black")

oops, wrong locations

This is an easy fix for Marius.

drawPiece(col: 0, row: 3, imageName: "King-white")
drawPiece(col: 7, row: 3, imageName: "King-black")
drawPiece(col: 0, row: 4, imageName: "Queen-white")
drawPiece(col: 7, row: 5, imageName: "Queen-black")

4 pieces at home

He was so good at using for loop to put pieces on board that he didn’t bother to run and check until all the rest was added.

for i in 0..<2 {
    drawPiece(col: 0 + i * 7, row: 0, imageName: "Rook-white")
    drawPiece(col: 0 + i * 7, row: 7, imageName: "Rook-black")
    drawPiece(col: 1 + i * 5, row: 0, imageName: "Knight-white")
    drawPiece(col: 1 + i * 5, row: 7, imageName: "Knight-black")
    drawPiece(col: 2 + i * 3, row: 0, imageName: "Bishop-white")
    drawPiece(col: 2 + i * 3, row: 7, imageName: "Bishop-black")
}
for i in 0..<8 {
    drawPiece(col: i, row: 1, imageName: "Pawn-white")
    drawPiece(col: i, row: 6, imageName: "Pawn-black")
}

all 32 pieces finished

Marius made a commit with message “we get 32 pieces back”. Then he went back to his pending game on the mac chess app and continued playing. 10 minutes later he was checkmated by the computer. Poor boy. “OK”, he came back to Xcode with a bit relief.

We still had 18 minutes. Since we already have pieces drag-and-drop code written, I realized that we might be able to at least make it possible to move pieces. I shared my thought with Marius, he became excited because it meant that he could play the game with his brother or others on the trip to Japan.

After I helped Marius put in the minimum code to make a move, it simply didn’t work. Pieces just stayed deadly.

There was no time for Marius to check what was going wrong. So I went straight, “Oh, we just drew all the static 32 pieces. That’s wrong. We need to draw each piece in shadowPiceBox with a for loop. Go ahead to create a for loop.” He commented out the old code and wrote the for loop quickly, under my guidance.

for piece in shadowPieceBox {
    drawPiece(col: piece.col, row: piece.row, imageName: piece.imageName)
}

The logical board, in the model sense, was still empty. Luckily we could borrow board initialization code for our test cases.

game.pieceBox.insert(ChessPiece(col: 3, row: 0, rank: "K", isWhite: true, imageName:   "King-white"))
game.pieceBox.insert(ChessPiece(col: 3, row: 7, rank: "K", isWhite: false, imageName:  "King-black"))
game.pieceBox.insert(ChessPiece(col: 4, row: 0, rank: "Q", isWhite: true, imageName:  "Queen-white"))
game.pieceBox.insert(ChessPiece(col: 4, row: 7, rank: "Q", isWhite: false, imageName: "Queen-black"))
for i in 0...7 {
    game.pieceBox.insert(ChessPiece(col: i, row: 1, rank: "P", isWhite: true, imageName:  "Pawn-white"))
    game.pieceBox.insert(ChessPiece(col: i, row: 6, rank: "P", isWhite: false, imageName: "Pawn-black"))
}
for i in 0...1 {
    game.pieceBox.insert(ChessPiece(col: 0 + i * 7, row: 0, rank: "R", isWhite: true, imageName:    "Rook-white"))
    game.pieceBox.insert(ChessPiece(col: 0 + i * 7, row: 7, rank: "R", isWhite: false, imageName:   "Rook-black"))
    game.pieceBox.insert(ChessPiece(col: 1 + i * 5, row: 0, rank: "N", isWhite: true, imageName:  "Knight-white"))
    game.pieceBox.insert(ChessPiece(col: 1 + i * 5, row: 7, rank: "N", isWhite: false, imageName: "Knight-black"))
    game.pieceBox.insert(ChessPiece(col: 2 + i * 3, row: 0, rank: "B", isWhite: true, imageName:  "Bishop-white"))
    game.pieceBox.insert(ChessPiece(col: 2 + i * 3, row: 7, rank: "B", isWhite: false, imageName: "Bishop-black"))
}

I was pretty sure the game wasn’t playable even though we could move pieces because we hadn’t implemented capture. “2 pieces will overlap with each other”, Marius also noticed. We didn’t have time to do anything more at this moment.

missing capture feature, knight and pawn overlapped

Then we realized we could do what we did in real world chess game: simply wipe the captured piece out of the board.

the would be captured pawn wiped out

The app turned out to be playable without us doing anything more.

this app can be used like a normal non-digital chess

Marius could hardly hide his happiness with this latest version loaded on his iPad. The last git commit message says: “our game is playable”.