(null);
const windowSize = useWindowSize();
@@ -35,8 +45,9 @@ export const PublicGalaxyMap = (props: { publicGalaxy: PublicGalaxy }) => {
diff --git a/packages/ui/pixi/GalaxySystemTile.tsx b/packages/ui/pixi/GalaxySystemTile.tsx
index c536fef..e80d9f1 100644
--- a/packages/ui/pixi/GalaxySystemTile.tsx
+++ b/packages/ui/pixi/GalaxySystemTile.tsx
@@ -1,28 +1,21 @@
import { Sprite } from "@pixi/react";
-import { Position } from "@twilight-assembly/core";
+import { Position, tilePositionToCoordinate } from "@twilight-assembly/core";
import * as React from "react";
export const GalaxySystemTile = (props: {
systemId: number;
position: Position;
}) => {
- const pxTileWidth = 364;
- const pxTileHeight = 317;
- /// Large tile size
- const pxTileHeightStretch = 340;
-
- const hexMagicY = 0.7555;
- const xOffset = (props.position.x * hexMagicY + 0.5) * pxTileWidth;
- const yOffset =
- (props.position.x % 2 == 0
- ? 1 + props.position.y
- : 0.5 + props.position.y) * pxTileHeight;
+ const px = tilePositionToCoordinate({
+ x: props.position.x,
+ y: props.position.y,
+ });
return (
);
diff --git a/packages/ui/pixi/Viewport.tsx b/packages/ui/pixi/Viewport.tsx
index 5a4e6c9..26f2dbb 100644
--- a/packages/ui/pixi/Viewport.tsx
+++ b/packages/ui/pixi/Viewport.tsx
@@ -3,12 +3,14 @@ import * as PIXI from "pixi.js";
import { Viewport } from "pixi-viewport";
import { PixiComponent, useApp } from "@pixi/react";
import { EventSystem } from "@pixi/events";
+import { BoundingBox } from "@twilight-assembly/core";
export interface ViewportProps {
screenWidth: number;
screenHeight: number;
mapWidth: number;
mapHeight: number;
+ mapBounds: BoundingBox;
children?: React.ReactNode;
}
@@ -30,23 +32,23 @@ const PixiComponentViewport = PixiComponent("Viewport", {
ticker: app.ticker,
passiveWheel: false,
});
- viewport
+ return viewport
.drag()
.pinch()
.wheel()
.decelerate()
.clamp({
direction: "all",
- bottom: props.mapHeight,
- top: 0,
- left: -80,
- right: props.mapWidth,
+ bottom: props.mapBounds.maxY,
+ top: props.mapBounds.minY,
+ left: props.mapBounds.minX,
+ right: props.mapBounds.maxX,
})
.clampZoom({
minScale: 0.4,
maxScale: 8,
});
- return viewport;
+ // return viewport;
},
applyProps(instance, oldProps, newProps) {
if (