// ==UserScript==
// @name YouTube HitSquadGodFather Command Buttons
// @namespace https://kurotaku.de
// @version 1.2.9
// @description Adds buttons to send commands for the onstream games in the YouTube chat
// @author Kurotaku
// @license CC BY-NC-SA 4.0
// @match https://www.youtube.com/live_chat?*
// @icon https://www.youtube.com/s/desktop/6ee70b2c/img/favicon_32x32.png
// @updateURL https://raw.githubusercontent.com/Kurotaku-sama/Userscripts/main/userscripts/YouTube_HitSquadGodFather_Command_Buttons/script.user.js
// @downloadURL https://raw.githubusercontent.com/Kurotaku-sama/Userscripts/main/userscripts/YouTube_HitSquadGodFather_Command_Buttons/script.user.js
// @require https://raw.githubusercontent.com/Kurotaku-sama/Userscripts/main/libraries/kuros_library.js
// @require https://cdn.jsdelivr.net/npm/sweetalert2
// @require https://openuserjs.org/src/libs/sizzle/GM_config.js
// @grant GM_getValue
// @grant GM_setValue
// @grant GM_addStyle
// @grant GM_registerMenuCommand
// ==/UserScript==
(async function() {
if(document.querySelector("html").innerHTML.toLowerCase().includes("hitsquadgodfather")) { // Check if the page contains the word hitsquadgodfather to make sure its only appearing on GF Stream
await init_gm_config();
wait_for_element('#input-container #input.yt-live-chat-text-input-field-renderer').then(async () => {
let buttongroups = "";
if(GM_config.get("buttons_general"))
buttongroups += `
`;
if(GM_config.get("buttons_trivia"))
buttongroups += `
`;
if(GM_config.get("showdown_buttons")) {
buttongroups += ``;
// Selection
buttongroups += `
`;
// Labels to show roles
buttongroups += `
`;
// Wizard
buttongroups += `
`;
// Knight
buttongroups += `
`;
// Cleric
buttongroups += `
`;
}
let html = `${buttongroups}
`;
html += `
`;
document.querySelector("#contents #panel-pages").insertAdjacentHTML('beforebegin', html);
if(document.querySelector(".k-buttongroup .closebutton"))
document.querySelector(".k-buttongroup .closebutton").addEventListener("click", close_target, false);
let actionbuttons = document.querySelectorAll(".k-buttongroup .actionbutton");
actionbuttons.forEach(el => {el.addEventListener("click", send_command, false)});
let targetbuttons = document.querySelectorAll(".k-buttongroup .targetbutton");
targetbuttons.forEach(el => {el.addEventListener("click", switch_panel, false)});
let selection_labels = document.querySelectorAll(".k-selection-label");
selection_labels.forEach(el => {el.addEventListener("click", show_role, false)});
});
}
})();
async function init_gm_config() {
const config_id = "configuration_yt_hsgf_cmd_btn";
await migrate_config_id(config_id);
GM_registerMenuCommand("Settings", () => GM_config.open());
GM_config.init({
id: config_id,
title: 'YouTube HitSquadGodFather Command Buttons',
fields: {
script_enabled: {
type: 'checkbox',
default: true,
label: 'Enable/Disable the script',
},
buttons_general: {
section: ['Buttons'],
type: 'checkbox',
default: true,
label: 'General buttons',
},
buttons_trivia: {
type: 'checkbox',
default: true,
label: 'Trivia buttons',
},
showdown_buttons: {
type: 'checkbox',
default: true,
label: 'Showdown buttons',
},
showdown_experience: {
type: 'checkbox',
default: true,
label: 'Showdown Experience button',
},
},
events: {
save: () => { location.reload() },
},
frame: create_configuration_container(),
});
await wait_for_gm_config();
}
function close_target() {
switch_panel(null);
}
function switch_panel(event) {
document.querySelector("#actions").classList.toggle("k-hidden");
document.querySelector("#targets").classList.toggle("k-hidden");
if(event)
document.querySelector("#targets").setAttribute("data-action", event.target.getAttribute("cmd"));
}
function show_role(event) {
let roles = document.querySelectorAll(".k-role");
roles.forEach(el => {
if(el.getAttribute("data-role") === event.target.getAttribute("data-role"))
el.classList.remove("k-hidden")
else
el.classList.add("k-hidden")
});
}
function send_command(event) {
let cmd = "";
if(event.target.parentNode.parentNode.getAttribute("data-action")) {
cmd = event.target.parentNode.parentNode.getAttribute("data-action"); // Add action attack or devine in case its from the switched panel
// Remove the data and go back to main panel
event.target.parentNode.parentNode.setAttribute("data-action", "");
switch_panel(null);
}
cmd += event.target.getAttribute("cmd");
let suffix = "!";
if(cmd.trim() !== "" && cmd !== null)
send_message_to_youtube_chat(suffix + cmd + ' - ' + makeid(5));
else
alert("Please contact script creator, this button doesn't seem to work correctly");
}
function send_message_to_youtube_chat(message) {
// Without this solution I probably would have hang myself :D
// https://stackoverflow.com/questions/75962593/sending-message-on-youtube-live-chat-with-chrome-extension
console.log('Sending message:', message);
//const live_chat_frame = document.querySelector('iframe.style-scope.ytd-live-chat-frame');
//const chat_input_box = live_chat_frame.contentDocument.querySelector('#input.yt-live-chat-text-input-field-renderer');
const chat_input_box = document.querySelector('#input.yt-live-chat-text-input-field-renderer');
console.log('Chat input box:', chat_input_box);
chat_input_box.focus();
chat_input_box.innerText = message;
chat_input_box.dispatchEvent(new Event('input', { bubbles: true }));
//setTimeout(() => {
//const send_button = live_chat_frame.contentDocument.querySelector('#button.yt-icon-button[aria-label="Send"]');
const send_button = document.querySelector('#send-button button');
console.log('Send button:', send_button);
if (send_button) {
console.log('Clicking send button');
try {
send_button.dispatchEvent(new MouseEvent('click', { bubbles: true }));
} catch (error) {
console.error('Error sending message:', error);
}
} else {
console.error('Could not find send button');
}
//}, 1000);
}
GM_addStyle(`
.k-buttongroups {
padding-left: 20px;
padding-right: 20px;
}
.k-buttongroup {
display: flex;
flex-wrap: wrap;
grid-column-gap: 10px;
}
.k-buttongroup-label {}
.k-buttongroup > button {
min-width:50px;
margin-bottom:5px;
}
.k-labelgroup {
margin-top: 10px;
font-size: 20px;
justify-content: space-between;
display: flex;
}
.k-k-hidden {
display:none;
}
`);