mnml/client/src/scenes/passives.js

const Phaser = require('phaser');
const PassiveNode = require('./passive.node');
const passiveDataNode = require('./passive.data.node');
const passiveDataEdge = require('./passive.data.edge');

// Passive tree generator - proof of concept visuals need work
// Mouse click hold to move, Q + E to zoom in and out
// Press 'A' to reset allocated passive nodes

class PhaserPassives extends Phaser.Scene {
    constructor() {
        super({ key: 'Passives', active: true });
    }

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

    create() {
        this.graphics = this.add.graphics();
        this.passiveNodeData = passiveDataNode;
        this.passiveEdgeData = passiveDataEdge;
        this.addPassiveNodes();
        this.addCameraControl();
        this.addEvents();
        this.drawPassiveEdges();
    }

    addPassiveNodes() {
        this.passiveNodes = [];
        this.passiveNodeData.forEach((n) => {
            this.passiveNodes[n.id] = this.add.existing(
                new PassiveNode(this, n.x, n.y, n.id, n.alloc, n.text)
            ).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 PassiveNode) {
                if (!gameObjects[0].alloc) {
                    gameObjects[0].setTint(0xffffff);
                }
                this.displayPassiveText(gameObjects[0], pointer);
            }
        });
        this.input.on('pointerout', (pointer, gameObjects) => {
            if (gameObjects[0] instanceof PassiveNode) {
                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 PassiveNode) {
                    gameObjects[0].allocate();
                }
            }
        });
        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_A', () => {
            this.updatePassives(); // Will update nodes from state
        }, 0, this);
        this.input.keyboard.on('keydown_G', () => {
            this.scene.sleep('Passives');
        }, 0, this);
    }

    drawPassiveEdges() {
        this.graphics.clear();
        this.passiveEdgeData.forEach((e) => {
            const drawEdge = this.passiveNodeData.filter(n => (
                e[0] === n.id || e[1] === n.id
            ));
            if (drawEdge[0].alloc && drawEdge[1].alloc) {
                this.graphics.lineStyle(10, 0xfff00f, 0.2);
            } else {
                this.graphics.lineStyle(2, 0xffffff, 0.2);
            }
            this.graphics.lineBetween(drawEdge[0].x, drawEdge[0].y, drawEdge[1].x, drawEdge[1].y);
        });
    }

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

    updatePassives() {
        this.passiveNodeData.forEach((n) => {
            this.passiveNodes[n.id].alloc = false;
            this.passiveNodes[n.id].updateNode();
        });
        // This function will  be modified to just update from state
        // State will update n.alloc instead of false
    }

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

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

module.exports = PhaserPassives;