diff --git a/src/lib/index.js b/src/lib/index.js index 37a3f55..9beaa35 100644 --- a/src/lib/index.js +++ b/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.save() + ctx.lineWidth = 1 / global_scale 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 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) } }