Feat: Update the info for click input TNT amount

whats2000 · Aug 21, 2024 · 0b742fc · 0b742fc
1 parent b7dfa58
commit 0b742fc
Show file tree

Hide file tree

Showing 10 changed files with 82 additions and 14 deletions.
diff --git a/Components/ResultView.razor b/Components/ResultView.razor
@@ -14,9 +14,16 @@
                @bind-PageIndex="_pageIndex"
                @bind-PageSize="_pageSize"
                ScrollY=@(TableScrollY)
-               OnRowClick="OnAmountRowClick"
+               OnRowClick="OnAmountRowClickAsync"
                Class="calculator-result-table">
-
+            <!-- A Tooltips with icon for info click can set the red and blue tnt amounts -->
+            <ActionColumn Title="@TranslateText.GetTranslateText("DisplayAction")" Width="50px">
+                <Tooltip Title="@TranslateText.GetTranslateText("TNTCalculationResultTooltip")">
+                    <Text Type="secondary">
+                        <Icon Type="info-circle" Theme="outline" />
+                    </Text>
+                </Tooltip>
+            </ActionColumn>
             <Column Title="@TranslateText.GetTranslateText("DisplayDistance")" @bind-Field="@context.Distance" Sortable>
                 <Tooltip Title="@context.Distance.ToString()">
                     <Text>@context.Distance.ToString().Substring(0, 5)</Text>
@@ -26,7 +33,6 @@
             <Column Title="@TranslateText.GetTranslateText("DisplayBlue")" @bind-Field="@context.Blue"></Column>
             <Column Title="@TranslateText.GetTranslateText("DisplayRed")" @bind-Field="@context.Red"></Column>
             <Column Title="@TranslateText.GetTranslateText("DisplayTotal")" @bind-Field="@context.TotalTNT" Sortable></Column>
-
         </Table>
     }
     else if (ShowMode == ShowResultMode.Trace)

diff --git a/Components/ResultView.razor.cs b/Components/ResultView.razor.cs
@@ -177,9 +177,10 @@ protected override void OnInitialized()
             TranslateText.OnLanguageChange += RefreshPage;
         }
 
-        private void OnAmountRowClick(RowData<TNTCalculationResult> res)
+        private async Task OnAmountRowClickAsync(RowData<TNTCalculationResult> res)
         {
             EventManager.Instance.PublishEvent(this, "tntAmountSetRTCount", new SetRTCountArgs("ResultView", res.Data.Red, res.Data.Blue));
+            await NoticeWithIcon(NotificationType.Success, TranslateText.GetTranslateText("TNTCalculationSetSucessMessage"));
         }
 
         public void RefreshPage()

diff --git a/Pages/Index.razor b/Pages/Index.razor
@@ -25,7 +25,7 @@
                                 </Menu>
                             </Overlay>
                             <ChildContent>
-                                <Button Class="traslation-icon" Icon="translation" /> 
+                                <Button Type="@ButtonType.Link" Class="traslation-icon" Icon="translation" /> 
                             </ChildContent>
                         </Dropdown>
                     </TabBarExtraContent>
@@ -59,8 +59,6 @@
 
 
 <style>
-
-    /*不绘制InputNumber的handler*/
     .ant-input-number-handler-wrap {
         visibility: hidden;
     }
@@ -72,12 +70,6 @@
     .ant-card-body {
         height: auto;
     }
-
-    .traslation-icon {
-        border: hidden;
-        box-shadow: none;
-        padding-left: 16px;
-    }
 </style>
 
 @code{

diff --git a/wwwroot/assets/i18n/en.json b/wwwroot/assets/i18n/en.json
@@ -66,6 +66,8 @@
   "DisplayBlue": "Blue",
   "DisplayRed": "Red",
   "DisplayTotal": "TotalTNT",
+  "TNTCalculationResultTooltip": "Click this row to automatically input the values into the Blue TNT and Red TNT input fields.",
+  "TNTCalculationSetSucessMessage": "TNT Calculation Set Sucessfully",
 
   "DisplayDirection": "Result Direction",
   "DisplayAngle": "Result Angle (x | z)",

diff --git a/wwwroot/assets/i18n/es_ES.json b/wwwroot/assets/i18n/es_ES.json
@@ -66,6 +66,8 @@
   "DisplayBlue": "Azul",
   "DisplayRed": "Roja",
   "DisplayTotal": "TNTTotal",
+  "TNTCalculationResultTooltip": "Haga clic en esta fila para ingresar automáticamente los valores en los campos de entrada de TNT Azul y TNT Rojo.",
+  "TNTCalculationSetSucessMessage": "Valores de TNT calculados con éxito.",
 
   "DisplayDirection": "Dirección de Resultado",
   "DisplayAngle": "Ángulo de Resultado (x | z)",

diff --git a/wwwroot/assets/i18n/zh_cn.json b/wwwroot/assets/i18n/zh_cn.json
@@ -69,6 +69,8 @@
   "DisplayBlue": "蓝色",
   "DisplayRed": "红色",
   "DisplayTotal": "总量",
+  "TNTCalculationResultTooltip": "点击此行可自动将数值输入到蓝色 TNT 和红色 TNT 的输入字段。",
+  "TNTCalculationSetSucessMessage": "成功设置 TNT 数量。",
 
   "DisplayDirection": "方位",
   "DisplayAngle": "发射角度 (x | z)",

diff --git a/wwwroot/assets/i18n/zh_tw.json b/wwwroot/assets/i18n/zh_tw.json
@@ -69,6 +69,8 @@
   "DisplayBlue": "藍色",
   "DisplayRed": "紅色",
   "DisplayTotal": "總量",
+  "TNTCalculationResultTooltip": "點擊此行可自動將數值輸入到藍色 TNT 和紅色 TNT 的輸入欄位。",
+  "TNTCalculationSetSucessMessage": "成功設定 TNT 數量。",
 
   "DisplayDirection": "方位",
   "DisplayAngle": "發射角度 (x | z)",

diff --git a/wwwroot/banner.png b/wwwroot/banner.png
diff --git a/wwwroot/css/app.css b/wwwroot/css/app.css
@@ -48,3 +48,41 @@ a, .btn-link {
         right: 0.75rem;
         top: 0.5rem;
     }
+
+#start-up-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100vh;
+    position: absolute;
+    width: 100%;
+    background-color: white;
+    z-index: 1000;
+}
+
+#start-up-loading-circle {
+    border: 8px solid #f3f3f3;
+    border-top: 8px solid #3498db;
+    border-radius: 50%;
+    width: 60px;
+    height: 60px;
+    animation: spin 2s linear infinite;
+    margin-bottom: 20px;
+}
+
+@keyframes spin {
+    0% {
+        transform: rotate(0deg);
+    }
+
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
+p {
+    font-size: 1.5em;
+    color: #3498db;
+}
+
diff --git a/wwwroot/index.html b/wwwroot/index.html
@@ -5,6 +5,24 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
     <title>Pearl Calculator</title>
+
+    <!-- Meta for description and keywords -->
+    <meta name="description" content="Pearl Calculator is a tool designed for precise trajectory and landing point calculations for Minecraft pearl cannons." />
+    <meta name="keywords" content="Pearl Calculator, Minecraft, trajectory calculation, pearl cannon, landing points, FTL" />
+
+    <!-- Open Graph meta tags for better social media sharing -->
+    <meta property="og:title" content="Pearl Calculator" />
+    <meta property="og:description" content="A precise tool for calculating the trajectory and landing points of Minecraft pearl cannons." />
+    <meta property="og:image" content="/banner.png" />
+    <meta property="og:url" content="https://whats2000.github.io/PearlCalculatorBlazor/" />
+    <meta property="og:type" content="website" />
+
+    <!-- Twitter meta tags for Twitter Card support -->
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:title" content="Pearl Calculator" />
+    <meta name="twitter:description" content="A precise tool for calculating the trajectory and landing points of Minecraft pearl cannons." />
+    <meta name="twitter:image" content="/banner.png" />
+
     <base href="/" />
     <link href="css/app.css" rel="stylesheet" />
     <link href="PearlCalculatorBlazor.styles.css?v=2021061516" rel="stylesheet" />
@@ -15,7 +33,12 @@
 </head>
 
 <body>
-    <div id="app">Loading...</div>
+    <div id="app">
+        <div id="start-up-container">
+            <div id="start-up-loading-circle"></div>
+            <p>Loading...</p>
+        </div>
+    </div>
 
     <div id="blazor-error-ui">
         An unhandled error has occurred.