diff --git a/app/layout.tsx b/app/layout.tsx index 205d112..b33f787 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -3,12 +3,6 @@ import localFont from "next/font/local"; import "./globals.css"; import { ThemeProvider } from "@/components/theme-provider" -import { SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar" -import { Separator } from "@/components/ui/separator" - -import * as Breadcrumb from "@/components/ui/breadcrumb"; - -import { AppSidebar } from "@/components/home/app-sidebar" export const metadata: Metadata = { title: "RSDK-Library", @@ -18,44 +12,12 @@ export const metadata: Metadata = { export default function RootLayout({ children }: { children: React.ReactNode }) { return ( - + + + - - -
-
-
- - - - - {/* This doesn't work - this is for aesthetics currently */} - - - - - RSDK-Library - - - - - - Engines - - - - - - Engine Name - - - -
-
- {children} -
- + {children} diff --git a/app/manifest.ts b/app/manifest.ts new file mode 100644 index 0000000..62e4420 --- /dev/null +++ b/app/manifest.ts @@ -0,0 +1,18 @@ +import type { MetadataRoute } from 'next' + +export default function manifest(): MetadataRoute.Manifest { + return { + name: 'RSDK-Library', + short_name: 'RSDK', + start_url: '/', + display: 'standalone', + display_override: ["window-controls-overlay"], + icons: [ + { + "src": "./assets/RSDK.png", + "sizes": "256x256", + "type": "image/png" + } + ] + } +} \ No newline at end of file diff --git a/app/page.tsx b/app/page.tsx index eb070a6..92bf9af 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -6,6 +6,11 @@ import * as React from "react" // UI Component Imports // -------------------- +import { SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar" +import { AppSidebar } from "@/components/home/app-sidebar" +import { Separator } from "@/components/ui/separator" +import * as Breadcrumb from "@/components/ui/breadcrumb"; + // --------------- // Home Components // --------------- @@ -14,7 +19,42 @@ import * as React from "react" export default function Home() { return (
- + + +
+
+
+ + + + + {/* This doesn't work - this is for aesthetics currently */} + + + + + RSDK-Library + + + + + + Engines + + + + + + Engine Name + + + +
+
+ + {/* page content here or whatever */} +
+
) } \ No newline at end of file diff --git a/components/home/app-sidebar.tsx b/components/home/app-sidebar.tsx index 412990f..8200a04 100644 --- a/components/home/app-sidebar.tsx +++ b/components/home/app-sidebar.tsx @@ -60,9 +60,9 @@ const RSDK_Resources = [ }, ] -export function AppSidebar() { +export function AppSidebar({ ...props }: React.ComponentProps) { return ( - + @@ -71,7 +71,7 @@ export function AppSidebar() {
- header logo + header logo
RSDK-Library diff --git a/components/home/settings-content.tsx b/components/home/settings-content.tsx index 93e2538..ba47019 100644 --- a/components/home/settings-content.tsx +++ b/components/home/settings-content.tsx @@ -1,10 +1,12 @@ "use client"; - + // -------------------- // settings-content.tsx // -------------------- import * as React from "react" + +import * as Settings from "@/lib/settings" import { cn } from "@/lib/utils" import { Button } from "@/components/ui/button"; @@ -18,70 +20,75 @@ import { Check, ChevronsUpDown } from "lucide-react" import { Command, CommandEmpty, CommandGroup, CommandItem, CommandList } from "@/components/ui/command" export function DeviceProfileCombo() { - const [open, setOpen] = React.useState(false) - const [value, setValue] = React.useState("") - - const list = [ - { - value: "desktop", - label: "Desktop", - }, - { - value: "mobile", - label: "Mobile", - }, - ] - - return ( - - - - - - - - que? - - {list.map((framework) => ( - { - setValue(currentValue === value ? "" : currentValue) - setOpen(false) - }} + const instSettings = Settings.Load(); + const [selectedProfile, setSelectedProfile] = React.useState(instSettings.deviceProfile); + const [open, setOpen] = React.useState(false) + + const list = [ + { + value: "desktop", + label: "Desktop", + }, + { + value: "mobile", + label: "Mobile", + }, + ] + + const onSelect = (val: string) => { + const newSettings = { ...instSettings, deviceProfile: val }; + Settings.Save(newSettings); + }; + + return ( + + + + + + + + que? + + {list.map((item) => ( + { + onSelect(currentValue); + setOpen(false); + }} + > + + {item.label} + + ))} + + + + + + ) } const FormSchema = z.object({ - enable_plus_dlc: z.boolean().default(false).optional(), - device_profile: z.boolean(), - enable_console: z.boolean(), + theme: z.enum(['auto', 'light', 'dark']).default('auto').optional(), + enablePlus: z.boolean().default(false).optional(), + enableConsole: z.boolean().default(false).optional(), + deviceProfile: z.string().default('desktop').optional(), }); // ---------------------------- @@ -96,82 +103,102 @@ import { Form, FormControl, FormField, FormItem, FormLabel, FormDescription } fr import { Switch } from "@/components/ui/switch"; export function SettingsContent() { - const form = useForm>({ - resolver: zodResolver(FormSchema), - defaultValues: { - enable_plus_dlc: false, - enable_console: false, - }, - }); - - function onSubmit(data: z.infer) { - // do some stuff... save settings - } - - return ( -
- -
-
- ( - -
- Enable Plus DLC - - Enables the Plus DLC on supported engines - -
- - - - - )} - /> - - ( - -
- Enable Console - - Enables the emscripten console for the engines - -
- - - - - )} - /> - - ( - -
- Device Profile -
- - - - - )} - /> -
-
-
- - ); + const instSettings = Settings.Load(); + + const form = useForm>({ + resolver: zodResolver(FormSchema), + defaultValues: { + enablePlus: instSettings.enablePlus ?? false, + enableConsole: instSettings.enableConsole ?? false, + deviceProfile: instSettings.deviceProfile, + }, + }); + + const actionSave = (data: z.infer) => { + const settingsToSave: Settings.ISettings = { + enablePlus: data.enablePlus ?? false, + enableConsole: data.enableConsole ?? false, + deviceProfile: data.deviceProfile || 'desktop', + }; + + try { + Settings.Save(settingsToSave); + console.log('Saved settings:', settingsToSave); + } catch (error) { + console.error('Error saving settings:', error); + } + }; + + return ( +
+ +
+
+ ( + +
+ Enable Plus DLC + + Enables the Plus DLC on supported engines + +
+ + { + field.onChange(checked); + actionSave({ ...form.getValues(), enablePlus: checked }); + }} + /> + + + )} + /> + + ( + +
+ Enable Console + + Enables the emscripten console for the engines + +
+ + { + field.onChange(checked); + actionSave({ ...form.getValues(), enableConsole: checked }); + }} + /> + + + )} + /> + + ( + +
+ Device Profile +
+ + + + + )} + /> +
+
+
+ + ); } diff --git a/components/home/settings-dialog.tsx b/components/home/settings-dialog.tsx index cbae8ca..19fa4d1 100644 --- a/components/home/settings-dialog.tsx +++ b/components/home/settings-dialog.tsx @@ -5,12 +5,12 @@ import { useMediaQuery } from "@custom-react-hooks/use-media-query" import * as React from "react" import * as Icons from "lucide-react" -import { Button } from "@/components/ui/button" import * as Dialog from "@/components/ui/dialog" import * as Drawer from "@/components/ui/drawer" -import { SettingsContent } from "@/components/home/settings-content"; import * as Sidebar from "@/components/ui/sidebar" +import { SettingsContent } from "@/components/home/settings-content"; + export function SettingsDialog() { const [open, setOpen] = React.useState(false) const isDesktop = useMediaQuery("(min-width: 768px)") @@ -30,6 +30,7 @@ export function SettingsDialog() { + {/* This is the menu item */} Settings @@ -38,11 +39,9 @@ export function SettingsDialog() { - - -
- - + +
+ diff --git a/lib/settings.ts b/lib/settings.ts new file mode 100644 index 0000000..d49884d --- /dev/null +++ b/lib/settings.ts @@ -0,0 +1,40 @@ +'use client' + +export interface ISettings { + enablePlus: boolean; + enableConsole: boolean; + deviceProfile: string; +} + +const SETTINGS_KEY = 'settings'; + +const defaultSettings: ISettings = { + enablePlus: false, + enableConsole: false, + deviceProfile: 'desktop', +}; + +export const Load = (): ISettings => { + let savedSettings = null; + + if (typeof window !== 'undefined') { + savedSettings = localStorage.getItem(SETTINGS_KEY); + } + + return savedSettings ? JSON.parse(savedSettings) : defaultSettings; +}; + +export const Save = (settings: ISettings) => { + if (typeof window !== 'undefined') { + localStorage.setItem(SETTINGS_KEY, JSON.stringify(settings)); + } +}; + +export const Update = (updates: Partial) => { + const currentSettings = Load(); + const newSettings = { ...currentSettings, ...updates }; + Save(newSettings); +}; + +const settings = Load(); +console.log('Settings.ts module loaded:', settings);