Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/alexyakunin/BoardGames

New Stl.Fusion sample and a fully functional web app allowing you to play real-time multiplayer board games. Powered by Stl.Fusion, Blazor, and .NET 5.
https://github.com/alexyakunin/BoardGames

blazor-server blazor-wasm-mode board-games game game-development game-engine real-time signalr wasm webassembly webassembly-demo

Last synced: 12 days ago
JSON representation

New Stl.Fusion sample and a fully functional web app allowing you to play real-time multiplayer board games. Powered by Stl.Fusion, Blazor, and .NET 5.

Awesome Lists containing this project

README 

        
# BoardGames



"Board Games" is a [Fusion] sample and a fully functional 

web app allowing you to play real-time multiplayer board games.



**Note:** this repository wasn't updated for a while, so it uses 

an outdated version of Fusion (v1.3.x, while the current one is v3.7.x). 

Nevertheless it's still a good example you can play with 

to learn Fusion. The APIs change, but concepts stay the same :)



 Live version of this app: https://boardgames.alexyakunin.com/



A short video explaining what's unique there:



[](https://www.youtube.com/watch?v=R1XB8UKJ1dk)



The sample implements a number of features that are 

hard to implement without Fusion. In particular, you might notice

that real-time state sync works literally everywhere in it. 

Try opening the sample in two different browsers, sign in using 

different user accounts, and:

- Create and play a game in both windows

- Check out what happens with game lists when you're

  creating a game, making moves, or posting a chat message

- Try renaming your user & see its name changes everywhere - 

  even in chat mentions!

  

### What's implemented in Board Games



- Two games. I plan to add a couple more  a bit later - 

  there is a common base API allowing to add new games 

  pretty quickly

- Game lobby, where you can track the state of games you

  participate in, browse open games created by other users 

  and join them

- Game chat, which supports mentions. In reality, there is

  an extendable message parser and modular renderer that 

  supports user and game mentions.

- User online/offline status tracking. Notice that every 

  user badge displays it.

- User profile page, where you can edit your user name, add 

  MS/GitHub accounts, see all browser sessions, "kick" some

  of them or sign out from all of them.

- Full state persistence to any DB supported by EF Core

- Web API - it's used when the sample works in Blazor 

  WASM mode, so whatever UI can do is available there too.



Finally, the sample supports *both* Blazor Server and 

Blazor WebAssembly modes.



The [live version] of this app is hosted on Google Cloud GKE:

- The deployment runs 3 replicas of this service on a small

  Kubernetes cluster that includes 3 preemptive

  [e2-small](https://cloud.google.com/compute/vm-instance-pricing#e2_sharedcore_machine_types) 

  nodes ($3.67/mo each)

- Cloud PostgreSql stores the data; it also runs on

  the cheapest 1 core/3.75GB RAM host.

- Both Blazor Server and Fusion require session affinity. 

  It's achieved here with 

  [NGINX Ingress Controller](https://kubernetes.github.io/ingress-nginx/examples/affinity/cookie/)

  configured to route requests to the same backend host

  (selected using consistent hashing) relying on `_ngsa` cookie

- Try opening https://boardgames.alexyakunin.com/api/hostInfo/getHostName

  normally and without this cookie (e.g. in incognito mode) to see 

  how it works. 

- Check out [deployment.yml](deployment.yml), [service.yml](service.yml),

  [ingress.yml](ingress.yml), and [.github/workflows/gke.yml](.github/workflows/gke.yml), 

  if you're interested how to configure this.

                   

### Ok, real-time. But seriously, what's so new there?



The implementation cost of real-time updates. Everything you 

see there required me to write [just 35 extra lines of code](https://github.com/alexyakunin/BoardGames/search?q=IsInvalidating)!



- First 3 `if` blocks have ~ 15 lines of code inside

- The last one (in `GameService.cs`, the invalidation logic is outside of 

  an `if` clause there) has ~ 20 more.

  

And if you look at everything else, it's absolutely usual code you'd 

have otherwise too.



> More precisely, you'd need at least this "everything else" to implement 

a *non-real-time* version of the same sample that supports just 

Blazor Server.

>

> WASM version would require way more - the approach used in this sample,

where server-side services are replaced by their client-side caching

replicas (so-called 

["Replica Services"](https://github.com/servicetitan/Stl.Fusion.Samples/blob/master/docs/tutorial/Part04.md)

in Fusion terms) simply won't work without Fusion-style distributed

version of "computed observable" that eliminates every RPC call known 

to return the same result as the locally cached one. 

>

> In other words, if you use Fusion, Blazor WASM mode has virtually 

zero implementation cost as well. 



**And this is what allowed me build Board Games single-handedly

in 9 days.** Proof: 

[the very first commit](https://github.com/servicetitan/Stl.Fusion.Samples/commit/546ae7597bc7fa3a0b3c7f3b84e3a463bc3fd28f)

cloning Fusion's Blazorise template was made on Feb 1, 

and [I wrote this README describing what's already done](https://github.com/alexyakunin/BoardGames/commit/b1042a74209050cb79fb4e248f84a03c2b600fbf)

on Feb 10 (though at that point there was just one game). 



### Looks interesting, how do I learn more about Fusion?



Check out [Fusion] and its 

[other samples](https://github.com/servicetitan/Stl.Fusion.Samples);

join our [Discord Server] to ask questions.



P.S. I am sure there are some bugs - if you'll find one, 

please 

[report an issue](https://github.com/alexyakunin/BoardGames/issues)!



[Fusion]: https://github.com/servicetitan/Stl.Fusion

[Live version]: https://boardgames.alexyakunin.com/

[Discord Server]: https://discord.gg/EKEwv6d