Added misc category and button click detection

AppleBlox · Jun 24, 2024 · ac8e628 · ac8e628
1 parent ec020f9
commit ac8e628
Show file tree

Hide file tree

Showing 7 changed files with 108 additions and 44 deletions.
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,9 @@
+{
+	"trailingComma": "es5",
+	"bracketSpacing": true,
+	"arrowParens": "always",
+	"printWidth": 130,
+	"useTabs": true,
+	"tabWidth": 4,
+	"semi": true
+}
diff --git a/frontend/src/assets/sidebar/misc.png b/frontend/src/assets/sidebar/misc.png
diff --git a/frontend/src/windows/main/App.svelte b/frontend/src/windows/main/App.svelte
@@ -1,29 +1,29 @@
 <script lang="ts">
-import Sidebar from './Sidebar/Sidebar.svelte';
-import {Skeleton} from '$lib/components/ui/skeleton/index.js';
-import Integrations from './pages/Integrations.svelte';
-import {fly} from 'svelte/transition';
-import FastFlags from './pages/FastFlags.svelte';
-import {ModeWatcher} from 'mode-watcher';
-import {Toaster} from '$lib/components/ui/sonner';
-import {Progress} from '$lib/components/ui/progress';
-import {debug, os} from '@neutralinojs/lib';
-import {onMount} from 'svelte';
-import {hasRoblox} from './ts/roblox';
+	import Sidebar from "./Sidebar/Sidebar.svelte";
+	import { Skeleton } from "$lib/components/ui/skeleton/index.js";
+	import Integrations from "./pages/Integrations.svelte";
+	import { fly } from "svelte/transition";
+	import FastFlags from "./pages/FastFlags.svelte";
+	import { ModeWatcher } from "mode-watcher";
+	import { Toaster } from "$lib/components/ui/sonner";
+	import { Progress } from "$lib/components/ui/progress";
+	import { debug, os } from "@neutralinojs/lib";
+	import { onMount } from "svelte";
+	import { hasRoblox } from "./ts/roblox";
+	import Misc from "./pages/Misc.svelte";
 
-let currentPage: string;
-let launchingRoblox = false;
-let launchProgess = 1;
-let ltext = 'Launching...';
+	let currentPage: string;
+	let launchingRoblox = false;
+	let launchProgess = 1;
+	let ltext = "Launching...";
 
-async function launchRoblox() {
-	launchingRoblox = true;
-	if (!await hasRoblox()) {
-		launchingRoblox = false;
+	async function launchRoblox() {
+		launchingRoblox = true;
+		if (!(await hasRoblox())) {
+			launchingRoblox = false;
+		}
+		// Implement launching logic
 	}
-	// Implement launching logic
-	
-}
 </script>
 
 <main>
@@ -41,16 +41,21 @@ async function launchRoblox() {
 			on:launchRoblox={() => {
 				launchRoblox();
 			}}
-			id="sidebar" />
+			id="sidebar"
+		/>
 		<div class="fixed overflow-y-scroll max-h-full top-0 left-36 w-[85%]">
-			{#if currentPage == 'integrations'}
-				<div in:fly={{y: -750, duration: 1000}} out:fly={{y: 400, duration: 400}}>
+			{#if currentPage == "integrations"}
+				<div in:fly={{ y: -750, duration: 1000 }} out:fly={{ y: 400, duration: 400 }}>
 					<Integrations />
 				</div>
-			{:else if currentPage === 'fastflags'}
-				<div in:fly={{y: -750, duration: 1000}} out:fly={{y: 400, duration: 400}}>
+			{:else if currentPage === "fastflags"}
+				<div in:fly={{ y: -750, duration: 1000 }} out:fly={{ y: 400, duration: 400 }}>
 					<FastFlags />
 				</div>
+			{:else if currentPage === "misc"}
+				<div in:fly={{ y: -750, duration: 1000 }} out:fly={{ y: 400, duration: 400 }}>
+					<Misc />
+				</div>
 			{:else}
 				<div class="flex items-center m-32 space-x-4 opacity-30">
 					<Skeleton class="h-12 w-12 rounded-full" />

diff --git a/frontend/src/windows/main/Sidebar/Sidebar.svelte b/frontend/src/windows/main/Sidebar/Sidebar.svelte
@@ -8,6 +8,7 @@ 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 SidebarBtn from './SidebarBtn.svelte';
 import Button from '$lib/components/ui/button/button.svelte';
@@ -20,6 +21,7 @@ interface SidebarItem {
 const sidebarBtns: SidebarItem[] = [
 	{label: 'Integrations', id: 'integrations', icon: IntegrationsIcon},
 	{label: 'Fast Flags', id: 'fastflags', icon: FastFlagsIcon},
+	{label: 'Misc', id: 'misc', icon: MiscIcon},
 	{label: 'Coming Soon', id: 'none', icon: CommingSoonIcon},
 ];
 

diff --git a/frontend/src/windows/main/pages/FastFlags.svelte b/frontend/src/windows/main/pages/FastFlags.svelte
@@ -14,21 +14,6 @@ const panelOpts: SettingsPanel = {
 	description: 'Configure certain details of the Roblox engine',
 	id: 'fastflags',
 	sections: [
-        {
-            name: "Advanced",
-            description: "Advanced editing of Roblox fast flags",
-            id: "advanced",
-            interactables: [
-                {
-                    label: "FFlags Buttons",
-                    description: "Not shown",
-                    id: "fflags_btns",
-                    options: {
-                        type: "ff_buttons_custom",
-                    }
-                }
-            ]
-        },
 		{
 			name: 'Presets',
 			description: 'Already made and easily togglable FFlags',
@@ -111,6 +96,21 @@ const panelOpts: SettingsPanel = {
 				},
 			],
 		},
+		{
+            name: "Advanced",
+            description: "Advanced editing of Roblox fast flags",
+            id: "advanced",
+            interactables: [
+                {
+                    label: "FFlags Buttons",
+                    description: "Not shown",
+                    id: "fflags_btns",
+                    options: {
+                        type: "ff_buttons_custom",
+                    }
+                }
+            ]
+        }
 	],
 };
 </script>

diff --git a/frontend/src/windows/main/pages/Misc.svelte b/frontend/src/windows/main/pages/Misc.svelte
@@ -0,0 +1,44 @@
+<script lang="ts">
+import type {SettingsPanel} from '@/types/settings';
+import Panel from './Settings/Panel.svelte';
+import { saveSettings } from '../ts/settings';
+	import { showNotification } from '../ts/notifications';
+
+function settingsChanged(o: Object) {
+	saveSettings("misc",o)
+}
+
+function buttonClicked(e: CustomEvent) {
+	const id = e.detail	
+	showNotification({
+		title: "Button clicked",
+		content: `Button id: ${id}`
+	})
+}
+
+const panelOpts: SettingsPanel = {
+	name: 'Misc',
+	description: 'Various miscellaneous features and options',
+	id: 'misc',
+	sections: [
+		{
+			name: 'Multi Instances',
+			description: "Makes it so multiple Roblox windows can be opnened at once.",
+			id: 'multi_instances',
+			interactables: [
+				{
+					label: 'Enable Multi Instances',
+					description: 'Makes it so multiple Roblox windows can be opnened at once.',
+					id: 'notify_location',
+					options: {
+						type: "button",
+						style: "default",
+					},
+				}
+			],
+		}
+	],
+};
+</script>
+
+<Panel panel={panelOpts} on:buttonClicked={buttonClicked} on:settingsChanged={(e)=>{settingsChanged(e.detail)}}/>
diff --git a/frontend/src/windows/main/pages/Settings/Panel.svelte b/frontend/src/windows/main/pages/Settings/Panel.svelte
@@ -16,7 +16,7 @@ import { setFlags } from '../../ts/fflags';
 
 export let panel: SettingsPanel;
 
-const dispatch = createEventDispatcher<{settingsChanged: Object}>();
+const dispatch = createEventDispatcher<{settingsChanged: Object,buttonClicked: string}>();
 
 let settingsLoaded = true;
 let sections: any = {};
@@ -79,7 +79,11 @@ $: {
 							</div>
 						{/if}
 						{#if inter.options.type == 'button'}
-							<Button variant={inter.options.style || 'default'}>{inter.label}</Button>
+						<div class="pt-2">
+							<Button variant={inter.options.style || 'default'} on:click={()=>{
+								dispatch("buttonClicked",inter.id)
+							}}>{inter.label}</Button>
+						</div>
 						{:else if inter.options.type == 'ff_buttons_custom'}
 							<FfButtonsCustom/>
 						{:else if inter.options.type === 'boolean'}