3 files changed, 47 insertions(+), 20 deletions(-)

M starkingdoms-client/src/globals.ts
M starkingdoms-client/src/pages/Play.svelte
M starkingdoms-client/src/rendering.ts

@@ 22,6 22,7 @@ export interface GlobalData {
 
   saveEligible: boolean;
   leaving: boolean;
+  scale: number;
 }
 
 export interface GlobalRendering {


@@ 59,6 60,7 @@ export const global: GlobalData = {
   rendering: null,
   saveEligible: false,
   leaving: false,
+  scale: 1,
 };
 
 export function player(): Part | undefined {

@@ 38,6 38,20 @@
     logger("Antialiasing is now", antialiasing ? "on" : "off");
   }*/
 
+  function handlewheel(e: WheelEvent) {
+    let delta = e.shiftKey ? 0.01 : 0.1;
+    if (e.deltaY < 0) {
+      global.scale += delta;
+    } else {
+      global.scale -= delta;
+    }
+    if (global.scale > 5) {
+      global.scale = 5;
+    } else if (global.scale < 0.05) {
+      global.scale = 0.05;
+    }
+  }
+
   function beam_out() {
     if (!global.saveEligible) {
       chatbox.addMessage(


@@ 111,7 125,7 @@
   });
 </script>
 
-<div class="game" id="gamewindow"></div>
+<div class="game" id="gamewindow" on:wheel={handlewheel}></div>
 
 <Popup
   draggable

@@ 55,21 55,30 @@ export function startRender() {
   // Near starfield
   global.rendering!.app.stage.addChild(global.rendering!.starfield_near.sprite);
 
+
   app.ticker.add(() => {
     if (player() === undefined) {
       return;
     }
 
+    let width = window.innerWidth;
+    let height = window.innerHeight;
     global.rendering!.app.stage.x =
-      -player()?.transform.x! + window.innerWidth / 2;
+      -player()?.transform.x! * global.scale + width / 2;
+    global.rendering!.app.stage.y =
+      -player()?.transform.y! * global.scale + height / 2;
+    /*global.rendering!.app.stage.x =
+      -player()?.transform.x! + width / 2;
     global.rendering!.app.stage.y =
-      -player()?.transform.y! + window.innerHeight / 2;
+      -player()?.transform.y! + height / 2;*/
+    global.rendering!.app.stage.scale.x = global.scale;
+    global.rendering!.app.stage.scale.y = global.scale;
 
     // TODO: refactor, make parallax configurable
 
     // Main starfield
-    global.rendering!.starfield.sprite.height = window.innerHeight + 384;
-    global.rendering!.starfield.sprite.width = window.innerWidth + 384;
+    global.rendering!.starfield.sprite.height = window.innerHeight + 384*global.scale;
+    global.rendering!.starfield.sprite.width = window.innerWidth + 384*global.scale;
 
     global.rendering!.starfield.off_x =
       ((player()?.transform.x! * 3) / 4) % 384;


@@ 165,9 174,9 @@ export function startRender() {
         username_text = new PIXI.Text(username);
         username_text.alpha = 0.6;
         username_text.style = new PIXI.TextStyle({
-            fontFamily: 'sans-serif',
-            fontSize: 27,
-            fill: '#ffffff',
+          fontFamily: "sans-serif",
+          fontSize: 27,
+          fill: "#ffffff",
         });
         global.rendering!.player_text_map.set(id, username_text);
         global.rendering!.app.stage.addChild(username_text);


@@ 180,19 189,21 @@ export function startRender() {
     }
     let username_text;
     if (global.rendering!.player_text_map.has(global.me!.part_id)) {
-        username_text = global.rendering!.player_text_map.get(global.me!.part_id)!;
+      username_text = global.rendering!.player_text_map.get(
+        global.me!.part_id,
+      )!;
     } else {
-        username_text = new PIXI.Text(global.me!.username);
-        username_text.alpha = 0.6;
-        username_text.style = new PIXI.TextStyle({
-            fontFamily: 'sans-serif',
-            fontSize: 27,
-            fill: '#ffffff',
-            stroke: '#000000',
-            strokeThickness: 2,
-        });
-        global.rendering!.player_text_map.set(global.me!.part_id, username_text);
-        global.rendering!.app.stage.addChild(username_text);
+      username_text = new PIXI.Text(global.me!.username);
+      username_text.alpha = 0.6;
+      username_text.style = new PIXI.TextStyle({
+        fontFamily: "sans-serif",
+        fontSize: 27,
+        fill: "#ffffff",
+        stroke: "#000000",
+        strokeThickness: 2,
+      });
+      global.rendering!.player_text_map.set(global.me!.part_id, username_text);
+      global.rendering!.app.stage.addChild(username_text);
     }
     let player_transform = global.parts_map.get(global.me!.part_id)!.transform;
     username_text.anchor.set(0.5);