UIManager for game tutorials

Author: xense

src/components/UIButton.js

@@ -1,4 +1,5 @@
 import UIComponentPrototype from "./UIComponentPrototype";
+import UIManager from "../manager/UIManager";
 
 const HIT_ZONE = "HIT_ZONE";
 
@@ -200,7 +201,9 @@ export default class UIButton extends UIComponentPrototype {
 		this._isPressed = false;
 		this.doState();
 		if (isClicked) {
-			this._onClick();
+			if (UIManager.check(this.lockId)) {
+				this._onClick();
+			}
 		}
 	}
 

src/components/UIButtonDraggable.js

@@ -1,4 +1,5 @@
 import UIButton from "./UIButton";
+import UIManager from "../manager/UIManager";
 
 const _EVENT_DRAG = "event_drag";
 
@@ -117,6 +118,9 @@ export default class UIButtonDraggable extends UIButton {
 	 * @protected
 	 */
 	_onDrag(pointer, gameObject, dragX, dragY) {
+		if (!UIManager.check(this.lockId)){
+			return;
+		}
 		if (!this._dragZone	|| this._dragZone !== gameObject || this.clip) {
 			return;
 		}

src/components/UIComponentPrototype.js

@@ -1,4 +1,5 @@
 import Phaser from "phaser";
+import UIManager from "../manager/UIManager";
 
 const _EVENT_STATE = "event_state";
 
@@ -16,6 +17,7 @@ const _EVENT_STATE = "event_state";
  * at current state or at all, nothing bad happens.*
  * @inheritDoc
  * @extends Phaser.Events.EventEmitter
+ * @property {String} lockId Used by UIManager, see {@link PhaserComps.UIManager}
  * @param {PhaserComps.UIComponents.UIComponentPrototype} [parent] UIComponentPrototype instance to find clip inside
  * @param {String} [key] key to find clip inside parent
  */
@@ -26,6 +28,11 @@ export default class UIComponentPrototype extends Phaser.Events.EventEmitter {
 	constructor(parent, key) {
 		super();
 
+		/**
+		 * @type {String}
+		 */
+		this.lockId = null;
+
 		/**
 		 *
 		 * @type {UIComponentPrototype}

src/components/UIScrollBar.js

@@ -1,6 +1,7 @@
 import UIComponentPrototype from "./UIComponentPrototype";
 import UIButton from "./UIButton";
 import UIButtonDraggable from "./UIButtonDraggable";
+import UIManager from "../manager/UIManager";
 
 const _EVENT_CHANGE = "event_change";
 
@@ -198,6 +199,9 @@ export default class UIScrollBar extends UIComponentPrototype {
 	 * @protected
 	 */
 	onPrevClick() {
+		if (!UIManager.check(this.lockId)) {
+			return;
+		}
 		this.value -= this._buttonStep;
 	}
 
@@ -206,6 +210,9 @@ export default class UIScrollBar extends UIComponentPrototype {
 	 * @protected
 	 */
 	onNextClick() {
+		if (!UIManager.check(this.lockId)) {
+			return;
+		}
 		this.value += this._buttonStep;
 	}
 
@@ -256,6 +263,9 @@ export default class UIScrollBar extends UIComponentPrototype {
 		if (this._trackLength === 0) {
 			return;
 		}
+		if (!UIManager.check(this.lockId)) {
+			return;
+		}
 		let barPosition = this._vertical ? positionY : positionX;
 		let newValue = (barPosition - this._trackStart) / this._trackLength;
 		let v = newValue * (this._maxValue - this._minValue);

src/manager/UIManager.js

@@ -0,0 +1,55 @@
+let isLock = false;
+const enabledIds = [];
+
+/**
+ * @namespace PhaserComps.UIManager
+ * @memberOf PhaserComps
+ * @classdesc Allows to lock all ui, except for provided lock ids.
+ * For this, you must set `lockId` property to UIComponentPrototype instances you want to enable,
+ * and then switch theirs availability by UIManager's
+ * {@link lock} and {@link unlock} methods
+ *
+ * For example, locked UIButton will still interact to mouse events, but will not emit click event.
+ *
+ * This can be useful in game tutorials.
+ */
+export default class UIManager {
+
+	/**
+	 * @memberOf PhaserComps.UIManager
+	 * @description Makes only components with provided ids list (or one id string) to emit UI events
+	 *
+	 * *Note, that method rewrites current enabled ids list every call.*
+	 * @param {String | Array<String>} id component's lock id, or Array of lock ids to be only enabled
+	 */
+	static lock(id) {
+		this.unlock();
+		if (typeof id === "string") {
+			enabledIds.push(id);
+		} else {
+			id.forEach(value => enabledIds.push(value));
+		}
+		isLock = true;
+	}
+
+	/**
+	 * @memberOf PhaserComps.UIManager
+	 * @description Releases all components
+	 */
+	static unlock() {
+		enabledIds.length = 0;
+		isLock = false;
+	}
+
+	/**
+	 * @memberOf PhaserComps.UIManager
+	 * @description called from component to check, if it's allowed to emit UI event.
+	 * @param {String} id
+	 */
+	static check(id) {
+		if (!isLock) {
+			return true;
+		}
+		return enabledIds.indexOf(id) !== -1;
+	}
+}

src/phasercomps.js

@@ -5,11 +5,13 @@
 import ComponentClip from "./clip/ComponentClip";
 import UIComponents from "./components/UIComponents";
 import Plugin from "./plugin/Plugin";
+import UIManager from "./manager/UIManager";
 
 var PhaserComps = {
 	ComponentClip: ComponentClip,
 	UIComponents: UIComponents,
-	Plugin: Plugin
+	Plugin: Plugin,
+	UIManager: UIManager
 };
 
 module.exports = PhaserComps;