disable play buttons when game is not set

package.json

@@ -8,7 +8,7 @@
     "dev": "neu run",
     "build": "npm run clean_dist && neu build && npm run move_files && npm run move_bgs && npm run rename_exe",
     "move_files": "cp -r ./ext ./dist/GrassClipper && cp -r ./proxy ./dist/GrassClipper && cp install.cmd ./dist/GrassClipper && cp -r ./scripts ./dist/GrassClipper",
-    "move_bgs": "mkdir dist\\GrassClipper\\resources\\bg\\private && cp -r ./resources/bg/private ./dist/GrassClipper/resources/bg/private",
+    "move_bgs": "mkdir dist\\GrassClipper\\resources\\bg\\private && cp -r ./resources/bg/private ./dist/GrassClipper/resources/bg",
     "rename_exe": "mv ./dist/GrassClipper/GrassClipper-win_x64.exe ./dist/GrassClipper/GrassClipper.exe",
     "clean_dist": "rm -rf ./dist"
   }

resources/index.html

@@ -21,12 +21,12 @@
     </div>
     <div id="halvesContainer">
       <div id="firstHalf">
-        <button class="playBtn" onclick="launchOfficial()">Play Official</button>
+        <button class="playBtn" id="playOfficial" onclick="launchOfficial()">Play Official</button>
       </div>
       <div id="secondHalf">
         <div id="secondControlContainer">
           <input type="text" id="ip" placeholder="IP Address" />
-          <button class="playBtn" onclick="launchPrivate()">Play Private</button>
+          <button class="playBtn" id="playPrivate" onclick="launchPrivate()">Play Private</button>
         </div>
       </div>
     </div>

resources/js/index.js

@@ -4,6 +4,12 @@ Neutralino.init();
 document.addEventListener('DOMContentLoaded', async () => {
   setBackgroundImage();
   displayGenshinFolder();
+
+  const config = await getCfg()
+
+  if (!config.genshinImpactFolder) {
+    handleGenshinFolderNotSet()
+  }
 })
 
 async function getCfg() {
@@ -15,12 +21,39 @@ async function getCfg() {
     }))
   })
 
-  if (!cfgStr) return {
+  const config = cfgStr ? JSON.parse(cfgStr) : {
     genshinImpactFolder: '',
     lastConnect: ''
   }
 
-  return JSON.parse(cfgStr)
+  return config
+}
+
+async function enableButtons() {
+  const offBtn = document.querySelector('#playOfficial')
+  const privBtn = document.querySelector('#playPrivate')
+
+  offBtn.classList.remove('disabled')
+  offBtn.disabled = false
+
+  privBtn.classList.remove('disabled')
+  privBtn.disabled = false
+}
+
+async function handleGenshinFolderNotSet() {
+  // Set buttons to greyed out and disable
+  document.querySelector('#genshinPath').innerHTML = 'Not set'
+
+  const offBtn = document.querySelector('#playOfficial')
+  const privBtn = document.querySelector('#playPrivate')
+
+  offBtn.classList.add('disabled')
+  offBtn.disabled = true
+
+  privBtn.classList.add('disabled')
+  privBtn.disabled = true
+
+  // TODO show a dialog of sorts
 }
 
 async function displayGenshinFolder() {
@@ -33,14 +66,6 @@ async function displayGenshinFolder() {
 async function setBackgroundImage() {
   const config = await getCfg()
 
-  const officialImages = (await Neutralino.filesystem.readDirectory(config.genshinImpactFolder + '/bg')).filter(file => file.type === 'FILE')
-  const privImages = (await Neutralino.filesystem.readDirectory(NL_CWD + '/resources/bg/private')).filter(file => file.type === 'FILE')
-
-  // Pick one of the images
-  const image = officialImages[Math.floor(Math.random() * officialImages.length)].entry
-  const privImage = privImages[Math.floor(Math.random() * privImages.length)].entry
-  const path = config.genshinImpactFolder.replace('\\', '/') + '/bg/' + image
-
   // Check if resources folder exists
   const mainDir = await Neutralino.filesystem.readDirectory(NL_CWD)
   if (!mainDir.find(dir => dir.entry === 'resources')) {
@@ -59,15 +84,29 @@ async function setBackgroundImage() {
     await Neutralino.filesystem.createDirectory(NL_CWD + '/resources/bg/official')
   }
 
+  if (config.genshinImpactFolder) {
+    const officialImages = (await Neutralino.filesystem.readDirectory(config.genshinImpactFolder + '/bg')).filter(file => file.type === 'FILE')
+
+    // Pick one of the images
+    const image = officialImages[Math.floor(Math.random() * officialImages.length)].entry
+    const path = config.genshinImpactFolder.replace('\\', '/') + '/bg/' + image
+    
     // Copy to backgrounds folder
     const officialBgs = (await Neutralino.filesystem.readDirectory(NL_CWD + '/resources/bg/official/')).filter(file => file.type === 'FILE')
-
     if (!officialBgs.find(file => file.entry === image)) {
-    await Neutralino.filesystem.copyFile(path, NL_CWD + '/resources/bg/official/' + image)
+      await Neutralino.filesystem.copyFile(path, NL_CWD + '/resources/bg/official/' + image).catch(e => {
+        // TODO: Handle error
+      })
     }
 
-  // Set the background image
+    // Set background image
     document.querySelector('#firstHalf').style.backgroundImage = `url("../bg/official/${image}")`
+  }
+
+  const privImages = (await Neutralino.filesystem.readDirectory(NL_CWD + '/resources/bg/private')).filter(file => file.type === 'FILE')
+  const privImage = privImages[Math.floor(Math.random() * privImages.length)].entry
+
+  // Set the background image
   document.querySelector('#secondHalf').style.backgroundImage = `url("../bg/private/${privImage}")`
 }
 
@@ -83,6 +122,7 @@ async function setGenshinImpactFolder() {
   // Refresh background and path
   setBackgroundImage()
   displayGenshinFolder()
+  enableButtons()
 }
 
 async function getGenshinExecName() {

resources/style/index.css

@@ -86,6 +86,12 @@ body {
   background: linear-gradient(#ffc61e, #ffd326);
 }
 
+.playBtn.disabled {
+  background: linear-gradient(#9c9c9c, #949494);
+  color: rgb(226, 226, 226);
+  cursor: default;
+}
+
 .smolBtn {
   padding: 0 20px;
   border-radius: 5px;