Add instructions button

* Add instructions button * reformat code
mmvanheusden · Nov 14, 2023 · 61f1852 · 61f1852
1 parent 1a2b91b
commit 61f1852
Show file tree

Hide file tree

Showing 3 changed files with 79 additions and 64 deletions.
diff --git a/downloader.js b/downloader.js
@@ -1,14 +1,8 @@
 // Uses a prebuild binary of https://github.com/SteamRE/DepotDownloader
 // License can be found at https://github.com/SteamRE/DepotDownloader/blob/master/LICENSE
-const { ipcRenderer, shell} = require("electron")
+const {ipcRenderer, shell} = require("electron")
 const {
-	preDownloadCheck,
-	download,
-	createCommand,
-	runCommand,
-	removeDir,
-	removeFile,
-	unzip
+	preDownloadCheck, download, createCommand, runCommand, removeDir, removeFile, unzip
 } = require("./utils")
 
 // Initializes the variable that holds the path to the specified download location
@@ -61,44 +55,48 @@ function openRelevantPage(target) {
 	switch (target) {
 	// why are you not indenting nicely eslint?
 	/* eslint-disable indent */
-		case "dotnet":
-			document.getElementById("dotnetwarning").hidden = true
-			if (os.includes("win")) {
-				console.debug("Opened .NET download page for " + os.charAt(0).toUpperCase() + os.slice(1))
-				void electron.shell.openExternal("https://aka.ms/dotnet/6.0/dotnet-sdk-win-x64.exe")
-			}
-			if (os.includes("linux")) {
-				const electron = require("electron")
-				console.debug("Opened .NET download page for " + os.charAt(0).toUpperCase() + os.slice(1))
-				void electron.shell.openExternal("https://docs.microsoft.com/en-us/dotnet/core/install/linux")
-			}
-			if (os.includes("darwin")) {
-				console.debug("Opened .NET download page for" + os)
-				//TODO: Apple Silicon(ARM64) URL
-				void electron.shell.openExternal("https://aka.ms/dotnet/6.0/dotnet-sdk-osx-x64.pkg")
-			}
-			break
-		case "issues":
-			console.debug("Opened GitHub issues page")
-			void electron.shell.openExternal("https://github.com/mmvanheusden/SteamDepotDownloaderGUI/issues/new")
-			break
-		case "steamdb":
-			console.debug("Opened SteamDB instant search page")
-			void electron.shell.openExternal("https://steamdb.info/instantsearch/")
-			break
-		case "donate":
-			console.debug("Opened donation page")
-			void electron.shell.openExternal("https://liberapay.com/barbapapa/")
-			break
-		default:
-			return
+	case "dotnet":
+		document.getElementById("dotnetwarning").hidden = true
+		if (os.includes("win")) {
+			console.debug("Opened .NET download page for " + os.charAt(0).toUpperCase() + os.slice(1))
+			void electron.shell.openExternal("https://aka.ms/dotnet/6.0/dotnet-sdk-win-x64.exe")
+		}
+		if (os.includes("linux")) {
+			const electron = require("electron")
+			console.debug("Opened .NET download page for " + os.charAt(0).toUpperCase() + os.slice(1))
+			void electron.shell.openExternal("https://docs.microsoft.com/en-us/dotnet/core/install/linux")
+		}
+		if (os.includes("darwin")) {
+			console.debug("Opened .NET download page for" + os)
+			//TODO: Apple Silicon(ARM64) URL
+			void electron.shell.openExternal("https://aka.ms/dotnet/6.0/dotnet-sdk-osx-x64.pkg")
+		}
+		break
+	case "issues":
+		console.debug("Opened GitHub issues page")
+		void electron.shell.openExternal("https://github.com/mmvanheusden/SteamDepotDownloaderGUI/issues/new")
+		break
+	case "steamdb":
+		console.debug("Opened SteamDB instant search page")
+		void electron.shell.openExternal("https://steamdb.info/instantsearch/")
+		break
+	case "donate":
+		console.debug("Opened donation page")
+		void electron.shell.openExternal("https://liberapay.com/barbapapa/")
+		break
+	case "instructions":
+		console.debug("Opened instructions page")
+		void electron.shell.openExternal("https://github.com/mmvanheusden/SteamDepotDownloaderGUI/#how-to-use")
+		break
+	default:
+		return
 	}
 	/* eslint-enable indent */
 }
 
 // Opens the chosen location where the game will be downloaded to
 function checkPath() {
-	shell.openPath(exportedFile).then( () => {
+	shell.openPath(exportedFile).then(() => {
 		console.log("Opened " + exportedFile + " in file explorer.")
 	})
 }
@@ -147,6 +145,7 @@ window.addEventListener("DOMContentLoaded", () => {
 	document.getElementById("smbtn1").addEventListener("click", () => openRelevantPage("issues"))
 	document.getElementById("smbtn2").addEventListener("click", () => openRelevantPage("steamdb"))
 	document.getElementById("smbtn3").addEventListener("click", () => openRelevantPage("donate"))
+	document.getElementById("smbtn4").addEventListener("click", () => openRelevantPage("instructions"))
 	document.getElementById("pickpath").addEventListener("click", () => ipcRenderer.send("selectpath"))
 	document.getElementById("checkpath").addEventListener("click", checkPath)
 	document.getElementById("osdropdown").addEventListener("input", checkSelection)

diff --git a/index.html b/index.html
@@ -15,14 +15,14 @@
 		<div class="flash flash-error mx-2 mt-2 color-shadow-medium" id="dotnetalert">
 			<svg class="octicon" height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
 				<path d="M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8zm6.5-.25A.75.75 0 017.25 7h1a.75.75 0 01.75.75v2.75h.25a.75.75 0 010 1.5h-2a.75.75 0 010-1.5h.25v-2h-.25a.75.75 0 01-.75-.75zM8 6a1 1 0 100-2 1 1 0 000 2z"
-					  fill-rule="evenodd"></path>
+				      fill-rule="evenodd"></path>
 			</svg>
 			<code><span class="text-italic">dotnet</span></code> was not found.
 			<button class="btn btn-sm flash-action" id="dotnetalertbtn">
 				<svg class="octicon" height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
 					<path d="M7.47 10.78a.75.75 0 001.06 0l3.75-3.75a.75.75 0 00-1.06-1.06L8.75 8.44V1.75a.75.75 0 00-1.5
          0v6.69L4.78 5.97a.75.75 0 00-1.06 1.06l3.75 3.75zM3.75 13a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5z"
-						  fill-rule="evenodd"></path>
+					      fill-rule="evenodd"></path>
 				</svg>
 				<span class="text-bold">Download</span>
 			</button>
@@ -33,8 +33,9 @@
 		<div class="flash flash-warn mx-2 mt-2 color-shadow-medium" id="emptyalert">
 			<svg class="octicon" height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
 				<path d="M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8zm6.5-.25A.75.75 0 017.25 7h1a.75.75 0 01.75.75v2.75h.25a.75.75 0 010 1.5h-2a.75.75 0 010-1.5h.25v-2h-.25a.75.75 0 01-.75-.75zM8 6a1 1 0 100-2 1 1 0 000 2z"
-					  fill-rule="evenodd"></path>
-			</svg>Please fill in all required fields.
+				      fill-rule="evenodd"></path>
+			</svg>
+			Please fill in all required fields.
 		</div>
 	</div>
 	<div class="f1-light text-center">Steam Depot Downloader</div>
@@ -44,14 +45,16 @@
 			<div class="form-group-header">
 				<label for="username">Username</label>
 			</div>
-			<input class="form-control input-block" id="username" type="text" placeholder="Leave empty for anonymous download"/>
+			<input class="form-control input-block" id="username" type="text"
+			       placeholder="Leave empty for anonymous download"/>
 		</div>
 
 		<div class="form-group mx-3 mt-1">
 			<div class="form-group-header">
 				<label for="password">Password</label>
 			</div>
-			<input class="form-control input-block" id="password" type="password" placeholder="Leave empty for anonymous download"/>
+			<input class="form-control input-block" id="password" type="password"
+			       placeholder="Leave empty for anonymous download"/>
 		</div>
 
 		<div class="form-group mx-3 mt-1 required">
@@ -79,11 +82,13 @@
 			<div class="form-group-header">
 				<label>Download Location</label>
 			</div>
-			<div aria-label="Pick the path/location where the game will be downloaded to." class="form-control btn btn-sm tooltipped tooltipped-ne" id="pickpath">
+			<div aria-label="Pick the path/location where the game will be downloaded to."
+			     class="form-control btn btn-sm tooltipped tooltipped-ne" id="pickpath">
 				Set location
 			</div>
 
-			<div aria-label="Check the location that has been selected." class="form-control btn btn-sm ml-2 tooltipped tooltipped-ne" id="checkpath" aria-disabled="true">
+			<div aria-label="Check the location that has been selected."
+			     class="form-control btn btn-sm ml-2 tooltipped tooltipped-ne" id="checkpath" aria-disabled="true">
 				Open location
 			</div>
 		</div>
@@ -129,40 +134,53 @@
 
 	<div class="form-group mt-3 ml-3 mr-3">
 		<button class="btn btn-block btn-primary" id="downloadbtn">
-			<svg  class="octicon filter-red" height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
+			<svg class="octicon filter-red" height="16" viewBox="0 0 16 16" width="16"
+			     xmlns="http://www.w3.org/2000/svg">
 				<path d="M7.47 10.78a.75.75 0 001.06 0l3.75-3.75a.75.75 0 00-1.06-1.06L8.75 8.44V1.75a.75.75 0 00-1.5 0v6.69L4.78 5.97a.75.75 0 00-1.06 1.06l3.75 3.75zM3.75 13a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5z"
-					  fill-rule="evenodd"></path>
+				      fill-rule="evenodd"></path>
 			</svg>
 			Download
 		</button>
 	</div>
 
-	<div aria-label="Visit the GitHub issues website." class="btn btn-sm ml-3 tooltipped tooltipped-ne mb-1" id="smbtn1">
+	<div aria-label="Visit the GitHub issues website." class="btn btn-sm ml-3 tooltipped tooltipped-ne mb-1"
+	     id="smbtn1">
 		<svg fill="#8B949E" height="16" style="display: inline-block; vertical-align: text-bottom;" viewBox="0 0 16 16"
-			 width="16" xmlns="http://www.w3.org/2000/svg">
+		     width="16" xmlns="http://www.w3.org/2000/svg">
 			<path d="M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8zm9 3a1 1 0 11-2 0 1 1 0 012 0zM6.92 6.085c.081-.16.19-.299.34-.398.145-.097.371-.187.74-.187.28 0 .553.087.738.225A.613.613 0 019 6.25c0 .177-.04.264-.077.318a.956.956 0 01-.277.245c-.076.051-.158.1-.258.161l-.007.004a7.728 7.728 0 00-.313.195 2.416 2.416 0 00-.692.661.75.75 0 001.248.832.956.956 0 01.276-.245 6.3 6.3 0 01.26-.16l.006-.004c.093-.057.204-.123.313-.195.222-.149.487-.355.692-.662.214-.32.329-.702.329-1.15 0-.76-.36-1.348-.863-1.725A2.76 2.76 0 008 4c-.631 0-1.155.16-1.572.438-.413.276-.68.638-.849.977a.75.75 0 101.342.67z"
-				  fill-rule="evenodd"></path>
+			      fill-rule="evenodd"></path>
 		</svg>
 		Help
 	</div>
 
-	<div aria-label="Visit the SteamDB instant search website." class="btn btn-sm ml-2 tooltipped tooltipped-n mb-1" id="smbtn2">
+	<div aria-label="Visit the SteamDB instant search website." class="btn btn-sm ml-2 tooltipped tooltipped-n mb-1"
+	     id="smbtn2">
 		<svg aria-hidden="true" class="octicon" height="14" viewBox="0 0 128 128" width="14"
-			 xmlns="http://www.w3.org/2000/svg">
+		     xmlns="http://www.w3.org/2000/svg">
 			<path d="M63.9 0C30.5 0 3.1 11.9.1 27.1l35.6 6.7c2.9-.9 6.2-1.3 9.6-1.3l16.7-10c-.2-2.5 1.3-5.1 4.7-7.2 4.8-3.1 12.3-4.8 19.9-4.8 5.2-.1 10.5.7 15 2.2 11.2 3.8 13.7 11.1 5.7 16.3-5.1 3.3-13.3 5-21.4 4.8l-22 7.9c-.2 1.6-1.3 3.1-3.4 4.5-5.9 3.8-17.4 4.7-25.6 1.9-3.6-1.2-6-3-7-4.8L2.5 38.4c2.3 3.6 6 6.9 10.8 9.8C5 53 0 59 0 65.5c0 6.4 4.8 12.3 12.9 17.1C4.8 87.3 0 93.2 0 99.6 0 115.3 28.6 128 64 128c35.3 0 64-12.7 64-28.4 0-6.4-4.8-12.3-12.9-17 8.1-4.8 12.9-10.7 12.9-17.1 0-6.5-5-12.6-13.4-17.4 8.3-5.1 13.3-11.4 13.3-18.2 0-16.5-28.7-29.9-64-29.9zm22.8 14.2c-5.2.1-10.2 1.2-13.4 3.3-5.5 3.6-3.8 8.5 3.8 11.1 7.6 2.6 18.1 1.8 23.6-1.8s3.8-8.5-3.8-11c-3.1-1-6.7-1.5-10.2-1.5zm.3 1.7c7.4 0 13.3 2.8 13.3 6.2 0 3.4-5.9 6.2-13.3 6.2s-13.3-2.8-13.3-6.2c0-3.4 5.9-6.2 13.3-6.2zM45.3 34.4c-1.6.1-3.1.2-4.6.4l9.1 1.7a10.8 5 0 1 1-8.1 9.3l-8.9-1.7c1 .9 2.4 1.7 4.3 2.4 6.4 2.2 15.4 1.5 20-1.5s3.2-7.2-3.2-9.3c-2.6-.9-5.7-1.3-8.6-1.3zM109 51v9.3c0 11-20.2 19.9-45 19.9-24.9 0-45-8.9-45-19.9v-9.2c11.5 5.3 27.4 8.6 44.9 8.6 17.6 0 33.6-3.3 45.2-8.7zm0 34.6v8.8c0 11-20.2 19.9-45 19.9-24.9 0-45-8.9-45-19.9v-8.8c11.6 5.1 27.4 8.2 45 8.2s33.5-3.1 45-8.2z"
-				  fill-rule="evenodd"></path>
+			      fill-rule="evenodd"></path>
 		</svg>
 		SteamDB
 	</div>
 
-	<div aria-label="Donate to the authors of the project." class="btn btn-sm ml-2 tooltipped tooltipped-nw mb-1" id="smbtn3">
+	<div aria-label="Donate to the authors of the project." class="btn btn-sm ml-2 tooltipped tooltipped-nw mb-1"
+	     id="smbtn3">
 		<svg fill="#8B949E" height="16" style="display: inline-block; vertical-align: text-bottom;" viewBox="0 0 16 16"
-			 width="16" xmlns="http://www.w3.org/2000/svg">
+		     width="16" xmlns="http://www.w3.org/2000/svg">
 			<path d="M2 2.75A2.75 2.75 0 0 1 4.75 0c.983 0 1.873.42 2.57 1.232.268.318.497.668.68 1.042.183-.375.411-.725.68-1.044C9.376.42 10.266 0 11.25 0a2.75 2.75 0 0 1 2.45 4h.55c.966 0 1.75.784 1.75 1.75v2c0 .698-.409 1.301-1 1.582v4.918A1.75 1.75 0 0 1 13.25 16H2.75A1.75 1.75 0 0 1 1 14.25V9.332C.409 9.05 0 8.448 0 7.75v-2C0 4.784.784 4 1.75 4h.55c-.192-.375-.3-.8-.3-1.25ZM7.25 9.5H2.5v4.75c0 .138.112.25.25.25h4.5Zm1.5 0v5h4.5a.25.25 0 0 0 .25-.25V9.5Zm0-4V8h5.5a.25.25 0 0 0 .25-.25v-2a.25.25 0 0 0-.25-.25Zm-7 0a.25.25 0 0 0-.25.25v2c0 .138.112.25.25.25h5.5V5.5h-5.5Zm3-4a1.25 1.25 0 0 0 0 2.5h2.309c-.233-.818-.542-1.401-.878-1.793-.43-.502-.915-.707-1.431-.707ZM8.941 4h2.309a1.25 1.25 0 0 0 0-2.5c-.516 0-1 .205-1.43.707-.337.392-.646.975-.879 1.793Z"
-				  fill-rule="evenodd"></path>
+			      fill-rule="evenodd"></path>
 		</svg>
 		Donate
 	</div>
+
+	<div aria-label="View the instructions on how to use SteamDepotDownloaderGUI." class="btn btn-sm ml-2 tooltipped tooltipped-nw mb-1"
+	     id="smbtn4">
+		<svg fill="#8B949E" width="16" height="16" viewBox="0 0 16 16"
+		     style="display: inline-block; vertical-align: text-bottom;">
+			<path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.5 7.75A.75.75 0 0 1 7.25 7h1a.75.75 0 0 1 .75.75v2.75h.25a.75.75 0 0 1 0 1.5h-2a.75.75 0 0 1 0-1.5h.25v-2h-.25a.75.75 0 0 1-.75-.75ZM8 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"></path>
+		</svg>
+		Instructions
+	</div>
 </div>
 </body>
 </html>
diff --git a/main.js b/main.js
@@ -2,19 +2,17 @@ const {app, BrowserWindow, dialog, ipcMain} = require("electron")
 const {platformpath} = require("./utils")
 
 
-
 const createWindow = () => {
 	// Create the browser window.
 	const mainWindow = new BrowserWindow({
 		autoHideMenuBar: true,
 		resizable: false,
-		width: 430,
+		width: 440,
 		height: 730,
 		useContentSize: true,
 		maximizable: false,
 		webPreferences: {
-			nodeIntegration: true,
-			contextIsolation: false
+			nodeIntegration: true, contextIsolation: false
 		}
 	})
 
@@ -64,7 +62,7 @@ ipcMain.on("selectpath", (event) => {
 		defaultPath: platformpath(),
 		buttonLabel: "Select"
 	}).then(file => {
-		//console.debug("Has path selection succeeded: " + ((file.canceled) ? "NO" : "YES; see below")) --- doesn't log to the dev console TODO
+		//console.debug("Has path selection succeeded: " + ((file.canceled) ? "NO" : "YES; see below")) --- doesn't log to the dev console
 		if (!file.canceled) {
 			const filepath = file.filePaths[0].toString()
 			// console.debug("Path selected is " + filepath)											--- same thing