Adds support for per scene and project wide DMG palettes

src/components/backgrounds/BackgroundPreviewSettings.tsx

@@ -4,6 +4,7 @@ import {
   backgroundSelectors,
   sceneSelectors,
 } from "store/features/entities/entitiesState";
+import settingsActions from "store/features/settings/settingsActions";
 import editorActions from "store/features/editor/editorActions";
 import electronActions from "store/features/electron/electronActions";
 import { SceneSelect } from "components/forms/SceneSelect";
@@ -66,7 +67,12 @@ const BackgroundPreviewSettings = ({
   );
   const [isOpen, setIsOpen] = useState<boolean>(false);
   const [buttonFocus, setButtonFocus] = useState<boolean>(false);
-  const value = useAppSelector((state) => state.editor.previewAsSceneId);
+  const value = useAppSelector((state) => {
+    if (state.project.present.settings.previewAsMono) return "0";
+    const sceneId = state.editor.previewAsSceneId;
+    if (sceneId === "") return "1";
+    return sceneId;
+  });
   const scene = useAppSelector((state) =>
     sceneSelectors.selectById(state, value)
   );
@@ -144,6 +150,11 @@ const BackgroundPreviewSettings = ({
   };
 
   const onChange = (newValue: string) => {
+    dispatch(
+      settingsActions.editSettings({
+        previewAsMono: (newValue == "0"),
+      })
+    );
     dispatch(editorActions.setPreviewAsSceneId(newValue));
   };
 
@@ -173,7 +184,7 @@ const BackgroundPreviewSettings = ({
                   onBlur={closeMenu}
                   maxMenuHeight={200}
                   optional
-                  optionalLabel={l10n("FIELD_DEFAULT_COLORS")}
+                  optionalLabels={[l10n("FIELD_COLOR_MODE_MONO"), l10n("FIELD_DEFAULT_COLORS")]}
                   {...selectMenuStyleProps}
                 />
               </SelectMenu>
@@ -190,7 +201,8 @@ const BackgroundPreviewSettings = ({
               ? l10n("FIELD_PREVIEW_AS_SCENE", {
                   sceneName: sceneName(scene, sceneIndex),
                 })
-              : l10n("FIELD_PREVIEW_AS_DEFAULT")}
+              : ([l10n("FIELD_PREVIEW_AS_MONO"), l10n("FIELD_PREVIEW_AS_DEFAULT")][+value])
+              }
           </Pill>
           <FixedSpacer width={5} />
         </>

src/components/backgrounds/BackgroundViewer.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import { useAppSelector } from "store/hooks";
 import styled from "styled-components";
 import {
@@ -84,6 +84,12 @@ const BackgroundViewer = ({ backgroundId }: MetaspriteEditorProps) => {
     (state) => state.project.present.settings.colorMode !== "mono"
   );
   const [palettes, setPalettes] = useState<Palette[]>(emptyPalettes);
+  const previewAsMono = useAppSelector((state) =>
+    !gbcEnabled || state.project.present.settings.previewAsMono
+  );
+  const defaultBGP = useAppSelector((state) =>
+    state.project.present.settings.defaultBGP
+  );
 
   useEffect(() => {
     setPalettes(
@@ -128,6 +134,8 @@ const BackgroundViewer = ({ backgroundId }: MetaspriteEditorProps) => {
                   src={assetURL("backgrounds", background)}
                   tiles={background.tileColors}
                   palettes={palettes}
+                  previewAsMono={previewAsMono}
+                  monoPalette={defaultBGP}
                 />
               )}
             </ImageScale>
@@ -162,6 +170,8 @@ const BackgroundViewer = ({ backgroundId }: MetaspriteEditorProps) => {
                 src={assetURL("tilesets", tileset)}
                 tiles={[]}
                 palettes={palettes}
+                previewAsMono={previewAsMono}
+                monoPalette={defaultBGP}
               />
             </ImageScale>
           </ImageContainer>

src/components/editors/SceneEditor.tsx

@@ -73,6 +73,7 @@ import { ScriptEditorCtx } from "shared/lib/scripts/context";
 import { TilesetSelect } from "components/forms/TilesetSelect";
 import { FlexGrow } from "ui/spacing/Spacing";
 import CachedScroll from "ui/util/CachedScroll";
+import { DMGPalettePicker } from "components/forms/DMGPalettePicker";
 
 interface SceneEditorProps {
   id: string;
@@ -149,7 +150,18 @@ export const SceneEditor = ({ id }: SceneEditorProps) => {
   const [commonTilesetOpen, setCommonTilesetOpen] = useState<boolean>(
     !!scene?.tilesetId
   );
-
+  const defaultBGP = useAppSelector((state) =>
+    state.project.present.settings.defaultBGP
+  );
+  const defaultOBP0 = useAppSelector((state) =>
+    state.project.present.settings.defaultOBP0
+  );
+  const defaultOBP1 = useAppSelector((state) =>
+    state.project.present.settings.defaultOBP1
+  );
+  const monoEnabled = useAppSelector(
+    (state) => state.project.present.settings.colorMode !== "color"
+  );
   const colorsEnabled = useAppSelector(
     (state) => state.project.present.settings.colorMode !== "mono"
   );
@@ -324,6 +336,24 @@ export const SceneEditor = ({ id }: SceneEditorProps) => {
     [onChangeSettingProp]
   );
 
+  const onEditBGP = useCallback(
+    (palette: [number, number, number, number]) =>
+      onChangeSceneProp("dmgBGP", palette),
+    [onChangeSceneProp]
+  );
+
+  const onEditOBP0 = useCallback(
+    (palette: [number, number, number, number]) =>
+      onChangeSceneProp("dmgOBP0", palette),
+    [onChangeSceneProp]
+  );
+
+  const onEditOBP1 = useCallback(
+    (palette: [number, number, number, number]) =>
+      onChangeSceneProp("dmgOBP1", palette),
+    [onChangeSceneProp]
+  );
+
   const selectSidebar = () => {
     dispatch(editorActions.selectSidebar());
   };
@@ -739,14 +769,14 @@ export const SceneEditor = ({ id }: SceneEditorProps) => {
               </SidebarColumn>
             )}
 
-            {colorsEnabled && (
               <SidebarColumn>
                 <FormRow>
                   <FormField
                     name="playerSpriteSheetId"
                     label={
                       <>
-                        {l10n("FIELD_SCENE_BACKGROUND_PALETTES")}
+                      {l10n("FIELD_SCENE_BACKGROUND_PALETTES")}
+                      {colorsEnabled && (
                         <InlineDropdownWrapper>
                           <DropdownButton
                             size="small"
@@ -784,10 +814,19 @@ export const SceneEditor = ({ id }: SceneEditorProps) => {
                             </MenuItem>
                           </DropdownButton>
                         </InlineDropdownWrapper>
+                        )}
                       </>
-                    }
-                  >
-                    {!background?.autoColor && (
+                    }>
+                    {monoEnabled && (
+                      <DMGPalettePicker 
+                        name="bgp" 
+                        palette={scene.dmgBGP ?? defaultBGP} 
+                        isSpritePalette={false} 
+                        onChange={onEditBGP} 
+                        showName={true}
+                      />
+                    )}
+                    {colorsEnabled && !background?.autoColor && (
                       <PaletteButtons>
                         {[0, 1, 2, 3, 4, 5, 6, 7].map((index) => (
                           <PaletteSelectButton
@@ -816,6 +855,25 @@ export const SceneEditor = ({ id }: SceneEditorProps) => {
                     name="playerSpriteSheetId"
                     label={l10n("FIELD_SCENE_SPRITE_PALETTES")}
                   >
+                  {monoEnabled &&
+                    <PaletteButtons>
+                      <DMGPalettePicker 
+                        name="obp0" 
+                        palette={scene.dmgOBP0 ?? defaultOBP0} 
+                        isSpritePalette={true} 
+                        onChange={onEditOBP0} 
+                        showName={true}
+                      />
+                      <DMGPalettePicker 
+                        name="obp1" 
+                        palette={scene.dmgOBP1 ?? defaultOBP1} 
+                        isSpritePalette={true} 
+                        onChange={onEditOBP1} 
+                        showName={true}
+                      />
+                    </PaletteButtons>
+                  }
+                  {colorsEnabled && (
                     <PaletteButtons>
                       {[0, 1, 2, 3, 4, 5, 6, 7].map((index) => (
                         <PaletteSelectButton
@@ -837,12 +895,12 @@ export const SceneEditor = ({ id }: SceneEditorProps) => {
                         />
                       ))}
                     </PaletteButtons>
+                    )}
                   </FormField>
                 </FormRow>
 
                 {/* <FormDivider /> */}
               </SidebarColumn>
-            )}
             {scene.type !== "LOGO" && (
               <SidebarColumn>
                 <FormRow>

src/components/forms/DMGPalettePicker.tsx

@@ -0,0 +1,61 @@
+import React, { useCallback } from "react";
+import {useAppSelector } from "store/hooks";
+import { NumberInput } from "ui/form/NumberInput";
+import { castEventToInt } from "renderer/lib/helpers/castEventValue";
+import styled, { css } from "styled-components";
+
+type DMGPalettePickerProps = {
+  name: string
+  palette: [number, number, number, number]
+  isSpritePalette: boolean
+  onChange: (palette: [number, number, number, number]) => void;
+  showName?: boolean
+};
+
+export const DMGPalettePicker = ({
+  name,
+  palette,
+  isSpritePalette,
+  onChange,
+  showName
+}: DMGPalettePickerProps) => {
+
+  const settings = useAppSelector((state) => state.project.present.settings);
+  const dmgColors = [settings.customColorsWhite, settings.customColorsLight, settings.customColorsDark, settings.customColorsBlack];
+  const fields = isSpritePalette ? [1, 2, 3] : [0, 1, 2, 3];
+  const width = showName ? `max-width: ${isSpritePalette ? 121 : 245}px;` : "width: 100%";
+  const DMGPalettePickerStyle = styled.div`
+    display: flex;
+    ${width}
+    box-sizing: border-box;
+  `
+
+  const DMGPaletteTextStyle = styled.div`
+    width: 9px;
+    color: grey;
+    font-size: 9px;
+    text-align: center;
+    transform-origin:50% 50%;
+    transform: rotate(90deg) translate(-7px,8px);
+  `
+  function getRows() {
+    return fields.map((index) =>
+      <NumberInput
+        style={{backgroundColor:`#${dmgColors[palette[index]]}`, color:`#${dmgColors[(palette[index]+2)%4]}`}}
+        id={`${name}_${index}`}
+        name={`${name}_${index}`}
+        min={0}
+        max={3}
+        value={palette[index]}
+        onChange={(e) => {
+          let newPalette = [palette[0], palette[1], palette[2], palette[3]];
+          newPalette[index] = castEventToInt(e, 0);
+          onChange(newPalette as [number, number, number, number]);
+        }}
+      />
+    );
+  }
+
+  if (showName) return <DMGPalettePickerStyle><DMGPaletteTextStyle>{name.toUpperCase()}</DMGPaletteTextStyle>{getRows()}</DMGPalettePickerStyle>;
+  else return <DMGPalettePickerStyle>{getRows()}</DMGPalettePickerStyle>;
+};

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,24 +22,30 @@ interface ObjPaletteOption {
   colors: string[];
 }
 
-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<ObjPaletteSelectProps> = ({
   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 (
     <Select

src/components/forms/SceneSelect.tsx

@@ -23,7 +23,7 @@ interface SceneSelectProps extends SelectCommonProps {
   name: string;
   value?: string;
   optional?: boolean;
-  optionalLabel?: string;
+  optionalLabels?: string[];
   onChange?: (newId: string) => void;
 }
 
@@ -61,10 +61,11 @@ export const SceneSelect: FC<SceneSelectProps> = ({
   value,
   onChange,
   optional,
-  optionalLabel,
+  optionalLabels,
   ...selectProps
 }) => {
   const scenes = useAppSelector((state) => sceneSelectors.selectAll(state));
+  const optionalScenes = (optionalLabels || []).map((optionalLabel, i) => ({ value: i.toString(), label: optionalLabel }) ) as SceneOption[];
   const backgroundsLookup = useAppSelector((state) =>
     backgroundSelectors.selectEntities(state)
   );
@@ -84,20 +85,9 @@ export const SceneSelect: FC<SceneSelectProps> = ({
   }, [scenes]);
 
   useEffect(() => {
-    setOptions(
-      ([] as SceneOption[]).concat(
-        optional
-          ? ([
-              {
-                value: "",
-                label: optionalLabel || "None",
-              },
-            ] as SceneOption[])
-          : ([] as SceneOption[]),
-        scenes.map(sceneToSceneOption).sort(sortByLabel)
-      )
-    );
-  }, [scenes, optional, optionalLabel]);
+    const sceneOptions = scenes.map(sceneToSceneOption).sort(sortByLabel);
+    setOptions(([] as SceneOption[]).concat(optionalScenes, sceneOptions));
+  }, [scenes, optional, optionalLabels]);
 
   useEffect(() => {
     setCurrentScene(scenes.find((v) => v.id === value));
@@ -109,6 +99,7 @@ export const SceneSelect: FC<SceneSelectProps> = ({
         sceneToSceneOption(currentScene, scenes.indexOf(currentScene))
       );
     }
+    else if (optional && optionalScenes.length > 0) setCurrentValue(optionalScenes[+(value || 1)]);
   }, [currentScene, scenes]);
 
   const onSelectChange = (newValue: SingleValue<Option>) => {