feat: migrate emulator settings to IndexedDB and reorganize UI scripts

src/scripts/constants/audio.constants.ts

@@ -3,3 +3,5 @@ export const defaultAudioGain = 0.06;
 export const maximumAudioGain = 0.1;
 
 export const defaultAudioFrequency = 600;
+
+export const defaultSoundState = true;

src/scripts/constants/database.constants.ts

@@ -0,0 +1,4 @@
+export enum Order {
+  NEXT = 'next',
+  PREV = 'prev'
+}

src/scripts/constants/settings.constants.ts

@@ -0,0 +1,11 @@
+import { Chip8Quirks } from './chip8.constants';
+
+export enum GeneralEmulatorSettings {
+  FONT_APPEARANCE = 'fontAppearance',
+  CYCLES_PER_FRAME = 'cyclesPerFrame',
+  SOUND_STATE = 'soundState',
+  GAIN_LEVEL = 'gainLevel',
+  MEMORY_SIZE = 'memorySize',
+}
+
+export type EmulatorSettings = GeneralEmulatorSettings | Chip8Quirks;

src/scripts/tools/database.tools.ts → src/scripts/database/database.ts

@@ -1,3 +1,4 @@
+import { Order } from '../constants/database.constants';
 import { database } from '../constants/emulator.constants';
 
 export class DatabaseTool<T = any> {
@@ -103,7 +104,7 @@ export class DatabaseTool<T = any> {
     });
   }
 
-  public async *getAllElementsFromDatabase(storageName: string, orderBy?: string, order: 'next' | 'prev' = 'next'): AsyncGenerator<T> {
+  public async *getAllElementsFromDatabase(storageName: string, orderBy?: string, order: Order = Order.NEXT): AsyncGenerator<T> {
     if (!this.databaseConnection) {
       throw new Error('Database is not opened yet');
     }

src/scripts/tools/color-palettes-manager.tools.ts → src/scripts/database/managers/color-palettes.manager.ts

@@ -1,8 +1,8 @@
-import { customColorPaletteKeyId, defaultColorPaletteId } from '../constants/chip8.constants';
-import { colorPalettes } from '../constants/color-palettes.constants';
-import { database, emulatorConfigurationsKeys } from '../constants/emulator.constants';
-import { ColorPalettes, CustomColorPalette } from '../types/emulator';
-import { DatabaseTool } from './database.tools';
+import { customColorPaletteKeyId, defaultColorPaletteId } from '../../constants/chip8.constants';
+import { colorPalettes } from '../../constants/color-palettes.constants';
+import { database, emulatorConfigurationsKeys } from '../../constants/emulator.constants';
+import { ColorPalettes, CustomColorPalette } from '../../types/emulator';
+import { DatabaseTool } from '../database';
 
 class ColorPalettesManager {
   private colorPalettesStored: ColorPalettes = {};
@@ -11,7 +11,7 @@ class ColorPalettesManager {
 
   private currentPaletteId: string = '';
 
-  private customPaletteDBTool: DatabaseTool;
+  private databaseTool: DatabaseTool;
 
   private customColorPaletteStorageName = database.storage_name.custom_color_palettes;
 
@@ -20,14 +20,14 @@ class ColorPalettesManager {
   constructor() {
     this.currentPaletteId = defaultColorPaletteId;
 
-    this.customPaletteDBTool = new DatabaseTool(
+    this.databaseTool = new DatabaseTool(
       database.name,
       database.current_version,
     );
   }
 
   public async initializeManager(): Promise<void> {
-    await this.customPaletteDBTool.openDatabase();
+    await this.databaseTool.openDatabase();
 
     this.loadDefaultPalettes();
     await this.loadCustomPalettes();
@@ -44,7 +44,7 @@ class ColorPalettesManager {
   }
 
   private async loadCustomPalettes(): Promise<void> {
-    const customPaletteGenerator = this.customPaletteDBTool.getAllElementsFromDatabase(
+    const customPaletteGenerator = this.databaseTool.getAllElementsFromDatabase(
       this.customColorPaletteStorageName
     );
 
@@ -64,7 +64,7 @@ class ColorPalettesManager {
     const indexedSettingsKey = this.getCustomPaletteKeys();
 
     for (const [ index, key ] of indexedSettingsKey) {
-      const storedColor = await this.customPaletteDBTool.getObjectFromDatabase(
+      const storedColor = await this.databaseTool.getObjectFromDatabase(
         this.settingsStorageName,
         key
       );
@@ -98,7 +98,7 @@ class ColorPalettesManager {
     for (const [ index, key ] of indexedSettingsKey) {
       const colorValue = { value: this.currentSelectedPalette[index] };
 
-      await this.customPaletteDBTool.putObjectInDatabase(
+      await this.databaseTool.putObjectInDatabase(
         this.settingsStorageName,
         key,
         colorValue,
@@ -110,7 +110,7 @@ class ColorPalettesManager {
     this.currentSelectedPalette[index] = color;
     const colorValue = { value: color };
 
-    await this.customPaletteDBTool.putObjectInDatabase(
+    await this.databaseTool.putObjectInDatabase(
       this.settingsStorageName,
       emulatorConfigurationsKeys.palette_keys[index],
       colorValue,
@@ -142,7 +142,7 @@ class ColorPalettesManager {
   public async addNewColorPalette(paletteInfo: CustomColorPalette): Promise<void> {
     this.colorPalettesStored[paletteInfo.id] = paletteInfo.colors;
 
-    await this.customPaletteDBTool.putObjectInDatabase(
+    await this.databaseTool.putObjectInDatabase(
       this.customColorPaletteStorageName,
       paletteInfo.id,
       paletteInfo
@@ -152,23 +152,23 @@ class ColorPalettesManager {
   public async removeColorPalette(paletteId: string): Promise<void> {
     delete this.colorPalettesStored[paletteId];
 
-    return this.customPaletteDBTool.removeElementFromDatabase(
+    return this.databaseTool.removeElementFromDatabase(
       this.customColorPaletteStorageName,
       paletteId
     );
   }
 
   public async renameCurrentSelectedPalette(newName: string): Promise<void> {
-    const currentPaletteName = await this.getCurrentPaletteId();
-    const paletteInfo = await this.customPaletteDBTool.getObjectFromDatabase(
+    const currentPaletteName = this.getCurrentPaletteId();
+    const paletteInfo = await this.databaseTool.getObjectFromDatabase(
       this.customColorPaletteStorageName,
       currentPaletteName
     );
 
     if (paletteInfo) {
       paletteInfo.name = newName;
 
-      await this.customPaletteDBTool.putObjectInDatabase(
+      await this.databaseTool.putObjectInDatabase(
         this.customColorPaletteStorageName,
         paletteInfo.id,
         paletteInfo
@@ -179,14 +179,14 @@ class ColorPalettesManager {
   public async getCurrentPaletteInfoFromStorage(): Promise<CustomColorPalette | null> {
     const paletteId = this.getCurrentPaletteId();
 
-    return this.customPaletteDBTool.getObjectFromDatabase(
+    return this.databaseTool.getObjectFromDatabase(
       this.customColorPaletteStorageName,
       paletteId
     );
   }
 
   public async getCurrentPaletteNameFromId(): Promise<string> {
-    const paletteInfo =  await this.customPaletteDBTool.getObjectFromDatabase(
+    const paletteInfo =  await this.databaseTool.getObjectFromDatabase(
       this.customColorPaletteStorageName,
       this.currentPaletteId
     );
@@ -195,7 +195,7 @@ class ColorPalettesManager {
   }
 
   public getAllCustomPalettesStored(orderBy: string = 'created_at') {
-    return this.customPaletteDBTool.getAllElementsFromDatabase(
+    return this.databaseTool.getAllElementsFromDatabase(
       this.customColorPaletteStorageName,
       orderBy,
     );

src/scripts/database/managers/settings.manager.ts

@@ -0,0 +1,47 @@
+import { database } from '../../constants/emulator.constants';
+import { EmulatorSettings } from '../../constants/settings.constants';
+import { SettingsObject } from '../../types/settings';
+import { DatabaseTool } from '../database';
+
+class SettingsManager {
+  private databaseTool: DatabaseTool<SettingsObject<unknown>>;
+
+  private settingsStorageName = database.storage_name.settings;
+
+  constructor() {
+    this.databaseTool = new DatabaseTool<SettingsObject<unknown>>(
+      database.name,
+      database.current_version,
+    );
+  }
+
+  public async initializeManager(): Promise<void> {
+    await this.databaseTool.openDatabase();
+  }
+
+  public async setSetting<T = string>(settingName: EmulatorSettings, value: T): Promise<void> {
+    const indexedDBValue: SettingsObject<T> = {
+      id: settingName,
+      value,
+    };
+
+    await this.databaseTool.putObjectInDatabase(
+      this.settingsStorageName,
+      settingName,
+      indexedDBValue,
+    );
+  }
+
+  public async getSetting<T = string>(settingName: EmulatorSettings): Promise<T | undefined> {
+    const result = await this.databaseTool.getObjectFromDatabase(
+      this.settingsStorageName,
+      settingName,
+    );
+
+    if (!result) return undefined;
+
+    return result.value as T;
+  }
+}
+
+export default new SettingsManager();

src/scripts/emulator/interfaces/display.ts

@@ -1,5 +1,5 @@
 import { loresDisplayScale, screenDimensions } from '../../constants/chip8.constants';
-import ColorPalettesManager from '../../tools/color-palettes-manager.tools';
+import ColorPalettesManager from '../../database/managers/color-palettes.manager';
 
 export class DisplayInterface {
   private canvas: HTMLCanvasElement;

src/scripts/main.ts

@@ -1,13 +1,14 @@
 import '../styles/style.css';
 
+import ColorPalettesManager from './database/managers/color-palettes.manager';
+import SettingsManager from './database/managers/settings.manager';
 import { Chip8Emulator } from './emulator/emulator';
-import { initializeColorPaletteSettingsModule } from './settings/color-palettes';
-import { initializeEmulatorControllerModule } from './settings/emulator-controls';
-import { initializeFontSettingsModule } from './settings/fonts';
-import { initializeGeneralSettingsModule } from './settings/general';
-import { initializeROMCompatibilitySettingsModule } from './settings/rom-compatibility';
-import { initializeSoundSettingsModule } from './settings/sound';
-import ColorPalettesManagerTools from './tools/color-palettes-manager.tools';
+import { initializeEmulatorControllerModule } from './ui/controls/emulator';
+import { initializeColorPaletteSettingsModule } from './ui/settings/color-palettes';
+import { initializeFontSettingsModule } from './ui/settings/fonts';
+import { initializeGeneralSettingsModule } from './ui/settings/general';
+import { initializeROMCompatibilitySettingsModule } from './ui/settings/rom-compatibility';
+import { initializeSoundSettingsModule } from './ui/settings/sound';
 
 const canvas = document.getElementById('canvas') as HTMLCanvasElement;
 
@@ -43,7 +44,8 @@ function setSidebarButtonEventHandlers() {
 }
 
 async function initializeManagers() {
-  await ColorPalettesManagerTools.initializeManager();
+  await ColorPalettesManager.initializeManager();
+  await SettingsManager.initializeManager();
 }
 
 document.addEventListener('DOMContentLoaded', async () => {
@@ -54,7 +56,6 @@ document.addEventListener('DOMContentLoaded', async () => {
   initializeColorPaletteSettingsModule(emulatorInstance);
   initializeGeneralSettingsModule(emulatorInstance);
   initializeSoundSettingsModule(emulatorInstance);
-  initializeGeneralSettingsModule(emulatorInstance);
   initializeROMCompatibilitySettingsModule(emulatorInstance);
   initializeFontSettingsModule(emulatorInstance);
   initializeEmulatorControllerModule(emulatorInstance);