Liveview for turn-based game?

Phoenix Forum Questions / Help
1

Would liveview be appropriate for an online chess game? I’m specifically thinking bullet chess which is fast paced. Or would I be better off using phoenix channels and handling the chess board with javascript?

2

Depends how fast-paced! Basically your response time for moves will be network latency (e.g. 50ms) + a very tiny bit of server time (e.g. a couple of milliseconds) + browser update rendering time (typically minuscule due to the way LiveView patches the DOM). For turn-based games you should be more than fine with LiveView - there shouldn’t be any additional overhead compared with communicating the change via channels and updating the DOM with some javascript. In fact, it can often be faster due to the way LiveView handles the snippets of templates, the tiny payloads and the way the DOM is patched.

By the time you have figured out the board logic and layout, it should cost you very little time to do it in LiveView as you don’t have to worry about designing payloads, serialising & deserialising messages etc, so you don’t really have much to lose giving it a try.

1 Like
3

Turn based games can be implemented without issue in most of the web frameworks - can be done in LiveView too.

I have used chex | Hex for backend logic for a chess game. Difficult part will be how the game is going to be rendered in LiveView:

  • use a liveview page and render game using javascript library like html5 canvas, babylon, three.js, pixi.js, phaser and setting the root element of game phx-ignore.
  • use pure liveview page for rendering the game using svgs, css, etc

You might want to look at JavaScript interoperability — Phoenix LiveView v0.20.1 .

Is this going to be learning project or a real world project ?

1 Like
4

Would it be possible to optimistically move a chess piece using JS then have the liveview either not need to update or pull the piece back if the server disagrees? I’m not sure if liveview would be unhappy/break if the DOM has been altered by JS.

5

Managing the same part of the DOM with both LiveView and JS doesn’t really work. Unless you are on a really slow link (high latency - bandwidth is less of a concern), you should find DOM updates for moves via the server will be perceptually fast enough.

BTW - you might get some inspiration from GitHub - chrismccord/todo_trek - it uses SortableJS for drag n drop while still using LiveView rendering.