Resizing the window!

a-type · Sep 12, 2023 · 50f3a31 · 50f3a31
1 parent e373073
commit 50f3a31
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 19 deletions.
diff --git a/src/index.ts b/src/index.ts
@@ -11,11 +11,9 @@ import tutorialLevel from "./TutorialLevel.json";
 window.onload = function() {
     // Create the application helper and add its render target to the page
     let app = new PIXI.Application<HTMLCanvasElement>({
-        // TODO: Unclear why -2 is necessary...
-        width: document.documentElement.clientWidth - 2,
-        height: document.documentElement.clientHeight - 2,
         antialias: true,
         autoDensity: true,
+        resizeTo: window,
     });
     document.body.appendChild(app.view);
 
@@ -35,11 +33,12 @@ window.onload = function() {
         if (paramSeed.length > 0) {
             seed = paramSeed;
         }
-        setUrlParam('seed', seed);
     } else if (isTutorial) {
         seed = tutorialLevel.seed; // "pick"
+    } else {
+        setUrlParam('seed', seed);
     }
-    
+
     const game = new Roots(seed);
     const net = new Network(game);
 

diff --git a/src/render/GameRenderer.ts b/src/render/GameRenderer.ts
@@ -63,6 +63,12 @@ export class GameRenderer {
         app.stage.addChild(this.mainContainer);
 
         this.initGroups();
+
+        window.addEventListener('resize', () => {
+            setTimeout(() => {
+                this.multitouch.resetTransform();
+            });
+        });
     }
 
     get activeTileCount() : number {
@@ -301,21 +307,31 @@ export class GameRenderer {
         this.mainContainer.addChild(this.shareIcon);
         // Position in bottom-right corner
 
-        this.shareIcon.color.setDark(1, 1, 1);
-        this.shareIcon.anchor.set(1, 1);
-        this.shareIcon.x = this.app.screen.width - 10;
-        this.shareIcon.y = this.app.screen.height - 10;
+        this.shareIcon.color.setDark(0.7, 0.7, 0.7);
+        this.shareIcon.anchor.set(0, 0);
+        this.shareIcon.x = 10;
+        this.shareIcon.y = 10;
         this.shareIcon.width = 25;
         this.shareIcon.height = 25;
         this.shareIcon.interactive = true;
         this.shareIcon.on('click', () => {
             this.onShare.emit();
         });
         this.shareIcon.on('mouseover', () => {
-            this.shareIcon.color.setDark(1, 0.5, 1);
+            this.updater.run(() => {
+                let dark = this.shareIcon.color.dark[0];
+                dark = lerp(dark, 1, 0.2, 0.01);
+                this.shareIcon.color.setDark(dark, dark, dark);
+                return dark < 1;
+            }).unique('shareIconHover', true);
         });
         this.shareIcon.on('mouseout', () => {
-            this.shareIcon.color.setDark(1, 1, 1);
+            this.updater.run(() => {
+                let dark = this.shareIcon.color.dark[0];
+                dark = lerp(dark, 0.7, 0.2, 0.01);
+                this.shareIcon.color.setDark(dark, dark, dark);
+                return dark > 0.7;
+            }).unique('shareIconHover', true);
         });
         this.shareIcon.visible = !this.isTutorial;
     }

diff --git a/src/render/Multitouch.ts b/src/render/Multitouch.ts
@@ -42,22 +42,28 @@ export class Multitouch {
         this.scaleViewport.scale.x = this.scaleViewport.scale.y = value;
     }
 
-
-    constructor(renderer: GameRenderer, parent: PIXI.Container, width: number, height: number) {
-        this.renderer = renderer;
-        let app = this.app = renderer.app;
-        this.viewport = this.panViewport = new PIXI.Container();
-        this.scaleViewport = new PIXI.Container();
+    resetTransform() {
+        let app = this.app;
         this.scaleViewport.x = app.view.width / 2;
         this.scaleViewport.y = app.view.height / 2;
 
-        this.minScale = Math.min(app.view.width / width, app.view.height / height);
+        this.minScale = Math.min(app.view.width / this.width, app.view.height / this.height);
 
         this.scale = this.targetScale = this.minScale;
+    }
 
+    constructor(renderer: GameRenderer, parent: PIXI.Container, width: number, height: number) {
+        this.renderer = renderer;
+        let app = this.app = renderer.app;
+        this.viewport = this.panViewport = new PIXI.Container();
+        this.scaleViewport = new PIXI.Container();
+
         this.width = width;
         this.height = height;
 
+        this.resetTransform();
+
+
         // this.scaleViewport.scale.x = this.scaleViewport.scale.y = 2;
 
         parent.addChild(this.scaleViewport);

diff --git a/static/index.html b/static/index.html
@@ -7,7 +7,7 @@
                 margin-left: auto;
                 margin-right: auto;
                 display: block;
-                border: 1px solid black;
+                /* border: 1px solid black; */
             }
             body {
                 width: 100%;