Now shows how many CChars left in the list

LearningChineseFixed/Client/Program.cs

@@ -9,6 +9,9 @@ namespace LearningChineseFixed
 {
     public class Program
     {
+        public static int CCharsLeft = 0;
+        public static Action UpdateUiEvent;
+
         public static async Task Main(string[] args)
         {
             var builder = WebAssemblyHostBuilder.CreateDefault(args);
@@ -27,5 +30,7 @@ namespace LearningChineseFixed
 
             await builder.Build().RunAsync();
         }
+
+        public static void InvokeUiUpdate() => UpdateUiEvent?.Invoke();
     }
 }

LearningChineseFixed/Pages/Learn.razor

@@ -107,16 +107,22 @@
 
     protected override async Task OnInitializedAsync()
     {
+        Program.UpdateUiEvent += OnUiUpdate;
+
         int selectedChunk = await localStorage.GetItemAsync<int>("SelectedChunk");
 
         //Charecters = await httpClient.GetFromJsonAsync<CChar[]>("Data/NormalizedDataset.json");
         Charecters = await httpClient.GetFromJsonAsync<CChar[]>($"Data/Normalized_chunk_{selectedChunk.ToString("000")}.json");
 
         DontSkipTheseCChar = Charecters.ToList();
+        Program.CCharsLeft = DontSkipTheseCChar.Count;
+        Program.InvokeUiUpdate();
 
         GenerateQuestion();
     }
 
+    void OnUiUpdate() => StateHasChanged();
+
     void GenerateQuestion()
     {
         if (DontSkipTheseCChar.Count < 3) throw new Exception("Finished this chunk of CChars");
@@ -190,6 +196,8 @@
         CChar correctChar = GetCorrectCChar();
         DontSkipTheseCChar.Remove(correctChar);
         Console.WriteLine("Remaining CChars: " + DontSkipTheseCChar);
+        Program.CCharsLeft = DontSkipTheseCChar.Count;
+        Program.InvokeUiUpdate();
         GenerateQuestion();
     }
 

LearningChineseFixed/Shared/MainLayout.razor

@@ -5,6 +5,10 @@
 
 <MudLayout>
     <MudAppBar Elevation="0">
+        @if (Program.CCharsLeft > 0)
+        {
+            <MudText>@("CChars left: " + Program.CCharsLeft)</MudText>
+        }
         <MudSpacer />
         <MudIconButton Icon="@Icons.Custom.Brands.MudBlazor" Color="Color.Inherit" Link="https://mudblazor.com/" Target="_blank" />
         <MudIconButton Icon="@Icons.Custom.Brands.LinkedIn" Color="Color.Inherit" Link="https://www.linkedin.com/in/zhentao-wei-3a3a0a182/" Target="_blank" />
@@ -17,5 +21,10 @@
 </MudLayout>
 
 @code {
+    protected override async Task OnInitializedAsync()
+    {
+        Program.UpdateUiEvent += OnUiUpdate;
+    }
 
+    void OnUiUpdate() => StateHasChanged();
 }

LearningChineseFixed/wwwroot/index.html

@@ -8,7 +8,7 @@
     <base href="/" />
     <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
     <link href="css/app.css" rel="stylesheet" />
-    <link href="LearningChineseFixed.styles.css" rel="stylesheet" />
+    <!--<link href="LearningChineseFixed.styles.css" rel="stylesheet" />-->
     <link href="manifest.json" rel="manifest" />
     <link rel="apple-touch-icon" sizes="512x512" href="icon-512.png" />
     <link rel="apple-touch-icon" sizes="192x192" href="icon-192.png" />