Move global offset/scale out of draw functions

src/lib/index.js

@@ -1,5 +1,8 @@
 console.log('import entrypoint lib')
 
+let global_scale = 1
+let global_offset = [0, 0]
+
 const cos_60 = Math.cos(60 * Math.PI / 180)
 const sin_60 = Math.sin(60 * Math.PI / 180)
 
@@ -33,7 +36,22 @@ class TileGrid {
   }
 }
 
-function draw_hex_tile(ctx, center, size, type) {  
+
+function tile_index_to_coord(x, y) {
+  const x_stride = 2 * cos_60 + 2 
+  const y_stride = sin_60
+  let x_offset = 0
+  if (y % 2 === 0) {
+    x_offset = 1 + cos_60
+  }
+  return [x * x_stride + x_offset, y * y_stride]
+}
+
+function draw_hex_tile(ctx, index, type) {  
+  const center = tile_index_to_coord(index[0], index[1])
+  const radius = 1
+
+  ctx.save()
   switch(type) {
     case TileType.LAND: 
       ctx.fillStyle = 'green'
@@ -43,10 +61,11 @@ function draw_hex_tile(ctx, center, size, type) {
       break
   }
   ctx.strokeStyle = 'black'
-
+  ctx.lineWidth = 1 / global_scale
-  ctx.save()
   ctx.translate(center[0], center[1])
-  ctx.scale(size[0], size[1])
+  ctx.scale(radius, radius)
+  
+  ctx.save()
   ctx.beginPath()
   ctx.moveTo(-1, 0)
   ctx.lineTo(-cos_60, sin_60)
@@ -54,35 +73,94 @@ function draw_hex_tile(ctx, center, size, type) {
   ctx.lineTo(1, 0)
   ctx.lineTo(cos_60, -sin_60)
   ctx.lineTo(-cos_60, -sin_60)
-  ctx.lineTo(-1, 0)
+  ctx.lineTo(-1, 0)  
   ctx.restore()
+  
   ctx.fill()
   ctx.stroke()
+  ctx.restore()
 }
 
-function draw_map(ctx, scale, offset) {
+function draw_map(ctx) {
   const tile_grid = new TileGrid(100, 100)
   tile_grid.set_tile(2, 2, TileType.WATER)
   tile_grid.set_tile(50, 10, TileType.WATER)
 
-  const x_stride = 2 * cos_60 + 2 
+  
-  const y_stride = sin_60
   for (let y=0; y<tile_grid.height; y++) {
     for (let x=0; x<tile_grid.width; x++) {
-      let x_offset = 0
+      
-      if (y % 2 === 0) {
+      draw_hex_tile(ctx, [x, y], tile_grid.get_tile(x, y))
-        x_offset = 1 + cos_60
+      const coord = tile_index_to_coord(x, y)
+      
+      if (global_scale > 15) {
+        ctx.save()
+        ctx.translate(coord[0], coord[1]) 
+        ctx.scale(1/global_scale, 1/global_scale)
+        ctx.font = "12px Arial"
+        ctx.fillStyle = "black"
+        ctx.textAlign = "center"
+        ctx.fillText(String([x, y]), 0, 0)
+        ctx.restore()
       }
-      draw_hex_tile(ctx, [(x * x_stride + x_offset) * scale + offset[0], y * y_stride * scale + offset[1]], [scale, scale], tile_grid.get_tile(x, y))
     }
   }
 }
 
+function draw_tower(ctx, index) {
+  const coord = tile_index_to_coord(index[0], index[1])
+
+  const radius_1 = 0.35
+  const radius_2 = 0.3
+  const height_1 = 1.1
+  const height_2 = 1.6
+
+  ctx.save()
+  ctx.lineWidth = 1 / global_scale
+  ctx.translate(coord[0], coord[1])
+
+  ctx.fillStyle = "gray"
+  ctx.strokeStyle = "black"  
+  ctx.beginPath()
+  ctx.arc(0, 0, radius_1, 0, Math.PI)
+  ctx.lineTo(-radius_2, -height_1)
+  ctx.arc(0, -height_1, radius_2, Math.PI, 0, true)
+  ctx.lineTo(radius_1, 0)
+  ctx.fill()
+  ctx.stroke()
+
+  ctx.fillStyle = "darkred"
+  ctx.strokeStyle = "black"
+  ctx.beginPath()
+  ctx.arc(0, -height_1, radius_2, Math.PI, 0, true)
+  ctx.lineTo(0, -height_2)
+  ctx.lineTo(-radius_2, -height_1)
+  ctx.fill()
+  ctx.stroke()
+
+  ctx.restore()
+}
+
+function draw(ctx, offset, scale) {
+  global_scale = scale
+  global_offset = offset
+
+  ctx.translate(global_offset[0], global_offset[1])
+  ctx.scale(global_scale, global_scale)
+
+  draw_map(ctx)
+
+  let towers = [[2, 0], [2, 1], [3, 1], [2, 3], [3, 3], [2, 4]]
+  for (let i=0; i<6; i++) {
+    draw_tower(ctx, towers[i])
+  }
+}
+
 export function main(canvas) {
   console.log('entrypoint function')
   console.log(canvas)
   if (canvas.getContext) {
     const ctx = canvas.getContext('2d')
-    draw_map(ctx, 10, [50, 50])
+    draw(ctx, [100, 100], 10)
   }
 }