Auto fullscreen after click "game start" + fullscreen toggle button
// ==UserScript==
// @name Autodarts - Auto Fullscreen
// @namespace http://tampermonkey.net/
// @version 1.0
// @description Auto fullscreen after click "game start" + fullscreen toggle button
// @author benebelter
// @match https://play.autodarts.io/*
// @run-at document-end
// @grant none
// @license MIT
// ==/UserScript==
(function () {
'use strict';
//--------------------------------------------------
// FULLSCREEN
//--------------------------------------------------
async function enterFullscreen() {
if (!document.fullscreenElement) {
try {
await document.documentElement.requestFullscreen();
console.log('[Autodarts] Fullscreen enabled');
}
catch (err) {
console.error('[Autodarts] Fullscreen failed:', err);
}
}
}
async function exitFullscreen() {
if (document.fullscreenElement) {
await document.exitFullscreen();
}
}
async function toggleFullscreen() {
if (document.fullscreenElement) {
await exitFullscreen();
}
else {
await enterFullscreen();
}
}
//--------------------------------------------------
// SIDEBAR
//--------------------------------------------------
function collapseSidebar() {
const collapseBtn = document.querySelector(
'[aria-label="Collapse side bar"]'
);
if (collapseBtn) {
collapseBtn.click();
console.log('[Autodarts] Sidebar collapsed');
}
}
//--------------------------------------------------
// FULLSCREEN BUTTONS
//--------------------------------------------------
function updateFullscreenButtons() {
const exitBtn = document.querySelector(
'.tm-exit-fullscreen-btn'
);
const enterBtn = document.querySelector(
'.tm-fullscreen-btn'
);
const isFullscreen = !!document.fullscreenElement;
if (exitBtn) {
exitBtn.style.display = isFullscreen
? 'block'
: 'none';
}
if (enterBtn) {
enterBtn.style.display = isFullscreen
? 'none'
: 'block';
}
console.log('[Autodarts] Fullscreen:', isFullscreen);
}
//--------------------------------------------------
// MENU BUTTONS
//--------------------------------------------------
function addButtons() {
const menuItem = document.querySelector(
'.css-1jc8v6r:last-of-type'
);
if (!menuItem) return;
//--------------------------------------------------
// ENTER FULLSCREEN
//--------------------------------------------------
if (!document.querySelector('.tm-fullscreen-btn')) {
const btn = document.createElement('a');
btn.textContent = 'Fullscreen';
btn.className =
'tm-fullscreen-btn chakra-menu__menuitem css-1jc8v6r';
btn.style.cursor = 'pointer';
btn.addEventListener('click', async () => {
collapseSidebar();
await enterFullscreen();
});
menuItem.after(btn);
}
//--------------------------------------------------
// EXIT FULLSCREEN
//--------------------------------------------------
if (!document.querySelector('.tm-exit-fullscreen-btn')) {
const btn = document.createElement('a');
btn.textContent = 'Exit Fullscreen';
btn.className =
'tm-exit-fullscreen-btn chakra-menu__menuitem css-1jc8v6r';
btn.style.cursor = 'pointer';
btn.addEventListener('click', exitFullscreen);
menuItem.after(btn);
}
updateFullscreenButtons();
}
//--------------------------------------------------
// SMALL FULLSCREEN TOGGLE BUTTON
//--------------------------------------------------
// SMALL FULLSCREEN BUTTON
function addSmallFullscreenButton() {
const target = document.querySelector('.chakra-button.css-1bztn9a');
if (!target) return;
if (document.querySelector('.tm-small-fullscreen-btn')) {
return;
}
// Animation nur einmal hinzufügen
if (!document.querySelector('#tm-fullscreen-style')) {
const style = document.createElement('style');
style.id = 'tm-fullscreen-style';
style.textContent = `
@keyframes tmFullscreenPulse {
0% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(1.35);
opacity: 0.45;
}
100% {
transform: scale(1);
opacity: 1;
}
}
.tm-small-fullscreen-btn.tm-pulse {
animation: tmFullscreenPulse 1s infinite;
}
`;
document.head.appendChild(style);
}
const btn = document.createElement('button');
btn.innerHTML = '⛶';
btn.className =
'tm-small-fullscreen-btn css-1gniigz';
btn.style.marginLeft = '8px';
btn.style.cursor = 'pointer';
btn.addEventListener('click', async () => {
collapseSidebar();
await toggleFullscreen();
});
target.after(btn);
updateSmallFullscreenButton();
}
// STATUS UPDATE
function updateSmallFullscreenButton() {
const btn = document.querySelector(
'.tm-small-fullscreen-btn'
);
if (!btn) return;
const isFullscreen = !!document.fullscreenElement;
if (isFullscreen) {
btn.classList.remove('tm-pulse');
}
else {
btn.classList.add('tm-pulse');
}
}
//--------------------------------------------------
// AUTO FULLSCREEN
//--------------------------------------------------
document.addEventListener(
'click',
async (event) => {
const target = event.target.closest(
'button, .enter_fullscreen, .rematch_button'
);
if (!target) return;
const text =
target.textContent?.trim().toLowerCase() || '';
const isFullscreen = !!document.fullscreenElement;
const isStartGame =
text.includes('start game');
const isRematch =
text.includes('rematch') ||
target.classList.contains('rematch_button');
const isManualFullscreen =
target.classList.contains('enter_fullscreen');
// 👉 Start Game nur wenn NICHT fullscreen
if (isStartGame && !isFullscreen) {
collapseSidebar();
setTimeout(async () => {
await enterFullscreen();
}, 300);
return;
}
// 👉 Rematch immer fullscreen
if (isRematch) {
collapseSidebar();
setTimeout(async () => {
await enterFullscreen();
}, 300);
return;
}
// 👉 Manuell toggle button
if (isManualFullscreen) {
collapseSidebar();
await toggleFullscreen();
}
}
);
//--------------------------------------------------
// OBSERVER
//--------------------------------------------------
const observer = new MutationObserver(() => {
addButtons();
addSmallFullscreenButton();
});
observer.observe(document.body, {
childList: true,
subtree: true
});
//--------------------------------------------------
// EVENTS
//--------------------------------------------------
document.addEventListener(
'fullscreenchange',
updateFullscreenButtons
);
//--------------------------------------------------
// INIT
//--------------------------------------------------
addButtons();
addSmallFullscreenButton();
})();