Add tutorial framework (WiP)

src/ui/settings-ui-handler.ts

@@ -9,10 +9,13 @@ export default class SettingsUiHandler extends UiHandler {
   private settingsContainer: Phaser.GameObjects.Container;
   private optionsContainer: Phaser.GameObjects.Container;
 
+  private scrollCursor: integer;
+
   private optionsBg: Phaser.GameObjects.NineSlice;
 
   private optionCursors: integer[];
 
+  private settingLabels: Phaser.GameObjects.Text[];
   private optionValueLabels: Phaser.GameObjects.Text[][];
 
   private cursorObj: Phaser.GameObjects.NineSlice;
@@ -40,14 +43,14 @@ export default class SettingsUiHandler extends UiHandler {
 
     this.optionsContainer = this.scene.add.container(0, 0);
 
-    const settingLabels = [];
+    this.settingLabels = [];
     this.optionValueLabels = [];
 
     Object.keys(Setting).forEach((setting, s) => {
-      settingLabels[s] = addTextObject(this.scene, 8, 28 + s * 16, setting.replace(/\_/g, ' '), TextStyle.SETTINGS_LABEL);
-      settingLabels[s].setOrigin(0, 0);
+      this.settingLabels[s] = addTextObject(this.scene, 8, 28 + s * 16, setting.replace(/\_/g, ' '), TextStyle.SETTINGS_LABEL);
+      this.settingLabels[s].setOrigin(0, 0);
 
-      this.optionsContainer.add(settingLabels[s]);
+      this.optionsContainer.add(this.settingLabels[s]);
 
       this.optionValueLabels.push(settingOptions[Setting[setting]].map((option, o) => {
         const valueLabel = addTextObject(this.scene, 0, 0, option, settingDefaults[Setting[setting]] === o ? TextStyle.SETTINGS_SELECTED : TextStyle.WINDOW);
@@ -60,7 +63,7 @@ export default class SettingsUiHandler extends UiHandler {
 
       const totalWidth = this.optionValueLabels[s].map(o => o.width).reduce((total, width) => total += width, 0);
 
-      const labelWidth =  Math.max(78, settingLabels[s].displayWidth + 8);
+      const labelWidth =  Math.max(78, this.settingLabels[s].displayWidth + 8);
 
       const totalSpace = (300 - labelWidth) - totalWidth / 6;
       const optionSpacing = Math.floor(totalSpace / (this.optionValueLabels[s].length - 1));
@@ -68,7 +71,7 @@ export default class SettingsUiHandler extends UiHandler {
       let xOffset = 0;
 
       for (let value of this.optionValueLabels[s]) {
-        value.setPositionRelative(settingLabels[s], labelWidth + xOffset, 0);
+        value.setPositionRelative(this.settingLabels[s], labelWidth + xOffset, 0);
         xOffset += value.width / 6 + optionSpacing;
       }
     });
@@ -83,6 +86,7 @@ export default class SettingsUiHandler extends UiHandler {
     ui.add(this.settingsContainer);
 
     this.setCursor(0);
+    this.setScrollCursor(0);
 
     this.settingsContainer.setVisible(false);
   }
@@ -113,22 +117,31 @@ export default class SettingsUiHandler extends UiHandler {
       success = true;
       this.scene.ui.revertMode();
     } else {
+      const cursor = this.cursor + this.scrollCursor;
       switch (button) {
         case Button.UP:
-          if (this.cursor)
-            success = this.setCursor(this.cursor - 1);
+          if (cursor) {
+            if (this.cursor)
+              success = this.setCursor(this.cursor - 1);
+            else
+              success = this.setScrollCursor(this.scrollCursor - 1);
+          }
           break;
         case Button.DOWN:
-          if (this.cursor < this.optionValueLabels.length - 1)
-            success = this.setCursor(this.cursor + 1);
+          if (cursor < this.optionValueLabels.length) {
+            if (this.cursor < 8)
+              success = this.setCursor(this.cursor + 1);
+            else if (this.scrollCursor < this.optionValueLabels.length - 9)
+              success = this.setScrollCursor(this.scrollCursor + 1);
+          }
           break;
         case Button.LEFT:
-          if (this.optionCursors[this.cursor])
-            success = this.setOptionCursor(this.cursor, this.optionCursors[this.cursor] - 1, true);
+          if (this.optionCursors[cursor])
+            success = this.setOptionCursor(cursor, this.optionCursors[cursor] - 1, true);
           break;
         case Button.RIGHT:
-          if (this.optionCursors[this.cursor] < this.optionValueLabels[this.cursor].length - 1)
-            success = this.setOptionCursor(this.cursor, this.optionCursors[this.cursor] + 1, true);
+          if (this.optionCursors[cursor] < this.optionValueLabels[cursor].length - 1)
+            success = this.setOptionCursor(cursor, this.optionCursors[cursor] + 1, true);
           break;
       }
     }
@@ -148,7 +161,7 @@ export default class SettingsUiHandler extends UiHandler {
       this.optionsContainer.add(this.cursorObj);
     }
 
-    this.cursorObj.setPositionRelative(this.optionsBg, 4, 4 + this.cursor * 16);
+    this.cursorObj.setPositionRelative(this.optionsBg, 4, 4 + (this.cursor + this.scrollCursor) * 16);
 
     return ret;
   }
@@ -179,6 +192,30 @@ export default class SettingsUiHandler extends UiHandler {
     return true;
   }
 
+  setScrollCursor(scrollCursor: integer): boolean {
+    if (scrollCursor === this.scrollCursor)
+      return false;
+
+    this.scrollCursor = scrollCursor;
+
+    this.updateSettingsScroll();
+
+    this.setCursor(this.cursor);
+
+    return true;
+  }
+
+  updateSettingsScroll(): void {
+    this.optionsContainer.setY(-16 * this.scrollCursor);
+
+    for (let s = 0; s < this.settingLabels.length; s++) {
+      const visible = s >= this.scrollCursor && s < this.scrollCursor + 9;
+      this.settingLabels[s].setVisible(visible);
+      for (let option of this.optionValueLabels[s])
+        option.setVisible(visible);
+    }
+  }
+
   clear() {
     super.clear();
     this.settingsContainer.setVisible(false);

src/ui/starter-select-ui-handler.ts

@@ -17,6 +17,7 @@ import { addWindow } from "./window";
 import { Nature, getNatureName } from "../data/nature";
 import BBCodeText from "phaser3-rex-plugins/plugins/bbcodetext";
 import { pokemonFormChanges } from "../data/pokemon-forms";
+import { Tutorial, handleTutorial } from "../tutorial";
 
 export type StarterSelectCallback = (starters: Starter[]) => void;
 
@@ -365,6 +366,8 @@ export default class StarterSelectUiHandler extends MessageUiHandler {
       this.setGenMode(true);
       this.setCursor(0);
 
+      //handleTutorial(this.scene, Tutorial.Starter_Select);
+
       return true;
     }
 

src/ui/ui.ts

@@ -178,28 +178,38 @@ export default class UI extends Phaser.GameObjects.Container {
   }
 
   showText(text: string, delay?: integer, callback?: Function, callbackDelay?: integer, prompt?: boolean, promptDelay?: integer): void {
-    const handler = this.getHandler();
-    if (handler instanceof MessageUiHandler)
-      (handler as MessageUiHandler).showText(text, delay, callback, callbackDelay, prompt, promptDelay);
-    else
-      this.getMessageHandler().showText(text, delay, callback, callbackDelay, prompt, promptDelay);
-  }
-
-  showDialogue(text: string, name: string, delay: integer = 0, callback: Function, callbackDelay?: integer, prompt?: boolean, promptDelay?: integer): void {
-    if (text.indexOf('$') > -1) {
+    if (prompt && text.indexOf('$') > -1) {
       const messagePages = text.split(/\$/g).map(m => m.trim());
       let showMessageAndCallback = () => callback();
       for (let p = messagePages.length - 1; p >= 0; p--) {
         const originalFunc = showMessageAndCallback;
-        showMessageAndCallback = () => this.showDialogue(messagePages[p], name, null, originalFunc, null, true);
+        showMessageAndCallback = () => this.showText(messagePages[p], null, originalFunc, null, true);
       }
       showMessageAndCallback();
     } else {
       const handler = this.getHandler();
       if (handler instanceof MessageUiHandler)
-        (handler as MessageUiHandler).showDialogue(text, name, delay, callback, callbackDelay, prompt, promptDelay);
+        (handler as MessageUiHandler).showText(text, delay, callback, callbackDelay, prompt, promptDelay);
       else
-        this.getMessageHandler().showDialogue(text, name, delay, callback, callbackDelay, prompt, promptDelay);
+        this.getMessageHandler().showText(text, delay, callback, callbackDelay, prompt, promptDelay);
+    }
+  }
+
+  showDialogue(text: string, name: string, delay: integer = 0, callback: Function, callbackDelay?: integer, promptDelay?: integer): void {
+    if (text.indexOf('$') > -1) {
+      const messagePages = text.split(/\$/g).map(m => m.trim());
+      let showMessageAndCallback = () => callback();
+      for (let p = messagePages.length - 1; p >= 0; p--) {
+        const originalFunc = showMessageAndCallback;
+        showMessageAndCallback = () => this.showDialogue(messagePages[p], name, null, originalFunc);
+      }
+      showMessageAndCallback();
+    } else {
+      const handler = this.getHandler();
+      if (handler instanceof MessageUiHandler)
+        (handler as MessageUiHandler).showDialogue(text, name, delay, callback, callbackDelay, true, promptDelay);
+      else
+        this.getMessageHandler().showDialogue(text, name, delay, callback, callbackDelay, true, promptDelay);
     }
   }