Synchronized Bau Bau

The script to enable synchronized Bau Baus once and for all!

// ==UserScript==
// @name         Synchronized Bau Bau
// @namespace    http://tampermonkey.net/
// @version      1.0
// @author       You
// @description  The script to enable synchronized Bau Baus once and for all!
// @match        https://fwmcbaubau.com/
// @icon         https://www.google.com/s2/favicons?sz=64&domain=fwmcbaubau.com
// @grant        GM_addStyle
// @run-at       document-start
// @license      MIT
// ==/UserScript==

GM_addStyle ( `
.baubaubutton {
    background: linear-gradient(90deg, rgba(128,231,255,1) 0%, rgba(240,224,255,1) 50%, rgba(255,140,188,1) 100%);
    opacity: 0.8;
    font-weight: 700;
    margin: 10px;
    padding: 15px;
    border: none;
    width: 256px;
    border-radius: 12px;
    display: inline-block;
}

.overlay {
    position:fixed;
    padding:0;
    margin:0;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    background-color: #000000;
    opacity: 0.1;
    z-index: -1;
}
` );

window.addEventListener('load', function() {
    'use strict';

    var overlay;
    var theButton;
    var canClick = true;

    var init = function(){
        addOverlay();
        addBauBauButton();
    }

    // Bau Bau
    var bauBauTogether = function(){
        if (!canClick) { return; }

        canClick = false;
        setTimeout(function(){
            canClick = true;
        }, 0); // rate limit in milliseconds. 0 means not limited.

        document.querySelector('#fuwawa').click();
        document.querySelector('#mococo').click();
    }

    // Adds the double Bau Bau Button!!!
    function addBauBauButton() {
        const buttonContainer = document.querySelector('.button-container');

        if (!buttonContainer) {
            console.error('Button container not found');
            return;
        }

        theButton = document.createElement('button');
        theButton.textContent = 'Bau Bau Together!';
        theButton.classList.add('baubaubutton');
        theButton.addEventListener('click', bauBauTogether);
        buttonContainer.insertAdjacentElement('afterend', theButton);
    }

    // Makes the background slightly darker. Can be changed to other colors/opacity using CSS.
    function addOverlay() {
        overlay = document.createElement('overlay');
        overlay.classList.add('overlay');
        document.querySelector('.App').appendChild(overlay);
    }

    init();

}, false)();