help sections for downloading

src-tauri/lang/en.json

@@ -7,9 +7,7 @@
     "ip_placeholder": "Server Address...",
     "port_placeholder": "Port...",
     "files_downloading": "Files Downloading: ",
-    "files_extracting": "Files Extracting: ",
-    "port_help_text": "Ensure this is the Dispatch server port, not the Game server port. This is almost always '443'.",
-    "game_help_text": "You do not need to use a separate copy to play with Grasscutter. This is for either downgrading to 2.6 or if you do not have the game installed."
+    "files_extracting": "Files Extracting: "
   },
   "options": {
     "game_exec": "Set Game Executable",
@@ -46,5 +44,14 @@
   "news": {
     "latest_commits": "Recent Commits",
     "latest_version": "Latest Version"
+  },
+  "help": {
+    "port_help_text": "Ensure this is the Dispatch server port, not the Game server port. This is almost always '443'.",
+    "game_help_text": "You do not need to use a separate copy to play with Grasscutter. This is for either downgrading to 2.6 or if you do not have the game installed.",
+    "gc_stable_jar": "Download the current stable Grasscutter build, which includes jar file and data files.",
+    "gc_dev_jar": "Download the latest development Grasscutter build, which includes jar file and data files.",
+    "gc_stable_data": "Download the current stable Grasscutter data files, which does not come with a jar file. This is useful for updating.",
+    "gc_dev_data": "Download the latest development Grasscutter data files, which does not come with a jar file. This is useful for updating.",
+    "resources": "These are also required to run a Grasscutter server. This button will be grey if you have an existing resources folder with contents inside"
   }
 }

src/ui/components/ServerLaunchSection.tsx

@@ -59,8 +59,8 @@ export default class ServerLaunchSection extends React.Component<IProps, IState>
       ip: config.last_ip || '',
       port: config.last_port || '',
       ipPlaceholder: await translate('main.ip_placeholder'),
-      portPlaceholder: await translate('main.port_placeholder'),
-      portHelpText: await translate('main.port_help_text')
+      portPlaceholder: await translate('help.port_placeholder'),
+      portHelpText: await translate('help.port_help_text')
     })
   }
 

src/ui/components/common/HelpButton.css

@@ -20,11 +20,14 @@
 
 .HelpContents {
   text-align: center;
+  position: relative;
 }
 
 .HelpContents .MiniDialog {
-  bottom: 80%;
-  left: 35%;
-  width: 60%;
-  height: 60%;
+  position: absolute;
+
+  bottom: 40px;
+  right: -450%;
+  width: 200px;
+  height: 120px;
 }

src/ui/components/menu/Downloads.css

@@ -24,4 +24,8 @@
 
 .DownloadValue .BigButtonText {
   font-size: 12px;
+}
+
+.DownloadMenuSection .HelpButton img {
+  filter: none;
 }

src/ui/components/menu/Downloads.tsx

@@ -11,6 +11,7 @@ import Divider from './Divider'
 import { getConfigOption, setConfigOption } from '../../../utils/configuration'
 import { invoke } from '@tauri-apps/api'
 import { listen } from '@tauri-apps/api/event'
+import HelpButton from '../common/HelpButton'
 
 const STABLE_REPO_DOWNLOAD = 'https://github.com/Grasscutters/Grasscutter/archive/refs/heads/stable.zip'
 const DEV_REPO_DOWNLOAD = 'https://github.com/Grasscutters/Grasscutter/archive/refs/heads/development.zip'
@@ -194,6 +195,9 @@ export default class Downloads extends React.Component<IProps, IState> {
             <Tr text={
               this.state.grasscutter_set ? 'downloads.grasscutter_stable' : 'downloads.grasscutter_stable_update'
             } />
+            <HelpButton>
+              <Tr text="help.gc_stable_jar" />
+            </HelpButton>
           </div>
           <div className='DownloadValue'>
             <BigButton disabled={this.state.grasscutter_downloading} onClick={this.downloadGrasscutterStable} id="grasscutterStableBtn" >
@@ -206,6 +210,9 @@ export default class Downloads extends React.Component<IProps, IState> {
             <Tr text={
               this.state.grasscutter_set ? 'downloads.grasscutter_latest' : 'downloads.grasscutter_latest_update'
             } />
+            <HelpButton>
+              <Tr text="help.gc_dev_jar" />
+            </HelpButton>
           </div>
           <div className='DownloadValue'>
             <BigButton disabled={this.state.grasscutter_downloading} onClick={this.downloadGrasscutterLatest} id="grasscutterLatestBtn" >
@@ -221,6 +228,9 @@ export default class Downloads extends React.Component<IProps, IState> {
             <Tr text={
               this.state.grasscutter_set ? 'downloads.grasscutter_stable_data' : 'downloads.grasscutter_stable_data_update'
             } />
+            <HelpButton>
+              <Tr text="help.gc_stable_data" />
+            </HelpButton>
           </div>
           <div className='DownloadValue'>
             <BigButton disabled={this.state.repo_downloading} onClick={this.downloadGrasscutterStableRepo} id="grasscutterStableRepo" >
@@ -233,6 +243,9 @@ export default class Downloads extends React.Component<IProps, IState> {
             <Tr text={
               this.state.grasscutter_set ? 'downloads.grasscutter_latest_data' : 'downloads.grasscutter_latest_data_update'
             } />
+            <HelpButton>
+              <Tr text="help.gc_dev_data" />
+            </HelpButton>
           </div>
           <div className='DownloadValue'>
             <BigButton disabled={this.state.repo_downloading} onClick={this.downloadGrasscutterStableRepo} id="grasscutterDevRepo" >
@@ -246,6 +259,9 @@ export default class Downloads extends React.Component<IProps, IState> {
         <div className='DownloadMenuSection'>
           <div className='DownloadLabel'>
             <Tr text="downloads.resources" />
+            <HelpButton>
+              <Tr text="help.resources" />
+            </HelpButton>
           </div>
           <div className='DownloadValue'>
             <BigButton disabled={this.state.resources_downloading || !this.state.grasscutter_set || this.state.resources_exist} onClick={this.downloadResources} id="resourcesBtn" >