Checkbox Olympics

  var simulateClick = function (elem) {
   // Create our event (with options)
   var evt = new MouseEvent('click', {
    bubbles: true,
    cancelable: true,
    view: window
   });

   // If cancelled, don't dispatch our event
   var canceled = !elem.dispatchEvent(evt);
  };

  var run = () => {    
    var el = document.querySelector('input[type=checkbox]:not(:checked)')
    simulateClick(el)
  }
                     
  setInterval(run, 100)

Re: Checkbox Olympics

#7

Post by texaslonghorn5 » Tue, Jun 21, 2022, 5:38 AM UTC

Cool game! Doesn't really work for me on mobile because the second box is obscured by the SET button.

Re: Checkbox Olympics

#8

Post by forty » Tue, Jun 21, 2022, 6:04 AM UTC

texaslonghorn5 wrote: post #7

Cool game! Doesn't really work for me on mobile because the second box is obscured by the SET button.

Click "ready" then wait for the "Go" to go green. Then you can start racing, and here at least, I was able to click through the Set light

Re: Checkbox Olympics

#9

Post by chrismorgan » Tue, Jun 21, 2022, 6:05 AM UTC

klenwell wrote: post #6

My "speedrun": var simulateClick = function (elem) { // Create our event (with options) var evt = new MouseEvent('click', { bubbles: true, cancelable: true, view: window }); // If cancelled, don't dispatch our event var canceled = !elem.dispatchEvent(evt); }; var run = () => { var el = document.querySelector('input[type=checkbox]:not(:checked)') simulateClick(el) } setInterval(run, 100)

My tool-assisted speedrun (0.001s):

  let setGo = document.querySelector(".setGo");
  let observer = new MutationObserver(mutations => {
      if (setGo.classList.contains("going")) {
          for (const { target } of mutations) {
              if (target.checked == target.disabled) {
                  target.click();
              }
          }
      }
  });
  observer.observe(setGo, {attributes: true});
  document.querySelectorAll(".theSport input").forEach(checkbox => {
      observer.observe(checkbox, {attributes: true});
  });

Explanation: instead of messing about with timers, it asks to be informed when any attribute changes (could use attributeFilter to only hear about "class" for setGo and "disabled" for checkboxes, but I didn’t bother). This is faster than can be acheived with setTimeout, setInterval or requestAnimationFrame, as timers are deliberately speed-capped. (Whereas mutation observers create microtasks, so we can go through this whole thing in one frame.)

When the observer gets notified (in a microtask), it checks if we’re going (in order to avoid false starts), and then goes through the checkboxes it’s been told just changed, and checks if they’re enabled and unchecked, and clicks them. In practice, the first mutation will come in with mutation records for setGo and the first checkbox, which we’ll click, which will trigger an event (a task) from the page code which enables the second checkbox, which will trigger an immediate mutation notification (a microtask), &c. until it’s all done, without ever rendering a frame in the meantime.

Re: Checkbox Olympics

#10

Post by dhab » Tue, Jun 21, 2022, 6:06 AM UTC

klenwell wrote: post #6

My "speedrun": var simulateClick = function (elem) { // Create our event (with options) var evt = new MouseEvent('click', { bubbles: true, cancelable: true, view: window }); // If cancelled, don't dispatch our event var canceled = !elem.dispatchEvent(evt); }; var run = () => { var el = document.querySelector('input[type=checkbox]:not(:checked)') simulateClick(el) } setInterval(run, 100)

I went with a manual-mix approach:

  var boxes = document.querySelectorAll("#root > div > div.sportsWrapper > div.theSport > div:nth-child(2) > input[type=checkbox]")

Then "start", wait for go signal while getting the code below ready on console. on go run the code:

  boxes.forEach(b => b.click())

Got: Time: 0.268