From b6ae13bf80dc68b20ec96409015a8fd7cebd20f1 Mon Sep 17 00:00:00 2001
From: Benjamin Bouvier <public@benj.me>
Date: Thu, 4 Jul 2019 13:45:10 +0200
Subject: [PATCH] Add testing modes + different mouse types;

---
 index.html | 86 ++++++++++++++++++++++++++++++++++--------------------
 1 file changed, 54 insertions(+), 32 deletions(-)

diff --git a/index.html b/index.html
index e1ec61c..a3c50d9 100644
--- a/index.html
+++ b/index.html
@@ -114,8 +114,6 @@
 
     <script>
         document.addEventListener('DOMContentLoaded', function() {
-            const WAIT_TIMEOUT = 3000;
-
             //     x=0 ---->
             // y=0
             // |
@@ -127,40 +125,23 @@
             // Values in pixels.
             const START_BUTTON_HEIGHT = 100;
             const START_BUTTON_WIDTH = 300;
-
             const BOX_WIDTH = 500;
-
             const BUTTON_Y_OFFSET_FROM_BOTTOM = 60;
 
-            //document.onmousemove = function(event) {
-            //    console.log(`x=${event.pageX}, y=${event.pageY}`);
-            //}
+            //document.addEventListener('mousedown', function(event) {
+            //    console.log('document', event);
+            //});
+
+            // Parameters that can be tweaked.
+            const WAIT_TIMEOUT = 8000;
+            const DISPATCH_ON_CANVAS = true;
+            const TEST_MODE = false;
 
             setTimeout(function() {
                 let $canvas = document.getElementById("#canvas");
 
-                document.addEventListener('mousedown', function(event) {
-                    console.log(`onmousedown client x=${event.clientX}, y=${event.clientY}`);
-                    console.log(`onmousedown page x=${event.pageX}, y=${event.pageY}`);
-                    console.log(event);
-                });
-
-                let x = Math.max(0, (window.innerWidth - $canvas.width) / 2); // $canvas x offset
-                x = x + ($canvas.width - BOX_WIDTH) / 2; // box x offset
-                //let x = ($canvas.width - BOX_WIDTH) / 2;
-                x = x + (BOX_WIDTH - START_BUTTON_WIDTH) / 2; // left of start button
-                x = x + START_BUTTON_WIDTH / 2; // ~ middle of start button x
-
-                let y = (window.innerHeight - $canvas.height) / 2; // $canvas y offset
-                y = y + $canvas.height; // $canvas bottom
-                //let y = $canvas.height;
-                y = y - BUTTON_Y_OFFSET_FROM_BOTTOM; // start button bottom
-                y = y - START_BUTTON_HEIGHT / 2; // ~ middle of start button y
-
-                console.warn(`clicking x=${x}, y=${y}!`);
-
-                for (let name of ['mousedown', 'click']) {
-                    let click = new MouseEvent(name, {
+                function dispatchOne(eventName, x, y) {
+                    let ev = new MouseEvent(eventName, {
                         clientX: x,
                         clientY: y,
                         screenX: x,
@@ -170,9 +151,50 @@
                         bubbles: true,
                     });
 
-                    document.dispatchEvent(click);
-                    //$canvas.dispatchEvent(click);
-                    console.warn('click done');
+                    if (DISPATCH_ON_CANVAS) {
+                        $canvas.dispatchEvent(ev);
+                    } else {
+                        document.dispatchEvent(ev);
+                    }
+                }
+
+                for (let name of ['mousemove', 'mousedown', 'mouseup', 'click']) {
+                    $canvas.addEventListener(name, function(event) {
+                        console.log(name, event);
+                    });
+                }
+
+                let x, y;
+                if (DISPATCH_ON_CANVAS) {
+                    x = ($canvas.width - BOX_WIDTH) / 2; // box x offset
+                    y = $canvas.height;
+                } else {
+                    x = Math.max(0, (window.innerWidth - $canvas.width) / 2); // $canvas x offset
+                    x = x + ($canvas.width - BOX_WIDTH) / 2; // box x offset
+
+                    y = (window.innerHeight - $canvas.height) / 2; // $canvas y offset
+                    y = y + $canvas.height; // $canvas bottom
+                }
+
+                x = x + (BOX_WIDTH - START_BUTTON_WIDTH) / 2; // left of start button
+                x = x + START_BUTTON_WIDTH / 2; // ~ middle of start button x
+
+                y = y - BUTTON_Y_OFFSET_FROM_BOTTOM; // start button bottom
+                y = y - START_BUTTON_HEIGHT / 2; // ~ middle of start button y
+
+                if (TEST_MODE) {
+                    for (let eventName of ['mousedown', 'mousemove', 'mouseup', 'click']) {
+                        for (let x = 0; x < $canvas.width; x += 10) {
+                            for (let y = 0; y < $canvas.height; y += 10) {
+                                dispatchOne(eventName, x, y);
+                            }
+                        }
+                        console.log(`done with ${eventName}!`);
+                    }
+                    console.log('done with all click types')
+                } else {
+                    console.warn(`clicking x=${x}, y=${y}!`);
+                    dispatchOne('mousedown', x, y);
                 }
             }, WAIT_TIMEOUT);
         });