diff --git a/client/src/scenes/combat.js b/client/src/scenes/combat.js index 44586879..58401de8 100755 --- a/client/src/scenes/combat.js +++ b/client/src/scenes/combat.js @@ -52,7 +52,7 @@ class Combat extends Phaser.Scene { const logX = POSITIONS.COMBAT.LOG.x(); const logY = POSITIONS.COMBAT.LOG.y(); const logWidth = POSITIONS.COMBAT.LOG.width(); - this.log = this.add.text(logX, logY, 'loading', TEXT.NORMAL); + this.log = this.add.text(logX, logY, '', TEXT.NORMAL); this.log.setWordWrapWidth(logWidth); return true; } @@ -71,7 +71,7 @@ class Combat extends Phaser.Scene { } this.CrypSkillsOne = new DrawCrypTeam(this, 0, playerOneCryp); this.CrypSkillsTwo = new DrawCrypTeam(this, 1, playerTwoCryp); - + this.renderCombat(data); } return true; @@ -79,8 +79,8 @@ class Combat extends Phaser.Scene { renderCombat(game) { if (!game) return false; - console.log('combat render'); - this.log.setText(game.log.reverse()); + // shallow copy because reverse mutates + this.log.setText(Array.from(game.log).reverse()); return true; } } diff --git a/client/src/scenes/constants.js b/client/src/scenes/constants.js index b373ac7f..1aa2717a 100644 --- a/client/src/scenes/constants.js +++ b/client/src/scenes/constants.js @@ -1,13 +1,25 @@ // POSITIONING FNS +// floors prevent subpixel rendering which looks trash const menuWidth = () => window.innerWidth; -const menuHeight = () => window.innerHeight * 0.1; +const menuHeight = () => Math.floor(window.innerHeight * 0.05); const combatWidth = () => window.innerWidth; const combatHeight = () => window.innerHeight - menuHeight(); const combatY = () => menuHeight(); const combatX = () => 0; -const logWidth = () => combatWidth() * 0.2; +const crypListWidth = () => Math.floor(window.innerWidth * 0.2); +const crypListHeight = () => window.innerHeight - menuHeight(); +const cryplistRowHeight = cryps => crypListHeight() / cryps.length; +const crypListY = () => menuHeight(); +const crypListX = () => 0; + +const gameListWidth = () => Math.floor(window.innerWidth * 0.2); +const gameListHeight = () => Math.floor(window.innerHeight / 10); +const gameListX = () => crypListWidth(); +const gameListY = i => menuHeight() + (gameListHeight() * i); + +const logWidth = () => Math.floor(combatWidth() * 0.2); const logHeight = () => combatHeight(); const logY = () => menuHeight(); const logX = () => combatWidth() - logWidth(); @@ -24,6 +36,15 @@ module.exports = { height: menuHeight, }, + CRYP_LIST: { + x: crypListX, + y: crypListY, + width: crypListWidth, + height: crypListHeight, + rowHeight: cryplistRowHeight, + rowWidth: crypListWidth, + }, + COMBAT: { x: combatX, y: combatY, @@ -37,6 +58,13 @@ module.exports = { height: logHeight, }, }, + + GAME_LIST: { + x: gameListX, + y: gameListY, + width: gameListWidth, + height: gameListHeight, + }, }, COLOURS: { diff --git a/client/src/scenes/cryp.list.js b/client/src/scenes/cryp.list.js index 37805bcc..8b6baa44 100644 --- a/client/src/scenes/cryp.list.js +++ b/client/src/scenes/cryp.list.js @@ -2,7 +2,7 @@ const Phaser = require('phaser'); const CrypRows = require('./cryp.row'); const CrypPage = require('./cryp.page'); -const Lobbies = require('./lobbies'); +const GameList = require('./game.list'); class CrypList extends Phaser.Scene { constructor() { @@ -35,7 +35,7 @@ class CrypList extends Phaser.Scene { this.displaySkills(cryp); } - this.lobbies = new Lobbies(this, cryps); + this.gameList = new GameList(this, cryps); } displaySkills(cryp) { diff --git a/client/src/scenes/cryp.row.js b/client/src/scenes/cryp.row.js index c783001b..aad8dde7 100644 --- a/client/src/scenes/cryp.row.js +++ b/client/src/scenes/cryp.row.js @@ -1,12 +1,7 @@ const Phaser = require('phaser'); -const { TEXT, COLOURS } = require('./constants'); +const { TEXT, COLOURS, POSITIONS: { CRYP_LIST, MENU } } = require('./constants'); -const ROW_WIDTH = 400; -const ROW_HEIGHT = 200; - -const TOP_MARGIN = 50; -const ROW_MARGIN = 50; const TEXT_MARGIN = 24; const KEY_MAP = [ @@ -15,16 +10,17 @@ const KEY_MAP = [ 'keydown_THREE', ]; -const xPos = i => 0; -const yPos = i => (i * ROW_HEIGHT + ROW_MARGIN) + TOP_MARGIN; - 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 X_ORIGIN = xPos(i); - const Y_ORIGIN = yPos(i); + const ROW_X = CRYP_LIST.x(); + const ROW_Y = (i * CRYP_LIST.rowHeight(cryps)) + MENU.height(); const ACTIVE_FILL = cryp.active ? 1 @@ -33,7 +29,7 @@ class CrypRows extends Phaser.GameObjects.Group { const FILL = Object.values(COLOURS)[i]; const row = list.add - .rectangle(X_ORIGIN, Y_ORIGIN, ROW_WIDTH, ROW_HEIGHT, FILL, ACTIVE_FILL) + .rectangle(ROW_X, ROW_Y, ROW_WIDTH, ROW_HEIGHT, FILL, ACTIVE_FILL) .setInteractive() .setOrigin(0); @@ -49,9 +45,9 @@ class CrypRows extends Phaser.GameObjects.Group { row.cryp = cryp; this.add(row); - this.add(list.add.text(X_ORIGIN, Y_ORIGIN + (TEXT_MARGIN * 0), cryp.name, TEXT.HEADER)); - this.add(list.add.text(ROW_WIDTH - 20, Y_ORIGIN + (TEXT_MARGIN * 0), i + 1, TEXT.HEADER)); - this.add(list.add.text(X_ORIGIN, Y_ORIGIN + (TEXT_MARGIN * 1), cryp.stamina.base, TEXT.NORMAL)); + 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)); + this.add(list.add.text(ROW_X, ROW_Y + (TEXT_MARGIN * 1), cryp.stamina.base, TEXT.NORMAL)); }); return true; } diff --git a/client/src/scenes/lobbies.js b/client/src/scenes/game.list.js similarity index 63% rename from client/src/scenes/lobbies.js rename to client/src/scenes/game.list.js index baa3452c..d0d4905d 100755 --- a/client/src/scenes/lobbies.js +++ b/client/src/scenes/game.list.js @@ -1,28 +1,31 @@ const Phaser = require('phaser'); -const { TEXT } = require('./constants'); +const { + TEXT, + // COLOURS, + POSITIONS: { GAME_LIST }, +} = require('./constants'); -const ROW_WIDTH = 400; -const ROW_HEIGHT = 200; - -const BUTTON_WIDTH = 200; -const BUTTON_HEIGHT = 100; - -const TOP_MARGIN = 50; -const BUTTON_MARGIN = 50; -const TEXT_MARGIN = 24; - -class Lobbies extends Phaser.GameObjects.Group { +class GameList extends Phaser.GameObjects.Group { constructor(list, cryps) { super(list); - this.keyboard = list.input.keyboard; + // this.keyboard = list.input.keyboard; const ws = list.registry.get('ws'); - const X_POS = ROW_WIDTH + 50; + const games = [ + 'PVE', + 'PVP', + ]; + + const X = GAME_LIST.x(); + const WIDTH = GAME_LIST.width(); + const HEIGHT = GAME_LIST.height(); + + console.log(GAME_LIST.y(0)) const pvp = list.add - .rectangle(X_POS, TOP_MARGIN, BUTTON_WIDTH, BUTTON_HEIGHT, 0x440000) + .rectangle(X, GAME_LIST.y(0), WIDTH, HEIGHT, 0x440000) .setInteractive() .setOrigin(0); @@ -30,7 +33,7 @@ class Lobbies extends Phaser.GameObjects.Group { .add(list.add.text(pvp.getCenter().x, pvp.getCenter().y, 'PVP', TEXT.HEADER)); const pve = list.add - .rectangle(X_POS, TOP_MARGIN + BUTTON_HEIGHT + BUTTON_MARGIN, BUTTON_WIDTH, BUTTON_HEIGHT, 0x004400) + .rectangle(X, GAME_LIST.y(1), WIDTH, HEIGHT, 0x004400) .setInteractive() .setOrigin(0); @@ -59,4 +62,4 @@ class Lobbies extends Phaser.GameObjects.Group { } } -module.exports = Lobbies; +module.exports = GameList;