This commit is contained in:
ntr 2018-12-14 12:49:38 +11:00
parent 35d4f11881
commit f770e2fbf8
2 changed files with 20 additions and 52 deletions

View File

@ -1,60 +1,27 @@
// POSITIONING FNS // POSITIONING FNS
// floors prevent subpixel rendering which looks trash // floors prevent subpixel rendering which looks trash
// const menuWidth = () => window.innerWidth; const menuWidth = () => window.innerWidth;
// const menuHeight = () => Math.floor(window.innerHeight * 0.05); const menuHeight = () => Math.floor(window.innerHeight * 0.05);
// const combatWidth = () => window.innerWidth; const combatWidth = () => window.innerWidth;
// const combatHeight = () => window.innerHeight - menuHeight(); 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 combatY = () => menuHeight();
const combatX = () => 0; const combatX = () => 0;
const crypListWidth = () => Math.floor(1600 * 0.2); const crypListWidth = () => Math.floor(window.innerWidth * 0.2);
const crypListHeight = () => 1000 - menuHeight(); const crypListHeight = () => window.innerHeight - menuHeight();
const cryplistRowHeight = cryps => crypListHeight() / cryps.length; const cryplistRowHeight = cryps => crypListHeight() / cryps.length;
const crypListY = () => menuHeight(); const crypListY = () => menuHeight();
const crypListX = () => 0; const crypListX = () => 0;
const gameListWidth = () => Math.floor(1600 * 0.2); const gameListWidth = () => Math.floor(window.innerWidth * 0.2);
const gameListHeight = () => Math.floor(1000 / 10); const gameListHeight = () => Math.floor(window.innerHeight / 10);
const gameListX = () => crypListWidth(); const gameListX = () => crypListWidth();
const gameListY = i => menuHeight() + (gameListHeight() * i); const gameListY = i => menuHeight() + (gameListHeight() * i);
const gameListRowY = i => menuHeight() + (gameListHeight() * (i + 2)); const gameListRowY = i => menuHeight() + (gameListHeight() * (i + 2));
const statsWidth = () => Math.floor(1600 - crypListWidth() - gameListWidth()); const statsWidth = () => Math.floor(window.innerWidth - crypListWidth() - gameListWidth());
const statsHeight = () => 1000 - menuHeight(); const statsHeight = () => window.innerHeight - menuHeight();
const statsY = () => menuHeight(); const statsY = () => menuHeight();
const statsX = () => crypListWidth() + gameListWidth(); const statsX = () => crypListWidth() + gameListWidth();
const statsKnownX = () => Math.floor(statsX() + statsWidth() / 4); const statsKnownX = () => Math.floor(statsX() + statsWidth() / 4);
@ -66,7 +33,6 @@ const logHeight = () => combatHeight() * 0.3;
const logY = () => menuHeight() + (combatHeight() * 0.7); const logY = () => menuHeight() + (combatHeight() * 0.7);
const logX = () => combatWidth() * 0.6; const logX = () => combatWidth() * 0.6;
module.exports = { module.exports = {
TEXT: { TEXT: {
NORMAL: { fontFamily: 'monospace', fontSize: 16, color: '#ffffff' }, NORMAL: { fontFamily: 'monospace', fontSize: 16, color: '#ffffff' },

View File

@ -8,9 +8,9 @@ function renderCryps() {
type: Phaser.AUTO, type: Phaser.AUTO,
backgroundColor: '#181818', backgroundColor: '#181818',
resolution: window.devicePixelRatio, resolution: window.devicePixelRatio,
antialias: true, // antialias: true,
width: 1600, width: window.innerWidth,
height: 1000, height: window.innerHeight,
physics: { physics: {
default: 'arcade', default: 'arcade',
arcade: { arcade: {
@ -28,7 +28,7 @@ function renderCryps() {
game.scene.sleep('Combat'); game.scene.sleep('Combat');
function resize() { function resize() {
const canvas = document.querySelector("canvas"); const canvas = document.querySelector('canvas');
if (!canvas) return false; if (!canvas) return false;
@ -37,12 +37,14 @@ function renderCryps() {
const windowRatio = windowWidth / windowHeight; const windowRatio = windowWidth / windowHeight;
const gameRatio = game.config.width / game.config.height; const gameRatio = game.config.width / game.config.height;
if (windowRatio < gameRatio) { if (windowRatio < gameRatio) {
canvas.style.width = windowWidth + "px"; canvas.style.width = `${windowWidth}px`;
canvas.style.height = (windowWidth / gameRatio) + "px"; canvas.style.height = `${(windowWidth / gameRatio)}px`;
} else { } else {
canvas.style.width = (windowHeight * gameRatio) + "px"; canvas.style.width = `${(windowHeight * gameRatio)}px`;
canvas.style.height = windowHeight + "px"; canvas.style.height = `${windowHeight}px`;
} }
return true;
} }
window.addEventListener('mouseup', () => game.registry.set('pan', false)); window.addEventListener('mouseup', () => game.registry.set('pan', false));