expand click range for dots

edloper · Dec 8, 2024 · 3e65d6e · 3e65d6e
1 parent cdd022f
commit 3e65d6e
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 7 deletions.
diff --git a/game_fullscreen.html b/game_fullscreen.html
@@ -84,7 +84,7 @@
 </head>
 <body class="fullscreen" style>
   <div id="levelPicker">
-    Testing 3
+    Testing 4
     <img src="images/titles/title2.jpg" class="missingLinkTitle">
   </div>
   <div id="game" style="display: none"></div>

diff --git a/javascript/game.js b/javascript/game.js
@@ -202,11 +202,8 @@ class Game {
 	    jsonString,
 	    (x, y) => {
 		const dot = this.graph.addDot(x, y);
-		dot.circle.on('mousedown', (e) => { this.mouseHandler.mouseDown(e, dot); });
-		dot.text.on('mousedown', (e) => { this.mouseHandler.mouseDown(e, dot); });
-		// Touch support.
-		dot.circle.on('touchstart', (e) => { this.mouseHandler.mouseDown(e, dot); });
-		dot.text.on('touchstart', (e) => { this.mouseHandler.mouseDown(e, dot); });
+		dot.on('mousedown', (e) => { this.mouseHandler.mouseDown(e, dot); });
+		dot.on('touchstart', (e) => { this.mouseHandler.mouseDown(e, dot); });
 		return dot;
 	    },
 	    (corners, color) => {

diff --git a/javascript/graph.js b/javascript/graph.js
@@ -6,13 +6,15 @@ class Graph {
 	this.tris = []
 	this.edges = [];
 	this.alpha = 0.5;
+	this.clickCircleRadius = 20;
 
 	// Place each object type before its layerMarker in the stacking order.
 	this.layerMarkers = {
 	    bottom: draw.rect(0, 0),
 	    image: draw.rect(0, 0),
 	    tris: draw.rect(0, 0),
 	    edges: draw.rect(0, 0),
+	    dotClickCircles: draw.rect(0, 0),
 	    dots: draw.rect(0, 0),
 	    top: draw.rect(0, 0),
 	}
@@ -259,22 +261,28 @@ class Edge {
   */
 class Dot {
     constructor(graph, x, y) {
+	this.graph = graph;
 	this.isSelected = false;
 	this.tris = []  // Triangles that this dot is a corner for.
 	this.edges = []  // Edges connected to this dot.
 	this.circle = graph.draw.circle().stroke({width: 2, color: 'black'});
+	this.clickCircle = graph.draw.circle();
+	this.clickCircle.fill('rgba(0,0,0,0)');
 	this.text = graph.draw.plain()
 	    .font({anchor: 'middle', 'dominant-baseline': 'central'})
 	    .fill("white").plain('');
 	this.textString = '';
-	this.text.node.style = 'user-select: none';
+	this.text.node.style = 'user-select: none; pointer-events: none';
+	this.circle.node.style = 'user-select: none'
 	this.text.hide();
 	this.move(x, y);
 	this.circle.radius(6);
+	this.clickCircle.radius(graph.clickCircleRadius);
 	this.setSelected(false);
 	this.maxEdges = null;
 	this.circle.insertBefore(graph.layerMarkers.dots);
 	this.text.insertBefore(graph.layerMarkers.dots);
+	this.clickCircle.insertBefore(graph.layerMarkers.dotClickCircles);
     }
 
     hide() {
@@ -333,6 +341,9 @@ class Dot {
 	this.circle.radius(0);
 	this.circle.move(x, y);
 	this.circle.radius(radius);
+	this.clickCircle.radius(0);
+	this.clickCircle.move(x, y);
+	this.clickCircle.radius(this.graph.clickCircleRadius);
 	this.text.amove(x, y);
 	this.tris.forEach((tri) => tri.update());
     }
@@ -349,8 +360,14 @@ class Dot {
     destroy() {
 	this.circle.remove();
 	this.text.remove();
+	this.clickCircle.remove();
 	this.circle = null;
     }
+
+    on(eventName, callback) {
+	this.circle.on(eventName, callback);
+	this.clickCircle.on(eventName, callback);
+    }
 }
 
 class Tri{