refactor menu

client/src/scenes/combat.js

@@ -65,8 +65,8 @@ class Combat extends Phaser.Scene {
     }
 
     endGame() {
-        this.scene.switch('CrypList'); // Switch back to cryp list
         this.registry.set('game', null);
+        this.scene.wake('Menu'); // Switch back to cryp list
         this.scene.get('CombatLog').cleanUp();
         this.scene.get('CombatCryps').cleanUp();
         this.scene.get('CombatSkills').cleanUp();

client/src/scenes/cryp.list.js

@@ -1,93 +0,0 @@
-const Phaser = require('phaser');
-
-const Combat = require('./combat');
-const CrypRows = require('./cryp.row');
-const GameList = require('./game.list');
-const ItemList = require('./item.list');
-const StatSheet = require('./statsheet');
-
-class CrypList extends Phaser.Scene {
-    constructor() {
-        super({ key: 'CrypList', active: true });
-    }
-
-    create() {
-        this.registry.events.off('changedata', this.updateData, this);
-        this.registry.events.off('setdata', this.updateData, this);
-        this.registry.events.on('changedata', this.updateData, this);
-        this.registry.events.on('setdata', this.updateData, this);
-        if (this.registry.get('cryps')) {
-            this.renderList();
-            this.renderGameList();
-        }
-        return true;
-    }
-
-    updateData(parent, key, data) {
-        const UPDATE_KEYS = ['gameList', 'cryps'];
-        if (UPDATE_KEYS.includes(key)) {
-            this.renderList();
-            this.renderGameList();
-        }
-
-        if (key === 'itemList') {
-            return this.renderItemList();
-        }
-
-        if (key === 'game' && this.scene.isActive()) {
-            this.scene.sleep();
-            this.scene.add('Combat', Combat);
-            this.scene.run('Combat', data);
-        }
-
-        return true;
-    }
-
-    renderList() {
-        const cryps = this.registry.get('cryps');
-
-        // your cryps
-        if (this.CrypRows) {
-            this.CrypRows.cleanup();
-            this.CrypRows.destroy(true);
-        }
-        this.CrypRows = new CrypRows(this, cryps);
-    }
-
-    renderGameList() {
-        const ws = this.registry.get('ws');
-        const cryps = this.registry.get('cryps');
-        const gameList = this.registry.get('gameList');
-
-        if (this.gameList) {
-            this.gameList.cleanup();
-            this.gameList.destroy(true);
-        }
-
-        this.gameList = new GameList({ list: this, ws, cryps, gameList, events: this.game.events });
-    }
-
-    renderItemList() {
-        const ws = this.registry.get('ws');
-        const itemList = this.registry.get('itemList');
-
-        if (this.itemList) {
-            this.itemList.cleanup();
-            this.itemList.destroy(true);
-        }
-
-        this.itemList = new ItemList({ list: this, ws, itemList, events: this.game.events });
-    }
-
-
-    displaySkills(cryp) {
-        if (cryp) {
-            this.scene.add('StatSheet', StatSheet);
-            this.scene.run('StatSheet', { cryp });
-            this.scene.stop();
-        }
-        return true;
-    }
-}
-
-module.exports = CrypList;

client/src/scenes/cryp.row.js

@@ -1,82 +0,0 @@
-const Phaser = require('phaser');
-
-const { TEXT, COLOURS, POSITIONS: { CRYP_LIST, MENU, STATS } } = require('./constants');
-
-const TEXT_MARGIN = 24;
-
-const KEY_MAP = [
-    'keydown_ONE',
-    'keydown_TWO',
-    'keydown_THREE',
-];
-
-class CrypRows extends Phaser.GameObjects.Group {
-    constructor(list, cryps) {
-        super(list);
-        this.keyboard = list.input.keyboard;
-
-        const ROW_HEIGHT = CRYP_LIST.rowHeight(cryps);
-        const ROW_WIDTH = CRYP_LIST.rowWidth();
-
-        cryps.forEach((cryp, i) => {
-            const ROW_X = CRYP_LIST.x();
-            const ROW_Y = (i * CRYP_LIST.rowHeight(cryps)) + MENU.height();
-
-            const ACTIVE_FILL = cryp.active
-                ? 1
-                : 0;
-
-            const FILL = Object.values(COLOURS)[i];
-
-            const row = list.add
-                .rectangle(ROW_X, ROW_Y, ROW_WIDTH, ROW_HEIGHT, FILL, ACTIVE_FILL)
-                .setInteractive()
-                .setOrigin(0);
-
-            row.on('pointerdown', () => {
-                list.displaySkills(cryp);
-            });
-
-            const selectFn = () => {
-                list.game.events.emit('CRYP_ACTIVE', cryp);
-            };
-
-            if (KEY_MAP[i]) {
-                this.keyboard.on(KEY_MAP[i], selectFn, this);
-            }
-
-            row.cryp = cryp;
-            this.add(row);
-
-            const crypStat = (stat, j) => {
-                const STAT_X = ROW_X;
-                const STAT_Y = (j * TEXT_MARGIN) + ROW_Y + TEXT_MARGIN;
-
-                const text = list.add.text(STAT_X, STAT_Y, `${stat.stat}: ${stat.base}`, TEXT.NORMAL);
-                this.add(text);
-            };
-
-            const CRYP_STATS = [cryp.stamina, cryp.phys_dmg, cryp.spell_dmg];
-            CRYP_STATS.forEach(crypStat);
-
-            const selectBtn = list.add
-                .rectangle(ROW_WIDTH - 50, ROW_Y, 50, ROW_HEIGHT, FILL, 0.5)
-                .setInteractive()
-                .setOrigin(0);
-
-            selectBtn.on('pointerdown', selectFn);
-
-            this.add(selectBtn);
-
-            this.add(list.add.text(ROW_WIDTH - 20, ROW_Y, i + 1, TEXT.HEADER));
-            this.add(list.add.text(ROW_X, ROW_Y + (TEXT_MARGIN * 0), cryp.name, TEXT.HEADER));
-        });
-        return true;
-    }
-
-    cleanup() {
-        KEY_MAP.forEach(k => this.keyboard.removeListener(k));
-    }
-}
-
-module.exports = CrypRows;

client/src/scenes/cryps.js

@@ -1,6 +1,6 @@
 const Phaser = require('phaser');
 
-const CrypList = require('./cryp.list');
+const Header = require('./header');
 const Menu = require('./menu');
 
 function renderCryps() {
@@ -19,13 +19,13 @@ function renderCryps() {
             },
         },
         scene: [
+            Header,
             Menu,
-            CrypList,
         ],
     };
 
     const game = new Phaser.Game(config);
-    game.scene.sleep('Combat');
+    // game.scene.sleep('Combat');
 
     function resize() {
         const canvas = document.querySelector('canvas');

client/src/scenes/header.js

@@ -0,0 +1,15 @@
+const Phaser = require('phaser');
+
+const { TEXT } = require('./constants');
+
+class Header extends Phaser.Scene {
+    constructor() {
+        super({ key: 'Header', active: true });
+    }
+
+    create() {
+        this.add.text(0, 0, 'cryps.gg', TEXT.HEADER);
+    }
+}
+
+module.exports = Header;

client/src/scenes/menu.cryps.list.js

@@ -0,0 +1,98 @@
+const Phaser = require('phaser');
+
+const { TEXT, COLOURS, POSITIONS: { CRYP_LIST, MENU } } = require('./constants');
+
+const TEXT_MARGIN = 24;
+
+const KEY_MAP = [
+    'keydown_ONE',
+    'keydown_TWO',
+    'keydown_THREE',
+];
+
+class MenuCrypList extends Phaser.Scene {
+    constructor() {
+        super({ key: 'MenuCrypList' });
+    }
+
+    create() {
+        this.registry.events.on('changedata', this.updateData, this);
+        this.registry.events.on('setdata', this.updateData, this);
+        this.addCrypRows(this.registry.get('cryps'));
+
+    }
+
+    updateData(parent, key, data) {
+        if (key === 'cryps') {
+            KEY_MAP.forEach(k => this.input.keyboard.removeListener(k));
+            this.addCrypRows(data);
+        }
+    }
+
+    addCrypRows(cryps) {
+        if (!cryps) return true;
+        if (this.crypRows) this.crypRows.destroy(true);
+        this.crypRows = this.add.group();
+        const ROW_HEIGHT = CRYP_LIST.rowHeight(cryps);
+        const ROW_WIDTH = CRYP_LIST.rowWidth();
+
+        cryps.forEach((cryp, i) => {
+            const ROW_X = CRYP_LIST.x();
+            const ROW_Y = (i * CRYP_LIST.rowHeight(cryps)) + MENU.height();
+
+            const ACTIVE_FILL = cryp.active
+                ? 1
+                : 0;
+
+            const FILL = Object.values(COLOURS)[i];
+
+            const row = this.add.rectangle(ROW_X, ROW_Y, ROW_WIDTH, ROW_HEIGHT, FILL, ACTIVE_FILL)
+                .setInteractive()
+                .setOrigin(0)
+                .on('pointerdown', () => {
+                    this.scene.get('Menu').displaySkills(cryp);
+                });
+
+            const selectFn = () => {
+                this.game.events.emit('CRYP_ACTIVE', cryp);
+            };
+
+            if (KEY_MAP[i]) {
+                this.input.keyboard.on(KEY_MAP[i], selectFn, this);
+            }
+
+            row.cryp = cryp;
+            this.crypRows.add(row);
+
+            const crypStat = (stat, j) => {
+                const STAT_X = ROW_X;
+                const STAT_Y = (j * TEXT_MARGIN) + ROW_Y + TEXT_MARGIN;
+
+                this.crypRows.add(this.add.text(STAT_X, STAT_Y, `${stat.stat}: ${stat.base}`, TEXT.NORMAL));
+            };
+
+            const CRYP_STATS = [cryp.stamina, cryp.phys_dmg, cryp.spell_dmg];
+            CRYP_STATS.forEach(crypStat);
+
+            const selectBtn = this.add
+                .rectangle(ROW_WIDTH - 50, ROW_Y, 50, ROW_HEIGHT, FILL, 0.5)
+                .setInteractive()
+                .setOrigin(0);
+
+            selectBtn.on('pointerdown', selectFn);
+
+            this.crypRows.add(this.add.text(ROW_WIDTH - 20, ROW_Y, i + 1, TEXT.HEADER));
+            this.crypRows.add(this.add.text(ROW_X, ROW_Y + (TEXT_MARGIN * 0), cryp.name, TEXT.HEADER));
+        });
+        return true;
+    }
+
+    cleanUp() {
+        KEY_MAP.forEach(k => this.input.keyboard.removeListener(k));
+        this.registry.events.off('changedata', this.updateData, this);
+        this.registry.events.off('setdata', this.updateData, this);
+        this.scene.remove();
+    }
+}
+
+module.exports = MenuCrypList;

client/src/scenes/menu.game.list.js

@@ -1,4 +1,5 @@
 const Phaser = require('phaser');
+const Missions = require('./missions');
 
 const {
     TEXT,
@@ -6,60 +7,80 @@ const {
     POSITIONS: { GAME_LIST },
 } = require('./constants');
 
-class GameList extends Phaser.GameObjects.Group {
+class MenuGameList extends Phaser.Scene {
-    constructor(args) {
+    constructor() {
-        super(args.list);
+        super({ key: 'MenuGameList' });
+    }
 
-        const { list, events, ws, cryps, gameList } = args;
+    create() {
+        this.registry.events.on('changedata', this.updateData, this);
+        this.registry.events.on('setdata', this.updateData, this);
+        this.addGameList(this.registry.get('gameList'));
+    }
+
+    updateData(parent, key, data) {
+        if (key === 'gameList') {
+            this.addGameList(data);
+        }
+    }
+
+    addGameList(gameList) {
+        if (gameList.length === 0) return true;
+        if (this.gameList) this.gameList.destroy(true);
+        this.gameList = this.add.group();
+
+        const ws = this.registry.get('ws');
+        const cryps = this.registry.get('cryps');
+        const { events } = this.game;
 
         const X = GAME_LIST.x();
         const WIDTH = Math.floor(GAME_LIST.width() / 2);
         const HEIGHT = GAME_LIST.height();
         const TEXT_MARGIN = 24;
 
-        const spawn = list.add
+        const spawn = this.add
             .rectangle(X, GAME_LIST.y(0), WIDTH, HEIGHT, 0x888888)
             .setInteractive()
             .setOrigin(0);
 
-        this.add(list.add
+        this.gameList.add(this.add
             .text(spawn.getCenter().x, spawn.getCenter().y, 'spawn\ncryp', TEXT.HEADER)
             .setOrigin(0.5, 0.5));
 
-        const pvp = list.add
+        const pvp = this.add
             .rectangle(X + WIDTH, GAME_LIST.y(0), WIDTH, HEIGHT, 0x440000)
             .setInteractive()
             .setOrigin(0);
 
-        this.add(list.add
+        this.gameList.add(this.add
             .text(pvp.getCenter().x, pvp.getCenter().y, 'new PVP\ngame', TEXT.HEADER)
             .setOrigin(0.5, 0.5));
 
-        const pve = list.add
+        const pve = this.add
             .rectangle(X, GAME_LIST.y(1), WIDTH, HEIGHT, 0x004400)
             .setInteractive()
             .setOrigin(0);
 
-        this.add(list.add
+        this.gameList.add(this.add
             .text(pve.getCenter().x, pve.getCenter().y, 'new PVE\ngame', TEXT.HEADER)
             .setOrigin(0.5, 0.5));
 
-        const boss = list.add
+        const boss = this.add
             .rectangle(X, GAME_LIST.y(2), WIDTH, HEIGHT, 0x441122)
             .setInteractive()
             .setOrigin(0);
 
-        this.add(list.add
+        this.gameList.add(this.add
             .text(boss.getCenter().x, boss.getCenter().y, 'new Boss\ngame', TEXT.HEADER)
             .setOrigin(0.5, 0.5));
 
 
-        const refresh = list.add
+        const refresh = this.add
             .rectangle(X + WIDTH, GAME_LIST.y(1), WIDTH, HEIGHT, 0x000044)
             .setInteractive()
             .setOrigin(0);
 
-        this.add(list.add
+        this.gameList.add(this.add
             .text(refresh.getCenter().x, refresh.getCenter().y, 'refresh\ngame list', TEXT.HEADER)
             .setOrigin(0.5, 0.5));
 
@@ -68,15 +89,15 @@ class GameList extends Phaser.GameObjects.Group {
             const GAME_X = GAME_LIST.x();
             const GAME_Y = GAME_LIST.rowY(i);
 
-            const gameBox = list.add
+            const gameBox = this.add
                 .rectangle(GAME_X, GAME_Y, WIDTH * 2, HEIGHT, 0x111111)
                 .setInteractive()
                 .setOrigin(0);
 
             const TITLE = game.teams[0].cryps.map(c => c.name).join(', ');
 
-            this.add(list.add.text(GAME_X, GAME_Y, TITLE, TEXT.NORMAL));
+            this.gameList.add(this.add.text(GAME_X, GAME_Y, TITLE, TEXT.NORMAL));
-            this.add(list.add.text(GAME_X, GAME_Y + TEXT_MARGIN, `${game.team_size}v${game.team_size}`, TEXT.NORMAL));
+            this.gameList.add(this.add.text(GAME_X, GAME_Y + TEXT_MARGIN, `${game.team_size}v${game.team_size}`, TEXT.NORMAL));
 
             gameBox.on('pointerdown', () => {
                 const team = cryps.filter(c => c.active).map(c => c.id);
@@ -104,6 +125,9 @@ class GameList extends Phaser.GameObjects.Group {
         boss.on('pointerdown', () => {
             const team = cryps.filter(c => c.active).map(c => c.id);
             if (team.length === 0) return false;
+            this.scene.add('Missions', Missions);
+            this.scene.run('Missions');
+            this.scene.stop();
             return ws.sendGamePve(team, 'Boss');
         });
 
@@ -115,9 +139,12 @@ class GameList extends Phaser.GameObjects.Group {
         return true;
     }
 
-    cleanup() {
+    cleanUp() {
-        return true;
+        this.registry.events.off('changedata', this.updateData, this);
-    }
+        this.registry.events.off('setdata', this.updateData, this);
+        this.scene.remove();
     }
 
-module.exports = GameList;
+}
+
+module.exports = MenuGameList;

client/src/scenes/menu.js

@@ -1,18 +1,88 @@
 const Phaser = require('phaser');
 
-const { TEXT } = require('./constants');
+const MenuCrypList = require('./menu.cryps.list');
+const MenuGameList = require('./menu.game.list');
+
+const Combat = require('./combat');
+// const ItemList = require('./item.list');
+const StatSheet = require('./statsheet');
 
 class Menu extends Phaser.Scene {
-    constructor(props) {
+    constructor() {
         super({ key: 'Menu', active: true });
     }
 
     create() {
-        this.add.text(0, 0, 'cryps.gg', TEXT.HEADER);
+
-        // this.scene.sleep('Passives');
+        this.registry.events.on('changedata', this.updateData, this);
-        this.input.keyboard.on('keydown_F', () => {
+        this.registry.events.on('setdata', this.updateData, this);
-            this.scene.wake('Passives');
+        this.scene.add('MenuCrypList', MenuCrypList, true);
-        }, 0, this);
+        this.scene.add('MenuGameList', MenuGameList, true);
+        this.sys.events.on('wake', () => {
+            this.wakeMenuScenes();
+        });
+        return true;
+    }
+
+    wakeMenuScenes() {
+        this.registry.events.on('changedata', this.updateData, this);
+        this.registry.events.on('setdata', this.updateData, this);
+        this.scene.add('MenuCrypList', MenuCrypList, true);
+        this.scene.add('MenuGameList', MenuGameList, true);
+
+        console.log(this.scene.isActive());
+    }
+
+    updateData(parent, key, data) {
+        if (key === 'itemList') {
+            // return this.renderItemList();
+        }
+
+        if (key === 'game' && this.scene.isActive()) {
+            this.cleanUp();
+            this.scene.add('Combat', Combat);
+            this.scene.run('Combat', data);
+            this.scene.sleep();
+        }
+
+        return true;
+    }
+
+    // Scene switch to statsheet called by MenuCrypRows scene
+    displaySkills(cryp) {
+        if (cryp) {
+            this.cleanUp();
+
+            this.scene.add('StatSheet', StatSheet);
+            this.scene.run('StatSheet', cryp);
+            this.scene.sleep();
+        }
+        return true;
+    }
+
+    renderItemList() {
+        const ws = this.registry.get('ws');
+        const itemList = this.registry.get('itemList');
+
+        if (this.itemList) {
+            this.itemList.cleanup();
+            this.itemList.destroy(true);
+        }
+
+        // this.itemList = new ItemList({ list: this, ws, itemList, events: this.game.events });
+    }
+
+    cleanUp() {
+        // Remove all the scenes except header and this scene (menu)
+        this.registry.events.off('changedata', this.updateData, this);
+        this.registry.events.off('setdata', this.updateData, this);
+        const ACTIVE_SCENES = ['Header', 'Menu'];
+        Object.keys(this.scene.manager.keys).forEach((key) => {
+            if (!ACTIVE_SCENES.includes(key)) {
+                // Remove listeners and scene
+                this.scene.get(key).cleanUp();
+            }
+        });
     }
 }
 

client/src/scenes/missions.js

@@ -0,0 +1,145 @@
+const Phaser = require('phaser');
+const Node = require('./passive.node');
+const nodeData = require('./passive.data.node');
+const edgeData = require('./passive.data.edge');
+
+const { POSITIONS: { COMBAT } } = require('./constants');
+
+// 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 Missions extends Phaser.Scene {
+    constructor() {
+        super({ key: 'Missions' });
+        // this.input = props.input;
+    }
+
+    preload() {
+        this.load.image('eye', 'https://labs.phaser.io/assets/particles/green-orb.png');
+    }
+
+    create() {
+        this.graphics = this.add.graphics();
+        this.nodeData = nodeData;
+        this.edgeData = edgeData;
+        this.cameras.main.setViewport(COMBAT.width() * 0.2, COMBAT.y(),
+            COMBAT.width() * 0.8, COMBAT.height());
+        this.cameras.main.scrollX = 1000;
+        this.cameras.main.scrollY = 500;
+        this.addNodes();
+        this.addCameraControl();
+        this.addEvents();
+        this.drawEdges();
+    }
+
+    addNodes() {
+        this.nodes = [];
+        this.nodeData.forEach((n) => {
+            this.nodes[n.id] = this.add.existing(
+                new Node(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 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) {
+                    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.updateNodes(); // Will update nodes from state
+        }, 0, this);
+        this.input.keyboard.on('keydown_G', () => {
+            this.scene.sleep();
+        }, 0, this);
+    }
+
+    drawEdges() {
+        this.graphics.clear();
+        this.edgeData.forEach((e) => {
+            const drawEdge = this.nodeData.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);
+        });
+    }
+
+    displayNodeText(node, pointer) {
+        if (this.nodeText) this.nodeText.destroy();
+        this.nodeText = this.add.text(node.x, node.y, node.text, {
+            fontSize: '16px',
+            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);
+    }
+
+    updateNodes() {
+        this.nodeData.forEach((n) => {
+            this.nodes[n.id].alloc = false;
+            this.nodes[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 = Missions;

client/src/scenes/statsheet.js

@@ -15,8 +15,8 @@ class StatSheet extends Phaser.Scene {
         super({ key: 'StatSheet' });
     }
 
-    create(props) {
+    create(cryp) {
-        const { cryp } = props;
+        console.log(cryp);
         this.cryp = cryp;
         this.stats = new Stats(this, cryp);
         this.addControls(cryp);
@@ -27,7 +27,8 @@ class StatSheet extends Phaser.Scene {
     addControls(cryp) {
         const menuCback = () => {
             this.registry.events.off('changedata', this.updateData, this);
-            this.scene.run('CrypList');
+            this.registry.set('game', null);
+            this.scene.switch('Menu'); // Switch back to menu
             this.scene.remove('Skills');
             this.scene.remove('Passives');
             this.scene.remove();