Migrating to .NET Core - Added UI changes for Machine Learning Predic…

…tion in Tic-Tac-Toe Game razor component.
JosephWee · Apr 21, 2023 · 7503844 · 7503844
1 parent 2da464d
commit 7503844
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 15 deletions.
diff --git a/BlazorServerApp/Pages/TicTacToe.razor b/BlazorServerApp/Pages/TicTacToe.razor
@@ -4,17 +4,17 @@
 
 <h1>Tic-Tac-Toe</h1>
 <p>The Tic-Tac-Toe project was started in 16 Feb 2022 as a way to learn about Machine Learning.</p>
-<p>For more information please visit <a href="https://github.com/JosephWee/Tic-Tac-Toe">https://github.com/JosephWee/Tic-Tac-Toe</a></p>
 @foreach (var componentID in componentIDs)
 {
     <TicTacToeGame ID="@componentID" GridSize="3"></TicTacToeGame>
 }
+<p>For more information please visit <a href="https://github.com/JosephWee/Tic-Tac-Toe">https://github.com/JosephWee/Tic-Tac-Toe</a></p>
 
 @code {
     List<string> componentIDs = new List<string>();
     protected override void OnInitialized()
     {
-        for (int i = 0; i < 2; i++)
+        for (int i = 0; i < 1; i++)
         {
             componentIDs.Add(DateTime.UtcNow.Ticks.ToString());
         }

diff --git a/BlazorServerApp/Shared/TicTacToeGame.Razor.css b/BlazorServerApp/Shared/TicTacToeGame.Razor.css
@@ -7,8 +7,8 @@ div.gamerow {
 }
 div.gamecell {
     display: table-cell;
-    width: 125px !important;
-    height: 125px !important;
+    width: 121px !important;
+    height: 121px !important;
 }
 div.firstcol {
     border-right: 1px solid black;

diff --git a/BlazorServerApp/Shared/TicTacToeGame.razor b/BlazorServerApp/Shared/TicTacToeGame.razor
@@ -1,5 +1,6 @@
 @using Microsoft.AspNetCore.Mvc
 @using TicTacToe.Models
+@using TicTacToe.Extensions
 @using BlazorServerApp.Data
 @inject TicTacToeService tictactoesvc
 
@@ -137,17 +138,9 @@
 
                 gameStatus = response.Status;
 
-                string statusString = string.Empty;
-                if (response.Status == TicTacToeGameStatus.InProgress)
-                    statusString = "In Progress";
-                else if (response.Status == TicTacToeGameStatus.Player1Wins)
-                    statusString = "Player 1 Wins";
-                else if (response.Status == TicTacToeGameStatus.Player2Wins)
-                    statusString = "Player 2 Wins";
-                else if (response.Status == TicTacToeGameStatus.Draw)
-                    statusString = "Draw";
-
-                gameheader = $"{(debugMode == true ? InstanceId + " " : string.Empty)}{statusString}";
+                gamefooter = $"{(debugMode == true ? InstanceId + " " : string.Empty)}Status: {response.Status.ToDisplay()}";
+
+                gameheader = response.PredictionScore.Length > 0 ? $"Predicted Result: {((TicTacToeGameStatus)(int)response.Prediction).ToDisplay()}\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0Confidence: {(response.PredictionScore[0] * 100f).ToString("F2")}%" : string.Empty;
             }
 
             StateHasChanged();

diff --git a/TicTacToe.Distribution/Models/Extensions.cs b/TicTacToe.Distribution/Models/Extensions.cs
@@ -0,0 +1,26 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+using TicTacToe.Models;
+
+namespace TicTacToe.Extensions
+{
+    public static class Extensions
+    {
+        public static string ToDisplay(this TicTacToeGameStatus status)
+        {
+            if (status == TicTacToeGameStatus.InProgress)
+                return "In Progress";
+            else if (status == TicTacToeGameStatus.Player1Wins)
+                return "Player 1 Wins";
+            else if (status == TicTacToeGameStatus.Player2Wins)
+                return "Player 2 Wins";
+            else if (status == TicTacToeGameStatus.Draw)
+                return "Draw";
+
+            return string.Empty;
+        }
+    }
+}