mnml/client/src/scenes/missions.js

const Phaser = require('phaser');
const Node = require('./missions.node');
const MissionControls = require('./missions.controls');
const { POSITIONS: { COMBAT } } = require('./constants');

// Mouse click hold to move, Q + E to zoom in and out
// Press 'A' to reset allocated passive nodes

class Missions extends Phaser.Scene {
    constructor() {
        super({ key: 'Missions' });
    }

    preload() {
        this.load.image('eye', 'https://labs.phaser.io/assets/particles/green-orb.png');
    }

    create(zone) {
        if (!zone) return false;
        console.log(zone);

        this.scene.manager.add('MissionControls', MissionControls, true);
        this.graphics = this.add.graphics();
        const nodeData = zone.graph.nodes;
        this.edgeData = zone.graph.edges;
        this.cameras.main.setViewport(COMBAT.width() * 0.2, COMBAT.y(),
            COMBAT.width() * 0.8, COMBAT.height());
        this.addNodes(nodeData);
        this.drawEdges(nodeData);
        this.addCameraControl();
        this.addEvents();
        return this;
    }

    addNodes(nodeData) {
        this.nodes = [];
        nodeData.forEach((n, i) => {
            this.nodes[i] = this.add.existing(
                new Node(this, 500, 850 + i * -100, i, n.success, n.tag)
            ).setInteractive();
        });
    }

    addCameraControl() {
        this.controls = new Phaser.Cameras.Controls.SmoothedKeyControl({
            camera: this.cameras.main,
            zoomIn: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.Q),
            zoomOut: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.E),
            acceleration: 0.005,
            drag: 0.0005,
            maxSpeed: 0.001,
        });
    }

    addEvents() {
        this.input.on('pointerover', (pointer, gameObjects) => {
            if (gameObjects[0] instanceof Node) {
                if (!gameObjects[0].alloc) {
                    gameObjects[0].setTint(0xffffff);
                }
                this.displayNodeText(gameObjects[0], pointer);
            }
        });
        this.input.on('pointerout', (pointer, gameObjects) => {
            if (gameObjects[0] instanceof Node) {
                if (!gameObjects[0].alloc) gameObjects[0].clearTint();
                this.nodeText.destroy();
            }
        });
        this.input.on('pointerup', (pointer, gameObjects) => {
            if (Math.abs(pointer.upX - pointer.downX) < 5
                    && Math.abs(pointer.upY - pointer.downY) < 5) {
                // Check cursor hasn't significantly moved during point allocation
                // If panning and mouse release is on node it won't allocate
                if (gameObjects[0] instanceof Node) {
                    const team = this.registry.get('cryps').filter(c => c.active).map(c => c.id);
                    if (team.length === 0) return false;

                    const zone = this.registry.get('zone');
                    // 'Boss' to be replaced with node id for RPC call
                    if (gameObjects[0].success) return false;
                    this.registry.get('ws').sendZoneJoin(zone.id, gameObjects[0].id, team);

                    this.cleanUp();
                }
            }
            return true;
        });
        this.input.on('pointermove', (pointer) => {
            const zoomFactor = 2 / this.cameras.main.zoom;
            if (this.registry.get('pan')) {
                const points = pointer.getInterpolatedPosition(2);
                this.cameras.main.scrollX -= zoomFactor * (points[1].x - points[0].x);
                this.cameras.main.scrollY -= zoomFactor * (points[1].y - points[0].y);
            }
        }, this);
        this.input.keyboard.on('keydown_G', () => {
            this.scene.sleep();
        }, 0, this);
    }

    drawEdges() {
        this.graphics.clear();
        this.edgeData.forEach((e) => {
            const drawEdge = this.nodes.filter(n => (
                e[0] === n.id || e[1] === n.id
            ));
            if (drawEdge[0].success && drawEdge[1].success) {
                this.graphics.lineStyle(10, 0xfff00f, 0.2);
            } else {
                this.graphics.lineStyle(2, 0xffffff, 0.2);
            }
            const nodeA = this.nodes[drawEdge[0].id];
            const nodeB = this.nodes[drawEdge[1].id];
            this.graphics.lineBetween(nodeA.x, nodeA.y, nodeB.x, nodeB.y);
            return true;
        });
    }

    displayNodeText(node, pointer) {
        if (this.nodeText) this.nodeText.destroy();
        this.nodeText = this.add.text(node.x, node.y, node.text, {
            fontSize: '24px',
            fontFamily: 'Arial',
            color: '#ffffff',
            backgroundColor: '#222222',
        }).setPadding(32);
        this.nodeText.setAlpha(0.8);
        this.nodeText.setOrigin(pointer.x >= COMBAT.width() * 0.6 ? 1 : 0,
            pointer.y >= COMBAT.height() * 0.5 ? 1 : 0);
        this.nodeText.setWordWrapWidth(450);
        this.nodeText.setScale(1 / this.cameras.main.zoom);
    }

    camPan(bool) {
        this.pan = bool;
    }

    update(delta) {
        this.controls.update(delta);
    }

    cleanUp() {
        this.scene.remove();
    }
}

module.exports = Missions;