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,8 +3,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 cos_60 = Math.cos((60 * Math.PI) / 180)
-const sin_60 = Math.sin(60 * Math.PI / 180)
+const sin_60 = Math.sin((60 * Math.PI) / 180)
 
 const TileType = {
   LAND: 0,
@@ -36,7 +36,6 @@ class TileGrid {
   }
 }
 
-
 function tile_index_to_coord(x, y) {
   const x_stride = 2 * cos_60 + 2
   const y_stride = sin_60
@@ -86,10 +85,8 @@ 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++) {
-      
       draw_hex_tile(ctx, [x, y], tile_grid.get_tile(x, y))
       const coord = tile_index_to_coord(x, y)
 
@@ -97,9 +94,9 @@ function draw_map(ctx) {
         ctx.save()
         ctx.translate(coord[0], coord[1])
         ctx.scale(1 / global_scale, 1 / global_scale)
-        ctx.font = "12px Arial"
+        ctx.font = '12px Arial'
-        ctx.fillStyle = "black"
+        ctx.fillStyle = 'black'
-        ctx.textAlign = "center"
+        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.fillStyle = 'gray'
-  ctx.strokeStyle = "black"  
+  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.fillStyle = 'darkred'
-  ctx.strokeStyle = "black"
+  ctx.strokeStyle = 'black'
   ctx.beginPath()
   ctx.arc(0, -height_1, radius_2, Math.PI, 0, true)
   ctx.lineTo(0, -height_2)
@@ -150,7 +147,14 @@ function draw(ctx, offset, scale) {
 
   draw_map(ctx)
 
-  let towers = [[2, 0], [2, 1], [3, 1], [2, 3], [3, 3], [2, 4]]
+  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)
+}