GH-28 Basic formation calculate onMouseDrag

- Basic functionality whereby onMouseDrag, the formations are calculated

packages/phaser3-drag-select/src/js/lib/mouse-camera-drag.js

@@ -1,5 +1,7 @@
-import PluginConfig, { MOUSE_BUTTONS } from './plugin-config';
 import Phaser from 'phaser';
+import { MOUSE_BUTTONS } from '@pixelburp/phaser3-utils';
+
+import PluginConfig from './plugin-config';
 
 const EMPTY_VALUES = [undefined, null];
 

packages/phaser3-drag-select/src/js/lib/mouse-interface.js

@@ -1,6 +1,8 @@
-import PluginConfig, { MOUSE_BUTTONS } from './plugin-config';
-import MouseCameraDrag from './mouse-camera-drag';
 import Phaser from 'phaser';
+import { MOUSE_BUTTONS } from '@pixelburp/phaser3-utils';
+
+import PluginConfig from './plugin-config';
+import MouseCameraDrag from './mouse-camera-drag';
 
 const PREVENT_DEFAULT = e => e.preventDefault();
 

packages/phaser3-drag-select/src/js/lib/plugin-config.js

@@ -1,21 +1,6 @@
-const NOOP = () => {};
-
-// 0: No button or un-initialized
-// 1: Left button
-// 2: Right button
-// 4: Wheel button or middle button
-// 8: 4th button (typically the "Browser Back" button)
-// 16: 5th button (typically the "Browser Forward" button)
-export const MOUSE_BUTTONS = {
-  NO_BUTTON: 0,
-  LEFT: 1,
-  RIGHT: 2,
-  MIDDLE: 4,
-  FOURTH_BUTTON: 8,
-  FIFTH_BUTTON: 16,
-};
+import { MOUSE_BUTTONS } from '@pixelburp/phaser3-utils';
 
-const MOUSE_BUTTONS_VALUES = Object.values(MOUSE_BUTTONS);
+const NOOP = () => {};
 
 export const IS_INTERACTIVE_CHILD = child => child.input?.enabled;
 

packages/phaser3-formation-generator/src/demo/scene/demo-scene.js

@@ -1,12 +1,13 @@
 import Phaser, { Scene } from 'phaser';
-import { forEach } from '@pixelburp/phaser3-utils';
+import { forEach, MOUSE_BUTTONS } from '@pixelburp/phaser3-utils';
 
 import FormationGeneratorPlugin from 'src/js/formation-generator-plugin';
 
 const { KeyCodes } = Phaser.Input.Keyboard;
 
 export default class DemoScene extends Scene {
   fpsText;
+  mySprites;
 
   constructor() {
     super({ key: 'DemoScene', active: true });
@@ -31,18 +32,71 @@ export default class DemoScene extends Scene {
     this.myControls = new Phaser.Cameras.Controls.SmoothedKeyControl(controlConfig);
   }
 
+  createInputEvents() {
+    const { formationMovement, mySprites } = this;
+
+    this.input.on('pointerdown', () => {
+      console.log('mySprites', mySprites);
+      formationMovement.calculate(mySprites, {
+        maxCols: 15,
+        minCols: 3
+      });
+    });
+  }
+
+  createSprites() {
+    let sprite, setAsInteractive, y, spriteKey, worldX, worldY;
+    this.mySprites = [];
+    let x = 1;
+    const length = 5;
+    const OFFSET = 200;
+
+    for (x; x <= length; x += 1) {
+      y = 1;
+      for (y; y <= length; y += 1) {
+        // Every even numbered item will be set as "interactive"
+        setAsInteractive = x % 2 === 0;
+        spriteKey = setAsInteractive ? 'enabled-sprite' : 'disabled-sprite';
+        worldX = x * 100 + OFFSET;
+        worldY = y * 100 + OFFSET;
+        sprite = new Phaser.GameObjects.Sprite(this, worldX, worldY, spriteKey);
+        sprite.isSelected = setAsInteractive; // @TODO temp setting as "selected"
+
+        if (setAsInteractive) {
+          sprite.setInteractive();
+        }
+
+        this.add.existing(sprite);
+        this.mySprites.push(sprite);
+      }
+    }
+  }
+
   preload() {
+    this.load.image('disabled-sprite', 'src/assets/disabled-sprite-50x50.png');
+    this.load.image('enabled-sprite', 'src/assets/enabled-sprite-50x50.png');
   }
 
   create() {
+    const { cameras } = this;
+    const mainCamera = cameras.main;
+
     console.log('DemoScene scene', this);
     this.formationMovement = this.plugins.start('FormationGeneratorPlugin', 'formationMovement');
+    this.formationMovement.setup({
+      camera: mainCamera,
+      gridSize: 64,
+      scene: this,
+      mouseClickToTrack: MOUSE_BUTTONS.RIGHT,
+    });
 
     this.fpsText = this.add.text(10, 10, '');
     this.fpsText.setScrollFactor(0);
 
 
     this.createCamera();
+    this.createSprites();
+    this.createInputEvents();
   }
 
   update(time, delta) {

packages/phaser3-formation-generator/src/js/formation-generator-plugin.js

@@ -1,4 +1,8 @@
 import Phaser from 'phaser';
+import { createInterfaceScene } from '@pixelburp/phaser3-utils';
+
+import PluginConfig from './lib/plugin-config';
+import MouseInterface from './lib/mouse-interface';
 
 /**
  * @class FormationGeneratorPlugin
@@ -7,20 +11,20 @@ import Phaser from 'phaser';
  */
 export default class FormationGeneratorPlugin extends Phaser.Plugins.BasePlugin {
 
+  interfaceScene;
+  mouseInterface;
+
   /**
    * @method setup
    */
-  setup(scene, config = {}) {
+  setup(config = {}) {
+    this.setConfig(config);
+    console.log('config', PluginConfig);
+    this.createInterfaceScene();
   }
 
-  stop() {
-    super.stop();
-    console.warn('Plugin stopped');
-  }
-
-  start() {
-    super.start();
-    console.warn('Plugin started');
+  get scenePlugin() {
+    return PluginConfig.get('scene')?.scene;
   }
 
   /**
@@ -36,4 +40,39 @@ export default class FormationGeneratorPlugin extends Phaser.Plugins.BasePlugin
    */
   enable() {
   }
+
+  /**
+   * @method setConfig
+   * @description Updates the plugin's configuration with new values
+   * @param {Object} config - new configuration object
+   */
+  setConfig(config = {}) {
+    PluginConfig.setConfig(config);
+  }
+
+  createInterfaceScene() {
+    const scenePlugin = this.scenePlugin;
+    this.interfaceScene = createInterfaceScene(scenePlugin, this);
+    this.interfaceScene.enable();
+
+    if (this.mouseInterface) {
+      this.mouseInterface.destroy();
+    }
+    this.mouseInterface = new MouseInterface(this.interfaceScene, this);
+  }
+
+  calculate(sprites = [], config) {
+    console.log('formationMovement', sprites);
+    this.mouseInterface?.calculate(sprites, config);
+  }
+
+  stop() {
+    super.stop();
+    console.warn('Plugin stopped');
+  }
+
+  start() {
+    super.start();
+    console.warn('Plugin started');
+  }
 }