地形上グリッドの番号を絶対基準にあわせる処理

usaturn · Feb 7, 2023 · 2ed8de4 · 2ed8de4
1 parent fe904d9
commit 2ed8de4
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 3 deletions.
diff --git a/src/app/component/game-table/grid-line-render.ts b/src/app/component/game-table/grid-line-render.ts
@@ -20,20 +20,34 @@ export class GridLineRender {
     return context
   }
 
-  render(width: number, height: number, gridSize: number = 50, gridType: GridType = GridType.SQUARE, gridColor: string = '#000000e6') {
+  render(width: number, height: number, gridSize: number = 50, gridType: GridType = GridType.SQUARE, gridColor: string = '#000000e6', overTerrain = false, offsetTop: number = 0, offsetLeft: number = 0) {
     this.canvasElement.width = width * gridSize;
     this.canvasElement.height = height * gridSize;
     let context: CanvasRenderingContext2D = this.canvasElement.getContext('2d');
 
     if (gridType < 0) return;
 
+    let offTop = overTerrain ? (Math.floor( offsetTop / gridSize) + 1) : 0;
+    let offLeft = overTerrain ? (Math.floor( offsetLeft / gridSize) + 1) : 0;
+
     let calcGridPosition: StrokeGridFunc = this.generateCalcGridPositionFunc(gridType);
     this.makeBrush(context, gridSize, gridColor);
     for (let h = 0; h <= height; h++) {
       for (let w = 0; w <= width; w++) {
         let { gx, gy } = calcGridPosition(w, h, gridSize);
         this.strokeSquare(context, gx, gy, gridSize);
-        context.fillText((w + 1).toString() + '-' + (h + 1).toString(), gx + (gridSize / 2), gy + (gridSize / 2));
+
+        let hexOffsetTop = 0;
+        let hexOffsetLeft = 0;
+
+        if( overTerrain && gridType == GridType.HEX_VERTICAL){
+          hexOffsetTop = (offLeft % 2 == 1) && (( w + 1 + offLeft) % 2 == 1) ? -1: 0;
+        }
+        if( overTerrain && gridType == GridType.HEX_HORIZONTAL){
+          hexOffsetLeft = (offTop % 2 == 1) && (( h + 1 + offTop) % 2 == 1) ? -1: 0;
+        }
+
+        context.fillText((w + 1 + offLeft + hexOffsetLeft).toString() + '-' + (h + 1 + offTop + hexOffsetTop).toString(), gx + (gridSize / 2), gy + (gridSize / 2));
       }
     }
   }

diff --git a/src/app/component/terrain/terrain.component.ts b/src/app/component/terrain/terrain.component.ts
@@ -449,7 +449,11 @@ export class TerrainComponent implements OnInit, OnDestroy, AfterViewInit{
   private setGameTableGrid(width: number, height: number, gridSize: number = 50, gridType: GridType = GridType.SQUARE, gridColor: string = '#000000e6') {
 
     let render = new GridLineRender(this.gridCanvas.nativeElement);
-    render.render(width, height, gridSize, gridType, gridColor);
+
+    let leftPx = this.terrain.location.x - ( width / 2 );
+    let topPx = this.terrain.location.y - ( height / 2 );
+
+    render.render(width, height, gridSize, gridType, gridColor, true, topPx, leftPx);
     let opacity: number = 0.0;
     setTimeout(() => { // 他PL操作で表示条件変更時、情報更新されてからUpdate処理をするため
       if (this.terrain.isGrid){