diff --git a/client/src/scenes/constants.js b/client/src/scenes/constants.js index aabd6c39..5bf77644 100644 --- a/client/src/scenes/constants.js +++ b/client/src/scenes/constants.js @@ -1,27 +1,60 @@ // POSITIONING FNS // floors prevent subpixel rendering which looks trash -const menuWidth = () => window.innerWidth; -const menuHeight = () => Math.floor(window.innerHeight * 0.05); +// const menuWidth = () => window.innerWidth; +// const menuHeight = () => Math.floor(window.innerHeight * 0.05); -const combatWidth = () => window.innerWidth; -const combatHeight = () => window.innerHeight - menuHeight(); +// const combatWidth = () => window.innerWidth; +// const combatHeight = () => window.innerHeight - menuHeight(); +// const combatY = () => menuHeight(); +// const combatX = () => 0; + +// 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 gameListRowY = i => menuHeight() + (gameListHeight() * (i + 2)); + +// const statsWidth = () => Math.floor(window.innerWidth - crypListWidth() - gameListWidth()); +// const statsHeight = () => window.innerHeight - menuHeight(); +// const statsY = () => menuHeight(); +// const statsX = () => crypListWidth() + gameListWidth(); +// const statsKnownX = () => Math.floor(statsX() + statsWidth() / 4); +// const statsLearnableX = () => Math.floor(statsX() + statsWidth() / 2); +// const statsTextMargin = () => 24; + +// const logWidth = () => combatWidth(); +// const logHeight = () => combatHeight() * 0.3; +// const logY = () => menuHeight() + (combatHeight() * 0.7); +// const logX = () => combatWidth() * 0.6; + +const menuWidth = () => 1600; +const menuHeight = () => 25; + +const combatWidth = () => 1600; +const combatHeight = () => 1000 - menuHeight(); const combatY = () => menuHeight(); const combatX = () => 0; -const crypListWidth = () => Math.floor(window.innerWidth * 0.2); -const crypListHeight = () => window.innerHeight - menuHeight(); +const crypListWidth = () => Math.floor(1600 * 0.2); +const crypListHeight = () => 1000 - 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 gameListWidth = () => Math.floor(1600 * 0.2); +const gameListHeight = () => Math.floor(1000 / 10); const gameListX = () => crypListWidth(); const gameListY = i => menuHeight() + (gameListHeight() * i); const gameListRowY = i => menuHeight() + (gameListHeight() * (i + 2)); -const statsWidth = () => Math.floor(window.innerWidth - crypListWidth() - gameListWidth()); -const statsHeight = () => window.innerHeight - menuHeight(); +const statsWidth = () => Math.floor(1600 - crypListWidth() - gameListWidth()); +const statsHeight = () => 1000 - menuHeight(); const statsY = () => menuHeight(); const statsX = () => crypListWidth() + gameListWidth(); const statsKnownX = () => Math.floor(statsX() + statsWidth() / 4); @@ -33,6 +66,7 @@ const logHeight = () => combatHeight() * 0.3; const logY = () => menuHeight() + (combatHeight() * 0.7); const logX = () => combatWidth() * 0.6; + module.exports = { TEXT: { NORMAL: { fontFamily: 'monospace', fontSize: 16, color: '#ffffff' }, diff --git a/client/src/scenes/cryps.js b/client/src/scenes/cryps.js index e7a6284d..1f282755 100644 --- a/client/src/scenes/cryps.js +++ b/client/src/scenes/cryps.js @@ -8,8 +8,9 @@ function renderCryps() { type: Phaser.AUTO, backgroundColor: '#181818', resolution: window.devicePixelRatio, - width: window.innerWidth, - height: window.innerHeight, + antialias: true, + width: 1600, + height: 1000, physics: { default: 'arcade', arcade: { @@ -26,9 +27,28 @@ function renderCryps() { const game = new Phaser.Game(config); game.scene.sleep('Combat'); + function resize() { + const canvas = document.querySelector("canvas"); + const windowWidth = window.innerWidth; + const windowHeight = window.innerHeight; + const windowRatio = windowWidth / windowHeight; + const gameRatio = game.config.width / game.config.height; + if (windowRatio < gameRatio) { + canvas.style.width = windowWidth + "px"; + canvas.style.height = (windowWidth / gameRatio) + "px"; + } else { + canvas.style.width = (windowHeight * gameRatio) + "px"; + canvas.style.height = windowHeight + "px"; + } + } + + function somethingElse() { + console.log('grep'); + } + window.addEventListener('mouseup', () => game.registry.set('pan', false)); window.addEventListener('mousedown', () => game.registry.set('pan', true)); - window.addEventListener('resize', () => game.resize(window.innerWidth, window.innerHeight), false); + window.addEventListener('resize', () => somethingElse, false); return game; } diff --git a/server/WORKLOG.md b/server/WORKLOG.md index e1e4e46e..fa64d172 100644 --- a/server/WORKLOG.md +++ b/server/WORKLOG.md @@ -23,16 +23,10 @@ * hp increase/decrease * private fields for opponents -* Cryp Generation - * Items * pve granted stat reroll items * Colour scheme -* Missions - -* Bosses - # Db maintenance # Art Styles