begin downloads panel

resources/index.html

@@ -115,6 +115,28 @@
       </div>
     </div>
 
+    <div id="downloadPanel" style="display: none;">
+      <div id="downloadTitleBar">
+        <span id="downloadTitle">
+          <span id="downloadTitleText">Downloads</span>
+          <span id="downloadClose" onclick="closeDownloads()">
+            <img src="icons/close.svg" />
+          </span>
+        </span>
+      </div>
+      <div id="downloadPanelInner">
+        <div class="downloadRow">
+          <div class="downloadSection">
+            <span class="downloadLabel" id="installerTitle">Installer</span>
+            <button class="smolBtn" onclick="runInstallScript()" id="proxyInstall">Install</button>
+          </div>
+          <span class="downloadSubtitle" id="installerSubtitle">
+            Installs proxy and other tools. Required for Grasscutter servers.
+          </span>
+        </div>
+      </div>
+    </div>
+
     <!-- Setting panel -->
     <div id="settingsPanel" style="display: none;">
       <div id="settingsTitleBar">
@@ -195,6 +217,9 @@
       <div id="refreshBtn" onclick="window.location.reload()">
         <img src="icons/refresh.svg" />
       </div>
+      <div id="downloadBtn" onclick="openDownloads()">
+        <img src="icons/download.svg" />
+      </div>
       <div id="settingsBtn" onclick="openSettings()">
         <img src="icons/cog.svg" />
       </div>
@@ -205,6 +230,8 @@
         <img src="icons/close.svg" />
       </div>
     </div>
+
+    <!-- Main content -->
     <div id="panelContainer">
       <!-- Official play btn -->
       <div id="firstPanel">

resources/js/gcdownloader.js

@@ -56,7 +56,6 @@ async function downloadGC(branch) {
   // Run installer
   createCmdWindow(`.\\scripts\\gc_download.cmd ${artiUrl} ${keystoreUrl} ${branch}`)
 
-  
   // Display folder after saving config
   displayServerFolder()
 }

resources/js/index.js

@@ -246,6 +246,20 @@ async function handleFavoriteList() {
   }
 }
 
+async function openDownloads() {
+  const downloads = document.querySelector('#downloadPanel')
+
+  if (downloads.style.display === 'none') {
+    downloads.style.removeProperty('display')
+  }
+}
+
+async function closeDownloads() {
+  const downloads = document.querySelector('#downloadPanel')
+
+  downloads.style.display = 'none'
+}
+
 async function openSettings() {
   const settings = document.querySelector('#settingsPanel')
   const config = await getCfg()

resources/style/index.css

@@ -157,6 +157,7 @@ a {
 
 #firstTimeNotice,
 #loginPanel,
+#downloadPanel,
 #settingsPanel {
   display: block;
   position: absolute;
@@ -172,6 +173,7 @@ a {
   font-family: system-ui;
 }
 
+#downloadPanel,
 #settingsPanel {
   width: 35%;
   height: 80%;
@@ -184,6 +186,7 @@ a {
   margin-bottom: 10px;
 }
 
+#downloadPanelInner,
 #settingsPanelInner {
   display: flex;
   flex-direction: column;
@@ -192,16 +195,19 @@ a {
   padding: 10px 10%;
 }
 
+.downloadRow,
 .settingsRow {
   width: 100%;
 }
 
+.downloadTitle,
 .settingTitle {
   font-size: 1.2em;
   font-weight: bold;
   margin-bottom: 10px;
 }
 
+.downloadLabel,
 .settingLabel {
   display:inline-block;
   font-size: 1em;
@@ -209,12 +215,14 @@ a {
   margin: 10px 0px;
 }
 
+.downloadSubtitle,
 .settingSubtitle {
   color: rgb(165, 165, 165);
   font-size: 0.8em;
   font-weight: normal;
 }
 
+.downloadSection,
 .settingSection {
   display: flex;
   flex-direction: row;
@@ -222,10 +230,12 @@ a {
   justify-content: space-between;
 }
 
+.downloadSection .smolBtn,
 .settingSection .smolBtn {
   height: 30px;
 }
 
+#downloadTitleBar
 #settingsTitleBar {
   display: flex;
   flex-direction: row;
@@ -233,15 +243,18 @@ a {
   justify-content: space-between;
 }
 
+#downloadClose,
 #settingsClose {
   display: inline-block;
   transition: filter 0.1s ease-in-out;
 }
 
+#downloadClose img,
 #settingsClose img {
   height: 20px;
 }
 
+#downloadClose:hover,
 #settingsClose:hover {
   filter: invert(85%) sepia(31%) saturate(560%) hue-rotate(329deg) brightness(100%) contrast(92%);
   cursor: pointer;