Populate mod directory with README so the directory is created on first boot, show a message when there are no mods

src/Launcher.js

@@ -21,6 +21,7 @@ const openAsync = promisify($file.open)
 class Launcher {
   constructor(app) {
     const self = this
+    console.log(this)
 
     const options = {
       title: 'Xash3D Launcher',
@@ -28,27 +29,13 @@ class Launcher {
       bodyClass: 'skin_inset xash3d_launcher',
       width: 350,
       height: 400,
-      // onready() {
+      // TODO: center the version maybe lol
-      //   const { iframe } = launcher.el,
-      //         win = iframe.contentWindow
-
-      //   win.app = self
-      //   handleIframe(iframe)
-      // },
-      // TODO: move to actual mods folder
       onready() {
-        console.log(this)
+        this.el.footer.children[0].appendChild(self.renderFooterControls() )
         self.modList = this.el.body.appendChild(create('ul') )
         self.loadMods()
       },
-      footer: `
+      footer: `<span class="version">v${app.version}</span>`
-        <span style="display: inline-block; color: #555; padding: 3px 1px;">
-          v${app.version}
-        </span>
-        <span style="float: right">
-          <button onclick="$exe('${constants.paths.modPath}')">Open Mods Folder</button>
-        </span>
-      `
     }
 
     this.app = app
@@ -58,13 +45,11 @@ class Launcher {
   async loadMods() {
     let { modPath } = constants.paths,
         files = $io.obj.getPath(window.le._files, modPath, '/'),
-        out = []
+        mods = []
-      
-    console.log(files)
       
     if(files) {
       for(let name in files)
-        if(files[name] == 0 && $fs.utils.getExt(name) == 'asar') {
+        if(files[name] == 0 && this.isModFilename(name)) {
           let path = modPath + name,
               promise = openAsync(path, 'ArrayBuffer')
                 .then(async buffer => ({
@@ -75,16 +60,42 @@ class Launcher {
                     .then(data => JSON.parse(data.manifestString) )
                 }))
 
-          out.push(promise)
+          mods.push(promise)
         }
+    } else {
+      let readme = await this.app.bundle.open('/texts/README.txt', 'String')
+
+      $file.save($fs.utils.resolvePath(modPath + '/README.txt'), readme)
     }
 
-    out = await Promise.all(out)
+    if(mods.length === 0) {
-    out
+      this.displayNoModsNotice()
+    }
+
+    mods = await Promise.all(mods)
+    mods
       .map(mod => this.renderMod(mod))
       .map(ele => this.modList.appendChild(ele) )
   }
 
+  isModFilename(name) {
+    switch($fs.utils.getExt(name) ) {
+      case 'asar':
+        return true
+
+      // case 'gz':
+      //   return $fs.utils.getFileName(name).endsWith('.asar.gz')
+
+      default:
+        return false
+    }
+  }
+
+  async refreshMods () {
+    this.modList.innerText = ''
+    await this.loadMods()
+  }
+
   renderMod(mod) {
     // const mod = document.createElement('div'),
     //       header = document.createElement('header'),
@@ -99,10 +110,10 @@ class Launcher {
 
     let self = this,
         launch,
-        element = create('.mod.skin_outset',
+        element = create('li.mod.skin_outset',
           create('header',
             create('.info',
-              create('h5', mod.manifest.name),
+              create('h4', mod.manifest.name),
               create('span', `${mod.name} | ${parseInt(mod.size / 1_000_000)}mb`)
             ),
             launch = create('.launch')
@@ -116,6 +127,34 @@ class Launcher {
 
     return element
   }
+
+  displayNoModsNotice() {
+    let element = create('li.notice.skin_outset',
+      create('h3', constants.messages.noMods.header),
+      create('p', constants.messages.noMods.content)
+    )
+
+    this.modList.appendChild(element)
+  }
+
+  renderFooterControls() {
+    let openModsButton
+    let refreshButton
+    let controls = create('span.controls',
+      openModsButton = create('button', 'Open Mods Folder'),
+      refreshButton = create('button', 'Refresh')
+    )
+
+    openModsButton.addEventListener('click', () => {
+      $exe(constants.paths.modPath)
+    })
+
+    refreshButton.addEventListener('click', () => {
+      this.refreshMods()
+    })
+
+    return controls
+  }
 }
 
 module.exports = Launcher

view/texts/README.txt

@@ -0,0 +1,3 @@
+This directory (/a/.config/xash/mods) is where you can place a Xash93D mod file
+
+These files are either .asar or .asar.gz format