Rewrite Buttons, auto platform detection, new title

2026-02-04 05:31:19 +01:00 · 2023-11-08 22:18:28 +01:00
parent 42ff7dcae3
commit dba37f3563
7 changed files with 89 additions and 56 deletions
--- a/Hubot-Sans.woff2
+++ b/Hubot-Sans.woff2
--- a/README.md
+++ b/README.md
@@ -38,7 +38,7 @@ If you haven't already, install [.NET SDK 6.0](https://dotnet.microsoft.com/en-u
 From then, download the appropriate build from [here](https://github.com/mmvanheusden/SteamDepotDownloaderGUI/releases/latest).


-> **Note**
+> **Note:**
 > No support will be provided for binaries downloaded from unofficial mirrors like softpedia.


@@ -51,10 +51,11 @@ Enter everything you normally would in the DepotDownloader console and select yo

 This software makes use of the following projects:
 - [**DepotDownloader**](https://github.com/SteamRE/DepotDownloader/)
- [Electron](http://electron.atom.io/)
+- [Electron](https://www.electronjs.org/)
 - [Node.js](https://nodejs.org/)
 - [Primer CSS](https://primer.style/css/)
 - [follow-redirects](https://github.com/follow-redirects/follow-redirects)
+- [Hubut Sans](https://github.com/github/hubot-sans) under [license](https://github.com/github/hubot-sans/blob/05d5ea150c20e6434485db8ffd2277ed18a9e911/LICENSE) 


 ## Support
--- a/contributing.md
+++ b/contributing.md
@@ -2,8 +2,8 @@

 SteamDepotDownloaderGUI is a graphical user interface for DepotDownloader.

-It is written in Node.js and uses the [electron](https://electronjs.org/) framework.
-The CSS framework is [Primer](https://primer.style).
+It is written in Node.js and uses the [Electron](https://electronjs.org/) framework.
+The CSS framework being used is [Primer](https://primer.style), by GitHub.

 ## Setup development environment

@@ -38,7 +38,7 @@ npm start
 npm run build
 ```

-* If you are using macOS, you may build using the following command:
+* If you are using macOS, you can build using the following command:

 ```bash
 npm run buildall
--- a/downloader.js
+++ b/downloader.js
@@ -1,6 +1,6 @@
 // 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 {
 	preDownloadCheck,
 	download,
@@ -48,50 +48,55 @@ function submitForm() {
 	})
 }

-function submitDotnet() {
+// Combines all buttons that are supposed to open an external URL into one big function.
+function openRelevantPage(target) {
 	const electron = require("electron")
 	const os = process.platform.toString()
-	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")) {
-		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")
+	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
 	}
+	/* eslint-enable indent */
 }

-function openGitHubIssues() {
-	const electron = require("electron")
-	console.debug("Opened GitHub issues page")
-	void electron.shell.openExternal("https://github.com/mmvanheusden/SteamDepotDownloaderGUI/issues/new")
-}
-
-function openSteamDB() {
-	const electron = require("electron")
-	console.debug("Opened SteamDB instant search page")
-	void electron.shell.openExternal("https://steamdb.info/instantsearch/")
-}
-
-function openDonate() {
-	const electron = require("electron")
-	console.debug("Opened donation page")
-	void electron.shell.openExternal("https://liberapay.com/barbapapa/")
-}
-
+// Opens the chosen location where the game will be downloaded to
 function checkPath() {
-	// Opens the chosen location where the game will be downloaded to
 	shell.openPath(exportedFile)
 }

+// If Linux is selected in the dropdown menu, enable the second dropdown so the user can choose their terminal emulator.
 function checkSelection() {
-	// If Linux is selected in the dropdown menu, enable the second dropdown so the user can choose their terminal emulator.
 	/*
 	[0] - Windows
 	[1] - macOS
@@ -100,26 +105,33 @@ function checkSelection() {
 	 */
 	let docu = document.getElementById("osdropdown")
 	let docu2 = document.getElementById("osdropdown2")
+	// if the choice = 2, enable the terminal selection dropdown.
 	docu2.disabled = docu.selectedIndex !== 2; docu2.selectedIndex = 0
 }

-/* Everything beyond this line runs when the page is loaded */
-
-const { ipcRenderer, shell} = require("electron")
+// This changes the dropdown selection, based on the platform being used.
+ipcRenderer.on("update-value", (e, msg) => {
+	const osdropdown = document.getElementById("osdropdown")
+	if (msg === "linux") {
+		osdropdown.selectedIndex = 2
+	} else if (msg === "win") {
+		osdropdown.selectedIndex = 0
+	} else if (msg === "darwin") {
+		osdropdown.selectedIndex = 1
+	}
+	checkSelection() // force check the selection so the terminal dropdown can be unhidden.
+})

 // Add event listeners to the buttons
 window.addEventListener("DOMContentLoaded", () => {
-	document.getElementById("dotnetalertbtn").addEventListener("click", submitDotnet)
-	document.getElementById("downloadbtn").addEventListener("click", submitForm)
-	document.getElementById("smbtn1").addEventListener("click", openGitHubIssues)
-	document.getElementById("smbtn2").addEventListener("click", openSteamDB)
-	document.getElementById("smbtn3").addEventListener("click", openDonate)
-	document.getElementById("smbtn3").addEventListener("click", openDonate)
-	document.getElementById("pickpath").addEventListener("click", () => {
-		ipcRenderer.send("selectpath")
-	})
+	document.getElementById("dotnetalertbtn").addEventListener("click", () => openRelevantPage("dotnet"))
+	document.getElementById("smbtn1").addEventListener("click", () => openRelevantPage("issues"))
+	document.getElementById("smbtn2").addEventListener("click", () => openRelevantPage("steamdb"))
+	document.getElementById("smbtn3").addEventListener("click", () => openRelevantPage("donate"))
+	document.getElementById("pickpath").addEventListener("click", () => ipcRenderer.send("selectpath"))
 	document.getElementById("checkpath").addEventListener("click", checkPath)
-	document.getElementById("osdropdown").addEventListener("change", checkSelection)
+	document.getElementById("osdropdown").addEventListener("input", checkSelection)
+	document.getElementById("downloadbtn").addEventListener("click", submitForm)
 })

 ipcRenderer.on("file", (event, file) => {
--- a/index.html
+++ b/index.html
@@ -5,6 +5,7 @@
 	<meta charset="UTF-8">
 	<meta content="width=device-width, initial-scale=1" name="viewport"/>
 	<link href="https://unpkg.com/@primer/css@21.0.9/dist/primer.css" rel="stylesheet"/>
+	<link rel="stylesheet" href="style.css">
 	<title>SteamDepotDownloaderGUI</title>
 </head>
 <body>
@@ -36,7 +37,7 @@
 			</svg>Please fill in all required fields.
 		</div>
 	</div>
-	<div class="f0-light text-center">Steam Depot Downloader</div>
+	<div class="f1-light text-center">Steam Depot Downloader</div>

 	<form id="theform">
 		<div class="form-group mx-3 mt-1">
@@ -153,7 +154,7 @@
 		SteamDB
 	</div>

-	<div aria-label="Donate to the authors of the project." class="btn btn-sm ml-2 tooltipped tooltipped-ne 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">
 			<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"
--- a/main.js
+++ b/main.js
@@ -9,7 +9,7 @@ const createWindow = () => {
 		autoHideMenuBar: true,
 		resizable: false,
 		width: 430,
-		height: 660,
+		height: 730,
 		useContentSize: true,
 		maximizable: false,
 		webPreferences: {
@@ -38,6 +38,12 @@ app.whenReady().then(() => {
 		// dock icon is clicked and there are no other windows open.
 		if (BrowserWindow.getAllWindows().length === 0) createWindow()
 	})
+
+	// Waits one second so the DOM is ready, and then sends the process platform to the downloader.
+	// TODO: On slow machine this WILL cause issues. Fix required!
+	setTimeout(() => {
+		BrowserWindow.getFocusedWindow().webContents.postMessage("update-value", (process.platform.toString() || "win"))
+	}, 1000)
 })

 // Quit when all windows are closed, except on macOS. There, it's common
--- a/style.css
+++ b/style.css
@@ -0,0 +1,13 @@
+@font-face {
+    font-family: 'Hubot Sans';
+    src:
+            url('Hubot-Sans.woff2') format('woff2 supports variations'),
+            url('Hubot-Sans.woff2') format('woff2-variations');
+    font-weight: 770;
+    font-stretch: expanded;
+}
+.f1-light {
+    font-family: 'Hubot Sans', sans-serif;
+    overflow: hidden;
+    white-space: nowrap;
+}