Changed some UI and added changing fonts

CCharLearn/Client/Program.cs

@@ -10,6 +10,7 @@ namespace CCharLearn
 {
     public class Program
     {
+
         public static int CCharsLeft = 0;
         public static Action UpdateUiEvent;
 

CCharLearn/Pages/Index.razor

@@ -35,14 +35,20 @@
         </MudContainer>
 
         <MudContainer Class="justify-center d-flex">
-            <MudCheckBox Class="mr-6" @bind-Checked="@IsEasyMode" Label="Easy mode" Color="Color.Primary"></MudCheckBox>
+            <MudStack Class="pt-4 " Spacing="0">
+                <MudContainer Class="pa-4">
+                    <MudText Typo="Typo.h6" Class="fw-bold">Modifiers:</MudText>
+                    <MudCheckBox Class="mr-6" @bind-Checked="@IgnoreTone" Label="Ignore pinyin tones" Color="Color.Primary"></MudCheckBox>
+                    <MudCheckBox Class="mr-6" @bind-Checked="@UseChangingFonts" Label="Changing fonts" Color="Color.Primary"></MudCheckBox>
+                </MudContainer>
+            </MudStack>
         </MudContainer>
 
-        <MudContainer Class="pt-16 justify-center d-flex">
+        <MudContainer Class="pt-4 justify-center d-flex">
             @if (Charecters != null)
             {
-                <MudPaper Class="overflow-scroll rounded-0" Style="height: 50vh;" Elevation="1">
+                <MudPaper Class="overflow-scroll rounded-lg" Style="height: 40vh;" Elevation="1">
-                    <MudDataGrid FixedHeader=true Items="@Charecters" Breakpoint="Breakpoint.None">
+                    <MudDataGrid Style="" SortMode="SortMode.None" Height="500" FixedHeader=true Items="@Charecters" Breakpoint="Breakpoint.None">
                         <Columns>
                             <PropertyColumn Property="x => x.charcter" Title="CChar" />
                             <PropertyColumn Property="x => x.pinyin" Title="Pinyin" />
@@ -90,15 +96,27 @@
     bool continueDataExists = false;
     int continueCharectersLeft = -1;
 
-    private bool isEasyMode;
+    private bool ignoreTone;
 
-    public bool IsEasyMode
+    public bool IgnoreTone
     {
-        get { return isEasyMode; }
+        get { return ignoreTone; }
         set 
         {
-            isEasyMode = value; 
+            ignoreTone = value;
-            SetEasyMode();
+            SetIgnoreTone();
+        }
+    }
+    
+    private bool useChangingFonts;
+
+    public bool UseChangingFonts
+    {
+        get { return useChangingFonts; }
+        set 
+        {
+            useChangingFonts = value;
+            SetChangingFonts();
         }
     }
 
@@ -153,9 +171,14 @@
         StateHasChanged();
     }
 
-    async void SetEasyMode()
+    async void SetIgnoreTone()
     {
-        await localStorage.SetItemAsync("EasyMode", isEasyMode);
+        await localStorage.SetItemAsync("IgnoreTone", ignoreTone);
+    }
+    
+    async void SetChangingFonts()
+    {
+        await localStorage.SetItemAsync("ChangingFonts", UseChangingFonts);
     }
 
     async Task LoadAllChunksIntoLocalStorage()
@@ -215,9 +238,14 @@
             continueCharectersLeft = await localStorage.GetItemAsync<int>("ContinueCharectersLeft");
         }
 
-        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"))
+        {
+            UseChangingFonts = await localStorage.GetItemAsync<bool>("ChangingFonts");
         }
     }
 }

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
         {

CCharLearn/Pages/Learn.razor.css

@@ -0,0 +1 @@
+

CCharLearn/wwwroot/css/app.css

@@ -96,4 +96,46 @@ a, .btn-link {
 }
 .loading-progress-text:after {
         content: var(--blazor-load-percentage-text, "Loading");
-    }
+    }
+
+@font-face {
+  font-family: 'HanyiSentyRubber';
+  src: url(../fonts/HanyiSentyRubber.ttf) format('truetype');
+}
+
+@font-face {
+  font-family: 'mini-jian-caocuyuan';
+  src: url(../fonts/mini-jian-caocuyuan.ttf) format('truetype');
+}
+
+@font-face {
+  font-family: 'myoungheihk';
+  src: url(../fonts/myoungheihk.ttf) format('truetype');
+}
+
+@font-face {
+  font-family: 'UnboundedSans';
+  src: url(../fonts/UnboundedSans.ttf) format('truetype');
+}
+
+@font-face {
+  font-family: 'wt064';
+  src: url(../fonts/wt064.ttf) format('truetype');
+}
+
+@font-face {
+  font-family: 'XiaolaiSC-Regular';
+  src: url(../fonts/XiaolaiSC-Regular.ttf) format('truetype');
+}
+
+/*优设标题黑*/
+@font-face {
+  font-family: 'chinese1';
+  src: url(../fonts/chinese1.ttf) format('truetype');
+}
+
+/*站酷仓耳渔阳体*/
+@font-face {
+  font-family: 'chinese2';
+  src: url(../fonts/chinese2.ttf) format('truetype');
+}