pokerogue/src/ui/ui-theme.ts

import { UiTheme } from "#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 (const child of children.getAll()) {
        traverse(child);
      }
    } else if (object instanceof Phaser.GameObjects.Container) {
      for (const 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 (const [ window, variant ] of windowObjects) {
    window.setTexture(`${windowKey}${getWindowVariantSuffix(variant)}`);
  }

  for (const 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;
  };
}