Show & control basin chunk

Author: hacktoon

src/model/tilemap/worldmap/index.js

@@ -29,12 +29,11 @@ import { WorldTileMapDiagram } from './diagram'
 
 
 const WORLD_SIZE = 32
-const CHUNK_SIZE = 13
-const CHUNK_RECT = new Rect(CHUNK_SIZE, CHUNK_SIZE)
 
 const SCHEMA = new Schema(
     'WorldTileMap',
-    Type.number('size', 'Size', { default: WORLD_SIZE, min: WORLD_SIZE, max: WORLD_SIZE }),
+    Type.number('size', 'Size', { default: WORLD_SIZE, min: 16, max: 128 }),
+    Type.number('chunk', 'Chunk', {step: 2, default: 15, min: 7, max: 19}),
     Type.text('seed', 'Seed', { default: '' }),
     Type.number('realms', 'Realms', { default: 8, min: 3, max: 8 }),
 )
@@ -50,28 +49,34 @@ export class WorldTileMap extends TileMap {
     }
 
     #chunkCache
+    #chunkRect
 
     constructor(params) {
         super(params)
+        const worldSize = params.get('size')
+        const chunkSize = params.get('chunk')
+        this.params = params
         this.name = Random.choiceFrom(WORLD_NAMES)
+        this.#chunkRect = new Rect(chunkSize, chunkSize)
+        this.#chunkCache = new FIFOCache(worldSize * worldSize)
         this.world = this.#buildWorld(params, this.rect)
-        this.#chunkCache = new FIFOCache(WORLD_SIZE * WORLD_SIZE)
     }
 
     #buildWorld(params, rect) {
         const start = performance.now()
+        const chunkSize = params.get('chunk')
         // set a global struct for world
         const world = {
             rect,
             seed: this.seed,
-            size: WORLD_SIZE,
-            chunkSize: CHUNK_SIZE,
+            size: params.get('size'),
+            chunkSize,
         }
         const context = {
-            world,
             rect,
-            chunkSize: CHUNK_SIZE,
-            chunkRect: CHUNK_RECT,
+            world,
+            chunkSize,
+            chunkRect: this.#chunkRect,
             realmCount: params.get('realms')
         }
         // The world creation follows order below
@@ -111,17 +116,18 @@ export class WorldTileMap extends TileMap {
         // geração de seed específica para a zona
         // para evitar que zonas adjacentes tenham o mesmo conteúdo
         const seed = `${this.seed}-${Point.hash(worldPoint)}`
+        const chunkSize = this.params.get('chunk')
         Random.seed = seed  // change seed for this specific chunk
         // set chunk object
         const chunk = {
-            size: CHUNK_SIZE
+            size: chunkSize
         }
         // set context for
         const context = {
             rect: this.rect,
             world: this.world,
-            chunkSize: CHUNK_SIZE,
-            chunkRect: CHUNK_RECT,
+            chunkSize,
+            chunkRect: this.#chunkRect,
             worldPoint,
             chunk,
             seed

src/model/tilemap/worldmap/world/basin/chunk/index.js

@@ -16,26 +16,29 @@ export class BasinChunk {
     }
 
     draw(props, params) {
-        const {chunk} = props
-        chunk.surface.draw(props, params)
-        this._drawPaths(props, params)
-    }
-
-    _drawPaths(props, params, color='#2f367d') {
         const {canvas, canvasPoint, tilePoint, tileSize, world, chunk} = props
         const chunkTileSize = tileSize / chunk.size
         const basin = world.basin.get(tilePoint)
         if (tileSize < 10) return
+        const showErosion = params.get('showErosion')
+        let color
         for (let x=0; x < chunk.size; x++) {
             const xSize = x * chunkTileSize
             for (let y=0; y < chunk.size; y++) {
                 const chunkPoint = [y, x]
                 const ySize = y * chunkTileSize
                 let chunkCanvasPoint = Point.plus(canvasPoint, [ySize, xSize])
-                if (this.has(chunkPoint)) {
-                    canvas.rect(chunkCanvasPoint, chunkTileSize, color)
+                if (showErosion && this.has(chunkPoint)) {
+                    color = '#3f4693'
+                } else {
+                    color = '#2f367d'
+                    if (chunk.surface.isLand(chunkPoint)) {
+                        color = '#52a83f'
+                    }
+
                 }
-                if (Point.equals(basin.midpoint, chunkPoint)) {
+                canvas.rect(chunkCanvasPoint, chunkTileSize, color)
+                if (showErosion && Point.equals(basin.midpoint, chunkPoint)) {
                     canvas.rect(chunkCanvasPoint, chunkTileSize, Color.RED.toHex())
                 }
             }

src/model/tilemap/worldmap/world/basin/model.js

@@ -153,11 +153,6 @@ class LandBasinFill extends ConcurrentFill {
         const survey = surveyMap.get(fill.id)
         // the basin opposite border is the parentPoint
         this._fillBasin(fill, fillPoint, survey.oppositeBorder)
-        // update erosion path
-        for (let neighbor of survey.waterNeighbors) {
-            const direction = Point.directionBetween(fillPoint, neighbor)
-            model.directionBitmap.add(fillPoint, direction)
-        }
     }
 
     onFill(fill, fillPoint, parentPoint) {
@@ -239,9 +234,15 @@ class WaterBasinFill extends ConcurrentFill {
         // discover adjacent river and water tiles
         Point.adjacents(fillPoint, (sidePoint, direction) => {
             if (world.surface.isLand(sidePoint)) {
-                model.erosion.set(fillPoint, direction.id)
+                const sideDirection = Direction.fromId(model.erosion.get(sidePoint))
+                const mouth = Point.atDirection(sidePoint, sideDirection)
+                if (Point.equals(mouth, fillPoint)) {
+                    model.directionBitmap.add(fillPoint, direction)
+                    model.erosion.set(fillPoint, direction.id)
+                }
+            } else {
+                model.directionBitmap.add(fillPoint, direction)
             }
-            model.directionBitmap.add(fillPoint, direction)
         })
         // diagonals later, only to non-border water sides
         Point.diagonals(fillPoint, (sidePoint, direction) => {