dialog system and gc launcher dialog

resources/index.html

@@ -22,6 +22,16 @@
       <span id="alertText">This is a test alert</span>
     </div>
 
+    <!-- Misc dialog -->
+    <div id="miscDialog" style="display: none">
+      <span id="dialogTitle">Dialog!</span>
+      <span id="dialogContent">This is dialog content!</span>
+      <div id="dialogBtns">
+        <button class="altBtn" id="dialogButtonAffirm">OK</button>
+        <button class="altBtn" id="dialogButtonNeg">NO</button>
+      </div>
+    </div>
+
     <!-- First time setup -->
     <div id="firstTimeNotice" style="display: none">
       <span>

resources/js/helpers.js

@@ -114,7 +114,40 @@ function hasChineseChars(str) {
   }
 
   return true
-} 
+}
+
+function openDialog(title, message, negBtn = false, affirmBtn = closeDialog) {
+  const dialog = document.getElementById('miscDialog')
+  const titleElm = document.getElementById('dialogTitle')
+  const contents = document.getElementById('dialogContent')
+  const noBtn = document.getElementById('dialogButtonNeg')
+  const yesBtn = document.getElementById('dialogButtonAffirm')
+
+  if (!noBtn) {
+    noBtn.style.display = 'none'
+  } else {
+    noBtn.style.removeProperty('display')
+    noBtn.onclick = () => closeDialog()
+  }
+
+  yesBtn.onclick = () => {
+    affirmBtn()
+    closeDialog()
+  }
+
+  // Set title and message
+  titleElm.innerText = title
+  contents.innerText = message
+
+  // Show the dialog
+  dialog.style.display = 'block'
+}
+
+function closeDialog() {
+  const dialog = document.getElementById('miscDialog')
+
+  dialog.style.display = 'none'
+}
 
 /**
  * Minimize the window

resources/js/options.js

@@ -21,6 +21,18 @@ async function toggleServerLaunchSection() {
   // Save setting
   config.serverLaunchPanel = !config.serverLaunchPanel
   Neutralino.storage.setData('config', JSON.stringify(config))
+
+  // Show a dialog for those who may want to open the downloads section
+  if (config.serverLaunchPanel && !config.serverFolder) {
+    closeSettings()
+
+    openDialog(
+      'You found the Grasscutter server launcher!' || localeObj.serverEnableDialogTitle,
+      'If you do not have an existing Grasscutter installation to set, would you like to download a build?' || localeObj.serverEnableDialogText,
+      true,
+      openDownloads
+    )
+  }
 }
 
 /**

resources/style/index.css

@@ -35,6 +35,7 @@ img {
   margin: 10px;
 }
 
+#miscDialog span,
 #firstTimeNotice span {
   display: block;
   text-align: center;
@@ -159,6 +160,7 @@ img {
   margin: 10px;
 }
 
+#miscDialog,
 #firstTimeNotice,
 #loginPanel,
 #downloadPanel,
@@ -627,4 +629,16 @@ img {
 
 #alert.show {
   top: 6%;
+}
+
+#dialogTitle {
+  font-weight: bold;
+}
+
+#dialogBtns {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  width: 100%;
+  margin: 0.6em;
 }