How to Communicate Chess Board State (FEN) to GUI in Real-Time

[38alysia]

Hello,

I am working on a project where I need to display chess positions on a GUI chessboard in real-time. Specifically, I am looking for a way to sync the FEN (Forsyth-Edwards Notation) string, which represents the chess board state, with the GUI, so that any changes in the game state are immediately reflected on the GUI board.

Could you provide guidance or examples on how to establish communication between the program logic (which generates the FEN string) and the GUI to achieve this? Any advice or pointers to relevant documentation or tools that could facilitate this synchronization would be greatly appreciated.

Thank you!

[QueensGambit]

Hey @38alysia ,

you can check out the code here:

liground/src/renderer/components/GameBoards.vue

Lines 58 to 66 in e20dc0d

	FEN <input
	id="lname"
	type="text"
	name="lname"
	placeholder="fen position"
	:value="fen"
	:size="setFenSize()"
	@change="checkValidFEN"
	>

and here:

liground/src/renderer/components/GameBoards.vue

Lines 379 to 384 in e20dc0d

	checkValidFEN (event) {
	document.dispatchEvent(new Event('resetPlot'))
	this.$store.dispatch('fenField', event.target.value)
	this.resetAnalysis = !this.resetAnalysis
	}
	}

liground/src/renderer/components/ChessGround.vue

Lines 253 to 255 in e20dc0d

	fen () {
	this.updateBoard()
	},

We use https://github.com/gbtami/chessgroundx for the board rendering, which is an extension of chessground used in lichess.org.