feat: basic scale/zoom

app/react-components/ecs.jsx

@@ -11,7 +11,7 @@ import TargetingGrid from './targeting-grid.jsx';
 import TileLayer from './tile-layer.jsx';
 import Water from './water.jsx';
 
-export default function EcsComponent() {
+export default function Ecs({scale}) {
   const [ecs] = useEcs();
   const [entities, setEntities] = useState({});
   const [mainEntity] = useMainEntity();
@@ -43,11 +43,12 @@ export default function EcsComponent() {
   const {Camera} = entity;
   const {TileLayers: {layers: [layer]}, Water: {water}} = ecs.get(1);
   const [cx, cy] = [
-    Math.round(Camera.x - RESOLUTION.x / 2),
+    Math.round((Camera.x * scale) - RESOLUTION.x / 2),
-    Math.round(Camera.y - RESOLUTION.y / 2),
+    Math.round((Camera.y * scale) - RESOLUTION.y / 2),
   ];
   return (
     <Container
+      scale={scale}
       x={-cx}
       y={-cy}
     >

app/react-components/pixi.jsx

@@ -45,7 +45,7 @@ export const Stage = ({children, ...props}) => {
   );
 };
 
-export default function Pixi() {
+export default function Pixi({scale}) {
   return (
     <Stage
       className={styles.stage}
@@ -55,7 +55,7 @@ export default function Pixi() {
         background: 0x1099bb,
       }}
     >
-      <Ecs />
+      <Ecs scale={scale} />
     </Stage>
   );
 }

app/react-components/ui.jsx

@@ -29,6 +29,7 @@ export default function Ui({disconnected}) {
   const [bufferSlot, setBufferSlot] = useState();
   const [hotbarSlots, setHotbarSlots] = useState(emptySlots());
   const [activeSlot, setActiveSlot] = useState(0);
+  const [scale, setScale] = useState(2);
   useEffect(() => {
     let handle;
     if (disconnected) {
@@ -51,6 +52,17 @@ export default function Ui({disconnected}) {
       };
       let actionPayload;
       switch (payload) {
+        case '-':
+          if ('keyDown' === type) {
+            setScale((scale) => scale > 1 ? scale - 1 : 0.5);
+          }
+          break;
+        case '=':
+        case '+':
+          if ('keyDown' === type) {
+            setScale((scale) => scale < 4 ? Math.floor(scale + 1) : 4);
+          }
+          break;
         case 'F3': {
           if (event) {
             event.preventDefault();
@@ -148,7 +160,7 @@ export default function Ui({disconnected}) {
         });
       }
     });
-  }, [client, debug, setDebug]);
+  }, [client, debug, setDebug, setScale]);
   usePacket('Tick', async (payload, client) => {
     if (0 === Object.keys(payload.ecs).length) {
       return;
@@ -215,7 +227,7 @@ export default function Ui({disconnected}) {
           }
         `}
       </style>
-      <Pixi />
+      <Pixi scale={scale} />
       {mainEntity && (
         <Dom>
           <HotBar