diff --git a/gbajs3/package-lock.json b/gbajs3/package-lock.json
index 741f3376..f7a1e0f9 100644
--- a/gbajs3/package-lock.json
+++ b/gbajs3/package-lock.json
@@ -14,6 +14,7 @@
"@mui/x-tree-view": "^7.0.0",
"@uidotdev/usehooks": "^2.4.1",
"jwt-decode": "^4.0.0",
+ "nanoid": "^5.0.7",
"react": "^18.2.0",
"react-animate-height": "^3.2.2",
"react-dom": "^18.2.0",
@@ -8177,9 +8178,9 @@
}
},
"node_modules/nanoid": {
- "version": "3.3.7",
- "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
- "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
+ "version": "5.0.7",
+ "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-5.0.7.tgz",
+ "integrity": "sha512-oLxFY2gd2IqnjcYyOXD8XGCftpGtZP2AbHbOkthDkvRywH5ayNtPVy9YlOPcHckXzbLTCHpkb7FB+yuxKV13pQ==",
"funding": [
{
"type": "github",
@@ -8187,10 +8188,10 @@
}
],
"bin": {
- "nanoid": "bin/nanoid.cjs"
+ "nanoid": "bin/nanoid.js"
},
"engines": {
- "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+ "node": "^18 || >=20"
}
},
"node_modules/natural-compare": {
@@ -8599,6 +8600,23 @@
"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
"integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
},
+ "node_modules/postcss/node_modules/nanoid": {
+ "version": "3.3.7",
+ "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
+ "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
+ "funding": [
+ {
+ "type": "github",
+ "url": "https://github.com/sponsors/ai"
+ }
+ ],
+ "bin": {
+ "nanoid": "bin/nanoid.cjs"
+ },
+ "engines": {
+ "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+ }
+ },
"node_modules/prelude-ls": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
@@ -10620,6 +10638,24 @@
}
}
},
+ "node_modules/vite/node_modules/nanoid": {
+ "version": "3.3.7",
+ "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
+ "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
+ "dev": true,
+ "funding": [
+ {
+ "type": "github",
+ "url": "https://github.com/sponsors/ai"
+ }
+ ],
+ "bin": {
+ "nanoid": "bin/nanoid.cjs"
+ },
+ "engines": {
+ "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+ }
+ },
"node_modules/vite/node_modules/postcss": {
"version": "8.4.47",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.47.tgz",
diff --git a/gbajs3/package.json b/gbajs3/package.json
index 5b96e088..fc1a7b5c 100644
--- a/gbajs3/package.json
+++ b/gbajs3/package.json
@@ -19,6 +19,7 @@
"@mui/x-tree-view": "^7.0.0",
"@uidotdev/usehooks": "^2.4.1",
"jwt-decode": "^4.0.0",
+ "nanoid": "^5.0.7",
"react": "^18.2.0",
"react-animate-height": "^3.2.2",
"react-dom": "^18.2.0",
diff --git a/gbajs3/src/components/controls/consts.tsx b/gbajs3/src/components/controls/consts.tsx
index d1d4bc67..2cf207d0 100644
--- a/gbajs3/src/components/controls/consts.tsx
+++ b/gbajs3/src/components/controls/consts.tsx
@@ -1,2 +1,3 @@
export const saveStateSlotLocalStorageKey = 'currentSaveStateSlot';
export const virtualControlsLocalStorageKey = 'areVirtualControlsEnabled';
+export const virtualControlProfilesLocalStorageKey = 'virtualControlProfiles';
diff --git a/gbajs3/src/components/controls/control-panel.spec.tsx b/gbajs3/src/components/controls/control-panel.spec.tsx
index b3d16a00..6cb56550 100644
--- a/gbajs3/src/components/controls/control-panel.spec.tsx
+++ b/gbajs3/src/components/controls/control-panel.spec.tsx
@@ -166,6 +166,7 @@ describe('', () => {
const testLayout = {
clearLayouts: vi.fn(),
setLayout: setLayoutSpy,
+ setLayouts: vi.fn(),
hasSetLayout: true,
layouts: { screen: { initialBounds: new DOMRect() } }
};
diff --git a/gbajs3/src/components/modals/cheats.tsx b/gbajs3/src/components/modals/cheats.tsx
index faa14d16..b3339f78 100644
--- a/gbajs3/src/components/modals/cheats.tsx
+++ b/gbajs3/src/components/modals/cheats.tsx
@@ -1,7 +1,6 @@
import { Button, IconButton, TextField, useMediaQuery } from '@mui/material';
import { useCallback, useId, useMemo, useState } from 'react';
import { useFieldArray, useForm } from 'react-hook-form';
-import { BiPlus } from 'react-icons/bi';
import { CiSquareRemove } from 'react-icons/ci';
import { styled, useTheme } from 'styled-components';
@@ -15,6 +14,7 @@ import {
} from '../product-tour/embedded-product-tour.tsx';
import { CircleCheckButton } from '../shared/circle-check-button.tsx';
import { ManagedCheckbox } from '../shared/managed-checkbox.tsx';
+import { StyledBiPlus } from '../shared/styled.tsx';
type OptionallyHiddenProps = {
$shouldHide: boolean;
@@ -54,11 +54,6 @@ const StyledCiSquareRemove = styled(CiSquareRemove)`
min-width: 40px;
`;
-const StyledBiPlus = styled(BiPlus)`
- width: 25px;
- height: 25px;
-`;
-
const CheatsFormSeparator = styled.div`
display: flex;
flex-direction: column;
diff --git a/gbajs3/src/components/modals/controls.spec.tsx b/gbajs3/src/components/modals/controls.spec.tsx
index 14fbe162..c2792805 100644
--- a/gbajs3/src/components/modals/controls.spec.tsx
+++ b/gbajs3/src/components/modals/controls.spec.tsx
@@ -15,6 +15,9 @@ describe('', () => {
expect(
screen.getByRole('tab', { name: 'Virtual Controls', selected: true })
).toBeVisible();
+ expect(
+ screen.getByRole('tab', { name: 'Profiles', selected: false })
+ ).toBeVisible();
expect(
screen.getByRole('tab', { name: 'Key Bindings', selected: false })
).toBeVisible();
@@ -27,12 +30,34 @@ describe('', () => {
screen.getByRole('button', { name: 'Save Changes' }).getAttribute('form')
);
+ // select control profiles
+ await userEvent.click(screen.getByRole('tab', { name: 'Profiles' }));
+
+ expect(
+ screen.getByRole('tab', { name: 'Profiles', selected: true })
+ ).toBeVisible();
+ expect(
+ screen.getByRole('tab', { name: 'Key Bindings', selected: false })
+ ).toBeVisible();
+ expect(
+ screen.getByRole('tab', { name: 'Virtual Controls', selected: false })
+ ).toBeVisible();
+
+ expect(screen.getByRole('list', { name: 'Profiles List' })).toBeVisible();
+ // note: save changes button is not shown on control profiles tab
+ expect(
+ screen.queryByRole('button', { name: 'Save Changes' })
+ ).not.toBeInTheDocument();
+
// select key bindings form
await userEvent.click(screen.getByRole('tab', { name: 'Key Bindings' }));
expect(
screen.getByRole('tab', { name: 'Key Bindings', selected: true })
).toBeVisible();
+ expect(
+ screen.getByRole('tab', { name: 'Profiles', selected: false })
+ ).toBeVisible();
expect(
screen.getByRole('tab', { name: 'Virtual Controls', selected: false })
).toBeVisible();
@@ -53,15 +78,18 @@ describe('', () => {
expect(
screen.getByRole('tab', { name: 'Virtual Controls', selected: true })
).toBeVisible();
+ expect(
+ screen.getByRole('tab', { name: 'Profiles', selected: false })
+ ).toBeVisible();
expect(
screen.getByRole('tab', { name: 'Key Bindings', selected: false })
).toBeVisible();
- const virtualControlsFormRenavigate = screen.getByRole('form', {
+ const virtualControlsFormReNavigate = screen.getByRole('form', {
name: 'Virtual Controls Form'
});
- expect(virtualControlsFormRenavigate).toBeVisible();
- expect(virtualControlsFormRenavigate.id).toEqual(
+ expect(virtualControlsFormReNavigate).toBeVisible();
+ expect(virtualControlsFormReNavigate.id).toEqual(
screen.getByRole('button', { name: 'Save Changes' }).getAttribute('form')
);
});
diff --git a/gbajs3/src/components/modals/controls.tsx b/gbajs3/src/components/modals/controls.tsx
index 1a54806f..6b405a8f 100644
--- a/gbajs3/src/components/modals/controls.tsx
+++ b/gbajs3/src/components/modals/controls.tsx
@@ -13,6 +13,7 @@ import {
type TourSteps
} from '../product-tour/embedded-product-tour.tsx';
import { CircleCheckButton } from '../shared/circle-check-button.tsx';
+import { ControlProfiles } from './controls/control-profiles.tsx';
type TabPanelProps = {
children: ReactNode;
@@ -23,6 +24,7 @@ type TabPanelProps = {
type ControlTabsProps = {
setFormId: Dispatch>;
virtualControlsFormId: string;
+ controlProfilesFormId: string;
keyBindingsFormId: string;
resetPositionsButtonId: string;
setIsSuccessfulSubmit: (successfulSubmit: boolean) => void;
@@ -31,6 +33,10 @@ type ControlTabsProps = {
const TabsWithBorder = styled(Tabs)`
border-bottom: 1px solid;
border-color: rgba(0, 0, 0, 0.12);
+
+ & .MuiTabs-scrollButtons {
+ width: fit-content;
+ }
`;
const TabWrapper = styled.div`
@@ -60,6 +66,7 @@ const TabPanel = ({ children, index, value }: TabPanelProps) => {
const ControlTabs = ({
setFormId,
virtualControlsFormId,
+ controlProfilesFormId,
keyBindingsFormId,
resetPositionsButtonId,
setIsSuccessfulSubmit
@@ -67,9 +74,22 @@ const ControlTabs = ({
const { clearLayouts } = useLayoutContext();
const [value, setValue] = useState(0);
- const handleTabChange = (_: React.SyntheticEvent, newValue: number) => {
- setValue(newValue);
- setFormId(newValue === 0 ? virtualControlsFormId : keyBindingsFormId);
+ const tabIndexToFormId = (tabIndex: number) => {
+ switch (tabIndex) {
+ case 0:
+ return virtualControlsFormId;
+ case 1:
+ return controlProfilesFormId;
+ case 2:
+ return keyBindingsFormId;
+ default:
+ return virtualControlsFormId;
+ }
+ };
+
+ const handleTabChange = (_: React.SyntheticEvent, tabIndex: number) => {
+ setValue(tabIndex);
+ setFormId(tabIndexToFormId(tabIndex));
setIsSuccessfulSubmit(false);
};
@@ -78,12 +98,15 @@ const ControlTabs = ({
return (
<>
-
+
+
+
+
+
>
@@ -175,19 +201,22 @@ export const ControlsModal = () => {
-
+ {formId !== `${baseId}--control-profiles` && (
+
+ )}
diff --git a/gbajs3/src/components/modals/controls/control-profiles.spec.tsx b/gbajs3/src/components/modals/controls/control-profiles.spec.tsx
new file mode 100644
index 00000000..8c676c1f
--- /dev/null
+++ b/gbajs3/src/components/modals/controls/control-profiles.spec.tsx
@@ -0,0 +1,137 @@
+import { screen, waitFor } from '@testing-library/react';
+import { userEvent } from '@testing-library/user-event';
+import { describe, expect, it, vi } from 'vitest';
+
+import { ControlProfiles } from './control-profiles.tsx';
+import { renderWithContext } from '../../../../test/render-with-context.tsx';
+import * as contextHooks from '../../../hooks/context.tsx';
+import { virtualControlProfilesLocalStorageKey } from '../../controls/consts.tsx';
+
+describe('', () => {
+ it('renders if there are no profiles', () => {
+ renderWithContext();
+
+ expect(screen.getByText('No control profiles'));
+ expect(
+ screen.getByRole('button', { name: 'Create New Profile' })
+ ).toBeVisible();
+ });
+
+ it('renders profiles from storage', async () => {
+ localStorage.setItem(
+ virtualControlProfilesLocalStorageKey,
+ '[{"id":"testId1","name":"Profile-1","layouts":{"screen":{"initialBounds":{"x":260,"y":15,"width":834,"height":600.09375,"top":15,"right":1094,"bottom":615.09375,"left":260}},"controlPanel":{"initialBounds":{"x":260,"y":620,"width":584,"height":60,"top":620,"right":844,"bottom":680,"left":260}}},"active":true},{"id":"testId2","name":"Profile-2","layouts":{"screen":{"initialBounds":{"x":260,"y":15,"width":834,"height":600.09375,"top":15,"right":1094,"bottom":615.09375,"left":260}},"controlPanel":{"initialBounds":{"x":260,"y":620,"width":584,"height":60,"top":620,"right":844,"bottom":680,"left":260}}},"active":true}]'
+ );
+
+ renderWithContext();
+
+ // isValid from RHF updates state, but its not visible as we are not editing, we need to wait for it
+ await waitFor(() =>
+ expect(
+ screen.getByRole('button', { name: "Edit Profile-1's name" })
+ ).toHaveAttribute('data-is-valid', 'true')
+ );
+
+ expect(screen.getByRole('button', { name: 'Profile-1' })).toBeVisible();
+ expect(screen.getByRole('button', { name: 'Profile-2' })).toBeVisible();
+ expect(screen.getByRole('button', { name: "Edit Profile-1's name" }));
+ expect(screen.getByRole('button', { name: "Edit Profile-2's name" }));
+ expect(screen.getByRole('button', { name: 'Delete Profile-1' }));
+ expect(screen.getByRole('button', { name: 'Delete Profile-2' }));
+ });
+
+ it('loads a profile', async () => {
+ localStorage.setItem(
+ virtualControlProfilesLocalStorageKey,
+ '[{"id":"testId1","name":"Profile-1","layouts":{"screen":{"initialBounds":{"x":260,"y":15,"width":834,"height":600.09375,"top":15,"right":1094,"bottom":615.09375,"left":260}},"controlPanel":{"initialBounds":{"x":260,"y":620,"width":584,"height":60,"top":620,"right":844,"bottom":680,"left":260}}},"active":true}]'
+ );
+
+ const setLayoutsSpy = vi.fn();
+
+ const { useLayoutContext: originalLayout } = await vi.importActual<
+ typeof contextHooks
+ >('../../../hooks/context.tsx');
+
+ vi.spyOn(contextHooks, 'useLayoutContext').mockImplementation(() => ({
+ ...originalLayout(),
+ setLayouts: setLayoutsSpy
+ }));
+
+ renderWithContext();
+
+ await userEvent.click(screen.getByRole('button', { name: 'Profile-1' }));
+
+ expect(setLayoutsSpy).toHaveBeenCalledWith({
+ controlPanel: expect.anything(),
+ screen: expect.anything()
+ });
+ });
+
+ it('adds new profiles', async () => {
+ const setItemSpy = vi.spyOn(Storage.prototype, 'setItem');
+
+ renderWithContext();
+
+ await userEvent.click(screen.getByLabelText('Create New Profile'));
+
+ expect(screen.getByRole('button', { name: 'Profile-1' }));
+
+ expect(setItemSpy).toHaveBeenCalledWith(
+ virtualControlProfilesLocalStorageKey,
+ expect.stringMatching(
+ /\[{"id":".*","name":"Profile-1","layouts":{},"active":true}\]/
+ )
+ );
+
+ await userEvent.click(screen.getByLabelText('Create New Profile'));
+
+ expect(screen.getByRole('button', { name: 'Profile-2' }));
+
+ expect(setItemSpy).toHaveBeenCalledWith(
+ virtualControlProfilesLocalStorageKey,
+ expect.stringMatching(
+ /\[{"id":".*","name":"Profile-1","layouts":{},"active":true},{"id":".*","name":"Profile-2","layouts":{},"active":true}\]/
+ )
+ );
+ });
+
+ it('updates a profile name', async () => {
+ const setItemSpy = vi.spyOn(Storage.prototype, 'setItem');
+ localStorage.setItem(
+ virtualControlProfilesLocalStorageKey,
+ '[{"id":"testId1","name":"Profile-1","layouts":{"screen":{"initialBounds":{"x":260,"y":15,"width":834,"height":600.09375,"top":15,"right":1094,"bottom":615.09375,"left":260}},"controlPanel":{"initialBounds":{"x":260,"y":620,"width":584,"height":60,"top":620,"right":844,"bottom":680,"left":260}}},"active":true},{"id":"testId2","name":"Profile-2","layouts":{"screen":{"initialBounds":{"x":260,"y":15,"width":834,"height":600.09375,"top":15,"right":1094,"bottom":615.09375,"left":260}},"controlPanel":{"initialBounds":{"x":260,"y":620,"width":584,"height":60,"top":620,"right":844,"bottom":680,"left":260}}},"active":true}]'
+ );
+
+ renderWithContext();
+
+ await userEvent.click(
+ screen.getByRole('button', { name: "Edit Profile-1's name" })
+ );
+
+ await userEvent.type(screen.getByRole('textbox'), '-edited');
+
+ await userEvent.click(
+ screen.getByRole('button', { name: "Save Profile-1's name" })
+ );
+
+ expect(screen.getByRole('button', { name: 'Profile-1-edited' }));
+
+ expect(setItemSpy).toHaveBeenCalledWith(
+ virtualControlProfilesLocalStorageKey,
+ expect.stringMatching(/\[{"id":"testId1","name":"Profile-1-edited".*\]/)
+ );
+ });
+
+ it('deletes a profile', async () => {
+ localStorage.setItem(
+ virtualControlProfilesLocalStorageKey,
+ '[{"id":"testId1","name":"Profile-1","layouts":{"screen":{"initialBounds":{"x":260,"y":15,"width":834,"height":600.09375,"top":15,"right":1094,"bottom":615.09375,"left":260}},"controlPanel":{"initialBounds":{"x":260,"y":620,"width":584,"height":60,"top":620,"right":844,"bottom":680,"left":260}}},"active":true}]'
+ );
+
+ renderWithContext();
+
+ await userEvent.click(screen.getByLabelText('Delete Profile-1'));
+
+ expect(screen.getByText('No control profiles'));
+ });
+});
diff --git a/gbajs3/src/components/modals/controls/control-profiles.tsx b/gbajs3/src/components/modals/controls/control-profiles.tsx
new file mode 100644
index 00000000..e80f8f98
--- /dev/null
+++ b/gbajs3/src/components/modals/controls/control-profiles.tsx
@@ -0,0 +1,242 @@
+import { IconButton, TextField } from '@mui/material';
+import { useLocalStorage } from '@uidotdev/usehooks';
+import { nanoid } from 'nanoid';
+import { useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { BiTrash, BiEdit, BiSave } from 'react-icons/bi';
+import { styled } from 'styled-components';
+
+import { useLayoutContext } from '../../../hooks/context.tsx';
+import { virtualControlProfilesLocalStorageKey } from '../../controls/consts.tsx';
+import { CenteredText, StyledBiPlus } from '../../shared/styled.tsx';
+
+import type { Layouts } from '../../../context/layout/layout.tsx';
+import type { IconButtonProps } from '@mui/material';
+import type { ReactNode } from 'react';
+
+type ControlProfilesProps = {
+ id: string;
+};
+
+type VirtualControlProfile = {
+ id: string;
+ name: string;
+ active: boolean;
+ layouts: Layouts;
+};
+
+type VirtualControlProfiles = VirtualControlProfile[];
+
+type StatefulIconButtonProps = {
+ condition: boolean;
+ truthyIcon: ReactNode;
+ falsyIcon: ReactNode;
+} & IconButtonProps;
+
+type EditableProfileLoadButtonProps = {
+ name: string;
+ loadProfile: () => void;
+ onSubmit: ({ name }: { name: string }) => void;
+};
+
+const StyledLi = styled.li`
+ cursor: pointer;
+ display: grid;
+ grid-template-columns: auto 32px;
+ gap: 10px;
+
+ color: ${({ theme }) => theme.blueCharcoal};
+ background-color: ${({ theme }) => theme.pureWhite};
+ border: 1px solid rgba(0, 0, 0, 0.125);
+`;
+
+const ProfilesList = styled.ul`
+ list-style-type: none;
+ display: flex;
+ flex-direction: column;
+ margin: 0;
+ padding: 0;
+
+ & > ${StyledLi}:first-child {
+ border-top-left-radius: 4px;
+ border-top-right-radius: 4px;
+ }
+
+ & > ${StyledLi}:last-child {
+ border-bottom-left-radius: 4px;
+ border-bottom-right-radius: 4px;
+ }
+
+ & > ${StyledLi}:not(:first-child) {
+ border-top-width: 0;
+ }
+`;
+
+const StyledCiCircleRemove = styled(BiTrash)`
+ height: 100%;
+ width: 20px;
+`;
+
+const StyledBiEdit = styled(BiEdit)`
+ height: 100%;
+ width: 20px;
+`;
+
+const StyledBiSave = styled(BiSave)`
+ height: 100%;
+ width: 20px;
+`;
+
+const LoadProfileButton = styled.button`
+ padding: 0.5rem 0.5rem;
+ width: 100%;
+ color: ${({ theme }) => theme.blueCharcoal};
+ background-color: ${({ theme }) => theme.pureWhite};
+ border: none;
+ text-align: left;
+ font-size: 16px;
+ height: 32px;
+
+ &:hover {
+ color: ${({ theme }) => theme.darkGrayBlue};
+ background-color: ${({ theme }) => theme.aliceBlue1};
+ }
+`;
+
+const StyledForm = styled.form`
+ display: flex;
+ gap: 10px;
+`;
+
+const StatefulIconButton = ({
+ condition,
+ truthyIcon,
+ falsyIcon,
+ ...rest
+}: StatefulIconButtonProps) => (
+
+ {condition ? truthyIcon : falsyIcon}
+
+);
+
+const EditableProfileLoadButton = ({
+ name,
+ loadProfile,
+ onSubmit
+}: EditableProfileLoadButtonProps) => {
+ const [isEditing, setIsEditing] = useState(false);
+ const {
+ register,
+ handleSubmit,
+ formState: { errors, isValid }
+ } = useForm<{ name: string }>({
+ defaultValues: {
+ name: name
+ }
+ });
+
+ return (
+
+ {isEditing ? (
+
+ ) : (
+ {name}
+ )}
+ }
+ falsyIcon={}
+ aria-label={`${isEditing ? 'Save' : 'Edit'} ${name}'s name`}
+ type="submit"
+ data-is-valid={isValid}
+ onClick={() => isValid && setIsEditing((prevState) => !prevState)}
+ />
+
+ );
+};
+
+export const ControlProfiles = ({ id }: ControlProfilesProps) => {
+ const [virtualControlProfiles, setVirtualControlProfiles] = useLocalStorage<
+ VirtualControlProfiles | undefined
+ >(virtualControlProfilesLocalStorageKey);
+ const { layouts, setLayouts } = useLayoutContext();
+
+ const addProfile = () => {
+ setVirtualControlProfiles((prevState) => [
+ ...(prevState ?? []),
+ {
+ id: nanoid(),
+ name: `Profile-${(prevState?.length ?? 0) + 1}`,
+ layouts: layouts,
+ active: true
+ }
+ ]);
+ };
+
+ const updateProfile = (id: string, updatedName: string) => {
+ setVirtualControlProfiles((prevState) =>
+ prevState?.map((profile) => {
+ if (profile.id == id)
+ return {
+ ...profile,
+ name: updatedName
+ };
+
+ return profile;
+ })
+ );
+ };
+
+ const deleteProfile = (id: string) => {
+ setVirtualControlProfiles((prevState) =>
+ prevState?.filter((p) => p.id !== id)
+ );
+ };
+
+ return (
+ <>
+
+ {virtualControlProfiles?.map?.(
+ (profile: VirtualControlProfile, idx: number) => (
+
+ setLayouts(profile.layouts)}
+ onSubmit={({ name }) => updateProfile(profile.id, name)}
+ />
+ deleteProfile(profile.id)}
+ >
+
+
+
+ )
+ )}
+ {!virtualControlProfiles?.length && (
+
+ No control profiles
+
+ )}
+
+ addProfile()}
+ >
+
+
+ >
+ );
+};
diff --git a/gbajs3/src/components/modals/save-states.tsx b/gbajs3/src/components/modals/save-states.tsx
index 4eb3f9c6..091abfc0 100644
--- a/gbajs3/src/components/modals/save-states.tsx
+++ b/gbajs3/src/components/modals/save-states.tsx
@@ -2,7 +2,7 @@ import { Button, IconButton, TextField } from '@mui/material';
import { useLocalStorage } from '@uidotdev/usehooks';
import { useCallback, useEffect, useId, useState } from 'react';
import { useForm, type SubmitHandler } from 'react-hook-form';
-import { BiError, BiPlus, BiTrash } from 'react-icons/bi';
+import { BiError, BiTrash } from 'react-icons/bi';
import { styled, useTheme } from 'styled-components';
import { ModalBody } from './modal-body.tsx';
@@ -16,7 +16,7 @@ import {
} from '../product-tour/embedded-product-tour.tsx';
import { CircleCheckButton } from '../shared/circle-check-button.tsx';
import { ErrorWithIcon } from '../shared/error-with-icon.tsx';
-import { CenteredText } from '../shared/styled.tsx';
+import { CenteredText, StyledBiPlus } from '../shared/styled.tsx';
type InputProps = {
saveStateSlot: number;
@@ -69,11 +69,6 @@ const SaveStatesList = styled.ul`
}
`;
-const StyledBiPlus = styled(BiPlus)`
- width: 25px;
- height: 25px;
-`;
-
const StyledCiCircleRemove = styled(BiTrash)`
height: 100%;
width: 20px;
diff --git a/gbajs3/src/components/shared/styled.tsx b/gbajs3/src/components/shared/styled.tsx
index c68e3797..d23ef9a4 100644
--- a/gbajs3/src/components/shared/styled.tsx
+++ b/gbajs3/src/components/shared/styled.tsx
@@ -1,3 +1,4 @@
+import { BiPlus } from 'react-icons/bi';
import { styled } from 'styled-components';
export const CenteredTextContainer = styled.div`
@@ -35,3 +36,8 @@ export const FooterWrapper = styled.div`
border-top: 1px solid ${({ theme }) => theme.pattensBlue};
padding: 1rem 1rem;
`;
+
+export const StyledBiPlus = styled(BiPlus)`
+ width: 25px;
+ height: 25px;
+`;
diff --git a/gbajs3/src/context/layout/layout.tsx b/gbajs3/src/context/layout/layout.tsx
index f9803602..e57da53d 100644
--- a/gbajs3/src/context/layout/layout.tsx
+++ b/gbajs3/src/context/layout/layout.tsx
@@ -2,13 +2,13 @@ import { createContext, useCallback, useEffect, type ReactNode } from 'react';
import { useLayouts } from '../../hooks/use-layouts.tsx';
-type Layout = {
+export type Layout = {
position?: { x: number; y: number };
size?: { width: string | number; height: string | number };
initialBounds?: DOMRect;
};
-type Layouts = {
+export type Layouts = {
[key: string]: Layout;
};
@@ -17,6 +17,7 @@ type LayoutContextProps = {
hasSetLayout: boolean;
clearLayouts: () => void;
setLayout: (layoutKey: string, layout: Layout) => void;
+ setLayouts: (layouts: Layouts) => void;
};
type LayoutProviderProps = { children: ReactNode };
@@ -53,7 +54,8 @@ export const LayoutProvider = ({ children }: LayoutProviderProps) => {
layouts,
hasSetLayout,
clearLayouts,
- setLayout
+ setLayout,
+ setLayouts
}}
>
{children}
diff --git a/gbajs3/src/hooks/use-layouts.tsx b/gbajs3/src/hooks/use-layouts.tsx
index 2ea627cd..ef43afa6 100644
--- a/gbajs3/src/hooks/use-layouts.tsx
+++ b/gbajs3/src/hooks/use-layouts.tsx
@@ -1,15 +1,7 @@
import { useLocalStorage } from '@uidotdev/usehooks';
import { useCallback, useMemo } from 'react';
-type Layout = {
- position?: { x: number; y: number };
- size?: { width: string | number; height: string | number };
- initialBounds?: DOMRect;
-};
-
-type Layouts = {
- [key: string]: Layout;
-};
+import type { Layouts } from '../context/layout/layout';
const layoutLocalStorageKey = 'componentLayouts';