fix #3, preview final features

Author: Leeous

.gitignore

@@ -0,0 +1 @@
+general.todo

index.js renamed to app.js

@@ -2,12 +2,12 @@
 const {
   app,
   BrowserWindow,
-  ipcMain
+  ipcMain,
+  dialog
 } = require('electron')
 const fs = require('fs')
 const { spawn } = require('child_process');
 const settings = require('electron-settings');
-
 // Keep a global reference of the window object, if you don't, the window will
 // be closed automatically when the JavaScript object is garbage collected.
 let mainWindow
@@ -98,20 +98,22 @@ function sendClientAddonInfo() {
         ADDON_IDS.push([fixedArray[i].substr(0, 11).replace(/\s/g, '').toString()])
     }
 
-    console.log(ADDON_IDS)
-    console.log('Sent to client!')
+    if (fixedArray == "Couldn't initialize Steam!\r") {
+      mainWindow.webContents.send('errorAlert', ADDON_IDS);
+    }
     mainWindow.webContents.send('addonInfo', ADDON_IDS);
   });
 }
 
 ipcMain.on('createJsonFile', (event, json, dir) => {
   console.log(json, dir)
   fs.writeFileSync(dir + "\\addon.json", json, 'utf8', (err) => {
-    console.log("An error occured while writing JSON Object to File.\n", err);
+    console.log("An error occured while writing JSON object to File.\n", err);
     mainWindow.webContents.send('error', "Error writing directory.");
   });
 });
 
+// This is ran once the client requests to create an addon
 ipcMain.on('createGMAFile', (event, addonDir) => {
   console.log("Addon's Directory: " + addonDir.toString())
   const gmad = spawn(settings.get('gmodDirectory') + '\\bin\\gmad.exe', ['create', '-folder', addonDir]);
@@ -125,6 +127,7 @@ ipcMain.on('createGMAFile', (event, addonDir) => {
   });
 });
 
+// This block will upload the GMA file to the Steam Workshop
 ipcMain.on('uploadToWorkshop', (event, gmaDir, iconDir, addonId) => {
   if (addonId != null) {
     const gmpublish = spawn(settings.get('gmodDirectory') + '\\bin\\gmpublish.exe', ['update', '-id', addonId, '-icon', iconDir, '-addon', gmaDir]);
@@ -133,26 +136,24 @@ ipcMain.on('uploadToWorkshop', (event, gmaDir, iconDir, addonId) => {
       var fixedArray = arrayOfOutput.slice(arrayOfOutput.length - 8, arrayOfOutput.length - 7);
       fixedArray = fixedArray[0].replace(/\D/, '');
       fixedArray = fixedArray.substr(5, fixedArray.length);
-      console.log(fixedArray);
       mainWindow.webContents.send('currentAddonID', fixedArray);
     });
   } else {
+    // Passes all the info needed to publish a Garry's Mod addon
     const gmpublish = spawn(settings.get('gmodDirectory') + '\\bin\\gmpublish.exe', ['create', '-icon', iconDir, '-addon', gmaDir]);
     gmpublish.stdout.on('data', (data) => {
       var arrayOfOutput = data.toString().split('\n');
-      console.log(data.toString);
-      var fixedArray = arrayOfOutput.slice(arrayOfOutput.length - 8, arrayOfOutput.length - 7);
+      console.log(arrayOfOutput)
+      var fixedArray = arrayOfOutput.slice(arrayOfOutput.length - 2, arrayOfOutput.length - 1);
       fixedArray = fixedArray[0].replace(/\D/, '');
       fixedArray = fixedArray.substr(5, fixedArray.length);
-      console.log(fixedArray);
-      mainWindow.webContents.send('currentAddonID', fixedArray);
+      var stringArray = fixedArray.toString()
+      var addonURLIndex = stringArray.indexOf("?id=")
+      var addonURL = stringArray.slice(addonURLIndex + 4, addonURLIndex + 14)
+      console.log(addonURL)
+      mainWindow.webContents.send('currentAddonID', addonURL);
     });
   };
-
-})
-
-
-
-
+});
 
 // gmpublish.exe create -icon path/to/image512x512.jpg -addon path/to/gma.gma

index.html

@@ -35,26 +35,30 @@ <h4 style="font-weight: 300; margin: 10px">Steam <b>must</b> be open!</h4>
     <div id="addon_management">
         <div id="addon_management_prompt">
             <h3>What would you like to do?</h3>
-            <button id="create_new_addon_button" class="button_normal medium-text" style="margin: 10px;">Create a new addon</button>
-            <button id="update_existing_addon_button" class="button_normal medium-text" style="margin: 10px;">Loading...</button>
+            <div id="addon_mgt_btn_grid">
+                <button id="create_new_addon_button" class="button_normal medium-text" style="margin: 10px;">Create a new addon</button>
+                <button id="update_existing_addon_button" class="button_normal medium-text" style="margin: 10px;">Loading...</button>
+                <button class="button_normal medium-text" style="margin: 10px;">Extract Addon</button>
+                <button class="button_normal medium-text" style="margin: 10px;">Download Addon</button>
+            </div>
         </div>
         <div id="update_existing_addon">
             <div class="top">
-                <button id="back_button_existing_addon" class="back_button" data-backwards="#addon_management_prompt" data-forwards="#update_existing_addon" data-resize="500, 175">◀ Back</button>
+                <button id="back_button_existing_addon" class="back_button" data-backwards="#addon_management_prompt" data-forwards="#update_existing_addon" data-resize="500, 200">◀ Back</button>
                 <h3>Your addons</h3>
             </div>
             <div id="yourAddons"></div>
         </div>
         <div id="create_new_addon">
             <div class="top">
-                <button id="back_button_addon_creation" class="back_button" data-backwards="#addon_management_prompt" data-forwards="#create_new_addon" data-resize="500, 175">◀ Back</button>
+                <button id="back_button_addon_creation" class="back_button" data-backwards="#addon_management_prompt" data-forwards="#create_new_addon" data-resize="500, 200">◀ Back</button>
                 <h3>Addon creation</h3>
             </div>
             <div id="addon_creation">
                 <div id="addonDirPrompt">
                     <p>Please select your addon's folder</p>
                     <button class="button_normal fake_select" data-buttonclick="#addon_dir_folder">Choose Directory</button>
-                    <input id="addon_dir_folder" class="real_select" type="file" webkitdirectory />
+                    <input id="addon_dir_folder" class="real_select" type="button"/>
                     <p id="addonDir"><b></b></p>
                     <div class="next_prompt">
                         <button id="addonDirCheck" class="transition_button" data-divtoshow="#addonIconPrompt" data-divtohide="#addonDirPrompt" data-resize="500, 250" disabled>Next</button>
@@ -160,7 +164,7 @@ <h3>Addon creation</h3>
                 <div id="gmaPrep">
                     <!-- <p>Created <span style="font-weight: 700">addon.json</span>!</p> -->
                     <h3>Create GMA for uploading to the Workshop?</h3>
-                    <button style="width: 100px;" class="button_normal transition_button resetAddonCreation" data-divtohide="#create_new_addon" data-divtoshow="#addon_management_prompt" data-resize="500, 175">No</button>
+                    <button style="width: 100px;" class="button_normal transition_button resetAddonCreation" data-divtohide="#create_new_addon" data-divtoshow="#addon_management_prompt" data-resize="500, 200">No</button>
                     <button style="width: 100px;" id="createGMAFile" class="button_normal transition_button">Yes</button>
                     <!-- <img src="src/img/loading.gif" style="display: block; margin-left: auto; margin-right: auto; width: 64px;" alt=""> -->
                 </div>
@@ -180,10 +184,15 @@ <h3>Upload to the Workshop?</h3>
                 <div id="new_addon">
                     <h3>Uploaded!</h3>
                     <p><a id="new_addon_link" style="color: white;" href="#">View on Steam</a></p>
-                    <button class="button_normal transition_button resetAddonCreation" data-divtohide="#create_new_addon" data-divtoshow="#addon_management_prompt" data-resize="500, 175" style="width: 100px;">Done</button>
+                    <button class="button_normal transition_button resetAddonCreation" data-divtohide="#create_new_addon" data-divtoshow="#addon_management_prompt" data-resize="500, 200" style="width: 100px;">Done</button>
                 </div>
             </div>
         </div>
+        <div id="extract_addon">
+            <div class="top">
+                <h3>Addon Extraction</h3>
+            </div>
+        </div>
     </div>
     <div id="errorNote">
         <p>Error: <span id="error"></span></p>

package.json

@@ -2,7 +2,7 @@
   "name": "gmod-addon-tool",
   "version": "1.0.0",
   "description": "A simple tool to update workshop addons.",
-  "main": "index.js",
+  "main": "app.js",
   "dependencies": {
     "cross-spawn": "^6.0.5",
     "electron-settings": "^3.2.0",

src/css/style.css

@@ -40,11 +40,17 @@ header {
 }
 
 /* IDs */
+#addon_mgt_btn_grid {
+    display: grid;
+    grid-row: 2;
+    grid-template-columns: auto auto;
+}
 
 #addon_management_prompt .button_normal {
     margin: 15px 0;
     box-shadow: 0 5px #797979;
     transition: none;
+    display: inline-block;
 }
 
 #addon_management_prompt .button_normal:active {
@@ -164,7 +170,12 @@ header {
     text-align: center;
 }
 
-#update_existing_addon, #directory_selection, #create_new_addon, #jsonCreator, #gmaPrep, #addonjsonPrompt, #addon_management_prompt, #createGMA, #uploadToWorkshopPrompt, #addonIconPrompt, #uploading, #new_addon, #errorNote {
+#addon_management {
+    display: none;
+    text-align: center;
+}
+
+#update_existing_addon, #directory_selection, #create_new_addon, #jsonCreator, #gmaPrep, #addonjsonPrompt, #addon_management_prompt, #createGMA, #uploadToWorkshopPrompt, #addonIconPrompt, #uploading, #new_addon, #errorNote, #extract_addon {
     display: none;
 }
 

src/js/script.js

@@ -7,8 +7,8 @@ const {
 const settings = require("electron-settings");
 const shell = require("electron").shell;
 const imageSize = require("image-size");
+const { dialog } = require('electron').remote
 let win = remote.getCurrentWindow();
-
 addon_data = [];
 api_data = {
     "itemcount": "0",
@@ -31,9 +31,16 @@ addonToCreateData = {
     "tags": [],
     "ignore": []
 }
-currentAppVersion = "v1.2";
-
-
+currentAppVersion = "v1.3";
+
+let dirDialogOptions = {
+    title : "Select your addon's folder", 
+    buttonLabel : "Select Folder",
+    filters :[
+     {name: 'All Folders', extensions: ['*']}
+    ],
+    properties: ['openDirectory']
+}
 
 // Make links open in enternal browser
 $(document).on("click", "a[href^='http']", function(event) {
@@ -48,6 +55,11 @@ $(document).ready(() => {
         getAddonInfoFromSteam(message)
     });
 
+    // Sends an alert if Steam doesn't initialize 
+    ipcRenderer.on("errorAlert", (event, message) => {
+        alert("Steam doesn't seem open!\nOpen Steam and restart. ")
+    });
+
     // Check current version, let user know if it differs
     $.ajax({
         type: "GET",
@@ -65,8 +77,7 @@ $(document).ready(() => {
     function getAddonInfoFromSteam(message) {
         arrayOfAddonIds = message;
 
-        api_data['itemcount'] = arrayOfAddonIds.length;
-        
+        api_data['itemcount'] = arrayOfAddonIds.length;  
 
         for (let i = 0; i < arrayOfAddonIds.length; i++) {
             // const element = arrayOfAddonIds[i];
@@ -102,7 +113,7 @@ $(document).ready(() => {
         $('#addon_management').fadeIn();
         $('#addon_management_prompt').fadeIn();
         win.setBounds({
-            height: 175
+            height: 200
         })
         ipcRenderer.send('getAddonInfo');
     } else {
@@ -151,16 +162,22 @@ $(document).ready(() => {
     })
 
     // If directory exists (and is writable/readable) allow user to procede 
-    $('#addon_dir_folder').change(() => {
-        currentNewAddon = document.getElementById("addon_dir_folder").files[0].path;
-        ipcRenderer.send('checkIfDirectoryExists', currentNewAddon);
-        var n = currentNewAddon.lastIndexOf('\\');
-        var result = currentNewAddon.substring(n + 1);
-        $('#addonDir b').text(result);
-        $('#addonDirCheck').css('background-color', '#56bd56');
-        $('#addonDirCheck').prop('disabled', false);
-        $('#addonDirCheck').css('cursor', 'pointer');
-    })
+    $('#addon_dir_folder').click(() => {
+        dialog.showOpenDialog(win, dirDialogOptions).then(result => {
+            if (!result.canceled) {
+                currentNewAddon = result.filePaths[0];
+                ipcRenderer.send('checkIfDirectoryExists', currentNewAddon);
+                var n = currentNewAddon.lastIndexOf('\\');
+                var result = currentNewAddon.substring(n + 1);
+                $('#addonDir b').text(result);
+                $('#addonDirCheck').css('background-color', '#56bd56');
+                $('#addonDirCheck').prop('disabled', false);
+                $('#addonDirCheck').css('cursor', 'pointer');
+            }
+        }).catch(err => {
+            console.log("dialog error")
+        });
+    });
 
     $('#addon_icon').change(() => {
         addonIcon = document.getElementById("addon_icon").files[0].path;
@@ -190,7 +207,7 @@ $(document).ready(() => {
             $('#addon_management').fadeIn();
             $('#addon_management_prompt').fadeIn();
             win.setBounds({
-                height: 175,
+                height: 200,
             })
         });
     })
@@ -418,6 +435,7 @@ $(document).ready(() => {
         $('#gmaPrep').fadeOut(() => {
             win.setBounds({height: 250});
             $('#createGMA').fadeIn();
+            console.log(currentNewAddon)
             ipcRenderer.send('createGMAFile', currentNewAddon);
         });
     });