pokerogue/src/ui/ui-theme.ts

import { UiTheme } from "#app/enums/ui-theme";
import { legacyCompatibleImages } from "#app/scene-base";
import BattleScene from "../battle-scene";

export enum WindowVariant {
  NORMAL,
  THIN,
  XTHIN
}

export function getWindowVariantSuffix(windowVariant: WindowVariant): string {
  switch (windowVariant) {
    case WindowVariant.THIN:
      return '_thin';
    case WindowVariant.XTHIN:
      return '_xthin';
    default:
      return '';
  }
}

const windowTypeControlColors = {
  [UiTheme.DEFAULT]: {
    0: [ '#6b5a73', '#DD5748', '#7E4955' ],
    1: [ '#6b5a73', '#48DDAA', '#4D7574' ],
    2: [ '#6b5a73', '#C5C5C5', '#766D7E' ],
    3: [ '#6b5a73', '#EBC07C', '#836C66' ],
    4: [ '#686868', '#E8E8E8', '#919191' ]
  },
  [UiTheme.LEGACY]: {
    0: [ '#706880', '#8888c8', '#484868' ],
    1: [ '#d04028', '#e0a028', '#902008' ],
    2: [ '#48b840', '#88d880', '#089040' ],
    3: [ '#2068d0', '#80b0e0', '#104888' ],
    4: [ '#706880', '#8888c8', '#484868' ]
  }
};

export function addWindow(scene: BattleScene, x: number, y: number, width: number, height: number, mergeMaskTop?: boolean, mergeMaskLeft?: boolean, maskOffsetX?: number, maskOffsetY?: number, windowVariant?: WindowVariant): Phaser.GameObjects.NineSlice {
  if (windowVariant === undefined)
    windowVariant = WindowVariant.NORMAL;

  const borderSize = scene.uiTheme ? 6 : 8;
    
  const window = scene.add.nineslice(x, y, `window_${scene.windowType}${getWindowVariantSuffix(windowVariant)}`, null, width, height, borderSize, borderSize, borderSize, borderSize);
  window.setOrigin(0, 0);

  if (mergeMaskTop || mergeMaskLeft) {
    const maskRect = scene.make.graphics({});
    maskRect.setScale(6);
    maskRect.fillStyle(0xFFFFFF);
    maskRect.beginPath();
    maskRect.fillRect(window.x + (mergeMaskLeft ? 2 : 0) + (maskOffsetX || 0), window.y + (mergeMaskTop ? 2 : 0) + (maskOffsetY || 0), window.width - (mergeMaskLeft ? 2 : 0), window.height - (mergeMaskTop ? 2 : 0));
    window.setMask(maskRect.createGeometryMask());
  }

  return window;
}

export function updateWindowType(scene: BattleScene, windowTypeIndex: integer): void {
  const windowObjects: [Phaser.GameObjects.NineSlice, WindowVariant][] = [];
  const themedObjects: (Phaser.GameObjects.Image | Phaser.GameObjects.NineSlice)[] = [];
  const traverse = (object: any) => {
    if (object.hasOwnProperty('children') && object.children instanceof Phaser.GameObjects.DisplayList) {
      const children = object.children as Phaser.GameObjects.DisplayList;
      for (let child of children.getAll())
        traverse(child);
    } else if (object instanceof Phaser.GameObjects.Container) {
      for (let child of object.getAll())
        traverse(child);
    } else if (object instanceof Phaser.GameObjects.NineSlice) {
      if (object.texture.key.startsWith('window_'))
        windowObjects.push([ object, object.texture.key.endsWith(getWindowVariantSuffix(WindowVariant.XTHIN)) ? WindowVariant.XTHIN : object.texture.key.endsWith(getWindowVariantSuffix(WindowVariant.THIN)) ? WindowVariant.THIN : WindowVariant.NORMAL ]);
      else if (object.texture?.key === 'namebox')
        themedObjects.push(object);
    } else if (object instanceof Phaser.GameObjects.Sprite) {
      if (object.texture?.key === 'bg')
        themedObjects.push(object);
    }
  }

  traverse(scene);

  scene.windowType = windowTypeIndex;

  const rootStyle = document.documentElement.style;
  [ 'base', 'light', 'dark' ].map((k, i) => rootStyle.setProperty(`--color-${k}`, windowTypeControlColors[scene.uiTheme][windowTypeIndex - 1][i]));

  const windowKey = `window_${windowTypeIndex}`;

  for (let [ window, variant ] of windowObjects)
    window.setTexture(`${windowKey}${getWindowVariantSuffix(variant)}`);

  for (let obj of themedObjects)
    obj.setFrame(windowTypeIndex);
}

export function addUiThemeOverrides(scene: BattleScene): void {
  const originalAddImage = scene.add.image;
  scene.add.image = function (x: number, y: number, texture: string | Phaser.Textures.Texture, frame?: string | number): Phaser.GameObjects.Image {
    let legacy = false;
    if (typeof texture === 'string' && scene.uiTheme && legacyCompatibleImages.includes(texture)) {
      legacy = true;
      texture += '_legacy';
    }
    const ret: Phaser.GameObjects.Image = originalAddImage.apply(this, [ x, y, texture, frame ]);
    if (legacy) {
      const originalSetTexture = ret.setTexture;
      ret.setTexture = function (key: string, frame?: string | number) {
        key += '_legacy';
        return originalSetTexture.apply(this, [ key, frame ]);
      };
    }
    return ret;
  };

  const originalAddSprite = scene.add.sprite;
  scene.add.sprite = function (x: number, y: number, texture: string | Phaser.Textures.Texture, frame?: string | number): Phaser.GameObjects.Sprite {
    let legacy = false;
    if (typeof texture === 'string' && scene.uiTheme && legacyCompatibleImages.includes(texture)) {
      legacy = true;
      texture += '_legacy';
    }
    const ret: Phaser.GameObjects.Sprite = originalAddSprite.apply(this, [ x, y, texture, frame ]);
    if (legacy) {
      const originalSetTexture = ret.setTexture;
      ret.setTexture = function (key: string, frame?: string | number) {
        key += '_legacy';
        return originalSetTexture.apply(this, [ key, frame ]);
      };
    }
    return ret;
  };

  const originalAddNineslice = scene.add.nineslice;
  scene.add.nineslice = function (x: number, y: number, texture: string | Phaser.Textures.Texture, frame?: string | number, width?: number, height?: number, leftWidth?: number, rightWidth?: number, topHeight?: number, bottomHeight?: number): Phaser.GameObjects.NineSlice {
    let legacy = false;
    if (typeof texture === 'string' && scene.uiTheme && legacyCompatibleImages.includes(texture)) {
      legacy = true;
      texture += '_legacy';
    }
    const ret: Phaser.GameObjects.NineSlice = originalAddNineslice.apply(this, [ x, y, texture, frame, width, height, leftWidth, rightWidth, topHeight, bottomHeight ]);
    if (legacy) {
      const originalSetTexture = ret.setTexture;
      ret.setTexture = function (key: string | Phaser.Textures.Texture, frame?: string | number, updateSize?: boolean, updateOrigin?: boolean) {
        key += '_legacy';
        return originalSetTexture.apply(this, [ key, frame, updateSize, updateOrigin ]);
      };
    }
    return ret;
  };
}