Merge pull request #3 from softawaregmbh/dev

Include changes from dev branch

README.md

@@ -1,14 +1,50 @@
-# samples-serverless-tictactoe
+# Serverless Tic Tac Toe
 
-## SignalR emulator for local testing
-https://github.com/Azure/azure-signalr/blob/dev/docs/emulator.md
+This is a sample of a serverless multiplayer game running in Azure using the following technologies:
+
+* [Static Web Apps](https://azure.microsoft.com/en-us/products/app-service/static)
+* [Azure SignalR Service](https://azure.microsoft.com/en-us/products/signalr-service)
+* [(Durable) Azure Functions](https://learn.microsoft.com/en-us/azure/azure-functions/durable/durable-functions-overview?tabs=csharp-inproc)
+
+![Communication flow](https://www.websequencediagrams.com/cgi-bin/cdraw?lz=Q2xpZW50LT5GdW5jdGlvbnM6IFtTaWduYWxSXSBDcmVhdGVHYW1lCgAXCS0-T3JjaGVzdHJhdG9yOiBTY2hlZHVsZU5ld0luc3RhbmNlKGNvbm5lAEoFSWQpCm5vdGUgcmlnaHQgb2YgADAOAFwGIGdhbWUKAEwMAIEDDkFjdGl2aXR5XTogSm9pbkdhbQBWDiwAPAVJZCkAgRsMAIFUBjogR2FtZUpvaW5lZCgAIAYsICJYIgB5HldhaXRGb3JFdmVudCgiUGxheWVyAD4GIikKAIIWHQCBFwkAgH8TAIIrDlJhaXNlAE4ULCAAgjIOAIEta08AgXkfU3RhcnQAgwMrVXBkYXQAgXcVAIMWCAAXCykKCmxvb3Agd2hpbGUgIWdhbWUuSXNPdmVyAIMBK01vdmUAgwQgTWFrZU1vdgCCdS8AVQUAgwwQAIVAHACBdwYAgVRaZW5kCg&s=default)
+
+
+## Local development: 
+
+You can use the following emulators for local development:
+* [Azurite](https://learn.microsoft.com/en-us/azure/storage/common/storage-use-azurite?tabs=visual-studio) (should start automatically when you launch the `TicTacToe.Functions` project)
+* [Azure SignalR Emulator](https://github.com/Azure/azure-signalr/blob/dev/docs/emulator.md)
 
 ```cmd
+dotnet tool install  -g Microsoft.Azure.SignalR.Emulator
+cd .\src\TicTacToe.Functions
 asrs-emulator start
 ```
 
-## Bicep deployment
+## Deployment
 
-```cmd
-az deployment group create --resource-group samples-serverless-tictactoe --template-file iac/main.bicep --name samples-serverless-tictactoe
-```
+If you want to deploy the sample to your own Azure subscription:
+
+* Start by forking this repository
+
+* Create a resource group in your Azure subscription
+
+* Then you can use the deployment script in the `iac` folder to create the necessary resources:
+
+    ```cmd
+    az deployment group create --resource-group my-sample --template-file iac/main.bicep --name samples-serverless-tictactoe
+    ```
+
+* You need to provide a GitHub access token as parameter (the command above will ask for it). You can create one [here](https://github.com/settings/tokens?type=beta) (it requires `Read access to metadata` and `Read and Write access to actions, actions variables, code, secrets, and workflows` permissions for your repository).
+
+* Running the command will (among others) create a Static Web App and a Function App in your resource group.
+
+* Then you can copy the code from the [existing GitHub action](.github/workflows/azure-static-web-apps-red-water-002751303.yml) to this new action (but replace `AZURE_STATIC_WEB_APPS_API_TOKEN_AMBITIOUS_RIVER_0FBF49203` with the secret name from your file).
+
+* You can now delete the [existing GitHub action](.github/workflows/azure-static-web-apps-red-water-002751303.yml) file.
+
+* Finally, download the publish profile for the Function App that was created and create a new repository secret named `AZURE_FUNCTIONAPP_PUBLISH_PROFILE` and paste the XML code from the publish profile as the value.
+
+* Running the GitHub action should now build and deploy the code and you should be able to run the game by accessing your Static Web App.
+
+* Have fun!

iac/main.bicep

@@ -88,6 +88,10 @@ resource functionApp 'Microsoft.Web/sites@2020-12-01' = {
           name: 'AzureSignalRConnectionString__serviceUri'
           value: 'https://${signalRName}.service.signalr.net'
         }
+        {
+          name: 'HubName'
+          value: 'TicTacToe'
+        }
         {
           name: 'FUNCTIONS_EXTENSION_VERSION'
           value: '~4'
@@ -100,6 +104,14 @@ resource functionApp 'Microsoft.Web/sites@2020-12-01' = {
           name: 'FUNCTIONS_WORKER_RUNTIME'
           value: 'dotnet-isolated'
         }
+        {
+          name: 'WEBSITE_RUN_FROM_PACKAGE'
+          value: '1'
+        }
+        {
+          name: 'WEBSITE_ENABLE_SYNC_UPDATE_SITE'
+          value: 'true'
+        }
       ]
     }
   }

src/TicTacToe/TicTacToe.Blazor/Pages/Index.razor

@@ -22,16 +22,20 @@
 
 <PageTitle>Tic Tac Toe</PageTitle>
 
+
 @if (gameId == null)
 {
+    // Show Create Game button when we're not connected to a game yet
     <button class="btn btn-primary" @onclick="async () => await CreateGame()">Create game</button>
 }
 else
 {
+    // Show invitation link when we are connected, but there is not second player yet
     @if (player == Player.X && game == null)
     {
+        var joinUri = $"{NavigationManager.ToAbsoluteUri(NavigationManager.Uri)}?game-id={gameId}";
         <p>
-            Invitation Link: <a href="@NavigationManager.ToAbsoluteUri(NavigationManager.Uri)?game-id=@gameId" target="_blank">@NavigationManager.ToAbsoluteUri(NavigationManager.Uri)?game-id=@gameId</a>
+            Invitation Link: <a href="@joinUri" target="_blank">@joinUri</a>
         </p>
     }
 
@@ -42,6 +46,8 @@ else
 
 @if (game != null)
 {
+    // If the game has started, show the status and draw the board
+
     <p>@Status</p>
 
     <div class="board">
@@ -61,6 +67,8 @@ else
 
     protected override async Task OnInitializedAsync()
     {
+        // Create SignalR connection and register callbacks
+
         hubConnection = new HubConnectionBuilder()
             .WithUrl(Configuration["ApiUrl"]!)
             .Build();
@@ -80,6 +88,9 @@ else
 
         await hubConnection.StartAsync();
 
+
+        // If we have a game-id query string, join the game
+
         var uri = NavigationManager.ToAbsoluteUri(NavigationManager.Uri);
         var queryStrings = QueryHelpers.ParseQuery(uri.Query);
         if (queryStrings.TryGetValue("game-id", out var gameId) && gameId.Count == 1)
@@ -99,7 +110,7 @@ else
 
     private async Task CreateGame()
     {
-        await this.hubConnection!.InvokeAsync("CreateGame");        
+        await hubConnection!.InvokeAsync("CreateGame");        
     }
 
     private async Task Play(int i)

src/TicTacToe/TicTacToe.Blazor/TicTacToe.Blazor.csproj

@@ -1,4 +1,4 @@
-<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">
+<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">
 
 	<PropertyGroup>
 		<TargetFramework>net7.0</TargetFramework>
@@ -14,7 +14,7 @@
 	</ItemGroup>
 
 	<ItemGroup>
-	  <ProjectReference Include="..\TicTacToe\TicTacToe.csproj" />
+	  <ProjectReference Include="..\TicTacToe.Shared\TicTacToe.Shared.csproj" />
 	</ItemGroup>
 
 </Project>