Merge pull request #185 from HerrZatacke/develop

Develop

package.json

@@ -1,6 +1,6 @@
 {
   "name": "gb-printer-web",
-  "version": "1.42.6",
+  "version": "1.42.7",
   "description": "gb-printer-web",
   "scripts": {
     "start": "webpack serve --config ./scripts/webpack.dev.js",

src/javascript/app/components/Frames/index.tsx

@@ -17,6 +17,8 @@ function Frames() {
     exportJson,
     setActiveFrameGroupName,
     activeFrameGroup,
+    convertFormat,
+    enableDebug,
   } = useFrames();
 
   return (
@@ -84,6 +86,17 @@ function Frames() {
         >
           {`Export current framegroup (${selectedFrameGroup})`}
         </button>
+        {
+          enableDebug ? (
+            <button
+              type="button"
+              className="button"
+              onClick={convertFormat}
+            >
+              Convert frames to new format
+            </button>
+          ) : null
+        }
       </div>
     </div>
   );

src/javascript/app/components/Frames/useFrames.ts

@@ -8,6 +8,9 @@ import type { State } from '../../store/State';
 import type { Frame } from '../../../../types/Frame';
 import type { ExportJSONAction } from '../../../../types/actions/StorageActions';
 import type { ExportTypes } from '../../../consts/exportTypes';
+import type { GlobalUpdateAction } from '../../../../types/GlobalUpdateAction';
+import { compressAndHashFrame, loadFrameData, saveFrameData } from '../../../tools/applyFrame/frameData';
+import { padFrameData } from '../../../tools/saveLocalStorageItems';
 
 const getValidFrameGroupId = (groups: FrameGroup[], byId: string): string => {
   const group = groups.find(({ id }) => id === byId);
@@ -27,16 +30,25 @@ interface UseFrames {
   palette: string[],
   setActiveFrameGroupName: (name: string) => void,
   activeFrameGroup: FrameGroup,
+  convertFormat: () => void,
+  enableDebug: boolean,
 }
 
 const useFrames = (): UseFrames => {
   const dispatch = useDispatch();
 
-  const { savFrameTypes, frames, frameGroupNames, palette } = useSelector((state: State) => ({
+  const {
+    savFrameTypes,
+    frames,
+    frameGroupNames,
+    palette,
+    enableDebug,
+  } = useSelector((state: State) => ({
     savFrameTypes: state.savFrameTypes,
     frames: state.frames,
     frameGroupNames: state.frameGroupNames,
     palette: state.palettes.find(({ shortName }) => shortName === state.activePalette) || state.palettes[0],
+    enableDebug: state.enableDebug,
   }));
 
   const frameGroups = getFrameGroups(frames, frameGroupNames);
@@ -75,6 +87,40 @@ const useFrames = (): UseFrames => {
     });
   };
 
+  const convertFormat = async () => {
+    const updatedFrames = await Promise.all(frames.map(async (frame): Promise<Frame> => {
+      const stateData = await loadFrameData(frame.hash);
+
+      if (!stateData) {
+        return frame;
+      }
+
+      const imageStartLine = stateData.upper.length / 20;
+      const tileData = padFrameData(stateData);
+
+      const { dataHash: newHash } = await compressAndHashFrame(tileData, imageStartLine);
+
+
+      if (frame.hash === newHash) {
+        return frame;
+      }
+
+      const saveHash = await saveFrameData(tileData, imageStartLine);
+
+      return {
+        ...frame,
+        hash: saveHash,
+      };
+    }));
+
+    dispatch<GlobalUpdateAction>({
+      type: Actions.GLOBAL_UPDATE,
+      payload: {
+        frames: updatedFrames,
+      },
+    });
+  };
+
   return {
     selectedFrameGroup,
     groupFrames,
@@ -84,6 +130,8 @@ const useFrames = (): UseFrames => {
     palette: palette?.palette,
     setActiveFrameGroupName,
     activeFrameGroup,
+    convertFormat,
+    enableDebug,
   };
 };
 

src/javascript/tools/saveLocalStorageItems/index.ts

@@ -12,29 +12,35 @@ export const saveImageFileContent = async (fileContent: string): Promise<string>
   return save(lines);
 };
 
-export const saveFrameFileContent = async (fileContent: string): Promise<string> => {
-  const tiles = JSON.parse(fileContent) as FrameData;
-  const imageStartLine = tiles.upper.length / 20;
-
+export const padFrameData = (frameData: FrameData): string[] => {
   const black = Array(32)
     .fill('f')
     .join('');
   const pad = Array(16)
     .fill(black);
 
-  // tiles need to be padded with some lines that get stripped again when saving frame data
   const paddedFrameData = [
-    ...tiles.upper,
+    ...frameData.upper,
     ...Array(14)
       .fill('')
       .map((_, index) => ([
-        ...tiles.left[index],
+        ...frameData.left[index],
         ...pad,
-        ...tiles.right[index],
+        ...frameData.right[index],
       ]))
       .flat(),
-    ...tiles.lower,
+    ...frameData.lower,
   ];
+
+  return paddedFrameData;
+};
+
+export const saveFrameFileContent = async (fileContent: string): Promise<string> => {
+  const tiles = JSON.parse(fileContent) as FrameData;
+  const imageStartLine = tiles.upper.length / 20;
+
+  // tiles need to be padded with some lines that get stripped again when saving frame data
+  const paddedFrameData = padFrameData(tiles);
   return saveFrameData(paddedFrameData, imageStartLine);
 };