Adamcake · Adamcake · Apr 7, 2024 · Mar 24, 2024 · Mar 24, 2024 · Mar 24, 2024
diff --git a/.gitignore b/.gitignore
@@ -2,3 +2,4 @@
 .vscode
 DawnCache
 GPUCache
+tailwindcss*
diff --git a/README.md b/README.md
@@ -43,6 +43,23 @@ Once that's done, you can start building. Open a command window or terminal in t
 
 After that, the helper script `./build/bolt.sh` can be used to launch Bolt from its staging location.
 
+#### Potential Build / Launch Issues
+- LuaJIT
+  - When building, you may run into an error with 'luajit'. 
+  - This can be solved by installing it; follow the instructions on their [website](https://luajit.org/index.html)
+- libcrypto.so.1.1
+  - This comes from openssl1.1, which is reaching deprecation but is still widely used.
+  - Install it with your package manager; it is usually called `openssl1.1-devel` or something similar.
+- JDK17
+  - When attempting to launch, you may see an error about 'jdk17' in the console.
+  - This can be solved by installing a couple packages with your package manager.  
+    Something similar to `java-17-openjdk` & `java-17-openjdk-devel`.
+- JAVA_HOME
+  - Another launch issue you may see in the console.
+  - This is solved by setting the JAVA_HOME environment variable.
+  - This is usually located in /usr/lib/jvm, so, it might look like this:  
+    `export JAVA_HOME="/usr/lib/jvm/java-17-openjdk-17.0.9.0.9-3.fc39.x86_64"`
+
 ### Windows
 Windows builds have only been tested using Visual Studio 2022 (a.k.a. Visual Studio 17) in Release mode, per recommendations by chromium/cef. Other configurations may work but have not been tested.
 - `cmake -S . -B build -G "Visual Studio 17"`
@@ -59,6 +76,19 @@ When doing the initial cmake setup step, the following options exist which you m
 - `-D BOLT_DEV_SHOW_DEVTOOLS=1`: enables chromium developer tools for the launcher
 - `-D BOLT_DEV_LAUNCHER_DIRECTORY=1`: instead of embedding the contents of the html dir into the output executable, the files will be served from disk at runtime; on supported platforms the launcher will automatically reload the page when those files are changed
 
+### tailwindcss
+Styling for html elements is done with [tailwindcss](https://tailwindcss.com/).
+- Installation
+  - It can be installed via `npm` and used with `npx`. 
+  - Or as a standalone executable. Get the binary for your OS [here](https://github.com/tailwindlabs/tailwindcss/releases)
+- Usage
+  - Be sure to run tailwind in the same directory as the 'tailwind.config.js'.
+  - To use while developing, you will likely want to watch for css changes, here is an example using a binary:  
+    `./tailwindcss-linux-x64 -i html/input.css -o html/output.css --watch`  
+- Optimizing for production
+  - To minify the 'output.css', use this:  
+    `./tailwindcss-linux-x64 -o html/output.css --minify`
+
 ## Credit
 Icons - [Kia](https://twitter.com/KiaWildin)  
 Flatpak integration - [@nmlynch94](https://github.com/nmlynch94)

diff --git a/html/game_auth.html b/html/game_auth.html
@@ -1,22 +1,26 @@
 <!DOCTYPE html>
-<html lang="en">
-	<head>
-		<title>Bolt Launcher</title>
-		<script>
-			const parentWindow = window.opener || window.parent;
-			if (parentWindow) {
-				const searchParams = new URLSearchParams(window.location.search);
+<html lang="en" class="dark">
 
-				parentWindow.postMessage({
-					"type": "gameSessionServerAuth",
-					"code": searchParams.get('code'),
-                    "id_token": searchParams.get('id_token'),
-					"state": searchParams.get('state'),
-				}, "*");
-			}
-		</script>
-	</head>
-	<body style="background-color: #0B111A">
-		<p><b>Authorising...</b></p>
-	</body>
-</html>
+<head>
+	<title>Bolt Launcher</title>
+	<link rel="stylesheet" href="output.css">
+	<script>
+		const parentWindow = window.opener || window.parent;
+		if (parentWindow) {
+			const searchParams = new URLSearchParams(window.location.search);
+
+			parentWindow.postMessage({
+				"type": "gameSessionServerAuth",
+				"code": searchParams.get('code'),
+				"id_token": searchParams.get('id_token'),
+				"state": searchParams.get('state'),
+			}, "*");
+		}
+	</script>
+</head>
+
+<body class="bg-slate-100 text-slate-900 dark:bg-slate-900 dark:text-slate-50 container p-5 text-center mx-auto">
+	<img src="svgs/circle-notch-solid.svg" alt="" class="animate-spin w-1/6 h-1/6 mx-auto">
+</body>
+
+</html>
diff --git a/html/input.css b/html/input.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/html/launcher.css b/html/launcher.css
diff --git a/html/launcher.html b/html/launcher.html
@@ -1,10 +1,174 @@
 <!doctype html>
-<html lang="en">
-	<head>
-		<meta charset="utf-8" />
-		<title>Bolt Launcher</title>
-		<link rel="stylesheet" href="/launcher.css">
-		<script src="/launcher.js"></script>
-	</head>
-	<body></body>
-</html>
+<html lang="en" class="dark">
+
+<head>
+	<meta charset="utf-8" />
+	<title>Bolt Launcher</title>
+	<link rel="stylesheet" href="output.css">
+	<script src="launcher.js" defer></script>
+</head>
+
+<body
+	class="container mx-auto duration-200 text-slate-900 bg-slate-100 dark:text-slate-50 dark:bg-slate-900 h-screen text-xs sm:text-sm md:text-base">
+	<div id="disclaimer">
+		<div class="w-screen h-screen absolute left-0 top-0 backdrop-filter backdrop-blur-sm z-10"></div>
+		<div class="absolute left-0 top-0 w-screen h-screen z-10 bg-black opacity-75"></div>
+		<div
+			class="absolute left-1/4 top-1/4 rounded shadow-lg w-1/2 p-5 z-20 text-center bg-slate-100 dark:bg-slate-900">
+			<p class="p-2">
+				<script>
+					document.write(atob("Qm9sdCBpcyBhbiA8Yj51bm9mZmljaWFsIHRoaXJkLXBhcnR5IGxhdW5jaGVyPC9iPi4gSXQncyBmcmVlIGFuZCBvcGVuLXNvdXJjZSBzb2Z0d2FyZSBsaWNlbnNlZCB1bmRlciBBR1BMIDMuMC4="));
+				</script>
+			</p>
+			<p class="p-2">
+				<script>
+					document.write(atob("SmFnZXggaXMgPGI+bm90IHJlc3BvbnNpYmxlPC9iPiBmb3IgYW55IHByb2JsZW1zIG9yIGRhbWFnZSBjYXVzZWQgYnkgdXNpbmcgdGhpcyBwcm9kdWN0Lg"));
+				</script>
+			</p>
+			<button class="border-2 border-sky-500 hover:opacity-75 duration-200 rounded m-5 p-2"
+				onclick="toggle_disclaimer()">I Understand</button>
+		</div>
+	</div>
+
+	<div id="settings" hidden>
+		<div class="w-screen h-screen absolute left-0 top-0 backdrop-filter backdrop-blur-sm z-10"></div>
+		<div class="absolute left-0 top-0 w-screen h-screen z-10 bg-black opacity-75"></div>
+		<div
+			class="absolute left-[13%] top-[13%] rounded shadow-lg w-3/4 h-3/4 z-20 text-center bg-slate-100 dark:bg-slate-900">
+			<div class="grid grid-cols-4 h-full">
+				<div class="h-full border-r border-slate-300 dark:border-slate-950 relative">
+					<button
+						class="absolute top-3 left-3 bg-rose-500 hover:opacity-75 duration-200 rounded-full w-[20px] h-[20px]"
+						onclick="toggle_settings()"></button><br>
+					<button id="general_button"
+						class="border-2 border-sky-500 hover:opacity-75 duration-200 rounded p-1 mx-auto my-1 mt-16 w-3/4"
+						onclick="switch_general_options()">General</button><br>
+					<button id="osrs_button"
+						class="border-2 border-sky-500 bg-sky-500 hover:opacity-75 duration-200 rounded p-1 mx-auto my-1 w-3/4"
+						onclick="switch_osrs_options()">OSRS</button><br>
+					<button id="rs3_button"
+						class="border-2 border-sky-500 hover:opacity-75 duration-200 rounded p-1 mx-auto my-1 w-3/4"
+						onclick="switch_rs3_options()">RS3</button>
+				</div>
+				<div hidden id="general_options" class="col-span-3 p-5">
+					<button id="data_dir_button" class="p-2 hover:opacity-75">
+						<div class="flex">
+							<img src="svgs/database-solid.svg" alt="" class="w-7 h-7 p-1 mr-2 rounded-lg bg-violet-500">
+							Browse App Data
+						</div>
+					</button>
+				</div>
+				<div id="osrs_options" class="col-span-3 p-5">
+					<button id="rl_configure" class="p-2 hover:opacity-75"
+						onclick="msg('Launcher unavailable, please log in first')">
+						<div class="flex">
+							<img src="svgs/wrench-solid.svg" alt="" class="w-7 h-7 p-1 mr-2 rounded-lg bg-pink-500">
+							Configure RuneLite
+						</div>
+					</button>
+					<div id="flatpak_div" class="mx-auto p-2 border-t border-slate-300 dark:border-slate-950">
+						<label for="flatpak_rich_presence">Expose rich presense to Flatpak Discord: </label>
+						<input type="checkbox" name="flatpak_rich_presence" id="flatpak_rich_presence" class="ml-2">
+					</div>
+					<div class="mx-auto p-2 border-t border-slate-300 dark:border-slate-950">
+						<label for="custom_jar">Use custom RuneLite JAR: </label>
+						<input type="checkbox" name="custom_jar" id="custom_jar" onchange="toggle_custom_jar()"
+							class="ml-2">
+					</div>
+					<div id="custom_jar_div" class="mx-auto p-2 opacity-25">
+						<textarea disabled name="custom_jar_file" id="custom_jar_file"
+							class="h-10 rounded border-2 border-slate-300 dark:border-slate-950 text-slate-950 bg-slate-100 dark:text-slate-50 dark:bg-slate-900"></textarea>
+						<br>
+						<button disabled id="custom_jar_file_button"
+							class="p-1 mt-1 rounded border-2 border-sky-500 hover:opacity-75 duration-200">Select
+							File</button>
+					</div>
+				</div>
+				<div hidden id="rs3_options" class="col-span-3 p-5">
+					<div class="mx-auto p-2">
+						<label for="custom_uri">Use custom config URI: </label>
+						<input type="checkbox" name="custom_uri" id="custom_uri" onchange="toggle_custom_uri()"
+							class="ml-2">
+					</div>
+					<div id="config_uri_div" class="mx-auto p-2 opacity-25">
+						<textarea disabled name="config_uri" id="config_uri" rows="4"
+							class="rounded border-2 border-slate-300 dark:border-slate-950 text-slate-950 bg-slate-100 dark:text-slate-50 dark:bg-slate-900"></textarea>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+
+	<button class="rounded-full shadow-lg p-2 absolute right-5 top-5 bg-sky-500 hover:opacity-75 duration-200 hover:rotate-45"
+		onclick="change_theme()">
+		<img src="svgs/lightbulb-solid.svg" class="w-5 h-5"></object>
+	</button>
+
+	<button class="p-2 rounded-full shadow-lg absolute top-16 right-5 bg-sky-500 hover:opacity-75 duration-200 hover:rotate-45"
+		onclick="toggle_settings()">
+		<img src="svgs/gear-solid.svg" class="h-5 w-5">
+	</button>
+
+	<div class="grid grid-cols-3 h-full">
+		<div class="col-span-1 p-2 text-center border-r border-r-slate-300 dark:border-r-slate-950">
+			<div class="grid grid-rows-6 h-full">
+				<div class="row-span-5 mt-5">
+					<img src="svgs/user-solid.svg" alt=""
+						class="w-[36px] h-[36px] p-[6px] rounded-full bg-slate-400 mx-auto">
+					<select name="account_select" id="account_select"
+						class="mb-5 cursor-pointer rounded w-full text-inherit p-2 mt-2 bg-inherit border-2 border-slate-300 dark:border-slate-950 hover:opacity-75"></select>
+					<select name="game_account_select" id="game_account_select"
+						class="cursor-pointer rounded w-full text-inherit p-2 mt-2 bg-inherit border-2 border-slate-300 dark:border-slate-950 hover:opacity-75"></select>
+				</div>
+				<div class="row-start-6 my-auto">
+					<button id="login_button"
+						class="p-1 rounded border-2 border-sky-500 hover:opacity-75 duration-200 mr-1">Log In</button>
+					<button id="logout_button"
+						class="p-1 rounded border-2 border-rose-500 hover:opacity-75 duration-200">Log Out</button>
+				</div>
+			</div>
+		</div>
+		<div class="col-start-2 col-span-2">
+			<div class="p-10">
+				<div class="w-fit mx-auto">
+					<button id="rl_launch" class="p-2 hover:opacity-75 duration-200"
+						onclick="msg('Launcher unavailable, please log in first')">
+						<div class="flex">
+							<img src="svgs/rocket-solid.svg" alt="" class="w-7 h-7 p-1 mr-2 rounded-lg bg-purple-500">
+							Launch RuneLite
+						</div>
+					</button>
+					<br>
+					<button id="hdos_launch" class="p-2 hover:opacity-75 mt-5 sm:mt-7 md:mt-10 duration-200"
+						onclick="msg('Launcher unavailable, please log in first')">
+						<div class="flex">
+							<img src="svgs/rocket-solid.svg" alt="" class="w-7 h-7 p-1 mr-2 rounded-lg bg-amber-500">
+							Launch HDOS
+						</div>
+					</button>
+					<br>
+					<button id="rs3_launch" class="p-2 hover:opacity-75 mt-5 sm:mt-7 md:mt-10 duration-200"
+						onclick="msg('Launcher unavailable, please log in first')">
+						<div class="flex">
+							<img src="svgs/rocket-solid.svg" alt="" class="w-7 h-7 p-1 mr-2 rounded-lg bg-green-500">
+							Launch RS3
+						</div>
+					</button>
+				</div>
+			</div>
+			<div
+				class="border-t fixed bottom-0 h-[44%] w-3/4 duration-200 border-t-slate-300 dark:border-t-slate-950 bg-slate-100 dark:bg-slate-900">
+				<div class="p-2">
+					<img src="svgs/circle-info-solid.svg" alt=""
+						class="w-7 h-7 p-[3px] rounded-full bg-rose-500 hover:opacity-75 cursor-pointer duration-200"
+						onclick="toggle_disclaimer()">
+				</div>
+				<ol id="message_list"
+					class="overflow-y-auto overflow-x-hidden h-full list-disc pl-5 list-inside marker:text-rose-500">
+				</ol>
+			</div>
+		</div>
+	</div>
+</body>
+
+</html>