serverless-websockets-quest VS collaborative-pixel-drawing

Live demo

Hi all, I created a web app (ADnD style mini game) recently to demonstrate how to use serverless WebSockets (Ably) and combine it with Azure Functions to send realtime updates to the client (based on VueJS and hosted on Azure Static Web Apps). The Azure Functions use Durable Entities (part of Durable Functions) to store a centralized game state, and as soon as the state is updated the clients are notified of this change. Full blog post is here, the game can be played here, and you can have look at the code on GitHub.

[JsonObject(MemberSerialization.OptIn)] public class GameState : IGameState { // Only showing the class members relevant for this blog section. // For the full implementation see https://github.com/ably-labs/serverless-websockets-quest/blob/main/api/Models/GameState.cs [JsonProperty("questId")] public string QuestId { get; set; } [JsonProperty("phase")] public string Phase { get; set; } public async Task InitGameState(string[] gameStateFields) { QuestId = gameStateFields[0]; Phase = gameStateFields[1]; await _publisher.PublishUpdatePhase(QuestId, Phase); } [JsonProperty("players")] public List PlayerNames { get; set; } public async Task AddPlayerName(string playerName) { if (PlayerNames == null) { PlayerNames = new List { playerName }; } else { PlayerNames.Add(playerName); } if (IsPartyComplete) { await UpdatePhase(GamePhases.Play); await Task.Delay(2000); await AttackByMonster(); } } public async Task UpdatePhase(string phase) { Phase = phase; await _publisher.PublishUpdatePhase(QuestId, Phase); } private async Task AttackByMonster() { var playerAttacking = CharacterClassDefinitions.Monster.Name; var playerUnderAttack = GetRandomPlayerName(); var damage = CharacterClassDefinitions.GetDamageFor(CharacterClassDefinitions.Monster.CharacterClass); await _publisher.PublishPlayerAttacking(QuestId, playerAttacking, playerUnderAttack, damage); await Task.Delay(1000); var playerEntityId = new EntityId(nameof(Player), Player.GetEntityId(QuestId, playerUnderAttack)); Entity.Current.SignalEntity(playerEntityId, proxy => proxy.ApplyDamage(damage)); await Task.Delay(1000); var nextPlayerName = GetNextPlayerName(CharacterClassDefinitions.Monster.Name); await _publisher.PublishPlayerTurnAsync(QuestId, $"Next turn: {nextPlayerName}", nextPlayerName); } }

It's based on https://github.com/ably-labs/collaborative-pixel-drawing

GitHub repo

TLDR: Draw on the live canvas, or look at the source code in the GitHub repo which includes CodeTours to guide you through the solution.