Fix tilemap scene layout offset

Author: hacktoon

src/model/tilemap/worldmap/zone/surface/index.js

@@ -42,7 +42,7 @@ export class SurfaceZone {
                 const zoneCanvasPoint = Point.plus(canvasPoint, [ySize, xSize])
                 const surface = this.get(zonePoint)
                 let color = surface.color
-                if (Point.equals(tilePoint, [39, 8])) {
+                if (Point.equals(tilePoint, [43, 4])) {
                     const regionId = this._regionGrid.get(zonePoint)
                     const regionColor = this._regionColorMap.get(regionId)
                     color = regionColor.average(color).average(color)

src/model/tilemap/worldmap/zone/surface/model.js

@@ -75,9 +75,10 @@ function isWaterChannel(context, direction) {
 }
 
 
-function selectRegionsInLine(context, target, direction) {
+function selectRegionsInLine(context, midPoint, direction) {
     const {worldPoint, regionGrid, zoneRect} = context
     const regions = []
+    direction.axis
     // regionGrid.get(zonePoint)
     return regions
 }
@@ -91,6 +92,9 @@ function buildLandMaskGrid(context) {
     const relativePoint = Point.multiplyScalar(worldPoint, zoneRect.width)
     const noiseRect = Rect.multiply(rect, zoneRect.width)
     return Grid.fromRect(zoneRect, zonePoint => {
+        // if (! world.surface.isBorder(worldPoint)) {
+        //     return world.surface.isLand(worldPoint)
+        // }
         const noisePoint = Point.plus(relativePoint, zonePoint)
         const noise = world.noise.get4DZoneOutline(noiseRect, noisePoint)
         return noise > SURFACE_NOISE_RATIO

src/model/tilemap/worldmap/zone/surface/region.js

@@ -7,7 +7,7 @@ import { EvenPointSampling } from '/src/lib/geometry/point/sampling'
 
 
 const EMPTY = null
-const REGION_SCALE = [2, 3]  // distance between region origins
+const REGION_SCALE = 3  // distance between region origins
 const REGION_GROWTH = [2, 1]
 const REGION_CHANCE = .1
 
@@ -16,7 +16,7 @@ export function buildRegionGridMap(context) {
     const {zoneRect} = context
     // create a grid with many regions fragmenting the zone map
     const regionGrid = Grid.fromRect(zoneRect, () => EMPTY)
-    const origins = EvenPointSampling.create(zoneRect, Random.choiceFrom(REGION_SCALE))
+    const origins = EvenPointSampling.create(zoneRect, REGION_SCALE)
     const originMap = new Map()
     const regionColorMap = new Map()
     // region type  {id: water | land}

src/ui/css/tilemap.css

@@ -35,6 +35,10 @@
     padding: 0 .5rem;
 }
 
+.UITileMap .UITileMapScene .UITileMapSceneView {
+    position: relative;
+}
+
 .UITileMap .UITileMapScene .UITileMapSceneContent {
     background-color: #FFF;
     background-image: linear-gradient(45deg, #E8E8E8 25%, transparent 25%),
@@ -43,10 +47,13 @@
         linear-gradient(-45deg, transparent 75%, #E8E8E8 75%);
     background-size: 20px 20px;
     background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
-    position: relative;
+    position: absolute;
+    top: 0px;
+    right: 0px;
+    bottom: 0px;
+    left: 0px;
 }
 
-
 .UITileMap .UITileMapScene .MouseTrack {
     box-shadow: inset 0 0 .5rem #000;
 }

src/ui/tilemap/scene.js

@@ -16,11 +16,13 @@ const ZOOM_INCREMENT = 10
 export function UITileMapScene(props) {
     const viewportRef = useRef(null)
     const viewport = useResize(viewportRef)
-    return <section className="UITileMapScene" ref={viewportRef}>
+    return <section className="UITileMapScene">
         <section className="UITileMapSceneDashboard">
             <Text>Seed: {props.tileMap.seed}, {props.tileMap.getDescription()}</Text>
         </section>
-        <UITileMapSceneContent viewport={viewport} {...props} />
+        <section className="UITileMapSceneView" ref={viewportRef}>
+            <UITileMapSceneContent viewport={viewport} {...props} />
+        </section>
     </section>
 }