Add mouse listeners

src/components.js/Canvas.js

@@ -1,5 +1,14 @@
 import React, { useLayoutEffect, useRef } from 'react'
-import { main } from '../lib'
+import {
+  main,
+  mousedown,
+  mousemove,
+  mouseup,
+  click,
+  dblclick,
+  mouseenter,
+  mouseleave
+} from '../lib'
 
 import styles from './Canvas.css'
 
@@ -7,7 +16,16 @@ export const Canvas = () => {
   const canvasRef = useRef(null)
 
   useLayoutEffect(() => {
-    main(canvasRef.current)
+    const canvas = canvasRef.current
+    main(canvas)
+
+    canvas.addEventListener('mousedown', mousedown)
+    canvas.addEventListener('mouseup', mouseup)
+    canvas.addEventListener('mousemove', mousemove)
+    canvas.addEventListener('click', click)
+    canvas.addEventListener('dblclick', dblclick)
+    canvas.addEventListener('mouseenter', mouseenter)
+    canvas.addEventListener('mouseout', mouseleave)
   })
 
   return (

src/lib/index.js

@@ -3,12 +3,12 @@ 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)
+const cos_60 = Math.cos((60 * Math.PI) / 180)
+const sin_60 = Math.sin((60 * Math.PI) / 180)
 
 const TileType = {
-  LAND : 0,
-  WATER : 1
+  LAND: 0,
+  WATER: 1
 }
 
 class TileGrid {
@@ -16,8 +16,8 @@ class TileGrid {
     this.width = 100
     this.height = 100
     this.tiles = new Array(this.width * this.height)
-    for (let y=0; y<this.height; y++) {
-      for (let x=0; x<this.width; x++) {
+    for (let y = 0; y < this.height; y++) {
+      for (let x = 0; x < this.width; x++) {
         this.tiles[this.get_index(x, y)] = TileType.LAND
       }
     }
@@ -36,9 +36,8 @@ class TileGrid {
   }
 }
 
-
 function tile_index_to_coord(x, y) {
-  const x_stride = 2 * cos_60 + 2 
+  const x_stride = 2 * cos_60 + 2
   const y_stride = sin_60
   let x_offset = 0
   if (y % 2 === 0) {
@@ -47,16 +46,16 @@ function tile_index_to_coord(x, y) {
   return [x * x_stride + x_offset, y * y_stride]
 }
 
-function draw_hex_tile(ctx, index, type) {  
+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: 
+  switch (type) {
+    case TileType.LAND:
       ctx.fillStyle = 'green'
       break
-    case TileType.WATER: 
+    case TileType.WATER:
       ctx.fillStyle = 'blue'
       break
   }
@@ -64,7 +63,7 @@ function draw_hex_tile(ctx, index, type) {
   ctx.lineWidth = 1 / global_scale
   ctx.translate(center[0], center[1])
   ctx.scale(radius, radius)
-  
+
   ctx.save()
   ctx.beginPath()
   ctx.moveTo(-1, 0)
@@ -73,9 +72,9 @@ function draw_hex_tile(ctx, index, 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()
@@ -86,20 +85,18 @@ function draw_map(ctx) {
   tile_grid.set_tile(2, 2, TileType.WATER)
   tile_grid.set_tile(50, 10, TileType.WATER)
 
-  
-  for (let y=0; y<tile_grid.height; y++) {
-    for (let x=0; x<tile_grid.width; x++) {
-      
+  for (let y = 0; y < tile_grid.height; y++) {
+    for (let x = 0; x < tile_grid.width; x++) {
       draw_hex_tile(ctx, [x, y], tile_grid.get_tile(x, y))
       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.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()
       }
@@ -119,8 +116,8 @@ function draw_tower(ctx, index) {
   ctx.lineWidth = 1 / global_scale
   ctx.translate(coord[0], coord[1])
 
-  ctx.fillStyle = "gray"
-  ctx.strokeStyle = "black"  
+  ctx.fillStyle = 'gray'
+  ctx.strokeStyle = 'black'
   ctx.beginPath()
   ctx.arc(0, 0, radius_1, 0, Math.PI)
   ctx.lineTo(-radius_2, -height_1)
@@ -129,8 +126,8 @@ function draw_tower(ctx, index) {
   ctx.fill()
   ctx.stroke()
 
-  ctx.fillStyle = "darkred"
-  ctx.strokeStyle = "black"
+  ctx.fillStyle = 'darkred'
+  ctx.strokeStyle = 'black'
   ctx.beginPath()
   ctx.arc(0, -height_1, radius_2, Math.PI, 0, true)
   ctx.lineTo(0, -height_2)
@@ -150,8 +147,15 @@ function draw(ctx, offset, 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++) {
+  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])
   }
 }
@@ -164,3 +168,25 @@ export function main(canvas) {
     draw(ctx, [100, 100], 10)
   }
 }
+
+export function mousedown(evt) {
+  console.log(evt)
+}
+export function mouseup(evt) {
+  console.log(evt)
+}
+export function mousemove(evt) {
+  // console.log(evt)
+}
+export function click(evt) {
+  console.log(evt)
+}
+export function dblclick(evt) {
+  console.log(evt)
+}
+export function mouseenter(evt) {
+  console.log(evt)
+}
+export function mouseleave(evt) {
+  console.log(evt)
+}