Changed the button to show if the app is currently connected or not

frontend/src/windows/main/App.svelte

@@ -20,6 +20,7 @@
 		launching: false,
 		progress: 1,
 		text: "Launching...",
+		isConnected: false,
 	};
 
 	// Checks if the app is opened with the --launch argument
@@ -34,13 +35,15 @@
 
 				// Defines which values should be modified during the launch phase (the loading progress, text, etc...)
 				await launchRoblox(
+					(value) => (launchInfo.isConnected = value),
 					(value) => (launchInfo.launching = value),
 					(value) => (launchInfo.progress = value),
 					(value) => (launchInfo.text = value)
 				);
 			} else {
 				w.hide().catch(console.error);
 				await launchRoblox(
+					(value) => (launchInfo.isConnected = value),
 					(value) => (launchInfo.launching = value),
 					(value) => (launchInfo.progress = value),
 					(value) => (launchInfo.text = value)
@@ -86,8 +89,10 @@
 	{:else}
 		<Sidebar
 			bind:currentPage
+			bind:isLaunched={launchInfo.isConnected}
 			on:launchRoblox={async () => {
 				await launchRoblox(
+					(value) => (launchInfo.isConnected = value),
 					(value) => (launchInfo.launching = value),
 					(value) => (launchInfo.progress = value),
 					(value) => (launchInfo.text = value)

frontend/src/windows/main/Sidebar/Sidebar.svelte

@@ -1,51 +1,57 @@
 <script lang="ts">
-	import {Separator} from '$lib/components/ui/separator/index.js';
-	import {createEventDispatcher} from 'svelte';
-	import logo from '@/assets/favicon.png';
-	import {os} from '@neutralinojs/lib';
-	
-	import IntegrationsIcon from '@/assets/sidebar/integrations.png';
-	import FastFlagsIcon from '@/assets/sidebar/fastflags.png';
-	import CommingSoonIcon from '@/assets/sidebar/comingsoon.png';
-	import RobloxIcon from '@/assets/sidebar/roblox.png';
-	import MiscIcon from "@/assets/sidebar/misc.png"
-	import CreditsIcon from "@/assets/sidebar/credits.png"
-	
-	import SidebarBtn from './SidebarBtn.svelte';
-	import Button from '$lib/components/ui/button/button.svelte';
-	
+	import { Separator } from "$lib/components/ui/separator/index.js";
+	import { createEventDispatcher } from "svelte";
+	import logo from "@/assets/favicon.png";
+	import { os } from "@neutralinojs/lib";
+
+	import IntegrationsIcon from "@/assets/sidebar/integrations.png";
+	import FastFlagsIcon from "@/assets/sidebar/fastflags.png";
+	import RobloxIcon from "@/assets/sidebar/roblox.png";
+	import PlayIcon from "@/assets/sidebar/play.png";
+
+	import MiscIcon from "@/assets/sidebar/misc.png";
+	import CreditsIcon from "@/assets/sidebar/credits.png";
+
+	import SidebarBtn from "./SidebarBtn.svelte";
+	import Button from "$lib/components/ui/button/button.svelte";
+	import { Play } from "lucide-svelte";
+
+	export let isLaunched = false;
+
 	interface SidebarItem {
 		label: string;
 		id: string;
 		icon: string;
 	}
 	const sidebarBtns: SidebarItem[] = [
-		{label: 'Integrations', id: 'integrations', icon: IntegrationsIcon},
-		{label: 'Fast Flags', id: 'fastflags', icon: FastFlagsIcon},
-		{label: 'Misc', id: 'misc', icon: MiscIcon},
-		{label: 'Credits', id: 'credits', icon: CreditsIcon},
+		{ label: "Integrations", id: "integrations", icon: IntegrationsIcon },
+		{ label: "Fast Flags", id: "fastflags", icon: FastFlagsIcon },
+		{ label: "Misc", id: "misc", icon: MiscIcon },
+		{ label: "Credits", id: "credits", icon: CreditsIcon },
 	];
-	
-	export let currentPage: string = 'integrations';
+
+	export let currentPage: string = "integrations";
 	export let id: string;
-	
+
 	function sidebarItemClicked(e: CustomEvent) {
-		if (e.detail === 'none') return;
+		if (e.detail === "none") return;
 		currentPage = e.detail;
 	}
-	
-	const dispatch = createEventDispatcher<{launchRoblox: boolean}>();
-	</script>
-
-	<div class="h-full bg-[#F3F4F6] dark:bg-[#1B1B1B] w-36 fixed top-0 left-0 overflow-x-hidden select-none" {id}>
+
+	const dispatch = createEventDispatcher<{ launchRoblox: boolean }>();
+</script>
+
+<div class="h-full bg-[#F3F4F6] dark:bg-[#1B1B1B] w-36 fixed top-0 left-0 overflow-x-hidden select-none flex flex-col" {id}>
+	<div class="flex-grow">
 		<a
 			href="https://github.com/OrigamingWasTaken/appleblox"
 			class="flex justify-center"
 			target="_blank"
 			rel="noreferrer"
 			on:click={() => {
-				os.open('https://github.com/OrigamingWasTaken/appleblox').catch(console.error);
-			}}>
+				os.open("https://github.com/OrigamingWasTaken/appleblox").catch(console.error);
+			}}
+		>
 			<div class="mt-3 flex">
 				<img src={logo} class="h-6 mr-1 opacity-85 logo bg-[#dcdcdc] dark:bg-[#1B1B1B] rounded-lg" alt="Svelte Logo" />
 				<p class="text-black dark:text-white font-bold font-mono logo">AppleBlox</p>
@@ -59,18 +65,28 @@
 				<SidebarBtn bind:currentPage {label} {id} {icon} on:sidebarClick={sidebarItemClicked} />
 			{/each}
 		</div>
+	</div>
+	<div class="flex justify-center mb-4">
 		<Button
-			class="flex bg-green-600 hover:bg-green-800 fixed bottom-4 left-5 font-mono"
+			class={`${isLaunched ? "bg-blue-400 hover:bg-blue-400 cursor-not-allowed" : "bg-green-600 hover:bg-green-800"} font-mono`}
 			on:click={() => {
-				dispatch('launchRoblox', true);
-			}}>
-			<p class="font-mono">Launch</p>
-			<img src={RobloxIcon} alt="Roblox Icon" class="ml-1 mt-[1px] w-5 h-5 towhite" />
+				if (isLaunched) return;
+				dispatch("launchRoblox", true);
+			}}
+		>
+			{#if isLaunched}
+				<p class="font-mono">Active</p>
+				<img src={PlayIcon} alt="Roblox Icon" class="ml-1 mt-[1px] w-5 h-5 towhite-always" />
+			{:else}
+				<p class="font-mono">Play</p>
+				<img src={RobloxIcon} alt="Roblox Icon" class="ml-1 mt-[1px] w-5 h-5 towhite-always" />
+			{/if}
 		</Button>
 	</div>
-
-	<style>
+</div>
+
+<style>
 	.logo {
 		filter: drop-shadow(0 0 2em #ff6464aa);
 	}
-	</style>
+</style>

frontend/src/windows/main/app.css

@@ -127,6 +127,10 @@ h1 {
 	}
 }
 
+.towhite-always {
+	-webkit-filter: grayscale(1) invert(1);
+	filter: grayscale(1) invert(1);
+}
 @media (prefers-color-scheme: dark) {
 	.towhite {
 		-webkit-filter: grayscale(1) invert(1);

frontend/src/windows/main/pages/Credits.svelte

@@ -57,6 +57,14 @@
 						options: {
 							type: "none"
 						},
+					},
+					{
+						label: "Icons - https://icons8.com",
+						description: "All the icons used in the app.",
+						id: "devs_list",
+						options: {
+							type: "none"
+						},
 					}
 				],
 			},

frontend/src/windows/main/ts/roblox/launch.ts

@@ -212,7 +212,12 @@ async function onGameEvent(data: GameEventInfo) {
 }
 
 /** Launches a Roblox instance */
-export async function launchRoblox(setLaunchingRoblox: (value: boolean) => void, setLaunchProgress: (value: number) => void, setLaunchText: (value: string) => void) {
+export async function launchRoblox(
+	setRobloxConnected: (value: boolean) => void,
+	setLaunchingRoblox: (value: boolean) => void,
+	setLaunchProgress: (value: number) => void,
+	setLaunchText: (value: string) => void
+) {
 	if (rbxInstance || (await os.execCommand('pgrep -f "Roblox"')).stdOut.trim().length > 2) {
 		setLaunchText("Roblox is already open");
 		setLaunchingRoblox(false);
@@ -252,9 +257,11 @@ export async function launchRoblox(setLaunchingRoblox: (value: boolean) => void,
 				const robloxInstance = new RobloxInstance(true);
 				await robloxInstance.init();
 				await robloxInstance.start();
+				setRobloxConnected(true);
 				rbxInstance = robloxInstance;
 				robloxInstance.on("gameEvent", onGameEvent);
 				robloxInstance.on("exit", () => {
+					setRobloxConnected(false);
 					rbxInstance = null;
 					console.log("Roblox exited");
 				});
@@ -279,5 +286,6 @@ export async function launchRoblox(setLaunchingRoblox: (value: boolean) => void,
 		console.error("An error occured while launching Roblox");
 		console.error(err);
 		setLaunchingRoblox(false);
+		setRobloxConnected(false);
 	}
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "appleblox",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "description": "MacOS roblox launcher",
   "main": "frontend/src/windows/main/main.ts",
   "scripts": {