Add testing modes + different mouse types;

This commit is contained in:
Benjamin Bouvier 2019-07-04 13:45:10 +02:00
parent 28602d3501
commit b6ae13bf80

View File

@ -114,8 +114,6 @@
<script> <script>
document.addEventListener('DOMContentLoaded', function() { document.addEventListener('DOMContentLoaded', function() {
const WAIT_TIMEOUT = 3000;
// x=0 ----> // x=0 ---->
// y=0 // y=0
// | // |
@ -127,40 +125,23 @@
// Values in pixels. // Values in pixels.
const START_BUTTON_HEIGHT = 100; const START_BUTTON_HEIGHT = 100;
const START_BUTTON_WIDTH = 300; const START_BUTTON_WIDTH = 300;
const BOX_WIDTH = 500; const BOX_WIDTH = 500;
const BUTTON_Y_OFFSET_FROM_BOTTOM = 60; const BUTTON_Y_OFFSET_FROM_BOTTOM = 60;
//document.onmousemove = function(event) { //document.addEventListener('mousedown', function(event) {
// console.log(`x=${event.pageX}, y=${event.pageY}`); // console.log('document', event);
//} //});
// Parameters that can be tweaked.
const WAIT_TIMEOUT = 8000;
const DISPATCH_ON_CANVAS = true;
const TEST_MODE = false;
setTimeout(function() { setTimeout(function() {
let $canvas = document.getElementById("#canvas"); let $canvas = document.getElementById("#canvas");
document.addEventListener('mousedown', function(event) { function dispatchOne(eventName, x, y) {
console.log(`onmousedown client x=${event.clientX}, y=${event.clientY}`); let ev = new MouseEvent(eventName, {
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, {
clientX: x, clientX: x,
clientY: y, clientY: y,
screenX: x, screenX: x,
@ -170,9 +151,50 @@
bubbles: true, bubbles: true,
}); });
document.dispatchEvent(click); if (DISPATCH_ON_CANVAS) {
//$canvas.dispatchEvent(click); $canvas.dispatchEvent(ev);
console.warn('click done'); } 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); }, WAIT_TIMEOUT);
}); });