Browse Source

Add testing modes + different mouse types;

master
Benjamin Bouvier 2 years ago
parent
commit
dc2c9a6a32
  1. 84
      index.html

84
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 = true;
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,48 @@
bubbles: true,
});
document.dispatchEvent(click);
//$canvas.dispatchEvent(click);
console.warn('click done');
if (DISPATCH_ON_CANVAS) {
$canvas.dispatchEvent(ev);
} else {
document.dispatchEvent(ev);
}
}
//$canvas.addEventListener('mousedown', function(event) {
// console.log(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);
});

Loading…
Cancel
Save