Placeholder scene for holding specs

client/src/scenes/cryps.js

@@ -7,6 +7,7 @@ const Zones = require('./zones');
 const Background = require('./background');
 const GameList = require('./game.list');
 const StatSheet = require('./statsheet');
+const SpecSheet = require('./specsheet');
 
 
 function renderCryps() {
@@ -34,7 +35,7 @@ function renderCryps() {
 
     function newMainScene(key, scene, data) {
         let addScene = true;
-        const ACTIVE_MAIN_SCENES = ['GameList', 'Zones', 'StatSheet'];
+        const ACTIVE_MAIN_SCENES = ['GameList', 'Zones', 'StatSheet', 'SpecSheet'];
         ACTIVE_MAIN_SCENES.forEach((sKey) => {
             if (game.scene.keys[sKey]) {
                 if (key === sKey) {
@@ -74,6 +75,11 @@ function renderCryps() {
             newMainScene('StatSheet', StatSheet, data);
         }
 
+        if (key === 'crypSpec') {
+            newMainScene('SpecSheet', SpecSheet, data);
+        }
+
+
         return true;
     }
 

client/src/scenes/specsheet.js

@@ -0,0 +1,144 @@
+const Phaser = require('phaser');
+const { POSITIONS: { MENU_MAIN }, TEXT } = require('./constants');
+
+const X = MENU_MAIN.x();
+const Y = MENU_MAIN.y();
+const WIDTH = MENU_MAIN.width();
+const HEIGHT = MENU_MAIN.height();
+const TEXT_MARGIN = 24;
+
+const menuX = WIDTH / 10;
+const menuY = HEIGHT * 0.8;
+const menuWidth = WIDTH / 10;
+const menuHeight = HEIGHT * 0.3;
+
+const X_LEARN = WIDTH * 2 / 4;
+const Y_SKILLS = HEIGHT * 0.5;
+
+
+function addButton(scene, x, y, cback, name) {
+    const button = scene.add
+        .rectangle(x, y, menuWidth, menuHeight, 0x222222)
+        .setInteractive()
+        .setOrigin(0)
+        .on('pointerdown', cback);
+    scene.add.text(button.getCenter().x, button.getCenter().y, name, TEXT.HEADER)
+        .setOrigin(0.5, 0.5);
+}
+
+class StatSheet extends Phaser.Scene {
+    constructor() {
+        super({ key: 'SpecSheet' });
+    }
+
+    create(cryp) {
+        this.cameras.main.setViewport(X, Y, WIDTH, HEIGHT);
+        this.registry.events.on('changedata', this.updateData, this);
+        this.cryp = cryp;
+        this.forget = false;
+        this.add.text(WIDTH / 10, 0, cryp.name, TEXT.HEADER);
+
+        this.addStats(cryp);
+        this.addKnownSkills(cryp);
+        this.addLearnableSkills(cryp);
+        addButton(this, menuX, menuY, () => this.registry.set('crypStats', cryp), 'Stats');
+
+    }
+
+    updateData(parent, key, data) {
+        if (key === 'cryps') {
+            const cryp = data.find(c => c.id === this.cryp.id);
+            this.cryp = cryp;
+            this.addKnownSkills(cryp);
+            this.addStats(cryp);
+        }
+    }
+
+    addStats(cryp) {
+        if (this.stats) this.stats.destroy(true);
+        this.stats = this.add.group();
+
+        const crypStat = (stat, i) => {
+            const STAT_X = WIDTH / 10;
+            const STAT_Y = (i + 1) * TEXT_MARGIN;
+            this.stats.add(this.add
+                .text(STAT_X, STAT_Y, `${stat.stat}: ${stat.base}`, TEXT.NORMAL));
+        };
+
+        const CRYP_STATS = [
+            // cryp.stamina,
+            // cryp.spell_dmg,
+            // cryp.speed,
+        ];
+
+        CRYP_STATS.forEach(crypStat);
+    }
+
+    addKnownSkills(cryp) {
+        if (this.knownSkills) this.knownSkills.destroy(true);
+        this.knownSkills = this.add.group();
+
+        this.add.text(menuX, Y_SKILLS, 'Skills', TEXT.HEADER);
+        const knownSkill = (skill, i) => {
+            const SKILL_X = menuX;
+            const SKILL_Y = (i * TEXT_MARGIN) + Y_SKILLS + TEXT_MARGIN;
+
+            const color = this.forget ? '#ff0000' : '#ffffff';
+            const style = { fontFamily: 'monospace', fontSize: 16, color };
+            this.knownSkills.add(this.add.text(menuX, SKILL_Y, skill.skill, style)
+                .setInteractive()
+                .on('pointerdown', () => {
+                    this.registry.get('ws').sendCrypForget(cryp.id, skill.skill);
+                }));
+        };
+        // cryp.skills.forEach(knownSkill);
+    }
+
+    addLearnableSkills(cryp) {
+        if (this.learnSkills) this.learnSkills.destroy(true);
+        this.learnSkills = this.add.group();
+        const learnable = (skill, i) => {
+            const SKILL_X = i <= 10 ? X_LEARN : X_LEARN + WIDTH / 5;
+            const SKILL_Y = i <= 10 ? (i + 1) * TEXT_MARGIN : (i - 10) * TEXT_MARGIN;
+
+            this.learnSkills.add(this.add.text(SKILL_X, SKILL_Y, skill.name, TEXT.NORMAL)
+                .setInteractive()
+                .on('pointerdown', () => {
+                    this.registry.get('ws').sendCrypLearn(cryp.id, skill.name);
+                })
+                .on('pointerover', (pointer) => {
+                    if (!this.forget) {
+                        this.displaySkillText(SKILL_X, SKILL_Y, skill.description, pointer);
+                    }
+                })
+                .on('pointerout', () => {
+                    if (this.skillText) this.skillText.destroy();
+                }));
+        };
+
+        this.learnSkills.add(this.add.text(X_LEARN, 0, 'Learnable', TEXT.HEADER));
+        // SKILLS.LEARNABLE.forEach(learnable);
+    }
+
+    displaySkillText(x, y, description, pointer) {
+        if (this.skillText) this.skillText.destroy();
+        this.skillText = this.add.text(x, y, description, {
+            fontSize: '16px',
+            fontFamily: 'Arial',
+            color: '#ffffff',
+            backgroundColor: '#222222',
+        }).setPadding(32);
+        this.skillText.setAlpha(0.8);
+        this.skillText.setOrigin(pointer.x >= WIDTH * 0.65 ? 1 : 0,
+            pointer.y >= HEIGHT * 0.25 ? 1 : 0);
+        this.skillText.setWordWrapWidth(450);
+    }
+
+
+    cleanUp() {
+        this.registry.events.off('changedata', this.updateData, this);
+        this.scene.remove();
+    }
+}
+
+module.exports = StatSheet;

client/src/scenes/statsheet.js

@@ -10,7 +10,7 @@ const TEXT_MARGIN = 24;
 const menuX = WIDTH / 10;
 const menuY = HEIGHT * 0.8;
 const menuWidth = WIDTH / 10;
-const menuHeight = HEIGHT * 0.3;
+const menuHeight = HEIGHT * 0.2;
 
 const X_LEARN = WIDTH * 2 / 4;
 const Y_SKILLS = HEIGHT * 0.5;
@@ -23,7 +23,7 @@ function addButton(scene, x, y, cback, name) {
         .setOrigin(0)
         .on('pointerdown', cback);
     scene.add.text(button.getCenter().x, button.getCenter().y, name, TEXT.HEADER)
-        .setOrigin(0.5, 1);
+        .setOrigin(0.5, 0.5);
 }
 
 class StatSheet extends Phaser.Scene {
@@ -41,6 +41,7 @@ class StatSheet extends Phaser.Scene {
         this.addStats(cryp);
         this.addKnownSkills(cryp);
         this.addLearnableSkills(cryp);
+        addButton(this, menuX, menuY, () => this.registry.set('crypSpec', cryp), 'Spec');
     }
 
     updateData(parent, key, data) {