React changes and Application Insights configuration issue (#233)

Author: xenobiasoft

src/frontend/Sudoku.Blazor/Program.cs

@@ -1,6 +1,5 @@
 using Azure.Identity;
 using BlazorApplicationInsights;
-using Microsoft.ApplicationInsights.AspNetCore.Extensions;
 using Sudoku.Blazor;
 using Sudoku.Blazor.Components;
 
@@ -36,25 +35,15 @@
 builder.Services
     .RegisterBlazorGameServices(builder.Configuration);
 
-// Only configure Application Insights if connection string is provided
+// Only configure client-side Application Insights if connection string is provided
+// Server-side telemetry is handled by Azure.Monitor.OpenTelemetry.AspNetCore via ServiceDefaults
 if (!string.IsNullOrEmpty(appInsightsConnectionString))
 {
     builder.Services
         .AddBlazorApplicationInsights(x =>
         {
             x.ConnectionString = appInsightsConnectionString;
-        })
-        .AddApplicationInsightsTelemetry(new ApplicationInsightsServiceOptions
-        {
-            ConnectionString = appInsightsConnectionString,
-            EnableQuickPulseMetricStream = true
         });
-
-    // Configure Application Insights logging
-    builder.Logging
-        .AddApplicationInsights(
-            configureTelemetryConfiguration: (config) => config.ConnectionString = appInsightsConnectionString,
-            configureApplicationInsightsLoggerOptions: (options) => { });
 }
 
 var app = builder.Build();

src/frontend/Sudoku.Blazor/Sudoku.Blazor.csproj

@@ -12,10 +12,8 @@
     <PackageReference Include="Aspire.Microsoft.Azure.Cosmos" Version="13.2.2" />
     <PackageReference Include="Azure.Extensions.AspNetCore.Configuration.Secrets" Version="1.5.0" />
     <PackageReference Include="BlazorApplicationInsights" Version="3.3.0" />
-    <PackageReference Include="Microsoft.ApplicationInsights.AspNetCore" Version="3.1.0" />
     <PackageReference Include="Microsoft.Extensions.Azure" Version="1.13.1" />
     <PackageReference Include="Microsoft.Extensions.Http" Version="10.0.6" />
-    <PackageReference Include="Microsoft.Extensions.Logging.ApplicationInsights" Version="2.23.0" />
     <PackageReference Include="Microsoft.Extensions.Logging.AzureAppServices" Version="10.0.6" />
   </ItemGroup>
 

src/frontend/Sudoku.React/src/components/CellInput.module.css

@@ -39,11 +39,18 @@
   background-color: #F0F8FF !important;
 }
 
-.highlight {
-  background-color: #F0F8F0 !important;
+.highlight input,
+.highlight label {
+  background-color: #d8eef8 !important;
 }
 
-.invalid {
+.selected input,
+.selected label {
+  background-color: #b8d8f0 !important;
+}
+
+.invalid input,
+.invalid label {
   background-color: #ffdddd !important;
   outline: 1px solid red;
 }

src/frontend/Sudoku.React/src/components/CellInput.tsx

@@ -23,7 +23,7 @@ export default function CellInput({
   const getCellClass = (): string => {
     const classes = [styles.cell];
     if (isInvalid) classes.push(styles.invalid);
-    else if (isSelected) classes.push(styles.highlight);
+    else if (isSelected) classes.push(styles.selected);
     else if (isHighlighted) classes.push(styles.highlight);
     return classes.join(' ');
   };

src/frontend/Sudoku.React/src/pages/GamePage.tsx

@@ -254,11 +254,19 @@ export default function GamePage() {
     );
   }
 
+  if (solved) {
+    return (
+      <Layout>
+        <VictoryDisplay onClose={handleVictoryClose} />
+      </Layout>
+    );
+  }
+
   if (isGameLoading || !game) {
     return (
       <Layout>
         <div style={{ textAlign: 'center', marginTop: '4rem' }}>
-          {isGameLoading ? 'Loading puzzle...' : 'Loading puzzle...'}
+          Loading puzzle...
         </div>
       </Layout>
     );
@@ -291,7 +299,6 @@ export default function GamePage() {
           onReset={handleReset}
           onTogglePencil={() => setPencilMode(p => !p)}
         />
-        {solved && <VictoryDisplay onClose={handleVictoryClose} />}
       </div>
     </Layout>
   );