From 0c5dc0b25c273b1f4c46c8023de0820bad93bf59 Mon Sep 17 00:00:00 2001 From: Nolan Baker Date: Tue, 1 Oct 2024 18:38:50 -0500 Subject: [PATCH 01/24] dmg palettes (BGP, OBP0, OBP1) assignable in project settings file (not GUI) --- src/components/world/SceneView.tsx | 2 ++ src/consts.ts | 3 ++ src/lib/compiler/compileData.ts | 39 +++++++++++------------- src/shared/lib/entities/entitiesTypes.ts | 3 ++ src/shared/lib/resources/types.ts | 18 +++++++++++ test/dummydata.ts | 9 ++++++ test/resources/types.test.ts | 3 ++ 7 files changed, 55 insertions(+), 22 deletions(-) diff --git a/src/components/world/SceneView.tsx b/src/components/world/SceneView.tsx index c469f569e..ea8c1d4a6 100644 --- a/src/components/world/SceneView.tsx +++ b/src/components/world/SceneView.tsx @@ -373,6 +373,8 @@ const SceneView = memo( state.project.present.settings.defaultBackgroundPaletteIds ?? [] ); + //TODO: getBGP, getOBP0, getOBP1 -NB + const getPalette = useCallback( (paletteIndex: number) => { const sceneBackgroundPaletteIds = scene?.paletteIds ?? []; diff --git a/src/consts.ts b/src/consts.ts index f7e498cb8..d50cc6f78 100755 --- a/src/consts.ts +++ b/src/consts.ts @@ -152,6 +152,9 @@ export const defaultProjectSettings: Settings = { zoom: 100, sgbEnabled: false, customHead: "", + defaultBGP: [0, 1, 2, 3], + defaultOBP0: [0, 0, 1, 3], + defaultOBP1: [0, 0, 2, 3], defaultBackgroundPaletteIds: [ "default-bg-1", "default-bg-2", diff --git a/src/lib/compiler/compileData.ts b/src/lib/compiler/compileData.ts index 478094320..59bb573b1 100755 --- a/src/lib/compiler/compileData.ts +++ b/src/lib/compiler/compileData.ts @@ -427,8 +427,10 @@ export const precompilePalettes = async ( const isColor = settings.colorMode !== "mono" || settings.sgbEnabled; const palettesLookup = indexById(palettes); - const defaultBackgroundPaletteIds = - settings.defaultBackgroundPaletteIds || []; + const defaultBGP = settings.defaultBGP || []; + const defaultOBP0 = settings.defaultOBP0 || []; + const defaultOBP1 = settings.defaultOBP1 || []; + const defaultBackgroundPaletteIds = settings.defaultBackgroundPaletteIds || []; const defaultSpritePaletteIds = settings.defaultSpritePaletteIds || []; const getPalette = (id: string, fallbackId: string): Palette => { @@ -461,25 +463,26 @@ export const precompilePalettes = async ( }; }; + const getDMGPalette = (scenePal: number[], defaultPal: number[]): [string, string, string, string] => { + const defaultPalette = ["DMG_WHITE", "DMG_LITE_GRAY", "DMG_DARK_GRAY", "DMG_BLACK"] as [string, string, string, string]; + if (scenePal.length == 4) return [defaultPalette[scenePal[0]], defaultPalette[scenePal[1]], defaultPalette[scenePal[2]], defaultPalette[scenePal[3]]]; + else if (defaultPal.length == 4) return [defaultPalette[defaultPal[0]], defaultPalette[defaultPal[1]], defaultPalette[defaultPal[2]], defaultPalette[defaultPal[3]]]; + return defaultPalette; + }; + // Background palettes for (let i = 0; i < scenes.length; i++) { const scene = scenes[i]; const sceneBackgroundPaletteIds = scene.paletteIds || []; + const sceneBGP = scene.dmgBGP || []; const background = backgrounds[scene.backgroundId]; if (background?.autoPalettes?.[0]) { } const scenePalette = { - dmg: [ - ["DMG_WHITE", "DMG_LITE_GRAY", "DMG_DARK_GRAY", "DMG_BLACK"] as [ - string, - string, - string, - string - ], - ], + dmg: [ getDMGPalette(sceneBGP, defaultBGP), ], colors: isColor ? [ getBackgroundPalette( @@ -552,21 +555,13 @@ export const precompilePalettes = async ( for (let i = 0; i < scenes.length; i++) { const scene = scenes[i]; const sceneSpritePaletteIds = scene.spritePaletteIds || []; + const sceneOBP0 = scene.dmgOBP0 || []; + const sceneOBP1 = scene.dmgOBP1 || []; const actorsPalette = { dmg: [ - ["DMG_WHITE", "DMG_WHITE", "DMG_LITE_GRAY", "DMG_BLACK"] as [ - string, - string, - string, - string - ], - ["DMG_WHITE", "DMG_WHITE", "DMG_DARK_GRAY", "DMG_BLACK"] as [ - string, - string, - string, - string - ], + getDMGPalette(sceneOBP0, defaultOBP0), + getDMGPalette(sceneOBP1, defaultOBP1), ], colors: isColor ? [ diff --git a/src/shared/lib/entities/entitiesTypes.ts b/src/shared/lib/entities/entitiesTypes.ts index 9f8f30a8c..15aff9128 100644 --- a/src/shared/lib/entities/entitiesTypes.ts +++ b/src/shared/lib/entities/entitiesTypes.ts @@ -434,6 +434,9 @@ export type Scene = { height: number; backgroundId: string; tilesetId: string; + dmgBGP?: number[]; + dmgOBP0?: number[]; + dmgOBP1?: number[]; paletteIds: string[]; spritePaletteIds: string[]; collisions: number[]; diff --git a/src/shared/lib/resources/types.ts b/src/shared/lib/resources/types.ts index c04b973b7..0e362aec8 100644 --- a/src/shared/lib/resources/types.ts +++ b/src/shared/lib/resources/types.ts @@ -575,6 +575,24 @@ export const SettingsResource = Type.Object({ zoom: Type.Number(), sgbEnabled: Type.Boolean(), customHead: Type.String(), + defaultBGP: Type.Tuple([ + Type.Number(), + Type.Number(), + Type.Number(), + Type.Number(), + ]), + defaultOBP0: Type.Tuple([ + Type.Number(), + Type.Number(), + Type.Number(), + Type.Number(), + ]), + defaultOBP1: Type.Tuple([ + Type.Number(), + Type.Number(), + Type.Number(), + Type.Number(), + ]), defaultBackgroundPaletteIds: Type.Tuple([ Type.String(), Type.String(), diff --git a/test/dummydata.ts b/test/dummydata.ts index 41c95b7c6..71f552158 100644 --- a/test/dummydata.ts +++ b/test/dummydata.ts @@ -310,6 +310,9 @@ export const dummyProjectData: ProjectData = { worldScrollY: 0, zoom: 100, sgbEnabled: false, + defaultBGP: [0, 1, 2, 3], + defaultOBP0: [0, 0, 1, 3], + defaultOBP1: [0, 0, 2, 3], defaultBackgroundPaletteIds: ["", "", "", "", "", "", "", ""], defaultSpritePaletteIds: ["", "", "", "", "", "", "", ""], defaultSpritePaletteId: "", @@ -563,6 +566,9 @@ export const dummySettingsResource: SettingsResource = { zoom: 1, sgbEnabled: false, customHead: "head", + defaultBGP: [0, 1, 2, 3], + defaultOBP0: [0, 0, 1, 3], + defaultOBP1: [0, 0, 2, 3], defaultBackgroundPaletteIds: [ "palette1", "palette2", @@ -687,6 +693,9 @@ export const dummyProjectResources: ProjectResources = { worldScrollY: 0, zoom: 100, sgbEnabled: false, + defaultBGP: [0, 1, 2, 3], + defaultOBP0: [0, 0, 1, 3], + defaultOBP1: [0, 0, 2, 3], defaultBackgroundPaletteIds: ["", "", "", "", "", "", "", ""], defaultSpritePaletteIds: ["", "", "", "", "", "", "", ""], defaultSpritePaletteId: "", diff --git a/test/resources/types.test.ts b/test/resources/types.test.ts index f825def97..3f3524cd5 100644 --- a/test/resources/types.test.ts +++ b/test/resources/types.test.ts @@ -572,6 +572,9 @@ describe("TypeBox Schemas", () => { zoom: 1, sgbEnabled: false, customHead: "head", + defaultBGP: [0, 1, 2, 3], + defaultOBP0: [0, 0, 1, 3], + defaultOBP1: [0, 0, 2, 3], defaultBackgroundPaletteIds: [ "palette1", "palette2", From 27c9f71af0199b96975156a35c5c5659022bf913 Mon Sep 17 00:00:00 2001 From: Nolan Baker Date: Tue, 1 Oct 2024 18:59:07 -0500 Subject: [PATCH 02/24] stubbs out settings page for DMG palettes --- src/components/pages/SettingsPage.tsx | 37 +++++++++++++++++++++++++++ 1 file changed, 37 insertions(+) diff --git a/src/components/pages/SettingsPage.tsx b/src/components/pages/SettingsPage.tsx index 9c5b51d1b..18d3f5bbc 100644 --- a/src/components/pages/SettingsPage.tsx +++ b/src/components/pages/SettingsPage.tsx @@ -79,6 +79,9 @@ const SettingsPage: FC = () => { colorMode, sgbEnabled, customHead, + defaultBGP, + defaultOBP0, + defaultOBP1, defaultBackgroundPaletteIds, defaultSpritePaletteIds, defaultFontId, @@ -89,6 +92,7 @@ const SettingsPage: FC = () => { compilerPreset, } = settings; + const dmgEnabled = colorMode !== "color"; const colorEnabled = colorMode !== "mono"; const onSearch = (e: React.ChangeEvent) => { @@ -337,6 +341,39 @@ const SettingsPage: FC = () => { + {dmgEnabled && ( + <> + + + {"DMG Background Palette (BGP)"} + + +
+ +
+ + + {"DMG Object Palette 0 (OBP0)"} + + +
+ +
+ + + {"DMG Object Palette 1 (OBP1)"} + + +
+ +
+ + + + )} {colorEnabled && ( <> Date: Tue, 1 Oct 2024 21:57:53 -0500 Subject: [PATCH 03/24] functional but ugly... how the fuck do you change the color of a UI element and what the fuck is this language --- src/components/forms/ObjPaletteSelect.tsx | 1 + src/components/pages/SettingsPage.tsx | 113 ++++++++++++++++++++-- 2 files changed, 104 insertions(+), 10 deletions(-) diff --git a/src/components/forms/ObjPaletteSelect.tsx b/src/components/forms/ObjPaletteSelect.tsx index ac2324e97..09ce16b4f 100644 --- a/src/components/forms/ObjPaletteSelect.tsx +++ b/src/components/forms/ObjPaletteSelect.tsx @@ -21,6 +21,7 @@ interface ObjPaletteOption { colors: string[]; } +//TODO: change these based on the global palette colors and the selected OBP settings -NB const options: ObjPaletteOption[] = [ { value: "OBP0", diff --git a/src/components/pages/SettingsPage.tsx b/src/components/pages/SettingsPage.tsx index 18d3f5bbc..fff84555e 100644 --- a/src/components/pages/SettingsPage.tsx +++ b/src/components/pages/SettingsPage.tsx @@ -38,11 +38,13 @@ import { FormInfo } from "ui/form/FormInfo"; import electronActions from "store/features/electron/electronActions"; import CartSettingsEditor from "components/settings/CartSettingsEditor"; import { UIAssetPreview } from "components/forms/UIAssetPreviewButton"; -import { FormField } from "ui/form/layout/FormLayout"; +import { FormField, FormRow } from "ui/form/layout/FormLayout"; import { FixedSpacer } from "ui/spacing/Spacing"; import { useAppDispatch, useAppSelector } from "store/hooks"; import { ColorModeSelect } from "components/forms/ColorModeSelect"; import { CompilerPresetSelect } from "components/forms/CompilerPresetSelect"; +import { NumberInput } from "ui/form/NumberInput"; +import { castEventToInt } from "renderer/lib/helpers/castEventValue"; const SettingsPage: FC = () => { const dispatch = useAppDispatch(); @@ -164,6 +166,54 @@ const SettingsPage: FC = () => { [onChangeSettingProp] ); + const onEditBGP = useCallback( + (index: number, e: number) => { + const bgp = defaultBGP ? [...defaultBGP] : []; + bgp[index] = e; + editSettings({ + defaultBGP: [ + bgp[0], + bgp[1], + bgp[2], + bgp[3], + ], + }); + }, + [defaultBGP, editSettings] + ); + + const onEditOBP0 = useCallback( + (index: number, e: number) => { + const obp0 = defaultOBP0 ? [...defaultOBP0] : []; + obp0[index] = e; + editSettings({ + defaultOBP0: [ + obp0[0], + obp0[1], + obp0[2], + obp0[3], + ], + }); + }, + [defaultOBP0, editSettings] + ); + + const onEditOBP1 = useCallback( + (index: number, e: number) => { + const obp1 = defaultOBP1 ? [...defaultOBP1] : []; + obp1[index] = e; + editSettings({ + defaultOBP1: [ + obp1[0], + obp1[1], + obp1[2], + obp1[3], + ], + }); + }, + [defaultOBP1, editSettings] + ); + const onEditPaletteId = useCallback( (index: number, e: string) => { const paletteIds = defaultBackgroundPaletteIds @@ -351,25 +401,68 @@ const SettingsPage: FC = () => { {"DMG Background Palette (BGP)"} -
- -
+ + {[0, 1, 2, 3].map((index) => ( + + onEditBGP(index, castEventToInt(e, index))} + /> + + ))} + + + {"DMG Object Palette 0 (OBP0)"} -
- -
+ + {[1, 2, 3].map((index) => ( + + onEditOBP0(index, castEventToInt(e, index))} + /> + + ))} + + + {"DMG Object Palette 1 (OBP1)"} -
- -
+ + {[1, 2, 3].map((index) => ( + + onEditOBP1(index, castEventToInt(e, index))} + /> + + ))} + From feb87db25bd5517c1da3a291664cea16ab4ed539 Mon Sep 17 00:00:00 2001 From: Nolan Baker Date: Tue, 1 Oct 2024 22:38:59 -0500 Subject: [PATCH 04/24] ok, that looks decent... now for scenes... and I should probably make a component out of this --- src/components/pages/SettingsPage.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/components/pages/SettingsPage.tsx b/src/components/pages/SettingsPage.tsx index fff84555e..9757d4218 100644 --- a/src/components/pages/SettingsPage.tsx +++ b/src/components/pages/SettingsPage.tsx @@ -283,6 +283,8 @@ const SettingsPage: FC = () => { [dispatch] ); + const dmgColors = [settings.customColorsWhite, settings.customColorsLight, settings.customColorsDark, settings.customColorsBlack]; + return ( {showMenu && ( @@ -405,6 +407,7 @@ const SettingsPage: FC = () => { {[0, 1, 2, 3].map((index) => ( { {[1, 2, 3].map((index) => ( { {"DMG Object Palette 1 (OBP1)"} @@ -453,6 +457,7 @@ const SettingsPage: FC = () => { {[1, 2, 3].map((index) => ( Date: Wed, 2 Oct 2024 08:24:47 -0500 Subject: [PATCH 05/24] obj pal select shows configured palette --- src/components/forms/ObjPaletteSelect.tsx | 34 +++++++++++++---------- 1 file changed, 20 insertions(+), 14 deletions(-) diff --git a/src/components/forms/ObjPaletteSelect.tsx b/src/components/forms/ObjPaletteSelect.tsx index 09ce16b4f..fd14f2a82 100644 --- a/src/components/forms/ObjPaletteSelect.tsx +++ b/src/components/forms/ObjPaletteSelect.tsx @@ -8,6 +8,7 @@ import { } from "ui/form/Select"; import l10n from "shared/lib/lang/l10n"; import { SingleValue } from "react-select"; +import { useAppSelector } from "store/hooks"; interface ObjPaletteSelectProps { name: string; @@ -21,25 +22,30 @@ interface ObjPaletteOption { colors: string[]; } -//TODO: change these based on the global palette colors and the selected OBP settings -NB -const options: ObjPaletteOption[] = [ - { - value: "OBP0", - label: "0: OBP0", - colors: ["E8F8E0", "B0F088", "", "202850"], - }, - { - value: "OBP1", - label: "1: OBP1", - colors: ["E8F8E0", "509878", "", "202850"], - }, -]; - export const ObjPaletteSelect: FC = ({ name, value = "OBP0", onChange, }) => { + const settings = useAppSelector((state) => state.project.present.settings); + const obp0 = settings.defaultOBP0; + const obp1 = settings.defaultOBP1; + const dmgPal = [settings.customColorsWhite, settings.customColorsLight, settings.customColorsDark, settings.customColorsBlack]; + const obp0Colors = [dmgPal[obp0[1]], dmgPal[obp0[2]], "", dmgPal[obp0[3]]]; + const obp1Colors = [dmgPal[obp1[1]], dmgPal[obp1[2]], "", dmgPal[obp1[3]]]; + const options: ObjPaletteOption[] = [ + { + value: "OBP0", + label: "0: OBP0", + colors: obp0Colors, + }, + { + value: "OBP1", + label: "1: OBP1", + colors: obp1Colors, + }, + ]; + const currentValue = options.find((o) => o.value === value); return (