chore: update branding

Bump eslint from 8.52.0 to 8.53.0

.eslintrc.yml

@@ -1,21 +0,0 @@
-env:
-  browser: true
-  es2021: true
-  node: true
-extends: eslint:recommended
-parserOptions:
-  ecmaVersion: latest
-  sourceType: module
-rules:
-  indent:
-    - error
-    - tab
-  linebreak-style:
-    - error
-    - unix
-  quotes:
-    - error
-    - double
-  semi:
-    - error
-    - never

.github/ISSUE_TEMPLATE/feature_request.md

@@ -1,20 +0,0 @@
----
-name: Feature request
-about: Suggest an idea for this project
-title: ''
-labels: ''
-assignees: ''
-
----
-
-**Is your feature request related to a problem? Please describe.**
-A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
-
-**Describe the solution you'd like**
-A clear and concise description of what you want to happen.
-
-**Describe alternatives you've considered**
-A clear and concise description of any alternative solutions or features you've considered.
-
-**Additional context**
-Add any other context or screenshots about the feature request here.

.github/workflows/build.yml

@@ -1,45 +0,0 @@
-on:
-  push:
-    branches:
-      - master
-  pull_request:
-  workflow_dispatch:
-
-jobs:
-  build:
-    runs-on: macos-latest
-    steps:
-      - name: Check out repositoty
-        uses: actions/checkout@v3
-
-      - name: Set up nodejs
-        uses: actions/setup-node@v3
-        with:
-          node-version: 18
-
-      - name: Set up npm project
-        run: npm install
-
-      - name: build project
-        run: npm run buildall
-
-      - name: Move x64 exe
-        run: cp ./dist/SteamDepotDownloaderGUI*.exe ./SteamDepotDownloaderGUI-${{ github.run_number }}.exe
-
-      - name: Move x64 AppImage
-        run: cp `ls -d1 dist/* | grep -E "SteamDepotDownloaderGUI-[0-9]+\.[0-9]+\.[0-9]+\.AppImage"` ./SteamDepotDownloaderGUI-${{ github.run_number }}.AppImage
-
-      - name: Move x64 zip
-        run: cp `ls -d1 dist/* | grep -E "steamdepotdownloadergui-[0-9]+\.[0-9]+\.[0-9]+\.zip"` ./SteamDepotDownloaderGUI-${{ github.run_number }}.zip
-
-      - name: Move arm64 AppImage
-        run: cp `ls -d1 dist/* | grep -E "SteamDepotDownloaderGUI-[0-9]+\.[0-9]+\.[0-9]+\-arm64.AppImage"` ./SteamDepotDownloaderGUI-${{ github.run_number }}.AppImage
-
-      - name: Move arm64 zip
-        run: cp `ls -d1 dist/* | grep -E "steamdepotdownloadergui-[0-9]+\.[0-9]+\.[0-9]+\-arm64.zip"` ./SteamDepotDownloaderGUI-${{ github.run_number }}-arm64.zip
-
-      - name: Upload artifacts
-        uses: actions/upload-artifact@v3
-        with:
-          name: SteamDepotDownloaderGUI-${{ github.run_number }}
-          path: SteamDepotDownloaderGUI-${{ github.run_number }}*.*

LICENSE.md

@@ -1,15 +0,0 @@
-```
-            DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
-                    Version 2, December 2004
-
-Copyright (C) 2004 Sam Hocevar <sam@hocevar.net>
-
-Everyone is permitted to copy and distribute verbatim or modified
-copies of this license document, and changing it is allowed as long
-as the name is changed.
-
-            DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
-TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION
-
-0. You just DO WHAT THE FUCK YOU WANT TO.
-```

README.md

@@ -1,37 +0,0 @@
-<h1 align="center">SteamDepotDownloaderGUI</h1>
-
-<p align="center">
-  <img alt="Project Status" src="https://img.shields.io/badge/status-maintained-blue" />
-  <img alt="GitHub all releases" src="https://img.shields.io/github/downloads/mmvanheusden/SteamDepotDownloaderGUI/total?color=orange&label=downloads">
-  <img alt="GitHub last commit" src="https://img.shields.io/github/last-commit/mmvanheusden/SteamDepotDownloaderGUI?color=crimson">
-  <img alt="Visitor Count" src="https://visitor-badge.glitch.me/badge?page_id=mmvanheusden.SteamDepotDownloaderGUI">
-  <a href="https://www.codefactor.io/repository/github/mmvanheusden/steamdepotdownloadergui/overview/rewrite"><img src="https://www.codefactor.io/repository/github/mmvanheusden/steamdepotdownloadergui/badge/master" alt="CodeFactor" /></a>
-</p>
-<p align="center">
-  <img alt="Screenshot" src="screenshot.png" />
-</p>
-
-<p align="center">SteamDepotDownloaderGUI is a graphical user interface for DepotDownloader.</p>
-<p align="center">You can download older versions of Steam games, useful for testing and speedrunners.</p>
-
-## Installation
-
-Download the latest release for your operating system
-from [GitHub](https://github.com/mmvanheusden/SteamDepotDownloaderGUI/releases/latest).
-
-## Usage
-
-Enter everything you normally would in the SteamDepotDownloader console.
-
-There is a video tutorial available [here](https://www.youtube.com/watch?v=dQw4w9WgXcQ).
-
-## Contributing
-
-If you want to contribute to SteamDepotDownloaderGUI, please make sure to follow
-the [contributing instructions and guidelines](contributing.md).
-
-Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
-
-Please make sure to keep code consistent and cross-platform compatible.
-
-![License](license.png)

contributing.md

@@ -1,61 +0,0 @@
-# SteamDepotDownloaderGUI development information
-
-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).
-
-## Setup development environment
-
-**Note that these instructions may differ from operating system to operating system.**
-
-* Install node.js, npm, and git on your computer.
-
-* Clone the repository.
-
-```bash
-git clone https://github.com/mmvanheusden/SteamDepotDownloaderGUI
-```
-
-* Move into the directory and install npm dependencies.
-
-```bash
-cd SteamDepotDownloaderGUI
-npm install
-```
-
-* **You are now ready to contribute**
-
-## Testing the application
-
-```bash
-npm start
-```
-
-## Building the application
-
-```bash
-npm run build
-```
-
-* If you are using macOS, you may build using the following command:
-
-```bash
-npm run buildall
-```
-
-This will build the application for all supported operating systems.
-
-## Contributing Guidelines
-
-Please make sure to keep code consistent and cross-platform compatible.
-
-After you made a change, clean-up the code using your favorite code editor and run the following command:
-
-```bash
-npx eslint *.js --fix
-```
-
-Please make sure your git commit message is descriptive and contains the changes you made.
-
-**Happy coding!**

downloader.js

@@ -1,63 +0,0 @@
-const {
-	checkDotnet,
-	download,
-	createCommand,
-	runCommand,
-	removeDir,
-	removeFile,
-	unzip,
-	platformpath
-} = require("./utils")
-
-function submitForm() {
-	checkDotnet().then(async function (result) {
-		if (!result) {
-			console.error("dotnet not found in PATH")
-			document.getElementById("dotnetwarning").hidden = false
-		} else {
-			console.info("dotnet found in PATH")
-
-			// Remove the old depotdownloader directory
-			await removeDir("depotdownloader", platformpath())
-
-			// Download the DepotDownloader binary, so it doesn't have to be included in the source code
-			await download("https://github.com/SteamRE/DepotDownloader/releases/download/DepotDownloader_2.4.6/depotdownloader-2.4.6.zip", platformpath())
-
-			// Unzip the DepotDownloader binary
-			await unzip("depotdownloader-2.4.6.zip", "depotdownloader", platformpath())
-
-			// Clean up the old files
-			await removeFile("depotdownloader-2.4.6.zip", platformpath())
-
-			// Run the final command
-			await runCommand(createCommand().toString())
-		}
-	})
-}
-
-
-function submitDotnet() {
-	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://dotnet.microsoft.com/en-us/download/dotnet/thank-you/sdk-6.0.301-windows-x64-installer")
-	}
-	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://dotnet.microsoft.com/en-us/download/dotnet/thank-you/sdk-6.0.301-macos-x64-installer")
-	}
-}
-
-
-window.addEventListener("DOMContentLoaded", () => {
-	document.getElementById("alertbtn").addEventListener("click", submitDotnet)
-	document.getElementById("downloadbtn").addEventListener("click", submitForm)
-})
-

electron-builder.yml

@@ -1,32 +0,0 @@
-appId: steam.depot.downloader.gui
-productName: SteamDepotDownloaderGUI
-copyright: Copyright © 2022 mmvanheusden | This work is free. Licensed under the Do What The Fuck You Want To Public License
-
-linux:
-  executableName: SteamDepotDownloaderGUI
-  category: Utility;FileTools;
-  maintainer: mmvanheusden
-  target:
-    - target: AppImage
-      arch:
-        - x64
-        - arm64
-    - target: zip
-      arch:
-        - x64
-        - arm64
-
-# lmao mac building only works on mac
-mac:
-  category: public.app-category.utilities
-  target:
-    - target: dmg
-      arch:
-        - x64
-
-win:
-  legalTrademarks: Copyright © 2022 mmvanheusden | This work is free. Licensed under the Do What The Fuck You Want To Public License
-  target:
-    - target: portable
-      arch:
-        - x64

index.html

@@ -1,102 +1,63 @@
 <!DOCTYPE html>
-<!--  automatic dark mode :) -->
-<html class="anim-fade-in" data-color-mode="auto" data-dark-theme="dark" data-light-theme="light" lang="en">
+<html lang="en">
 <head>
-	<meta charset="UTF-8">
-	<meta content="width=device-width, initial-scale=1" name="viewport"/>
-	<link href="https://unpkg.com/@primer/css@20.2.4/dist/primer.css" rel="stylesheet"/>
-	<title>SteamDepotDownloaderGUI</title>
+    <meta charset="UTF-8">
+    <title>SteamDepotDownloaderGUI - downgrade Steam games</title>
+    <link href="https://unpkg.com/@primer/css@21.0.9/dist/primer.css" rel="stylesheet"/>
+    <link href="styles.css" rel="stylesheet">
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/github-fork-ribbon-css/0.2.3/gh-fork-ribbon.min.css"
+          rel="stylesheet"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
 </head>
 <body>
-<script src="downloader.js"></script>
-<div class="mx-auto">
-	<div hidden id="dotnetwarning">
-		<div class="flash flash-error mx-2 mt-2 color-shadow-medium" id="alert">
-			<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>
-			<code><span class="text-italic">dotnet</span></code> was not found.
-			<button class="btn btn-sm flash-action" id="alertbtn">
-				<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>
-				</svg>
-				<span class="text-bold">Download</span>
-			</button>
-		</div>
-	</div>
-	<div class="f0-light text-center">Steam Depot Downloader</div>
-	<form id="theform">
-		<div class="form-group mx-3 mt-1">
-			<div class="form-group-header">
-				<label for="username">Username</label>
-			</div>
-			<div class="form-group-body">
-				<input class="form-control input-block" id="username" type="text"/>
-			</div>
-		</div>
+<header class="bg-gray-dark text-white p-4 text-center">
+    <h1 class="title mb-2">SteamDepotDownloaderGUI</h1>
+    <h2 class="subtitle">Download older versions of Steam games!</h2>
+</header>
+<script src="./oneko.js"></script>
+<main class="container mx-auto p-2">
+    <a class="github-fork-ribbon" data-ribbon="Fork me on GitHub"
+       href="https://github.com/mmvanheusden/steamdepotdownloadergui" title="Fork me on GitHub">Fork me on GitHub</a>
 
-		<div class="form-group mx-3 mt-1">
-			<div class="form-group-header">
-				<label for="password">Password</label>
-			</div>
-			<div class="form-group-body">
-				<input class="form-control input-block" id="password" type="password"/>
-			</div>
-		</div>
+    <div style="display: flex;left: 0; right: 0">
+        <!-- 1st element -->
+        <div>
+            <section style="margin-right: 1%;">
+                <h3>About</h3>
+                <p>SteamDepotDownloaderGUI is a tool that<br>
+                    allows you to downgrade Steam games,
+                    using <a href="https://github.com/SteamRE/DepotDownloader">DepotDownloader</a>.<br>
+                    It is multiplatform, and easy to use.
+                    It works on Windows, macOS and Linux!</p>
+            </section>
+            <section>
+                <h2>How to use:</h2>
+                <a class="btn instructions-link" href="https://www.youtube.com/playlist?list=PLRAjc5plLScj967hnsYX-I3Vjw9C1v7Ca"><b>Tutorials</b></a>
+            </section>
+        </div>
 
-		<div class="form-group mx-3 mt-1">
-			<div class="form-group-header">
-				<label for="appid">App ID</label>
-			</div>
-			<div class="form-group-body">
-				<input class="form-control input-block" id="appid" type="number"/>
-			</div>
-		</div>
+        <!-- 2nd element -->
+        <div style="margin-right: 3%">
+            <section>
+                <h3>How to Download</h3>
+                <p>Click the download button below to get the latest version of SteamDepotDownloaderGUI.</p>
+                <a href="https://github.com/mmvanheusden/SteamDepotDownloaderGUI/releases/latest">
+                    <button class="btn btn-primary btn-block btn-">Download</button>
+                </a>
+            </section>
+        </div>
 
-		<div class="form-group mx-3 mt-1">
-			<div class="form-group-header">
-				<label for="depotid">Depot ID</label>
-			</div>
-			<div class="form-group-body">
-				<input class="form-control input-block" id="depotid" type="number"/>
-			</div>
-		</div>
+        <!-- 3rd element -->
+        <div>
+            <img alt="The interface."src="https://github.com/user-attachments/assets/2e1b1b8e-9560-4dde-86c0-b70384a54fbb"
+                 style="object-fit: contain;width: 100%;max-height: 764px;">
+        </div>
+    </div>
 
-		<div class="form-group mx-3 mt-1">
-			<div class="form-group-header">
-				<label for="manifestid">Manifest ID</label>
-			</div>
-			<div class="form-group-body">
-				<input class="form-control input-block" id="manifestid" type="number"/>
-			</div>
-		</div>
-
-		<div class="form-group mx-3 mt-1">
-			<div class="form-group-header">
-				<label for="osdropdown">Operating system</label>
-			</div>
-			<div class="form-group-body">
-				<select aria-label="Preference" class="form-select" id="osdropdown">
-					<option disabled>Choose your OS</option>
-					<option>Windows</option>
-					<option disabled>macOS (NOT YET IMPLEMENTED)</option>
-					<option disabled>If you are using Linux</option>
-					<option disabled>Select your terminal</option>
-					<option>KDE Konsole</option>
-					<option>Gnome Terminal</option>
-					<option>Xfce Terminal</option>
-					<option>Terminator</option>
-					<option>Print command in console</option>
-				</select>
-			</div>
-		</div>
-	</form>
-	<div class="form-group mx-3">
-		<button class="btn btn-block btn-primary" id="downloadbtn">Download</button>
-	</div>
-</div>
+</main>
+<footer class="text-center p-2" style="bottom: 0; position: absolute; right: 0; left:0">
+    © 2024 <a class="knopje" href="https://aphex.cc" type="button">aphex</a> Licensed under
+    <a href="https://www.gnu.org/licenses/gpl-3.0.txt">GNU GPLv3</a>
+</footer>
 </body>
 </html>

instructions.md

@@ -0,0 +1,29 @@
+# How to download older versions of Steam games using Steam Depot Downloader GUI?
+Please watch this video: [https://www.youtube.com/watch?v=H2COwT5OUOo](https://www.youtube.com/watch?v=H2COwT5OUOo)
+I'll write it down here too, but it's better to watch the video.
+This is a guide on how to download older versions of Steam games using Steam Depot Downloader GUI.
+## Step 1: Download Steam Depot Downloader GUI
+You can download it from here:  
+[https://github.com/mmvanheusden/SteamDepotDownloaderGUI](https://github.com/mmvanheusden/SteamDepotDownloaderGUI)
+## Step 2: Find the game's AppID  
+You can find the game's AppID by searching for it on SteamDB:
+ * [https://steamdb.info/instantsearch/](https://steamdb.info/instantsearch/)
+
+### Step 2.1: Find the game's DepotID
+After you found the game's AppID, you need to find the game's DepotID.  
+You can find the game's DepotID by clicking on "Depots" in the sidebar in the game's page on SteamDB.  
+Please note that there are multiple DepotIDs for each game. It will depend on which platform you use and/or which version of the game you want to download.
+### Step 2.2: Find the game's ManifestID
+After you found the game's DepotID, you need to find the game's ManifestID.  
+You can find the game's ManifestID by first clicking on the depot, and then clicking on "Manifests" in the sidebar on the game's page on SteamDB.  
+Choose the ManifestID that you want to download. Each ManifestID is a different version of the game.  
+**Tip:** Find the date of the version you want to download, and then choose the ManifestID that was created on that date.
+## Step 3: Fill in the form
+Now that you have the game's AppID, DepotID and ManifestID, you can download the game.  
+Open SteamDepotDownloaderGUI, and enter your username and password.  
+Then choose the folder where you want to download the game.  
+Then enter the game's AppID, DepotID and ManifestID.  
+Then click on "Download".
+## Step 4: Play
+After the download is finished, you can play the game.  
+You can find the game in the folder that you chose in the form, click on the game's folder, and then click on the game's executable file.

main.js

@@ -1,44 +0,0 @@
-const {app, BrowserWindow} = require("electron")
-
-const createWindow = () => {
-	// Create the browser window.
-	const mainWindow = new BrowserWindow({
-		autoHideMenuBar: true,
-		resizable: false,
-		width: 425,
-		height: 575,
-		maximizable: false,
-		webPreferences: {
-			nodeIntegration: true,
-			contextIsolation: false
-		}
-	})
-
-	// and load the index.html of the app.
-	mainWindow.loadFile("index.html")
-
-	// Open the DevTools for debugging, only if not in production.
-	if (!app.isPackaged) {
-		mainWindow.webContents.openDevTools({mode: "detach"})
-	}
-}
-
-// This method will be called when Electron has finished
-// initialization and is ready to create browser windows.
-// Some APIs can only be used after this event occurs.
-app.whenReady().then(() => {
-	createWindow()
-
-	app.on("activate", () => {
-		// On macOS it's common to re-create a window in the app when the
-		// dock icon is clicked and there are no other windows open.
-		if (BrowserWindow.getAllWindows().length === 0) createWindow()
-	})
-})
-
-// Quit when all windows are closed, except on macOS. There, it's common
-// for applications and their menu bar to stay active until the user quits
-// explicitly with Cmd + Q.
-app.on("window-all-closed", () => {
-	if (process.platform !== "darwin") app.quit()
-})

oneko.js

@@ -0,0 +1,240 @@
+// oneko.js: https://github.com/adryd325/oneko.js
+
+(function oneko() {
+    const isReducedMotion =
+      window.matchMedia(`(prefers-reduced-motion: reduce)`) === true ||
+      window.matchMedia(`(prefers-reduced-motion: reduce)`).matches === true;
+  
+    if (isReducedMotion) return;
+  
+    const nekoEl = document.createElement("div");
+  
+    let nekoPosX = 32;
+    let nekoPosY = 32;
+  
+    let mousePosX = 0;
+    let mousePosY = 0;
+  
+    let frameCount = 0;
+    let idleTime = 0;
+    let idleAnimation = null;
+    let idleAnimationFrame = 0;
+  
+    const nekoSpeed = 10;
+    const spriteSets = {
+      idle: [[-3, -3]],
+      alert: [[-7, -3]],
+      scratchSelf: [
+        [-5, 0],
+        [-6, 0],
+        [-7, 0],
+      ],
+      scratchWallN: [
+        [0, 0],
+        [0, -1],
+      ],
+      scratchWallS: [
+        [-7, -1],
+        [-6, -2],
+      ],
+      scratchWallE: [
+        [-2, -2],
+        [-2, -3],
+      ],
+      scratchWallW: [
+        [-4, 0],
+        [-4, -1],
+      ],
+      tired: [[-3, -2]],
+      sleeping: [
+        [-2, 0],
+        [-2, -1],
+      ],
+      N: [
+        [-1, -2],
+        [-1, -3],
+      ],
+      NE: [
+        [0, -2],
+        [0, -3],
+      ],
+      E: [
+        [-3, 0],
+        [-3, -1],
+      ],
+      SE: [
+        [-5, -1],
+        [-5, -2],
+      ],
+      S: [
+        [-6, -3],
+        [-7, -2],
+      ],
+      SW: [
+        [-5, -3],
+        [-6, -1],
+      ],
+      W: [
+        [-4, -2],
+        [-4, -3],
+      ],
+      NW: [
+        [-1, 0],
+        [-1, -1],
+      ],
+    };
+  
+    function init() {
+      nekoEl.id = "oneko";
+      nekoEl.ariaHidden = true;
+      nekoEl.style.width = "32px";
+      nekoEl.style.height = "32px";
+      nekoEl.style.position = "fixed";
+      nekoEl.style.pointerEvents = "none";
+      nekoEl.style.imageRendering = "pixelated";
+      nekoEl.style.left = `${nekoPosX - 16}px`;
+      nekoEl.style.top = `${nekoPosY - 16}px`;
+      nekoEl.style.zIndex = 2147483647;
+  
+      let nekoFile = "./oneko.gif"
+      const curScript = document.currentScript
+      if (curScript && curScript.dataset.cat) {
+        nekoFile = curScript.dataset.cat
+      }
+      nekoEl.style.backgroundImage = `url(${nekoFile})`;
+  
+      document.body.appendChild(nekoEl);
+  
+      document.addEventListener("mousemove", function (event) {
+        mousePosX = event.clientX;
+        mousePosY = event.clientY;
+      });
+  
+      window.requestAnimationFrame(onAnimationFrame);
+    }
+  
+    let lastFrameTimestamp;
+  
+    function onAnimationFrame(timestamp) {
+      // Stops execution if the neko element is removed from DOM
+      if (!nekoEl.isConnected) {
+        return;
+      }
+      if (!lastFrameTimestamp) {
+        lastFrameTimestamp = timestamp;
+      }
+      if (timestamp - lastFrameTimestamp > 100) {
+        lastFrameTimestamp = timestamp
+        frame()
+      }
+      window.requestAnimationFrame(onAnimationFrame);
+    }
+  
+    function setSprite(name, frame) {
+      const sprite = spriteSets[name][frame % spriteSets[name].length];
+      nekoEl.style.backgroundPosition = `${sprite[0] * 32}px ${sprite[1] * 32}px`;
+    }
+  
+    function resetIdleAnimation() {
+      idleAnimation = null;
+      idleAnimationFrame = 0;
+    }
+  
+    function idle() {
+      idleTime += 1;
+  
+      // every ~ 20 seconds
+      if (
+        idleTime > 10 &&
+        Math.floor(Math.random() * 200) == 0 &&
+        idleAnimation == null
+      ) {
+        let avalibleIdleAnimations = ["sleeping", "scratchSelf"];
+        if (nekoPosX < 32) {
+          avalibleIdleAnimations.push("scratchWallW");
+        }
+        if (nekoPosY < 32) {
+          avalibleIdleAnimations.push("scratchWallN");
+        }
+        if (nekoPosX > window.innerWidth - 32) {
+          avalibleIdleAnimations.push("scratchWallE");
+        }
+        if (nekoPosY > window.innerHeight - 32) {
+          avalibleIdleAnimations.push("scratchWallS");
+        }
+        idleAnimation =
+          avalibleIdleAnimations[
+            Math.floor(Math.random() * avalibleIdleAnimations.length)
+          ];
+      }
+  
+      switch (idleAnimation) {
+        case "sleeping":
+          if (idleAnimationFrame < 8) {
+            setSprite("tired", 0);
+            break;
+          }
+          setSprite("sleeping", Math.floor(idleAnimationFrame / 4));
+          if (idleAnimationFrame > 192) {
+            resetIdleAnimation();
+          }
+          break;
+        case "scratchWallN":
+        case "scratchWallS":
+        case "scratchWallE":
+        case "scratchWallW":
+        case "scratchSelf":
+          setSprite(idleAnimation, idleAnimationFrame);
+          if (idleAnimationFrame > 9) {
+            resetIdleAnimation();
+          }
+          break;
+        default:
+          setSprite("idle", 0);
+          return;
+      }
+      idleAnimationFrame += 1;
+    }
+  
+    function frame() {
+      frameCount += 1;
+      const diffX = nekoPosX - mousePosX;
+      const diffY = nekoPosY - mousePosY;
+      const distance = Math.sqrt(diffX ** 2 + diffY ** 2);
+  
+      if (distance < nekoSpeed || distance < 48) {
+        idle();
+        return;
+      }
+  
+      idleAnimation = null;
+      idleAnimationFrame = 0;
+  
+      if (idleTime > 1) {
+        setSprite("alert", 0);
+        // count down after being alerted before moving
+        idleTime = Math.min(idleTime, 7);
+        idleTime -= 1;
+        return;
+      }
+  
+      let direction;
+      direction = diffY / distance > 0.5 ? "N" : "";
+      direction += diffY / distance < -0.5 ? "S" : "";
+      direction += diffX / distance > 0.5 ? "W" : "";
+      direction += diffX / distance < -0.5 ? "E" : "";
+      setSprite(direction, frameCount);
+  
+      nekoPosX -= (diffX / distance) * nekoSpeed;
+      nekoPosY -= (diffY / distance) * nekoSpeed;
+  
+      nekoPosX = Math.min(Math.max(16, nekoPosX), window.innerWidth - 16);
+      nekoPosY = Math.min(Math.max(16, nekoPosY), window.innerHeight - 16);
+  
+      nekoEl.style.left = `${nekoPosX - 16}px`;
+      nekoEl.style.top = `${nekoPosY - 16}px`;
+    }
+  
+    init();
+  })();
+  

package.json

@@ -1,39 +0,0 @@
-{
-  "name": "steamdepotdownloadergui",
-  "version": "2.0.1",
-  "description": "DepotDownloader Electron frontend",
-  "main": "main.js",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "start": "electron .",
-    "build": "electron-builder -c electron-builder.yml -wl -p never",
-    "buildall": "electron-builder -c electron-builder.yml -mwl -p never"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/mmvanheusden/SteamDepotDownloaderGUI.git"
-  },
-  "keywords": [
-    "electron",
-    "steam",
-    "depotdownloader",
-    "electron",
-    "gui",
-    "ui",
-    "subnautica"
-  ],
-  "author": "mmvanheusden",
-  "license": "WTFPL",
-  "bugs": {
-    "url": "https://github.com/mmvanheusden/SteamDepotDownloaderGUI/issues"
-  },
-  "homepage": "https://github.com/mmvanheusden/SteamDepotDownloaderGUI#readme",
-  "devDependencies": {
-    "electron-builder": "^23.1.0",
-    "electron": "^19.0.6",
-    "eslint": "^8.18.0"
-  },
-  "dependencies": {
-    "follow-redirects": "^1.15.1"
-  }
-}

styles.css

@@ -0,0 +1,63 @@
+@font-face {
+    font-family: 'Windows';
+    src: url(./fonts/windows_regular-webfont.woff) format('woff'), url(./fonts/windows_regular-webfont.woff2) format('woff2'), url(./fonts/Windows-Regular.ttf) format('truetype');
+}
+
+@font-face {
+    font-family: 'Hubot Sans';
+    src:
+      url('./fonts/Hubot-Sans.woff2') format('woff2 supports variations'),
+      url('./fonts/Hubot-Sans.woff2') format('woff2-variations');
+    font-weight: 200 900;
+    font-stretch: 75% 125%;
+  }
+  html {
+    font-family: 'Hubot Sans';
+  }
+
+.instructions-link {
+    animation: highlight 2s infinite;
+    text-decoration: none;
+}
+
+@keyframes highlight {
+    0%, 100% {
+        color: #ff0000;
+    }
+    50% {
+        color: #003cff;
+    }
+}
+
+
+.title {
+    font-family: 'Hubot Sans';
+    font-weight: bolder;
+    font-size: 50px;
+}
+
+.subtitle {
+    font-family: 'Hubot Sans';
+    font-weight: 600;
+    font-size: 30px;
+}
+
+.knopje {
+    border: 1px solid #000;
+    background: linear-gradient(180deg, #8C8C8C 25%, #434343 75%);
+    display: inline-block;
+    font: 19px "Windows", monospace;
+    padding: 0 5px;
+    font-size: 13px;
+    color: darkred;
+    text-decoration: none;
+
+}
+
+.knopje:hover {
+    text-decoration: none;
+}
+
+.knopje:active {
+    background: linear-gradient(180deg, #b0b0b0 25%, #504f4f 75%);
+}

utils.js

@@ -1,194 +0,0 @@
-/**
- * Checks if dotnet is installed in the system path
- * @returns {Promise<unknown>} A promise that resolves to true if dotnet is installed, false otherwise
- */
-
-
-function checkDotnet() {
-	return new Promise((resolve) => {
-		if (process.platform.toString().includes("win")) {
-			const {exec} = require("child_process")
-			const command = "dotnet.exe --version"
-			exec(command, function (error) {
-				if (error) {
-					resolve(false)
-				} else {
-					resolve(true)
-				}
-			})
-		} else {
-			const {exec} = require("child_process")
-			const command = "dotnet --version"
-			exec(command, function (error) {
-				if (error) {
-					resolve(false)
-				} else {
-					resolve(true)
-				}
-			})
-		}
-
-	})
-}
-
-/**
- * Download a file from a url, saving it to the current directory (__dirname)
- * @param url The url to download from
- * @param targetPath The path to save the file to
- * @returns {Promise<unknown>} A promise that resolves when the download is finished
- */
-function download(url, targetPath) {
-	return new Promise((resolve) => {
-		const {https} = require("follow-redirects")
-		const fs = require("fs")
-		const path = require("path")
-		console.log(path.sep)
-		const file = fs.createWriteStream(targetPath + path.sep + url.split("/").pop())
-		https.get(url, function (response) {
-			response.pipe(file)
-			file.on("finish", function () {
-				file.close()
-				resolve()
-			})
-		})
-	})
-}
-
-/**
- * Removes a file from the current directory
- * @param file The filename to remove
- * @param targetPath The directory the file is located in
- * @returns {Promise<unknown>} A promise that resolves when the file is removed (or fails)
- */
-function removeFile(file, targetPath) {
-	return new Promise((resolve) => {
-		const fs = require("fs")
-		const path = require("path")
-		fs.unlink(targetPath + path.sep + file, function (err) {
-			if (err) {
-				console.error(err)
-			}
-			resolve()
-		})
-	})
-}
-
-/**
- * Removes a directory from the current directory
- * @param dir The directory to remove
- * @param targetPath The directory the directory is located in
- * @returns {Promise<unknown>} A promise that resolves when the directory is removed (or fails)
- */
-function removeDir(dir, targetPath) {
-	return new Promise((resolve) => {
-		const fs = require("fs")
-		const path = require("path")
-		fs.rm(targetPath + path.sep + dir, {recursive: true, force: true}, function (err) {
-			if (err) {
-				console.error(err)
-			}
-			resolve()
-		})
-	})
-}
-
-/**
- * Unzip a file to the current directory
- * @param file The file to unzip, preferably a .zip file
- * @param target The target directory to unzip to
- * @param targetPath The directory the file AND the unzip dir is located in
- * @returns {Promise<unknown>} A promise that resolves when the unzip is complete (or fails)
- */
-function unzip(file, target, targetPath) {
-	const {exec} = require("child_process")
-	const path = require("path")
-	return new Promise((resolve) => {
-		if (process.platform.toString().includes("win")) {
-			const command = "powershell.exe -Command Expand-Archive -Path " + targetPath + path.sep + file + " -Destination " + targetPath + path.sep + target
-			exec(command, function (error, stdout, stderr) {
-				if (error) {
-					console.error("Unzipping failed with error: " + error)
-				}
-				console.debug(stdout)
-				if (stderr) {
-					console.error(stderr)
-				}
-				resolve()
-			})
-		} else {
-			const command = "unzip -o " + file + " -d ./" + target + "/"
-			exec(command, function (error, stdout, stderr) {
-				if (error) {
-					console.error("Unzipping failed with error: " + error)
-				}
-				console.debug(stdout)
-				if (stderr) {
-					console.error(stderr)
-				}
-				resolve()
-			})
-		}
-	})
-}
-
-
-/**
- * Creates a command based on the operating system/terminal being selected and the form values
- * @returns {string} The final command to run
- */
-const createCommand = () => {
-	// The values inputted by the user in the form
-	let username = document.forms["theform"]["username"].value
-	let password = document.forms["theform"]["password"].value
-	let appid = document.forms["theform"]["appid"].value
-	let depotid = document.forms["theform"]["depotid"].value
-	let manifestid = document.forms["theform"]["manifestid"].value
-	let osdropdown = document.getElementById("osdropdown")
-
-	// The final command to run, returned by this function
-	if (osdropdown.options[osdropdown.selectedIndex].text.includes("Gnome")) {
-		return `gnome-terminal -e 'bash -c "dotnet ./depotdownloader/DepotDownloader.dll -username ${username} -password ${password} -app ${appid} -depot ${depotid} -manifest ${manifestid} -dir ./games/${appid}/ -max-servers 50 -max-downloads 16";bash'`
-	} else if (osdropdown.options[osdropdown.selectedIndex].text.includes("Windows")) {
-		return `start cmd.exe /k dotnet ${platformpath()}/depotdownloader/DepotDownloader.dll -username ${username} -password ${password} -app ${appid} -depot ${depotid} -manifest ${manifestid} -dir ${platformpath()}/games/${appid}/ -max-servers 50 -max-downloads 16`
-	} else if (osdropdown.options[osdropdown.selectedIndex].text.includes("macOS")) {
-		return `osascript -c 'tell application "Terminal" to do script 'dotnet ./depotdownloader/DepotDownloader.dll -username ${username} -password ${password} -app ${appid} -depot ${depotid} -manifest ${manifestid} -dir ./games/${appid}/ -max-servers 50 -max-downloads 16'`
-	} else if (osdropdown.options[osdropdown.selectedIndex].text.includes("Konsole")) {
-		return `konsole --hold -e "dotnet ./depotdownloader/DepotDownloader.dll -username ${username} -password ${password} -app ${appid} -depot ${depotid} -manifest ${manifestid} -dir ./games/${appid}/ -max-servers 50 -max-downloads 16"`
-	} else if (osdropdown.options[osdropdown.selectedIndex].text.includes("Xfce")) {
-		return `xfce4-terminal -H -e "dotnet ./depotdownloader/DepotDownloader.dll -username ${username} -password ${password} -app ${appid} -depot ${depotid} -manifest ${manifestid} -dir ./games/${appid}/ -max-servers 50 -max-downloads 16"`
-	} else if (osdropdown.options[osdropdown.selectedIndex].text.includes("Terminator")) {
-		return `terminator -e 'bash -c "dotnet ./depotdownloader/DepotDownloader.dll -username ${username} -password ${password} -app ${appid} -depot ${depotid} -manifest ${manifestid} -dir ./games/${appid}/ -max-servers 50 -max-downloads 16";bash'`
-	} else if (osdropdown.options[osdropdown.selectedIndex].text.includes("Print command")) {
-		console.log(`COPY-PASTE THE FOLLOWING INTO YOUR TERMINAL OF CHOICE:\n\ndotnet ${__dirname}/depotdownloader/DepotDownloader.dll -username ${username} -password ${password} -app ${appid} -depot ${depotid} -manifest ${manifestid} -dir ./games/${appid}/ -max-servers 50 -max-downloads 16`)
-		return "echo hello"
-	}
-}
-
-/**
- * Runs a command in a separate process, printing errors and debugging info to the console
- * @param command The command to run
- * @returns {Promise<unknown>} A promise that resolves when the command is complete (or fails)
- */
-function runCommand(command) {
-	return new Promise((resolve) => {
-		const {exec} = require("child_process")
-		exec(command, function (error, stdout, stderr) {
-			if (error) {
-				console.debug("Command failed with error: " + error)
-			}
-			if (stderr) {
-				console.error(stderr)
-			}
-			resolve()
-		})
-	})
-}
-
-const platformpath = () => {
-	if (__dirname.includes("AppData") && process.platform.toString().includes("win")) {
-		return process.env.PORTABLE_EXECUTABLE_DIR
-	} else
-		return __dirname
-}
-
-module.exports = {checkDotnet, download, createCommand, runCommand, removeDir, removeFile, unzip, platformpath}