wip

client/src/scenes/constants.js

@@ -1,27 +1,60 @@
 // POSITIONING FNS
 // 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 combatX = () => 0;
 
-const crypListWidth = () => Math.floor(window.innerWidth * 0.2);
+const crypListWidth = () => Math.floor(1600 * 0.2);
-const crypListHeight = () => window.innerHeight - menuHeight();
+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 gameListWidth = () => Math.floor(1600 * 0.2);
-const gameListHeight = () => Math.floor(window.innerHeight / 10);
+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 statsWidth = () => Math.floor(1600 - crypListWidth() - gameListWidth());
-const statsHeight = () => window.innerHeight - menuHeight();
+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' },

client/src/scenes/cryps.js

@@ -8,8 +8,9 @@ function renderCryps() {
         type: Phaser.AUTO,
         backgroundColor: '#181818',
         resolution: window.devicePixelRatio,
-        width: window.innerWidth,
+        antialias: true,
-        height: window.innerHeight,
+        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;
 }

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