Adds an autonomous AI player to Connect 4 on papergames.io with Python mouse control and multiple AI APIs
// ==UserScript==
// @name Connect 4 AI for papergames
// @namespace https://github.com/longkidkoolstar
// @version 0.2.5
// @description Adds an autonomous AI player to Connect 4 on papergames.io with Python mouse control and multiple AI APIs
// @author longkidkoolstar
// @icon https://th.bing.com/th/id/R.2ea02f33df030351e0ea9bd6df0db744?rik=Pnmqtc4WLvL0ow&pid=ImgRaw&r=0
// @require https://code.jquery.com/jquery-3.6.0.min.js
// @match https://papergames.io/*
// @license none
// @grant GM.xmlHttpRequest
// @grant GM.setValue
// @grant GM.getValue
// @connect connect4.gamesolver.org
// @connect kevinalbs.com
// @connect localhost
// ==/UserScript==
(async function() {
'use strict';
// Configuration variables
const PYTHON_SERVER_URL = 'http://localhost:8765';
const MOVE_DELAY = 1500; // Delay before making a move (ms)
const COOLDOWN_DELAY = 2000; // Cooldown after making a move (ms)
const BOARD_CHECK_INTERVAL = 1000; // How often to check the board (ms)
const RESET_CHECK_INTERVAL = 500; // How often to check for reset buttons (ms)
const SERVER_CHECK_INTERVAL = 10000; // How often to check Python server status (ms)
const SERVER_RETRY_INTERVAL = 3000; // How often to retry connecting to the server when disconnected (ms)
const AUTO_QUEUE_CHECK_INTERVAL = 1000; // How often to check for auto-queue buttons (ms)
const AUTO_QUEUE_ENABLED_DEFAULT = false; // Default state for auto-queue
// State variables
var username = await GM.getValue('username');
var player;
var prevChronometerValue = '';
var moveHistory = [];
var lastBoardState = [];
var aiTurn = false;
var processingMove = false;
var moveCooldown = false;
var pythonServerAvailable = false;
var serverCheckRetryCount = 0;
var autoPlayEnabled = true; // Auto-play is enabled by default
var bestMoveStrategy = 'optimal'; // 'optimal', 'random', 'defensive'
var keyboardControlsEnabled = true; // Enable keyboard controls by default
var selectedAPI = await GM.getValue('selectedAPI', 'gamesolver'); // Default to gamesolver API
var isAutoQueueOn = await GM.getValue('autoQueueEnabled', AUTO_QUEUE_ENABLED_DEFAULT); // Get auto-queue state from storage
// If username is not set, prompt the user
if (!username) {
username = prompt('Please enter your Papergames username (case-sensitive):');
await GM.setValue('username', username);
}
// Reset all game state variables
function resetVariables() {
player = undefined;
prevChronometerValue = '';
moveHistory = [];
lastBoardState = [];
aiTurn = false;
processingMove = false;
moveCooldown = false;
console.log("Variables reset to default states");
}
// Check for UI elements that indicate we should reset game state
function checkForResetButtons() {
var playOnlineButton = document.querySelector("body > app-root > app-navigation > div > div.d-flex.flex-column.h-100.w-100 > main > app-game-landing > div > div > div > div.col-12.col-lg-9.dashboard > div.card.area-buttons.d-flex.justify-content-center.align-items-center.flex-column > button.btn.btn-secondary.btn-lg.position-relative");
var leaveRoomButton = document.querySelector("button.btn-light.ng-tns-c189-7");
var customResetButton = document.querySelector("button.btn.btn-outline-dark.ng-tns-c497539356-18.ng-star-inserted");
if (playOnlineButton || leaveRoomButton || customResetButton) {
resetVariables();
}
// Also reset if we're on certain pages
if (window.location.href.includes("/match-history") ||
window.location.href.includes("/friends") ||
window.location.href.includes("/chat")) {
resetVariables();
}
}
// Handle keyboard input for column selection
function setupKeyboardControls() {
document.addEventListener('keydown', function(event) {
// Only process if keyboard controls are enabled and we're on a game page
if (!keyboardControlsEnabled || !document.querySelector(".grid.size6x7")) return;
// Check if the key is a number between 1-7
const column = parseInt(event.key);
if (column >= 1 && column <= 7) {
// Don't process if we're already processing a move or server is unavailable
if (processingMove || !pythonServerAvailable) return;
// Don't capture keyboard input if user is typing in an input field
if (event.target.tagName === 'INPUT' || event.target.tagName === 'TEXTAREA') return;
console.log(`Keyboard input detected: Column ${column}`);
processingMove = true;
clickColumn(column);
// Prevent default action (like scrolling)
event.preventDefault();
}
// Toggle auto-play with 'a' key
if (event.key === 'a' || event.key === 'A') {
toggleAutoPlay();
event.preventDefault();
}
// Toggle keyboard controls with 'k' key
if (event.key === 'k' || event.key === 'K') {
toggleKeyboardControls();
event.preventDefault();
}
// Toggle API with 'h' key (for Human mode)
if (event.key === 'h' || event.key === 'H') {
toggleAPI();
event.preventDefault();
}
// Toggle Auto-Queue with 'q' key
if (event.key === 'q' || event.key === 'Q') {
toggleAutoQueue();
event.preventDefault();
}
});
}
// Toggle keyboard controls
function toggleKeyboardControls() {
keyboardControlsEnabled = !keyboardControlsEnabled;
const $btn = $('#keyboard-controls-toggle');
if (keyboardControlsEnabled) {
$btn.text('Keyboard Controls: ON')
.removeClass('btn-danger')
.addClass('btn-success');
console.log("Keyboard controls enabled");
} else {
$btn.text('Keyboard Controls: OFF')
.removeClass('btn-success')
.addClass('btn-danger');
console.log("Keyboard controls disabled");
}
}
// Check if it's the AI's turn to play
function updateBoard() {
if (!autoPlayEnabled) return; // Skip if auto-play is disabled
var profileOpeners = document.querySelectorAll(".text-truncate.cursor-pointer");
var profileOpener = Array.from(profileOpeners).find(opener => opener.textContent.trim() === username);
var chronometer = document.querySelector("app-chronometer");
var numberElement;
if (profileOpener) {
var profileParent = profileOpener.parentNode;
numberElement = profileOpener.parentNode.querySelectorAll("span")[4];
var profileOpenerParent = profileOpener.parentNode.parentNode;
var svgElementDark = profileOpenerParent.querySelector("circle.circle-dark");
var svgElementLight = profileOpenerParent.querySelector("circle.circle-light");
if (svgElementDark) {
player = 'R';
} else if (svgElementLight) {
player = 'Y';
}
}
var currentElement = chronometer || numberElement;
if (currentElement && currentElement.textContent !== prevChronometerValue && profileOpener) {
prevChronometerValue = currentElement.textContent;
console.log("AI's turn detected. Waiting before making a move...");
aiTurn = true;
setTimeout(() => {
if (!moveCooldown && autoPlayEnabled) {
console.log("Making AI move...");
makeAPIMove();
}
}, MOVE_DELAY);
} else {
aiTurn = false;
}
}
// Get the current state of the board
function getBoardState() {
const boardContainer = document.querySelector(".grid.size6x7");
if (!boardContainer) {
console.error("Board container not found");
return [];
}
let boardState = [];
// Iterate over cells in a more flexible way
for (let row = 1; row <= 6; row++) {
let rowState = [];
for (let col = 1; col <= 7; col++) {
// Use a selector that matches the class names correctly
const cellSelector = `.grid-item.cell-${row}-${col}`;
const cell = boardContainer.querySelector(cellSelector);
if (cell) {
// Check the circle class names to determine the cell's state
const circle = cell.querySelector("circle");
if (circle) {
if (circle.classList.contains("circle-dark")) {
rowState.push("R");
} else if (circle.classList.contains("circle-light")) {
rowState.push("Y");
} else {
rowState.push("E");
}
} else {
rowState.push("E");
}
} else {
console.error(`Cell not found: ${cellSelector}`);
rowState.push("E");
}
}
boardState.push(rowState);
}
return boardState;
}
// Detect if a new move has been made
function detectNewMove() {
const currentBoardState = getBoardState();
let newMove = false;
for (let row = 0; row < 6; row++) {
for (let col = 0; col < 7; col++) {
if (lastBoardState[row] && lastBoardState[row][col] === 'E' && currentBoardState[row][col] !== 'E') {
moveHistory.push(col + 1);
newMove = true;
}
}
}
lastBoardState = currentBoardState;
return newMove;
}
// Click on a column using the Python mouse controller
function clickColumn(column) {
console.log(`Requesting Python mouse click on column ${column}`);
if (!pythonServerAvailable) {
console.error("Python server not available. Cannot make move.");
processingMove = false;
return;
}
// Send click request to Python server (0-indexed)
sendClickRequestToPython(column - 1);
}
// Send a click request to the Python server using GM.xmlHttpRequest to avoid CORS issues
function sendClickRequestToPython(column) {
GM.xmlHttpRequest({
method: "POST",
url: `${PYTHON_SERVER_URL}/api/click`,
headers: {
"Content-Type": "application/json"
},
data: JSON.stringify({ column: column }),
onload: function(response) {
try {
const data = JSON.parse(response.responseText);
console.log('Python click response:', data);
processingMove = false;
moveCooldown = true;
setTimeout(() => moveCooldown = false, COOLDOWN_DELAY);
} catch (error) {
console.error('Error parsing Python server response:', error);
processingMove = false;
}
},
onerror: function(error) {
console.error('Error communicating with Python server:', error);
processingMove = false;
pythonServerAvailable = false;
updateServerStatusIndicator(false);
// Schedule a retry to check server status
setTimeout(checkPythonServerStatus, SERVER_RETRY_INTERVAL);
}
});
}
// Check if the Python server is running using GM.xmlHttpRequest to avoid CORS issues
function checkPythonServerStatus() {
GM.xmlHttpRequest({
method: "GET",
url: `${PYTHON_SERVER_URL}/api/status`,
onload: function(response) {
try {
const data = JSON.parse(response.responseText);
console.log('Python server status:', data);
pythonServerAvailable = true;
serverCheckRetryCount = 0;
updateServerStatusIndicator(true, data.calibrated);
} catch (error) {
console.error('Error parsing Python server status:', error);
pythonServerAvailable = false;
updateServerStatusIndicator(false);
scheduleServerRetry();
}
},
onerror: function(error) {
console.error('Python server not available:', error);
pythonServerAvailable = false;
updateServerStatusIndicator(false);
scheduleServerRetry();
}
});
}
// Schedule a retry to check server status with exponential backoff
function scheduleServerRetry() {
serverCheckRetryCount++;
const delay = Math.min(SERVER_RETRY_INTERVAL * Math.pow(1.5, serverCheckRetryCount - 1), 30000);
console.log(`Scheduling server check retry in ${delay}ms (attempt ${serverCheckRetryCount})`);
setTimeout(checkPythonServerStatus, delay);
}
// Make a move using the Connect 4 solver API
function makeAPIMove() {
if (!aiTurn || processingMove || !autoPlayEnabled) return;
// Check if Python server is available before proceeding
if (!pythonServerAvailable) {
console.error("Python server not available. Cannot make move.");
return;
}
processingMove = true;
// Use the selected API
if (selectedAPI === 'gamesolver') {
makeGameSolverAPIMove();
} else if (selectedAPI === 'human') {
makeHumanModeAPIMove();
}
}
// Make a move using the gamesolver.org API
function makeGameSolverAPIMove() {
detectNewMove();
console.log("Move history:", moveHistory);
let pos = moveHistory.join("");
console.log("API position string:", pos);
const apiUrl = `https://connect4.gamesolver.org/solve?pos=${pos}`;
console.log("API URL:", apiUrl);
GM.xmlHttpRequest({
method: "GET",
url: apiUrl,
onload: function(response) {
console.log("API response received");
try {
const data = JSON.parse(response.responseText);
const scores = data.score;
console.log("Move scores:", scores);
// Display the evaluations on the board
displayEvaluations(scores);
// Choose the best move based on the selected strategy
const bestMove = chooseBestMove(scores);
console.log(`Best move (column): ${bestMove + 1} with strategy: ${bestMoveStrategy}`);
if (bestMove !== -1) {
clickColumn(bestMove + 1); // Convert from 0-indexed to 1-indexed
} else {
console.log("No valid moves available");
processingMove = false;
}
} catch (error) {
console.error("Error parsing API response:", error);
processingMove = false;
}
},
onerror: function(error) {
console.error("API request failed:", error);
processingMove = false;
}
});
}
// Make a move using the human mode API (kevinalbs.com)
function makeHumanModeAPIMove() {
const boardState = getHumanModeBoardState();
console.log("Current board state (human mode):", boardState);
// Convert player from R/Y to 1/2
let humanModePlayer;
if (player === 'R') {
humanModePlayer = '1';
} else if (player === 'Y') {
humanModePlayer = '2';
} else {
// If player is not set, try to determine it from the board state
console.log("Player not set, attempting to determine from board state");
// Count pieces to determine whose turn it is
let count1 = 0;
let count2 = 0;
for (let i = 0; i < boardState.length; i++) {
if (boardState[i] === '1') count1++;
if (boardState[i] === '2') count2++;
}
// If equal counts or more 1s, it's player 2's turn, otherwise player 1's turn
humanModePlayer = count1 <= count2 ? '1' : '2';
console.log(`Determined player: ${humanModePlayer} (counts: 1=${count1}, 2=${count2})`);
}
const apiUrl = `https://kevinalbs.com/connect4/back-end/index.php/getMoves?board_data=${boardState}&player=${humanModePlayer}`;
console.log("Human Mode API URL:", apiUrl);
GM.xmlHttpRequest({
method: "GET",
url: apiUrl,
onload: function(response) {
console.log("Human Mode API response received:", response.responseText);
try {
const data = JSON.parse(response.responseText);
console.log("Parsed Human Mode API data:", data);
let bestMove = -1;
let bestScore = -Infinity;
// Find the best move based on the scores
for (let move in data) {
if (data[move] > bestScore) {
bestScore = data[move];
bestMove = parseInt(move);
}
}
console.log("Best move (column):", bestMove);
if (bestMove !== -1) {
// Display evaluations in a format compatible with the display function
const scores = Array(7).fill(100); // Default to invalid
for (let move in data) {
scores[parseInt(move)] = data[move];
}
displayEvaluations(scores);
clickColumn(bestMove + 1); // Convert from 0-indexed to 1-indexed
} else {
console.log("No valid moves available");
processingMove = false;
}
} catch (error) {
console.error("Error parsing Human Mode API response:", error);
processingMove = false;
}
},
onerror: function(error) {
console.error("Human Mode API request failed:", error);
processingMove = false;
}
});
}
// Choose the best move based on the selected strategy
function chooseBestMove(scores) {
// Filter out invalid moves (score = 100 means column is full)
const validMoves = scores.map((score, index) => ({ score, index }))
.filter(move => move.score !== 100);
if (validMoves.length === 0) return -1;
switch (bestMoveStrategy) {
case 'optimal':
// Choose the move with the highest score
return validMoves.reduce((best, current) =>
current.score > best.score ? current : best, validMoves[0]).index;
case 'random':
// Choose a random valid move
return validMoves[Math.floor(Math.random() * validMoves.length)].index;
case 'defensive':
// Choose the move that minimizes opponent's advantage
// For negative scores, choose the least negative
// For positive scores, choose the highest
return validMoves.reduce((best, current) => {
if (best.score < 0 && current.score < 0) {
return current.score > best.score ? current : best;
} else {
return current.score > best.score ? current : best;
}
}, validMoves[0]).index;
default:
// Default to optimal
return validMoves.reduce((best, current) =>
current.score > best.score ? current : best, validMoves[0]).index;
}
}
// Display evaluations on the board
function displayEvaluations(scores) {
const boardContainer = document.querySelector(".grid.size6x7");
let evalContainer = document.querySelector("#evaluation-container");
if (!evalContainer) {
evalContainer = document.createElement("div");
evalContainer.id = "evaluation-container";
evalContainer.style.display = "flex";
evalContainer.style.justifyContent = "space-around";
evalContainer.style.marginTop = "10px";
evalContainer.style.fontFamily = "Arial, sans-serif";
boardContainer.parentNode.insertBefore(evalContainer, boardContainer.nextSibling);
}
// Clear existing evaluation cells
evalContainer.innerHTML = '';
scores.forEach((score, index) => {
const evalCell = document.createElement("div");
evalCell.textContent = score === 100 ? "X" : score; // Show X for invalid moves
evalCell.style.textAlign = 'center';
evalCell.style.fontWeight = 'bold';
evalCell.style.fontSize = '16px';
evalCell.style.width = '40px';
evalCell.style.padding = '5px';
evalCell.style.borderRadius = '5px';
// Color based on score
if (score === 100) {
evalCell.style.color = '#888'; // Gray for invalid moves
} else if (score > 0) {
evalCell.style.backgroundColor = `rgba(0, 128, 0, ${Math.min(Math.abs(score) / 20, 1)})`;
evalCell.style.color = 'white';
} else if (score < 0) {
evalCell.style.backgroundColor = `rgba(255, 0, 0, ${Math.min(Math.abs(score) / 20, 1)})`;
evalCell.style.color = 'white';
} else {
evalCell.style.color = 'black';
}
evalContainer.appendChild(evalCell);
});
}
// Initialize AI player information
function initAITurn() {
const boardState = getBoardState();
if (!player) {
for (let row of boardState) {
for (let cell of row) {
if (cell !== "E") {
player = cell === "R" ? "Y" : "R";
break;
}
}
if (player) break;
}
}
}
// Logout function
function logout() {
GM.setValue('username', '');
location.reload();
}
// Update server status indicator
function updateServerStatusIndicator(isAvailable, isCalibrated) {
const $status = $('#python-server-status');
if (isAvailable) {
if (isCalibrated) {
$status.text('Python Server: Connected & Calibrated')
.css('backgroundColor', '#28a745');
} else {
$status.text('Python Server: Connected (Not Calibrated)')
.css('backgroundColor', '#ffc107');
}
} else {
$status.text('Python Server: Disconnected')
.css('backgroundColor', '#dc3545');
}
// Disable auto-play if server is not available or not calibrated
if ((!isAvailable || (isAvailable && !isCalibrated)) && autoPlayEnabled) {
autoPlayEnabled = false;
const $btn = $('#auto-play-toggle');
$btn.text('Auto-Play: OFF')
.removeClass('btn-success')
.addClass('btn-danger');
if (!isAvailable) {
console.log("Auto-play disabled because Python server is not available");
} else if (!isCalibrated) {
console.log("Auto-play disabled because Python server is not calibrated");
alert("Please calibrate the board in the Python application before enabling Auto-Play.");
}
}
}
// Toggle auto-play functionality
function toggleAutoPlay() {
// Don't allow enabling auto-play if Python server is not available
if (!pythonServerAvailable && !autoPlayEnabled) {
alert("Cannot enable Auto-Play: Python server is not connected.");
return;
}
// Check if the server is calibrated
GM.xmlHttpRequest({
method: "GET",
url: `${PYTHON_SERVER_URL}/api/status`,
onload: function(response) {
try {
const data = JSON.parse(response.responseText);
if (!data.calibrated && !autoPlayEnabled) {
alert("Cannot enable Auto-Play: Board is not calibrated. Please calibrate the board in the Python application first.");
return;
}
// If we get here, we can toggle auto-play
autoPlayEnabled = !autoPlayEnabled;
const $btn = $('#auto-play-toggle');
if (autoPlayEnabled) {
$btn.text('Auto-Play: ON')
.removeClass('btn-danger')
.addClass('btn-success');
} else {
$btn.text('Auto-Play: OFF')
.removeClass('btn-success')
.addClass('btn-danger');
}
} catch (error) {
console.error('Error checking calibration status:', error);
alert("Cannot enable Auto-Play: Error checking calibration status.");
}
},
onerror: function(error) {
console.error('Error checking server status:', error);
alert("Cannot enable Auto-Play: Python server is not connected.");
}
});
}
// Toggle API selection
async function toggleAPI() {
selectedAPI = selectedAPI === 'gamesolver' ? 'human' : 'gamesolver';
await GM.setValue('selectedAPI', selectedAPI);
const $btn = $('#api-toggle');
if (selectedAPI === 'gamesolver') {
$btn.text('API: GameSolver')
.removeClass('btn-info')
.addClass('btn-primary');
console.log("Switched to GameSolver API");
} else {
$btn.text('API: Human Mode')
.removeClass('btn-primary')
.addClass('btn-info');
console.log("Switched to Human Mode API");
}
}
// Get the current state of the board for the human mode API
function getHumanModeBoardState() {
const boardContainer = document.querySelector(".grid.size6x7");
if (!boardContainer) {
console.error("Board container not found");
return "";
}
// The Human Mode API expects a 42-character string representing the board
// from top to bottom, left to right (0 = empty, 1 = dark/red, 2 = light/yellow)
let boardState = "";
// Iterate over cells in a more flexible way
for (let row = 1; row <= 6; row++) {
for (let col = 1; col <= 7; col++) {
// Use a selector that matches the class names correctly
const cellSelector = `.grid-item.cell-${row}-${col}`;
const cell = boardContainer.querySelector(cellSelector);
if (cell) {
// Check the circle class names to determine the cell's state
const circle = cell.querySelector("circle");
if (circle) {
if (circle.classList.contains("circle-dark")) {
boardState += "1";
} else if (circle.classList.contains("circle-light")) {
boardState += "2";
} else {
boardState += "0";
}
} else {
boardState += "0";
}
} else {
console.error(`Cell not found: ${cellSelector}`);
boardState += "0";
}
}
}
console.log("Human Mode board state (42-char string):", boardState);
return boardState;
}
// Create the UI elements with a calibration button
function createUI() {
// Create main container
const $container = $('<div>')
.attr('id', 'connect4-ai-controls')
.css({
position: 'fixed',
bottom: '20px',
right: '20px',
zIndex: '9999',
display: 'flex',
flexDirection: 'column',
gap: '10px',
alignItems: 'flex-end'
})
.appendTo('body');
// Create server status indicator
const $serverStatus = $('<div>')
.attr('id', 'python-server-status')
.text('Python Server: Checking...')
.css({
padding: '5px 10px',
backgroundColor: '#333',
color: 'white',
borderRadius: '5px',
fontSize: '12px',
marginBottom: '5px'
})
.appendTo($container);
// Create calibration button
const $calibrateBtn = $('<button>')
.text('Calibrate Board')
.addClass('btn btn-warning')
.css({
padding: '5px 10px',
borderRadius: '5px',
cursor: 'pointer',
fontWeight: 'bold',
border: 'none',
marginBottom: '5px'
})
.on('click', function() {
if (!pythonServerAvailable) {
alert("Python server is not connected. Cannot calibrate.");
return;
}
alert("Please switch to the Python application window and follow the calibration instructions.");
// Send a message to the Python server to start calibration
GM.xmlHttpRequest({
method: "POST",
url: `${PYTHON_SERVER_URL}/api/calibrate`,
headers: {
"Content-Type": "application/json"
},
data: JSON.stringify({ start: true }),
onload: function(response) {
console.log('Calibration request sent');
},
onerror: function(error) {
console.error('Error sending calibration request:', error);
}
});
})
.appendTo($container);
// Create auto-play toggle button
const $autoPlayBtn = $('<button>')
.attr('id', 'auto-play-toggle')
.text('Auto-Play: ON')
.addClass('btn btn-success')
.css({
padding: '5px 10px',
borderRadius: '5px',
cursor: 'pointer',
fontWeight: 'bold',
border: 'none'
})
.on('click', toggleAutoPlay)
.appendTo($container);
// Create auto-queue toggle button (moved up in the UI for better visibility)
const $autoQueueBtn = $('<button>')
.attr('id', 'auto-queue-toggle')
.text('Auto-Queue: OFF')
.addClass('btn btn-danger')
.attr('title', 'Automatically leaves room and queues for a new game when a game ends')
.css({
padding: '5px 10px',
borderRadius: '5px',
cursor: 'pointer',
fontWeight: 'bold',
border: 'none',
marginTop: '5px'
})
.on('click', toggleAutoQueue)
.appendTo($container);
// Create keyboard controls toggle button
const $keyboardBtn = $('<button>')
.attr('id', 'keyboard-controls-toggle')
.text('Keyboard Controls: ON')
.addClass('btn btn-success')
.css({
padding: '5px 10px',
borderRadius: '5px',
cursor: 'pointer',
fontWeight: 'bold',
border: 'none',
marginTop: '5px'
})
.on('click', toggleKeyboardControls)
.appendTo($container);
// Create API toggle button
const $apiToggleBtn = $('<button>')
.attr('id', 'api-toggle')
.text(selectedAPI === 'gamesolver' ? 'API: GameSolver' : 'API: Human Mode')
.addClass(selectedAPI === 'gamesolver' ? 'btn btn-primary' : 'btn btn-info')
.css({
padding: '5px 10px',
borderRadius: '5px',
cursor: 'pointer',
fontWeight: 'bold',
border: 'none',
marginTop: '5px'
})
.on('click', toggleAPI)
.appendTo($container);
// Create keyboard shortcuts info
const $keyboardInfo = $('<div>')
.css({
backgroundColor: '#333',
color: 'white',
padding: '8px',
borderRadius: '5px',
fontSize: '12px',
marginTop: '5px',
maxWidth: '200px'
})
.html('Keyboard Shortcuts:<br>1-7: Click column<br>A: Toggle Auto-Play<br>K: Toggle Keyboard<br>H: Toggle API<br>Q: Toggle Auto-Queue')
.appendTo($container);
// Create strategy selector
const $strategyContainer = $('<div>')
.css({
display: 'flex',
flexDirection: 'column',
backgroundColor: '#333',
padding: '10px',
borderRadius: '5px',
marginBottom: '5px'
})
.appendTo($container);
$('<div>')
.text('AI Strategy:')
.css({
color: 'white',
marginBottom: '5px',
fontSize: '12px'
})
.appendTo($strategyContainer);
const $strategySelect = $('<select>')
.attr('id', 'strategy-select')
.css({
padding: '5px',
borderRadius: '3px',
border: 'none'
})
.on('change', function() {
bestMoveStrategy = $(this).val();
console.log(`Strategy changed to: ${bestMoveStrategy}`);
})
.appendTo($strategyContainer);
$('<option>').val('optimal').text('Optimal').appendTo($strategySelect);
$('<option>').val('defensive').text('Defensive').appendTo($strategySelect);
$('<option>').val('random').text('Random').appendTo($strategySelect);
// Create manual column click buttons
const $columnButtonsContainer = $('<div>')
.css({
display: 'flex',
flexDirection: 'column',
backgroundColor: '#333',
padding: '10px',
borderRadius: '5px',
marginBottom: '5px'
})
.appendTo($container);
$('<div>')
.text('Manual Column Click:')
.css({
color: 'white',
marginBottom: '5px',
fontSize: '12px'
})
.appendTo($columnButtonsContainer);
const $buttonRow = $('<div>')
.css({
display: 'flex',
gap: '3px'
})
.appendTo($columnButtonsContainer);
// Add column buttons
for (let i = 1; i <= 7; i++) {
$('<button>')
.text(i)
.css({
width: '25px',
height: '25px',
padding: '0',
fontSize: '12px',
textAlign: 'center',
borderRadius: '3px',
cursor: 'pointer',
backgroundColor: '#007bff',
color: 'white',
border: 'none'
})
.on('click', function() {
if (!processingMove && pythonServerAvailable) {
processingMove = true;
clickColumn(i);
}
})
.appendTo($buttonRow);
}
// Create logout button
const $logoutBtn = $('<button>')
.text('Logout')
.addClass('btn btn-secondary')
.css({
padding: '5px 10px',
borderRadius: '5px',
cursor: 'pointer',
marginTop: '5px'
})
.on('click', logout)
.appendTo($container);
// Initialize auto-queue state
updateAutoQueueButton();
}
// Auto-queue functionality
async function toggleAutoQueue() {
isAutoQueueOn = !isAutoQueueOn;
await GM.setValue('autoQueueEnabled', isAutoQueueOn);
updateAutoQueueButton();
console.log(`Auto-Queue ${isAutoQueueOn ? 'enabled' : 'disabled'}`);
if (isAutoQueueOn) {
showAutoQueueNotification("Auto-Queue enabled - will automatically join new games");
} else {
showAutoQueueNotification("Auto-Queue disabled");
}
}
function updateAutoQueueButton() {
const $btn = $('#auto-queue-toggle');
if (isAutoQueueOn) {
$btn.text('Auto-Queue: ON')
.removeClass('btn-danger')
.addClass('btn-success');
} else {
$btn.text('Auto-Queue: OFF')
.removeClass('btn-success')
.addClass('btn-danger');
}
}
function clickLeaveRoomButton() {
const leaveButton = $("button.btn-light.ng-tns-c189-7");
if (leaveButton.length) {
console.log("Auto-Queue: Clicking leave room button");
leaveButton.click();
return true;
}
return false;
}
function clickPlayOnlineButton() {
const playButton = document.querySelector("body > app-root > app-navigation > div.d-flex.h-100 > div.d-flex.flex-column.h-100.w-100 > main > app-game-landing > div > div > div > div.col-12.col-lg-9.dashboard > div.card.area-buttons.d-flex.justify-content-center.align-items-center.flex-column > button.btn.btn-secondary.btn-lg.position-relative");
if (playButton) {
console.log("Auto-Queue: Clicking play online button");
playButton.click();
return true;
}
return false;
}
function checkButtonsPeriodically() {
if (!isAutoQueueOn) return;
// Try to leave room first
if (clickLeaveRoomButton()) {
// Add visual feedback
showAutoQueueNotification("Auto-Queue: Leaving room...");
return;
}
// If we couldn't leave (maybe already left), try to play online
if (clickPlayOnlineButton()) {
showAutoQueueNotification("Auto-Queue: Joining new game...");
return;
}
// Check for other buttons that might indicate game end
const playAgainButton = $("button:contains('Play Again')");
if (playAgainButton.length) {
console.log("Auto-Queue: Clicking play again button");
playAgainButton.click();
showAutoQueueNotification("Auto-Queue: Playing again...");
return;
}
}
// Show a temporary notification for auto-queue actions
function showAutoQueueNotification(message) {
let $notification = $('#auto-queue-notification');
if (!$notification.length) {
$notification = $('<div>')
.attr('id', 'auto-queue-notification')
.css({
position: 'fixed',
top: '20px',
right: '20px',
backgroundColor: 'rgba(0, 0, 0, 0.7)',
color: 'white',
padding: '10px 15px',
borderRadius: '5px',
zIndex: '10000',
fontSize: '14px',
fontWeight: 'bold',
opacity: '0',
transition: 'opacity 0.3s ease'
})
.appendTo('body');
}
$notification.text(message)
.css('opacity', '1');
// Hide after 3 seconds
setTimeout(() => {
$notification.css('opacity', '0');
}, 3000);
}
// Handle countdown clicks for auto-queue
let previousNumber = null;
function trackAndClickIfDifferent() {
const $spanElement = $('app-count-down span');
if ($spanElement.length) {
const number = parseInt($spanElement.text(), 10);
if (!isNaN(number) && previousNumber !== null && number !== previousNumber && isAutoQueueOn) {
$spanElement.click();
}
previousNumber = number;
}
}
// Display board state in console for debugging
function displayAIBoard() {
const boardState = getBoardState();
console.log("Current board state:");
boardState.forEach(row => {
console.log(row.join(" | "));
});
}
// Initialize the script
async function initialize() {
console.log("Connect 4 AI script initializing...");
// Load auto-queue state from storage
isAutoQueueOn = await GM.getValue('autoQueueEnabled', AUTO_QUEUE_ENABLED_DEFAULT);
console.log(`Auto-Queue initialized: ${isAutoQueueOn ? 'ON' : 'OFF'}`);
// Create UI elements
createUI();
// Check Python server status initially and periodically
checkPythonServerStatus();
setInterval(checkPythonServerStatus, SERVER_CHECK_INTERVAL);
// Set up game state monitoring
setInterval(function() {
updateBoard();
initAITurn();
}, BOARD_CHECK_INTERVAL);
// Set up reset button monitoring
setInterval(checkForResetButtons, RESET_CHECK_INTERVAL);
// Set up auto-queue functionality
setInterval(checkButtonsPeriodically, AUTO_QUEUE_CHECK_INTERVAL);
setInterval(trackAndClickIfDifferent, AUTO_QUEUE_CHECK_INTERVAL);
// Set up move detection
setInterval(detectNewMove, 100);
// Debug board display
if (localStorage.getItem('debugMode') === 'true') {
setInterval(displayAIBoard, 5000);
}
// Set up keyboard controls
setupKeyboardControls();
console.log("Connect 4 AI script loaded and running");
}
// Start the script
initialize();
})();