serverless-websockets-quest VS agile-flush-vue-app

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); } }

GitHub repo

This project is part of my onboarding at Ably, where I recently started as Sr Developer Advocate. I was asked to build something with Ably, Azure and a JavaScript front-end framework to learn the Ably Realtime SDK. I wanted to build something fun but still practical, and that's when I came up with Agile Flush, an online planning poker app. This is mostly intended as a learning exercise. One with a useful end result though, that can be used here: agileflush.ably.dev. The source code can be found at GitHub and I've also recorded a YouTube video about this project that you can watch here.