Add touch controls for mobile support

src/ui/ui.ts

@@ -280,6 +280,9 @@ export default class UI extends Phaser.GameObjects.Container {
           if (chainMode && this.mode && !clear)
             this.modeChain.push(this.mode);
           this.mode = mode;
+          const touchControls = document.getElementById('touchControls');
+          if (touchControls)
+            touchControls.dataset.uiMode = Mode[mode];
           this.getHandler().show(args);
         }
         resolve();

src/ui/window.ts

@@ -1,5 +1,12 @@
 import BattleScene from "../battle-scene";
 
+const windowTypeControlColors = {
+  0: [ '#706880', '#8888c8', '#484868' ],
+  1: [ '#d04028', '#e0a028', '#902008' ],
+  2: [ '#48b840', '#88d880', '#089040' ],
+  3: [ '#2068d0', '#80b0e0', '#104888' ]
+};
+
 export function addWindow(scene: BattleScene, x: number, y: number, width: number, height: number, mergeMaskTop?: boolean, mergeMaskLeft?: boolean, maskOffsetX?: number, maskOffsetY?: number): Phaser.GameObjects.NineSlice {
   const window = scene.add.nineslice(x, y, `window_${scene.windowType}`, null, width, height, 8, 8, 8, 8);
   window.setOrigin(0, 0);
@@ -36,6 +43,9 @@ export function updateWindowType(scene: BattleScene, windowTypeIndex: integer):
 
   scene.windowType = windowTypeIndex;
 
+  const rootStyle = document.documentElement.style;
+  [ 'base', 'light', 'dark' ].map((k, i) => rootStyle.setProperty(`--color-${k}`, windowTypeControlColors[windowTypeIndex - 1][i]));
+
   const windowKey = `window_${windowTypeIndex}`;
 
   for (let window of windowObjects)