Changed some UI and added changing fonts

CCharLearn/Pages/Learn.razor

@@ -42,7 +42,14 @@
                 <MudContainer Style="width: 100px; height: 100px" Class="pa-8 ma-4 d-flex justify-center align-center">
                     @if (!Answers.Any(x => x == null))
                     {
-                        <p class="LargeCharecter">@GetDisplayChar()</p>
+                        if (useChagingFonts)
+                        {
+                            <p class="LargeCharecter" style="font-family: '@currentFont';">@GetDisplayChar()</p>
+                        }
+                        else
+                        {
+                            <p class="LargeCharecter">@GetDisplayChar()</p>
+                        }
                     }
                 </MudContainer>
             </MudPaper>
@@ -80,7 +87,7 @@
                 {
                     <MudButton Disabled="@(!(Answers.Any(x=>x.isSelected)))" OnClick="Submit" Class="px-8 py-3" Variant="Variant.Filled" Size="Size.Large" Color="Color.Success" Style="font-size: 20px;"> Submit</MudButton>
                 }
-                @if (isEasyMode)
+                @if (ignoreTone)
                 {
                     <MudText Typo="Typo.caption">• Easy mode enabled</MudText>
                 }
@@ -89,12 +96,26 @@
     </MudStack>
 </MudContainer>
 
+@*Used to load all fonts into memory instead of loading from http each time*@
+@if (useChagingFonts && !hasLoadedFontsToMemory)
+{
+    @for (int i = 0; i < extraFonts.Length; i++)
+    {
+        <p style="font-family: '@extraFonts[i]';">i</p>
+    }
+}
+
 @code {
     bool isSavedLocally = false;
-    bool isEasyMode = false;
+    bool ignoreTone = false;
 
     bool selectedCorrect = false;
 
+    bool useChagingFonts = false;
+    string? currentFont = null;
+    string[] extraFonts = { "HanyiSentyRubber", "mini-jian-caocuyuan", "myoungheihk", "UnboundedSans", "wt064", "XiaolaiSC-Regular", "chinese1", "chinese2" };
+    bool hasLoadedFontsToMemory = false;
+
     public Answer[] Answers = new Answer[4];
     public void SelectButton(int selectedIndex)
     {
@@ -129,9 +150,14 @@
     protected override async Task OnInitializedAsync()
     {
         Program.UpdateUiEvent += OnUiUpdate;
-        if (await localStorage.ContainKeyAsync("EasyMode"))
+        if (await localStorage.ContainKeyAsync("IgnoreTone"))
         {
-            isEasyMode = await localStorage.GetItemAsync<bool>("EasyMode");
+            ignoreTone = await localStorage.GetItemAsync<bool>("IgnoreTone");
+        }
+
+        if (await localStorage.ContainKeyAsync("ChangingFonts"))
+        {
+            useChagingFonts = await localStorage.GetItemAsync<bool>("ChangingFonts");
         }
 
         bool continueLast = 
@@ -148,13 +174,21 @@
             await LoadCharectersFromChunk();            
         }
 
-        if (isEasyMode)
+        if (ignoreTone)
             DontSkipTheseCChar.ForEach(x => x.cchar.pinyin = x.cchar.pinyin.Unidecode());
 
+        if (useChagingFonts)
+        {
+            ChangeFont();
+        }
+
         Program.CCharsLeft = DontSkipTheseCChar.Count;
         Program.InvokeUiUpdate();
 
         GenerateQuestion();
+
+        await Task.Delay(100);
+        hasLoadedFontsToMemory = true;
     }
 
     async Task LoadCharectersFromChunk()
@@ -234,6 +268,12 @@
         navigator.NavigateTo("");
     }
 
+    async void ChangeFont()
+    {
+        int randomIndex = Random.Shared.Next(0, extraFonts.Length);
+        currentFont = extraFonts[randomIndex];
+    }
+
     async void Submit()
     {
         bool isCorrect = Answers.Any(x => x.isCorrect && x.isSelected);
@@ -244,6 +284,7 @@
         {
             Snackbar.Add($"<b>Definition:</b> {correctCChar.definition}", Severity.Success, config => { config.VisibleStateDuration = 1000; });
             increaseCCharStat(GetCorrectCCharStats(), StatType.NumOfCorrects);
+            ChangeFont();
         }
         else
         {