The MainPage layout consists of a Panel (pnlmain) and a CustomListView (clvinfo).
The chess board is setup on the main panel (pnlmain). The 64 square panels are added to this panel.
The CustomListView (clvinfo) is divided in 3 parts: a switches panel (index 0), a taken pieces panel (index 1) and note panels (index 2 and up).
In the switches panel we place the two B4XSwitches (bswhints and bswblackview) (select the XUI Views library!).
On the left side of the panel we provide a save button and on the right side we place a study button.
You can find the icons in the typeface FontAwesome or Material icons.
Height of the panel: 60dip. Width of the panel: 320dip.
The panel for the taken pieces is inserted in the info list as the second item.
Every piece that gets taken is added to this panel.
Height of the panel: 160dip. Width of the panel: 320dip.
Each note panel contains the textual representation of 2 moves: a white piece move and a black piece move.
The piece letters are used together with the grid indication. When a pawn moves the letter is omitted.
Example: 1. e2e4 e7e5 2. d2d4 e5xd4 Ng1f3 Ng8f6 ...
The note panels start from the info list index number 2.
Height of each panel: 50dip. Width of the panel: 320dip.
For the saving and loading of a game the savedialog_layout is used. The game name must be filled in.
The files list (clvfiles) below the game name allows you to select a game name for loading.
You can change the game name before saving it which allows you to save a copy of a running game several times.
Height of the panel: 200dip. Width: anchored left and right.
Now, before you continue make sure you have generated the members from these layouts!
MainPage: clvinfo, pnlmain.
switches_layout: bswblackview, bswhints, btnsave and Click, btnstudy and Click, pnlswitches.
taken_layout: pnltaken.
notes_layout: lblnotes, pnlnotes.
savedialog_layout: clvfiles and ItemClick and ItemLongClick, edtfilename, lbltitle.

Before we can use the switches we have to fill the clvinfo CustomListView with the layouts.
This can be done with the following code:

Private Sub fill_clvinfo
	clvinfo.Clear
	Dim pnl As B4XView = xui.CreatePanel("")
	pnl.SetLayoutAnimated(0, 5dip, 5dip, 320dip, 70dip)
	pnl.LoadLayout("switches_layout")
	clvinfo.Add(pnl, 0)
	Dim pnl As B4XView = xui.CreatePanel("")
	pnl.SetLayoutAnimated(0, 5dip, 5dip, 320dip, 185dip)
	pnl.LoadLayout("taken_layout")
	clvinfo.Add(pnl, 1)
	Dim pnl As B4XView = xui.CreatePanel("")
	pnl.SetLayoutAnimated(0, 5dip, 5dip, 320dip, 55dip)
	pnl.LoadLayout("notes_layout")
	clvinfo.Add(pnl, 2)
End Sub

This subroutine is called in the B4XPage_Created routine. You can insert this line at the end of the subroutine.

	fill_clvinfo

Now, you can use the switch (bswhints) to show or hide the hints.
In the show_hints subroutine you can add this code as the first lines:

	If bswhints.Value = False Then
		Return
	End If

When the switch is on the hints are shown and when the switch is off the hints are hidden but are still used to verify the move of a piece. The player has to know where the piece can go.
For the black view switch to work we need to modify the subroutine put_bitmap_in_cell.
Replace the line with the bmp.initialize function with these lines:

	If bswblackview.Value = False Then
		bmp.Initialize(File.DirAssets, imagemap.Get(pce))
	Else
		If turncolor = "black" Then
			bmp.Initialize(File.DirAssets, "flip_" & imagemap.Get(pce))
		Else
			bmp.Initialize(File.DirAssets, imagemap.Get(pce))
		End If
	End If

This code will be executed when the turncolor is black.
So far a player could make more than one move after another and didn't have to wait for his or her turn.
We need to fix this. Create a subroutine switch_turn as follows:

Private Sub switch_turn
	If turncolor = "white" Then
		turncolor = "black"
		cnvs.DrawRect(TurnRect, Colors.ARGB(255,244,244,194), True, 1dip)
		cnvs.DrawText(turncolor & " to move",140dip,20dip,tpfont,16,Colors.Blue,"LEFT")
	Else
		turncolor = "white"
		cnvs.DrawRect(TurnRect, Colors.ARGB(255,244,244,194), True, 1dip)
		cnvs.DrawText(turncolor & " to move",140dip,20dip,tpfont,16,Colors.Blue,"LEFT")
	End If
	If bswblackview.Value = True Then refresh_board
End Sub

Notice that if the blackview switch is on then the refresh_board subroutine is called to flip the images.
This subroutine is called in the pnl_Click subroutine above the last endif statement (after the move has been made).

		switch_turn

To enforce the switch_turn subroutine we need to test who's turn it is at the first tap.
Below the line log("source:" ... add the following lines to test the color:

		If srctext.StartsWith("B") And turncolor = "white" Then
			xui.MsgboxAsync("White to move","Turn")
			Return
		End If
		If srctext.StartsWith("W") And turncolor = "black" Then
			xui.MsgboxAsync("Black to move","Turn")
			Return
		End If

Now the player is warned about who's turn it is.
When it's the black player's turn the images on the board are flipped. This way the black player can see the pieces in a normal way and not upside down. When it's the white players turn the pieces are flipped again.
Here's how it should look like: The save button is used in the Load and Save section and the study button is used in the Study board section.

On this panel we put the images of the taken pieces and we put the piece info in the takenmap.
Let's first declare the takenmap and initialize it.
Add a declaration to the Class_Globals subroutine.

	Private takenmap As Map

Initialize the takenmap in the B4XPage_Created subroutine below the hintslst initialization.

	takenmap.Initialize

To add a piece to the taken panel (pnltaken) we write the following code:

Private Sub add_piece_to_pnltaken(pcs As String,filename As String)
	Private pnl As Panel
	pnl.Initialize("taken")
	If pcs.StartsWith("B") Then
		pnl.Tag = wtrow&wtcol
	Else
		pnl.Tag = btrow&btcol
	End If
	Private lbl As Label
	lbl.Initialize("")
	lbl.Text = pcs
	lbl.Visible = False
	pnl.AddView(lbl,0,0,40dip,40dip)
	If pcs.StartsWith("B") Then
		pnltaken.AddView(pnl,5dip+(wtcol*40dip),5dip+(wtrow*40dip),40dip,40dip)
	Else
		pnltaken.AddView(pnl,5dip+(btcol*40dip),5dip+(btrow*40dip),40dip,40dip)
	End If
	Dim rect As Rect
	rect.Initialize(0dip,0dip,40dip,40dip)
	cnvscell.Initialize(pnl)
	cnvscell.DrawRect(rect, Colors.Black, False, 1dip)
	Dim bmp As Bitmap
	bmp.Initialize(File.DirAssets, filename)
	cnvscell.DrawBitmap(bmp, Null, rect)
	If pcs.StartsWith("B") Then
		wtcol = wtcol + 1
		If wtcol >= 8 Then
			wtcol = 0
			wtrow = wtrow + 1
		End If
	Else
		btcol = btcol + 1
		If btcol >= 8 Then
			btcol = 0
			btrow = btrow + 1
		End If
	End If
End Sub

This subroutine uses the btrow, btcol, wtrow and wtcol global variables. So go ahead and declare them in the Class_Globals routine.

	Private btrow As Int = 0
	Private btcol As Int = 0
	Private wtrow As Int = 2
	Private wtcol As Int = 0

To find out if a piece has been taken we add a test in the do_move subroutine below the row and col declarations:

	Private take As String = ""
	If board(drow,dcol) <> "EEE" Then
		' piece taken
		takenmap.Put(board(drow,dcol),imagemap.Get(board(drow,dcol)))
		add_piece_to_pnltaken(board(drow,dcol),imagemap.Get(board(drow,dcol)))
		take = "x"
		Log("taken: " & takenmap)
	End If

If the destination square was not empty then a piece has been taken.
The take variable is used in the note to indicate that a piece was taken.
We will add a call to the subroutine in the next section.
This is how the panel could look like:
The white pawn was taken by the black pawn and the black pawn was taken by the white queen.

The notes are kept in a notes list and are displayed in the notes panels from the info list.
For the notes we need to declare some variables in the Class_Global subroutine:

	Private notescnt As Int = 1
	Private noteslst As List
	Private castlingstr As String = ""
	Private inpassingstr As String = ""
	Private promostr As String = ""

The strings are used in the special moves section and add some text to the note if needed.
The noteslst list needs to be initialized and cleared (in the B4XPage_Created subroutine below the hinstlst initialization):

	noteslst.Initialize
	noteslst.Clear

The add_note_to_clvinfo subroutine assembles the lblnotes.text and creates a panel to be added to the clvinfo list. This panel is added at clvinfo index 2 or higher.
Here's the code:

Private Sub add_note_to_clvinfo(snrow As Int, sncol As Int, dnrow As Int, dncol As Int, ntake As String)
	Dim pcscolor As String = srctext.SubString2(0,1)
	Dim pcsletter As String = srctext.SubString2(1,2)
	If pcsletter = "P" Then pcsletter = ""
	If pcscolor = "W" Then
		lblnotes.Text = lblnotes.Text & notescnt & "." & pcsletter & grid(snrow,sncol) &  ntake & grid(dnrow,dncol) & castlingstr & inpassingstr & promostr & " "
	Else
		lblnotes.Text = lblnotes.Text & pcsletter & grid(snrow,sncol) & ntake & grid(dnrow,dncol) & castlingstr & inpassingstr & promostr
		noteslst.Add(lblnotes.Text)
		Log("noteslst: " & lblnotes.Text)
		Dim pnl As B4XView = xui.CreatePanel("")
		pnl.SetLayoutAnimated(0, 5dip, 5dip, 320dip, 55dip)
		pnl.LoadLayout("notes_layout")
		lblnotes.RemoveView
		pnl.AddView(lblnotes,5dip,5dip,pnl.Width-5dip,40dip)
		lblnotes.Width = 330dip
		clvinfo.Add(pnl,(notescnt+2))
		notescnt = notescnt + 1
	End If
End Sub

The subroutine is called in the do_move subroutine. Put the call to the subroutine as the last statement before the End Sub.

	add_note_to_clvinfo(srow, scol, drow, dcol, take)

This is how it could look like:|