☰

Chess AI

Chess.com Bot/Cheat that finds the best move with evaluation bar and ELO control!

  1. // ==UserScript==
  2. // @name         Chess AI
  3. // @namespace    github.com/longkidkoolstar
  4. // @version      1.0.1
  5. // @description  Chess.com Bot/Cheat that finds the best move with evaluation bar and ELO control!
  6. // @author       longkidkoolstar
  7. // @license      none
  8. // @match        https://www.chess.com/play/*
  9. // @match        https://www.chess.com/game/*
  10. // @icon         data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
  11. // @grant       GM.getValue
  12. // @grant       GM.setValue
  13. // @grant       GM.getResourceText
  14. // @resource    stockfish.js        https://raw.githubusercontent.com/longkidkoolstar/stockfish/refs/heads/main/stockfish.js
  15. // @require     https://gf.qytechs.cn/scripts/445697/code/index.js
  16. // @require     https://code.jquery.com/jquery-3.6.0.min.js
  17. // @run-at      document-start
  18. // ==/UserScript==
  19.  
  20.  
  21. const currentVersion = '1.0.1'; // Updated version number
  22.  
  23. function main() {
  24.  
  25.     var stockfishObjectURL;
  26.     var engine = document.engine = {};
  27.     var myVars = document.myVars = {};
  28.     myVars.autoMovePiece = false;
  29.     myVars.autoRun = false;
  30.     myVars.delay = 0.1;
  31.     myVars.eloRating = 1500; // Default ELO rating
  32.     myVars.currentEvaluation = 0; // Current evaluation value
  33.     myVars.persistentHighlights = true; // Default to persistent highlights
  34.     myVars.moveIndicatorType = 'highlights'; // Default to highlights instead of arrows
  35.     var myFunctions = document.myFunctions = {};
  36.  
  37.     // Create evaluation bar
  38.     var evalBar = null;
  39.     var evalText = null;
  40.  
  41.     stop_b = stop_w = 0;
  42.     s_br = s_br2 = s_wr = s_wr2 = 0;
  43.     obs = "";
  44.     myFunctions.rescan = function(lev) {
  45.         var ari = $("chess-board")
  46.         .find(".piece")
  47.         .map(function() {
  48.             return this.className;
  49.         })
  50.         .get();
  51.         jack = ari.map(f => f.substring(f.indexOf(' ') + 1));
  52.         function removeWord(arr, word) {
  53.             for (var i = 0; i < arr.length; i++) {
  54.                 arr[i] = arr[i].replace(word, '');
  55.             }
  56.         }
  57.         removeWord(ari, 'square-');
  58.         jack = ari.map(f => f.substring(f.indexOf(' ') + 1));
  59.         for (var i = 0; i < jack.length; i++) {
  60.             jack[i] = jack[i].replace('br', 'r')
  61.                 .replace('bn', 'n')
  62.                 .replace('bb', 'b')
  63.                 .replace('bq', 'q')
  64.                 .replace('bk', 'k')
  65.                 .replace('bb', 'b')
  66.                 .replace('bn', 'n')
  67.                 .replace('br', 'r')
  68.                 .replace('bp', 'p')
  69.                 .replace('wp', 'P')
  70.                 .replace('wr', 'R')
  71.                 .replace('wn', 'N')
  72.                 .replace('wb', 'B')
  73.                 .replace('br', 'R')
  74.                 .replace('wn', 'N')
  75.                 .replace('wb', 'B')
  76.                 .replace('wq', 'Q')
  77.                 .replace('wk', 'K')
  78.                 .replace('wb', 'B')
  79.         }
  80.         str2 = "";
  81.         var count = 0,
  82.             str = "";
  83.         for (var j = 8; j > 0; j--) {
  84.             for (var i = 1; i < 9; i++) {
  85.                 (str = (jack.find(el => el.includes([i] + [j])))) ? str = str.replace(/[^a-zA-Z]+/g, ''): str = "";
  86.                 if (str == "") {
  87.                     count++;
  88.                     str = count.toString();
  89.                     if (!isNaN(str2.charAt(str2.length - 1))) str2 = str2.slice(0, -1);
  90.                     else {
  91.                         count = 1;
  92.                         str = count.toString()
  93.                     }
  94.                 }
  95.                 str2 += str;
  96.                 if (i == 8) {
  97.                     count = 0;
  98.                     str2 += "/";
  99.                 }
  100.             }
  101.         }
  102.         str2 = str2.slice(0, -1);
  103.         //str2=str2+" KQkq - 0"
  104.         color = "";
  105.         wk = wq = bk = bq = "0";
  106.         const move = $('vertical-move-list')
  107.         .children();
  108.         if (move.length < 2) {
  109.             stop_b = stop_w = s_br = s_br2 = s_wr = s_wr2 = 0;
  110.         }
  111.         if (stop_b != 1) {
  112.             if (move.find(".black.node:contains('K')")
  113.                 .length) {
  114.                 bk = "";
  115.                 bq = "";
  116.                 stop_b = 1;
  117.                 console.log('debug secb');
  118.             }
  119.         } else {
  120.             bq = "";
  121.             bk = "";
  122.         }
  123.         if (stop_b != 1)(bk = (move.find(".black.node:contains('O-O'):not(:contains('O-O-O'))")
  124.                                .length) ? "" : "k") ? (bq = (move.find(".black.node:contains('O-O-O')")
  125.                                                              .length) ? bk = "" : "q") : bq = "";
  126.         if (s_br != 1) {
  127.             if (move.find(".black.node:contains('R')")
  128.                 .text()
  129.                 .match('[abcd]+')) {
  130.                 bq = "";
  131.                 s_br = 1
  132.             }
  133.         } else bq = "";
  134.         if (s_br2 != 1) {
  135.             if (move.find(".black.node:contains('R')")
  136.                 .text()
  137.                 .match('[hgf]+')) {
  138.                 bk = "";
  139.                 s_br2 = 1
  140.             }
  141.         } else bk = "";
  142.         if (stop_b == 0) {
  143.             if (s_br == 0)
  144.                 if (move.find(".white.node:contains('xa8')")
  145.                     .length > 0) {
  146.                     bq = "";
  147.                     s_br = 1;
  148.                     console.log('debug b castle_r');
  149.                 }
  150.             if (s_br2 == 0)
  151.                 if (move.find(".white.node:contains('xh8')")
  152.                     .length > 0) {
  153.                     bk = "";
  154.                     s_br2 = 1;
  155.                     console.log('debug b castle_l');
  156.                 }
  157.         }
  158.         if (stop_w != 1) {
  159.             if (move.find(".white.node:contains('K')")
  160.                 .length) {
  161.                 wk = "";
  162.                 wq = "";
  163.                 stop_w = 1;
  164.                 console.log('debug secw');
  165.             }
  166.         } else {
  167.             wq = "";
  168.             wk = "";
  169.         }
  170.         if (stop_w != 1)(wk = (move.find(".white.node:contains('O-O'):not(:contains('O-O-O'))")
  171.                                .length) ? "" : "K") ? (wq = (move.find(".white.node:contains('O-O-O')")
  172.                                                              .length) ? wk = "" : "Q") : wq = "";
  173.         if (s_wr != 1) {
  174.             if (move.find(".white.node:contains('R')")
  175.                 .text()
  176.                 .match('[abcd]+')) {
  177.                 wq = "";
  178.                 s_wr = 1
  179.             }
  180.         } else wq = "";
  181.         if (s_wr2 != 1) {
  182.             if (move.find(".white.node:contains('R')")
  183.                 .text()
  184.                 .match('[hgf]+')) {
  185.                 wk = "";
  186.                 s_wr2 = 1
  187.             }
  188.         } else wk = "";
  189.         if (stop_w == 0) {
  190.             if (s_wr == 0)
  191.                 if (move.find(".black.node:contains('xa1')")
  192.                     .length > 0) {
  193.                     wq = "";
  194.                     s_wr = 1;
  195.                     console.log('debug w castle_l');
  196.                 }
  197.             if (s_wr2 == 0)
  198.                 if (move.find(".black.node:contains('xh1')")
  199.                     .length > 0) {
  200.                     wk = "";
  201.                     s_wr2 = 1;
  202.                     console.log('debug w castle_r');
  203.                 }
  204.         }
  205.         if ($('.coordinates')
  206.             .children()
  207.             .first()
  208.             .text() == 1) {
  209.             str2 = str2 + " b " + wk + wq + bk + bq;
  210.             color = "white";
  211.         } else {
  212.             str2 = str2 + " w " + wk + wq + bk + bq;
  213.             color = "black";
  214.         }
  215.         //console.log(str2);
  216.         return str2;
  217.     }
  218.     myFunctions.color = function(dat){
  219.         response = dat;
  220.         var res1 = response.substring(0, 2);
  221.         var res2 = response.substring(2, 4);
  222.         
  223.         // Add the move to history
  224.         const moveNotation = res1 + '-' + res2;
  225.         myFunctions.addMoveToHistory(moveNotation, myVars.currentEvaluation, lastValue);
  226.  
  227.         // Clear any existing highlights and arrows before adding new ones
  228.         myFunctions.clearHighlights();
  229.         myFunctions.clearArrows();
  230.  
  231.         if(myVars.autoMove == true){
  232.             myFunctions.movePiece(res1, res2);
  233.             
  234.             // After auto move, we need to reset canGo to allow auto run on next turn
  235.             setTimeout(() => {
  236.                 canGo = true;
  237.             }, 500);
  238.         }
  239.         isThinking = false;
  240.  
  241.         // Only show move indicators if the option is enabled
  242.         if(myVars.showArrows !== false) {
  243.             // Convert algebraic notation to numeric coordinates
  244.             let fromSquare = res1.replace(/^a/, "1")
  245.                 .replace(/^b/, "2")
  246.                 .replace(/^c/, "3")
  247.                 .replace(/^d/, "4")
  248.                 .replace(/^e/, "5")
  249.                 .replace(/^f/, "6")
  250.                 .replace(/^g/, "7")
  251.                 .replace(/^h/, "8");
  252.             let toSquare = res2.replace(/^a/, "1")
  253.                 .replace(/^b/, "2")
  254.                 .replace(/^c/, "3")
  255.                 .replace(/^d/, "4")
  256.                 .replace(/^e/, "5")
  257.                 .replace(/^f/, "6")
  258.                 .replace(/^g/, "7")
  259.                 .replace(/^h/, "8");
  260.             
  261.             // Use arrows or highlights based on user preference
  262.             if (myVars.moveIndicatorType === 'arrows') {
  263.                 // Draw an arrow from the source to the destination square
  264.                 myFunctions.drawArrow(res1, res2, myVars.persistentHighlights);
  265.             } else {
  266.                 // Use the original highlighting method
  267.                 if (myVars.persistentHighlights) {
  268.                     // Add highlights with custom class for easier removal later
  269.                     $(board.nodeName)
  270.                         .prepend('<div class="highlight square-' + toSquare + ' bro persistent-highlight" style="background-color: rgb(235, 97, 80); opacity: 0.71;" data-test-element="highlight"></div>');
  271.                     
  272.                     $(board.nodeName)
  273.                         .prepend('<div class="highlight square-' + fromSquare + ' bro persistent-highlight" style="background-color: rgb(235, 97, 80); opacity: 0.71;" data-test-element="highlight"></div>');
  274.                 } else {
  275.                     // Use the original temporary highlights
  276.                     $(board.nodeName)
  277.                         .prepend('<div class="highlight square-' + toSquare + ' bro" style="background-color: rgb(235, 97, 80); opacity: 0.71;" data-test-element="highlight"></div>')
  278.                         .children(':first')
  279.                         .delay(1800)
  280.                         .queue(function() {
  281.                         $(this)
  282.                             .remove();
  283.                     });
  284.                     
  285.                     $(board.nodeName)
  286.                         .prepend('<div class="highlight square-' + fromSquare + ' bro" style="background-color: rgb(235, 97, 80); opacity: 0.71;" data-test-element="highlight"></div>')
  287.                         .children(':first')
  288.                         .delay(1800)
  289.                         .queue(function() {
  290.                         $(this)
  291.                             .remove();
  292.                     });
  293.                 }
  294.             }
  295.         }
  296.     }
  297.  
  298.     // Add a function to clear highlights
  299.     myFunctions.clearHighlights = function() {
  300.         // Remove all persistent highlights
  301.         $('.persistent-highlight').remove();
  302.     }
  303.  
  304.     // Add a function to clear arrows
  305.     myFunctions.clearArrows = function() {
  306.         // Remove all arrows
  307.         $('.chess-arrow-svg').remove();
  308.     }
  309.  
  310.     // Function to draw an arrow on the chess board
  311.     myFunctions.drawArrow = function(from, to, isPersistent) {
  312.         // Convert algebraic notation to coordinates
  313.         const files = {'a': 0, 'b': 1, 'c': 2, 'd': 3, 'e': 4, 'f': 5, 'g': 6, 'h': 7};
  314.         const ranks = {'1': 7, '2': 6, '3': 5, '4': 4, '5': 3, '6': 2, '7': 1, '8': 0};
  315.         
  316.         const fromFile = files[from[0]];
  317.         const fromRank = ranks[from[1]];
  318.         const toFile = files[to[0]];
  319.         const toRank = ranks[to[1]];
  320.         
  321.         // Get the board element and its dimensions
  322.         const boardElement = $(board.nodeName)[0];
  323.         const boardRect = boardElement.getBoundingClientRect();
  324.         const squareSize = boardRect.width / 8;
  325.         
  326.         // Calculate the center coordinates of the squares
  327.         const fromX = (fromFile + 0.5) * squareSize;
  328.         const fromY = (fromRank + 0.5) * squareSize;
  329.         const toX = (toFile + 0.5) * squareSize;
  330.         const toY = (toRank + 0.5) * squareSize;
  331.         
  332.         // Create SVG element for the arrow
  333.         const svgNS = "http://www.w3.org/2000/svg";
  334.         const svg = document.createElementNS(svgNS, "svg");
  335.         svg.setAttribute("width", boardRect.width);
  336.         svg.setAttribute("height", boardRect.height);
  337.         svg.setAttribute("class", "chess-arrow-svg");
  338.         svg.style.position = "absolute";
  339.         svg.style.top = "0";
  340.         svg.style.left = "0";
  341.         svg.style.pointerEvents = "none";
  342.         svg.style.zIndex = "100";
  343.         
  344.         // Calculate the angle and length of the arrow
  345.         const dx = toX - fromX;
  346.         const dy = toY - fromY;
  347.         const angle = Math.atan2(dy, dx);
  348.         const length = Math.sqrt(dx * dx + dy * dy);
  349.         
  350.         // Adjust start and end points to not cover the pieces
  351.         const margin = squareSize * 0.3;
  352.         const startX = fromX + Math.cos(angle) * margin;
  353.         const startY = fromY + Math.sin(angle) * margin;
  354.         const endX = toX - Math.cos(angle) * margin;
  355.         const endY = toY - Math.sin(angle) * margin;
  356.         
  357.         // Create the arrow line
  358.         const line = document.createElementNS(svgNS, "line");
  359.         line.setAttribute("x1", startX);
  360.         line.setAttribute("y1", startY);
  361.         line.setAttribute("x2", endX);
  362.         line.setAttribute("y2", endY);
  363.         line.setAttribute("stroke", "rgb(235, 97, 80)");
  364.         line.setAttribute("stroke-width", squareSize / 8);
  365.         line.setAttribute("opacity", "0.8");
  366.         
  367.         // Create the arrow head
  368.         const arrowHead = document.createElementNS(svgNS, "polygon");
  369.         const arrowSize = squareSize / 4;
  370.         const arrowAngle = Math.PI / 7;
  371.         
  372.         const point1X = endX;
  373.         const point1Y = endY;
  374.         const point2X = endX - arrowSize * Math.cos(angle - arrowAngle);
  375.         const point2Y = endY - arrowSize * Math.sin(angle - arrowAngle);
  376.         const point3X = endX - arrowSize * Math.cos(angle + arrowAngle);
  377.         const point3Y = endY - arrowSize * Math.sin(angle + arrowAngle);
  378.         
  379.         arrowHead.setAttribute("points", `${point1X},${point1Y} ${point2X},${point2Y} ${point3X},${point3Y}`);
  380.         arrowHead.setAttribute("fill", "rgb(235, 97, 80)");
  381.         arrowHead.setAttribute("opacity", "0.8");
  382.         
  383.         // Add elements to SVG
  384.         svg.appendChild(line);
  385.         svg.appendChild(arrowHead);
  386.         
  387.         // Add the SVG to the board
  388.         boardElement.appendChild(svg);
  389.         
  390.         // If not persistent, remove after delay
  391.         if (!isPersistent) {
  392.             setTimeout(() => {
  393.                 if (svg.parentNode) {
  394.                     svg.parentNode.removeChild(svg);
  395.                 }
  396.             }, 1800);
  397.         }
  398.     }
  399.  
  400.     // Modify the movePiece function to clear highlights and arrows when a move is made
  401.     myFunctions.movePiece = function(from, to){
  402.         // Clear any existing highlights and arrows when a move is made
  403.         myFunctions.clearHighlights();
  404.         myFunctions.clearArrows();
  405.         
  406.         for (var each=0;each<board.game.getLegalMoves().length;each++){
  407.             if(board.game.getLegalMoves()[each].from == from){
  408.                 if(board.game.getLegalMoves()[each].to == to){
  409.                     var move = board.game.getLegalMoves()[each];
  410.                     board.game.move({
  411.                         ...move,
  412.                         promotion: 'false',
  413.                         animate: false,
  414.                         userGenerated: true
  415.                     });
  416.                 }
  417.             }
  418.         }
  419.     }
  420.  
  421.     function parser(e){
  422.         // Store alternative moves for human-like play
  423.         if(e.data.includes('info') && e.data.includes('pv') && !e.data.includes('bestmove')) {
  424.             try {
  425.                 // Extract the move from the principal variation (pv)
  426.                 const parts = e.data.split(' ');
  427.                 const pvIndex = parts.indexOf('pv');
  428.                 if(pvIndex !== -1 && parts[pvIndex + 1]) {
  429.                     const move = parts[pvIndex + 1];
  430.                     
  431.                     // Store this move as an alternative
  432.                     if(!myVars.alternativeMoves) {
  433.                         myVars.alternativeMoves = [];
  434.                     }
  435.                     
  436.                     // Only add if not already in the list
  437.                     if(!myVars.alternativeMoves.includes(move)) {
  438.                         myVars.alternativeMoves.push(move);
  439.                     }
  440.                 }
  441.             } catch (err) {
  442.                 console.log('Error parsing alternative move:', err);
  443.             }
  444.         }
  445.         
  446.         if(e.data.includes('bestmove')){
  447.             const bestMove = e.data.split(' ')[1];
  448.             console.log('Best move:', bestMove);
  449.             
  450.             // If human mode is active, simulate human play
  451.             if(myVars.humanMode && myVars.humanMode.active && myVars.alternativeMoves && myVars.alternativeMoves.length > 0) {
  452.                 // Get the alternative moves (excluding the best move)
  453.                 const alternatives = myVars.alternativeMoves.filter(move => move !== bestMove);
  454.                 
  455.                 // Simulate human play with thinking time
  456.                 const moveToPlay = bestMove; // Default to best move
  457.                 
  458.                 // Simulate thinking time
  459.                 const thinkingTime = Math.random() * 
  460.                     (myVars.humanMode.moveTime.max - myVars.humanMode.moveTime.min) + 
  461.                     myVars.humanMode.moveTime.min;
  462.                 
  463.                 console.log(`Human mode: Thinking for ${thinkingTime.toFixed(1)} seconds...`);
  464.                 
  465.                 // Delay the move to simulate thinking
  466.                 setTimeout(() => {
  467.                     // Select move based on human-like error rates
  468.                     const selectedMove = simulateHumanPlay(bestMove, alternatives);
  469.                     
  470.                     // Play the selected move
  471.                     console.log(`Human mode: Playing ${selectedMove}`);
  472.                     myFunctions.color(selectedMove);
  473.                     
  474.                     // Reset alternative moves for next turn
  475.                     myVars.alternativeMoves = [];
  476.                     
  477.                     // Update auto run status if auto run is enabled
  478.                     if (myVars.autoRun) {
  479.                         myFunctions.updateAutoRunStatus('on');
  480.                     }
  481.                 }, thinkingTime * 1000);
  482.                 
  483.                 // Clear the thinking flag immediately to prevent multiple calls
  484.                 isThinking = false;
  485.             } else {
  486.                 // Normal engine play (no human simulation)
  487.                 myFunctions.color(bestMove);
  488.                 isThinking = false;
  489.                 
  490.                 // Update auto run status if auto run is enabled
  491.                 if (myVars.autoRun) {
  492.                     myFunctions.updateAutoRunStatus('on');
  493.                 }
  494.                 
  495.                 // Reset alternative moves for next turn
  496.                 myVars.alternativeMoves = [];
  497.             }
  498.         }
  499.         // Parse evaluation information
  500.         if(e.data.includes('info') && e.data.includes('score cp')) {
  501.             try {
  502.                 const parts = e.data.split(' ');
  503.                 const cpIndex = parts.indexOf('cp');
  504.                 if(cpIndex !== -1 && parts[cpIndex + 1]) {
  505.                     const evalValue = parseInt(parts[cpIndex + 1]) / 100; // Convert centipawns to pawns
  506.                     myVars.currentEvaluation = evalValue;
  507.                     
  508.                     // Get depth information
  509.                     const depthIndex = parts.indexOf('depth');
  510.                     let currentDepth = '';
  511.                     if(depthIndex !== -1 && parts[depthIndex + 1]) {
  512.                         currentDepth = parts[depthIndex + 1];
  513.                     }
  514.                     
  515.                     // Update depth info in evaluation text
  516.                     updateEvalBar(evalValue, null, currentDepth);
  517.                 }
  518.             } catch (err) {
  519.                 console.log('Error parsing evaluation:', err);
  520.             }
  521.         }
  522.         // Parse mate information
  523.         if(e.data.includes('info') && e.data.includes('score mate')) {
  524.             try {
  525.                 const parts = e.data.split(' ');
  526.                 const mateIndex = parts.indexOf('mate');
  527.                 if(mateIndex !== -1 && parts[mateIndex + 1]) {
  528.                     const movesToMate = parseInt(parts[mateIndex + 1]);
  529.                     const evalText = movesToMate > 0 ? `Mate in ${movesToMate}` : `Mate in ${Math.abs(movesToMate)}`;
  530.                     myVars.currentEvaluation = evalText; // Store mate text for history
  531.                     
  532.                     // Get depth information
  533.                     const depthIndex = parts.indexOf('depth');
  534.                     let currentDepth = '';
  535.                     if(depthIndex !== -1 && parts[depthIndex + 1]) {
  536.                         currentDepth = parts[depthIndex + 1];
  537.                     }
  538.                     
  539.                     updateEvalBar(movesToMate > 0 ? 20 : -20, evalText, currentDepth); // Use a large value to show mate
  540.                 }
  541.             } catch (err) {
  542.                 console.log('Error parsing mate:', err);
  543.             }
  544.         }
  545.     }
  546.  
  547.     // Function to update the evaluation bar
  548.     function updateEvalBar(evalValue, mateText = null, depth = '') {
  549.         if(!evalBar || !evalText) return;
  550.         
  551.         // Clamp the visual representation between -5 and 5
  552.         const clampedEval = Math.max(-5, Math.min(5, evalValue));
  553.         const percentage = 50 + (clampedEval * 10); // Convert to percentage (0-100)
  554.         
  555.         evalBar.style.height = `${percentage}%`;
  556.         
  557.         // Update color based on who's winning and the selected color theme
  558.         if(evalValue > 0.2) {
  559.             evalBar.style.backgroundColor = myVars.whiteAdvantageColor || '#4CAF50'; // White advantage
  560.         } else if(evalValue < -0.2) {
  561.             evalBar.style.backgroundColor = myVars.blackAdvantageColor || '#F44336'; // Black advantage
  562.         } else {
  563.             evalBar.style.backgroundColor = '#9E9E9E'; // Grey for equal
  564.         }
  565.         
  566.         // Update evaluation text
  567.         if(mateText) {
  568.             evalText.textContent = mateText + (depth ? ` (d${depth})` : '');
  569.         } else {
  570.             const sign = evalValue > 0 ? '+' : '';
  571.             evalText.textContent = `${sign}${evalValue.toFixed(2)}` + (depth ? ` (d${depth})` : '');
  572.         }
  573.         
  574.         // Add visual indicators for advantage
  575.         const advantageIndicator = document.getElementById('advantage-indicator');
  576.         if (!advantageIndicator) {
  577.             const indicator = document.createElement('div');
  578.             indicator.id = 'advantage-indicator';
  579.             indicator.style = `
  580.                 position: absolute;
  581.                 right: 0;
  582.                 width: 100%;
  583.                 text-align: center;
  584.                 font-size: 12px;
  585.                 font-weight: bold;
  586.                 text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
  587.                 pointer-events: none;
  588.             `;
  589.             evalBar.parentElement.appendChild(indicator);
  590.         }
  591.         
  592.         const indicator = document.getElementById('advantage-indicator');
  593.         
  594.         // Clear any existing labels
  595.         while (indicator.firstChild) {
  596.             indicator.removeChild(indicator.firstChild);
  597.         }
  598.         
  599.         // Add advantage labels
  600.         const addLabel = (position, text, color) => {
  601.             const label = document.createElement('div');
  602.             label.textContent = text;
  603.             label.style = `
  604.                 position: absolute;
  605.                 top: ${position}%;
  606.                 width: 100%;
  607.                 color: ${color};
  608.                 transform: translateY(-50%);
  609.             `;
  610.             indicator.appendChild(label);
  611.         };
  612.         
  613.         // Add labels for different advantage levels
  614.         addLabel(0, "Black ++", myVars.blackAdvantageColor || '#F44336');
  615.         addLabel(25, "Black +", myVars.blackAdvantageColor || '#F44336');
  616.         addLabel(50, "Equal", '#9E9E9E');
  617.         addLabel(75, "White +", myVars.whiteAdvantageColor || '#4CAF50');
  618.         addLabel(100, "White ++", myVars.whiteAdvantageColor || '#4CAF50');
  619.         
  620.         // Add a marker for current evaluation
  621.         const marker = document.createElement('div');
  622.         marker.style = `
  623.             position: absolute;
  624.             top: ${percentage}%;
  625.             left: -15px;
  626.             width: 0;
  627.             height: 0;
  628.             border-top: 6px solid transparent;
  629.             border-bottom: 6px solid transparent;
  630.             border-left: 10px solid #FFC107;
  631.             transform: translateY(-50%);
  632.         `;
  633.         indicator.appendChild(marker);
  634.     }
  635.  
  636.     myFunctions.reloadChessEngine = function() {
  637.         console.log(`Reloading the chess engine!`);
  638.  
  639.         engine.engine.terminate();
  640.         isThinking = false;
  641.         myFunctions.loadChessEngine();
  642.     }
  643.  
  644.     myFunctions.loadChessEngine = async function() {
  645.         if (!stockfishObjectURL) {
  646.             const stockfishText = await GM.getResourceText('stockfish.js'); // Await the async function
  647.             stockfishObjectURL = URL.createObjectURL(new Blob([stockfishText], { type: 'application/javascript' }));
  648.         }
  649.         console.log(stockfishObjectURL);
  650.     
  651.         if (stockfishObjectURL) {
  652.             engine.engine = new Worker(stockfishObjectURL);
  653.     
  654.             engine.engine.onmessage = e => {
  655.                 parser(e);
  656.             };
  657.             engine.engine.onerror = e => {
  658.                 console.log("Worker Error: " + e);
  659.             };
  660.     
  661.             engine.engine.postMessage('ucinewgame');
  662.     
  663.             // Set ELO if specified
  664.             if (myVars.eloRating) {
  665.                 setEngineElo(myVars.eloRating);
  666.             }
  667.         }
  668.         console.log('Loaded chess engine');
  669.     };
  670.     
  671.  
  672.     // Function to set engine ELO
  673.     function setEngineElo(elo) {
  674.         if(!engine.engine) return;
  675.         
  676.         // Stockfish supports UCI_Elo option to limit playing strength
  677.         engine.engine.postMessage(`setoption name UCI_Elo value ${elo}`);
  678.         
  679.         // Also set UCI_LimitStrength to true to enable ELO limiting
  680.         engine.engine.postMessage('setoption name UCI_LimitStrength value true');
  681.         
  682.         // Set Skill Level based on ELO (0-20 scale)
  683.         // This helps ensure the engine plays more consistently with the ELO rating
  684.         let skillLevel = Math.max(0, Math.min(20, Math.floor((elo - 1000) / 100)));
  685.         engine.engine.postMessage(`setoption name Skill Level value ${skillLevel}`);
  686.         
  687.         // Set appropriate depth limits based on ELO
  688.         // Lower ELO should use lower max depth to play more consistently
  689.         let maxDepth;
  690.         if (elo < 1200) {
  691.             maxDepth = 5;  // Beginner level
  692.         } else if (elo < 1500) {
  693.             maxDepth = 8;  // Intermediate level
  694.         } else if (elo < 1800) {
  695.             maxDepth = 12; // Advanced level
  696.         } else if (elo < 2100) {
  697.             maxDepth = 15; // Expert level
  698.         } else if (elo < 2400) {
  699.             maxDepth = 18; // Master level
  700.         } else {
  701.             maxDepth = 22; // Grandmaster level
  702.         }
  703.         
  704.         // Store the max depth for this ELO
  705.         myVars.maxDepthForElo = maxDepth;
  706.         
  707.         // Update the depth slider max value based on ELO
  708.         if ($('#depthSlider')[0]) {
  709.             // Only update the max if the current value is higher than the new max
  710.             if (parseInt($('#depthSlider')[0].value) > maxDepth) {
  711.                 $('#depthSlider')[0].value = maxDepth;
  712.                 $('#depthText')[0].innerHTML = "Current Depth: <strong>" + maxDepth + "</strong>";
  713.             }
  714.             
  715.             // Update the slider's max attribute
  716.             $('#depthSlider')[0].max = maxDepth;
  717.             
  718.             // Add a note about depth limitation
  719.             const depthNote = document.getElementById('depthNote');
  720.             if (depthNote) {
  721.                 depthNote.textContent = `(Max depth ${maxDepth} for ELO ${elo})`;
  722.             } else if ($('#depthText')[0]) {
  723.                 const note = document.createElement('span');
  724.                 note.id = 'depthNote';
  725.                 note.style = 'font-size: 12px; color: #666; margin-left: 5px;';
  726.                 note.textContent = `(Max depth ${maxDepth} for ELO ${elo})`;
  727.                 $('#depthText')[0].appendChild(note);
  728.             }
  729.         }
  730.         
  731.         console.log(`Engine ELO set to ${elo} with max depth ${maxDepth} and skill level ${skillLevel}`);
  732.     }
  733.  
  734.     // Function to set human-like play parameters
  735.     function setHumanMode(level) {
  736.         if(!engine.engine) return;
  737.         
  738.         // Define human-like play characteristics based on level
  739.         let elo, moveTime, errorRate, blunderRate;
  740.         
  741.         switch(level) {
  742.             case 'beginner':
  743.                 elo = 800;
  744.                 moveTime = { min: 1, max: 5 }; // Seconds
  745.                 errorRate = 0.3; // 30% chance of suboptimal moves
  746.                 blunderRate = 0.15; // 15% chance of blunders
  747.                 break;
  748.             case 'casual':
  749.                 elo = 1200;
  750.                 moveTime = { min: 2, max: 8 };
  751.                 errorRate = 0.2;
  752.                 blunderRate = 0.1;
  753.                 break;
  754.             case 'intermediate':
  755.                 elo = 1600;
  756.                 moveTime = { min: 3, max: 12 };
  757.                 errorRate = 0.15;
  758.                 blunderRate = 0.05;
  759.                 break;
  760.             case 'advanced':
  761.                 elo = 2000;
  762.                 moveTime = { min: 5, max: 15 };
  763.                 errorRate = 0.1;
  764.                 blunderRate = 0.03;
  765.                 break;
  766.             case 'expert':
  767.                 elo = 2400;
  768.                 moveTime = { min: 8, max: 20 };
  769.                 errorRate = 0.05;
  770.                 blunderRate = 0.01;
  771.                 break;
  772.             default:
  773.                 elo = 1600; // Default to intermediate
  774.                 moveTime = { min: 3, max: 12 };
  775.                 errorRate = 0.15;
  776.                 blunderRate = 0.05;
  777.         }
  778.         
  779.         // Store human mode settings
  780.         myVars.humanMode = {
  781.             active: true,
  782.             level: level,
  783.             elo: elo,
  784.             moveTime: moveTime,
  785.             errorRate: errorRate,
  786.             blunderRate: blunderRate
  787.         };
  788.         
  789.         // Set the engine ELO
  790.         setEngineElo(elo);
  791.         
  792.         // Update UI to reflect human mode
  793.         if ($('#humanModeLevel')[0]) {
  794.             $('#humanModeLevel')[0].textContent = level.charAt(0).toUpperCase() + level.slice(1);
  795.         }
  796.         
  797.         // Update the human mode info in the UI
  798.         const humanModeInfo = document.getElementById('humanModeInfo');
  799.         if (humanModeInfo) {
  800.             humanModeInfo.textContent = `Playing like a ${level} human (ELO ~${elo})`;
  801.         }
  802.         
  803.         console.log(`Human mode set to ${level} (ELO: ${elo}, Error rate: ${errorRate}, Blunder rate: ${blunderRate})`);
  804.     }
  805.  
  806.     // Function to calculate thinking time based on board position
  807.     function calculateThinkingTime(boardState) {
  808.         // Example logic: You can customize this based on your evaluation of the board
  809.         const complexity = evaluateBoardComplexity(boardState); // Implement this function based on your needs
  810.         const minTime = 100; // Minimum thinking time in milliseconds
  811.         const maxTime = 2000; // Maximum thinking time in milliseconds
  812.  
  813.         // Scale thinking time based on complexity (this is just an example)
  814.         return Math.min(maxTime, minTime + complexity * 100); // Adjust the scaling factor as needed
  815.     }
  816.  
  817.     // Function to simulate human-like play
  818.     function simulateHumanPlay(bestMove, alternativeMoves, boardState) {
  819.         if (!myVars.humanMode || !myVars.humanMode.active) {
  820.             return bestMove; // Return the best move if human mode is not active
  821.         }
  822.  
  823.         // Validate boardState
  824.         if (!Array.isArray(boardState) || boardState.length !== 8 || !boardState.every(row => Array.isArray(row) && row.length === 8)) {
  825.             console.error('Invalid boardState:', boardState);
  826.             return bestMove; // Return the best move if boardState is invalid
  827.         }
  828.  
  829.         const { errorRate, blunderRate } = myVars.humanMode;
  830.  
  831.         // Calculate thinking time based on the current board state
  832.         const thinkingTime = calculateThinkingTime(boardState);
  833.  
  834.         // Function to select a move based on human-like error rates
  835.         const selectMove = () => {
  836.             const random = Math.random();
  837.  
  838.             // Simulate a blunder (choosing a bad move)
  839.             if (random < blunderRate && alternativeMoves.length > 2) {
  840.                 // Pick one of the worst moves
  841.                 const worstMoves = alternativeMoves.slice(-2);
  842.                 return worstMoves[Math.floor(Math.random() * worstMoves.length)];
  843.             }
  844.             // Otherwise, return the best move
  845.             return bestMove;
  846.         };
  847.  
  848.         // Return a promise that resolves after the thinking time
  849.         return new Promise((resolve) => {
  850.             setTimeout(() => {
  851.                 resolve(selectMove());
  852.             }, thinkingTime);
  853.         });
  854.     }
  855.  
  856.     // Function to extract opponent's rating from the page
  857.     function extractOpponentRating() {
  858.         try {
  859.             // Look for user tagline components that contain ratings
  860.             const userTaglines = document.querySelectorAll('.user-tagline-component');
  861.             
  862.             if (userTaglines.length === 0) {
  863.                 console.log('No user taglines found');
  864.                 return null;
  865.             }
  866.             
  867.             // Find the opponent's tagline (not the current user)
  868.             let opponentRating = null;
  869.             
  870.             for (const tagline of userTaglines) {
  871.                 // Extract the rating from the tagline
  872.                 const ratingSpan = tagline.querySelector('.user-tagline-rating');
  873.                 if (ratingSpan) {
  874.                     const ratingText = ratingSpan.textContent.trim();
  875.                     // Extract the number from format like "(2228)"
  876.                     const ratingMatch = ratingText.match(/\((\d+)\)/);
  877.                     
  878.                     if (ratingMatch && ratingMatch[1]) {
  879.                         opponentRating = parseInt(ratingMatch[1]);
  880.                         console.log(`Found opponent rating: ${opponentRating}`);
  881.                         
  882.                         // Update the opponent rating info in the UI
  883.                         const opponentRatingInfo = document.getElementById('opponentRatingInfo');
  884.                         if (opponentRatingInfo) {
  885.                             opponentRatingInfo.textContent = `When enabled, the engine will play at the same rating as your opponent (${opponentRating})`;
  886.                         }
  887.                         
  888.                         break;
  889.                     }
  890.                 }
  891.             }
  892.             
  893.             return opponentRating;
  894.         } catch (error) {
  895.             console.error('Error extracting opponent rating:', error);
  896.             return null;
  897.         }
  898.     }
  899.     
  900.     // Function to update fusion mode status
  901.     myFunctions.updateFusionMode = function(enabled) {
  902.         const fusionModeStatus = document.getElementById('fusionModeStatus');
  903.         if (fusionModeStatus) {
  904.             fusionModeStatus.textContent = enabled ? 'On' : 'Off';
  905.             fusionModeStatus.style.color = enabled ? '#4CAF50' : '#666';
  906.         }
  907.         
  908.         // Store previous ELO when enabling fusion mode
  909.         if (enabled && !myVars.fusionMode) {
  910.             myVars.previousEloRating = myVars.eloRating;
  911.         }
  912.         
  913.         myVars.fusionMode = enabled;
  914.  
  915.         if (enabled) {
  916.             // Start polling for opponent ELO changes
  917.             myVars.pollingInterval = setInterval(() => {
  918.                 const currentOpponentRating = extractOpponentRating(); // Get the current opponent rating
  919.                 if (currentOpponentRating !== myVars.previousOpponentRating) {
  920.                     myVars.isNewGame = true; // Set new game flag
  921.                     myVars.previousOpponentRating = currentOpponentRating; // Update previous opponent rating
  922.  
  923.                     // Update the ELO slider to match opponent rating
  924.                     if ($('#eloSlider')[0]) {
  925.                         // Clamp the rating to the slider's min/max values
  926.                         const clampedRating = Math.max(1000, Math.min(3000, currentOpponentRating));
  927.                         $('#eloSlider')[0].value = clampedRating;
  928.                         $('#eloValue')[0].textContent = clampedRating;
  929.                         myVars.eloRating = clampedRating;
  930.  
  931.                         // Set the engine ELO
  932.                         setEngineElo(clampedRating);
  933.                     }
  934.                 }
  935.             }, 2000); // Check every 2 seconds
  936.         } else {
  937.             // Stop polling when fusion mode is disabled
  938.             clearInterval(myVars.pollingInterval);
  939.  
  940.             // Restore previous ELO setting when disabling fusion mode
  941.             if (myVars.previousEloRating) {
  942.                 if ($('#eloSlider')[0]) {
  943.                     $('#eloSlider')[0].value = myVars.previousEloRating;
  944.                     $('#eloValue')[0].textContent = myVars.previousEloRating;
  945.                     myVars.eloRating = myVars.previousEloRating;
  946.  
  947.                     // Set the engine ELO back to previous value
  948.                     setEngineElo(myVars.previousEloRating);
  949.                 }
  950.             }
  951.  
  952.             // Reset the opponent rating info text
  953.             const opponentRatingInfo = document.getElementById('opponentRatingInfo');
  954.             if (opponentRatingInfo) {
  955.                 opponentRatingInfo.textContent = 'When enabled, the engine will play at the same rating as your opponent';
  956.             }
  957.         }
  958.     }
  959.  
  960.     // Function to update human mode status
  961.     myFunctions.updateHumanMode = function(enabled) {
  962.         const humanModeStatus = document.getElementById('humanModeStatus');
  963.         if (humanModeStatus) {
  964.             humanModeStatus.textContent = enabled ? 'On' : 'Off';
  965.             humanModeStatus.style.color = enabled ? '#4CAF50' : '#666';
  966.         }
  967.         
  968.         // Store previous ELO when enabling human mode
  969.         if (enabled && !myVars.humanMode?.active) {
  970.             myVars.previousEloRating = myVars.eloRating;
  971.         }
  972.         
  973.         if (enabled) {
  974.             // Apply the selected human mode level
  975.             const level = $('#humanModeSelect').val() || 'intermediate';
  976.             setHumanMode(level);
  977.         } else {
  978.             // Disable human mode
  979.             if (myVars.humanMode) {
  980.                 myVars.humanMode.active = false;
  981.             }
  982.             
  983.             // Restore previous ELO setting when disabling human mode
  984.             if (myVars.previousEloRating) {
  985.                 if ($('#eloSlider')[0]) {
  986.                     $('#eloSlider')[0].value = myVars.previousEloRating;
  987.                     $('#eloValue')[0].textContent = myVars.previousEloRating;
  988.                     myVars.eloRating = myVars.previousEloRating;
  989.                     
  990.                     // Set the engine ELO back to previous value
  991.                     setEngineElo(myVars.previousEloRating);
  992.                 }
  993.             }
  994.             
  995.             // Reset the human mode info text
  996.             const humanModeInfo = document.getElementById('humanModeInfo');
  997.             if (humanModeInfo) {
  998.                 humanModeInfo.textContent = 'When enabled, the engine will play like a human with realistic mistakes and timing';
  999.             }
  1000.         }
  1001.     }
  1002.  
  1003.     // Function to update engine ELO from UI
  1004.     myFunctions.updateEngineElo = function() {
  1005.         const eloValue = parseInt($('#eloSlider')[0].value);
  1006.         $('#eloValue')[0].textContent = eloValue;
  1007.         myVars.eloRating = eloValue;
  1008.         
  1009.         if(engine.engine) {
  1010.             setEngineElo(eloValue);
  1011.         }
  1012.         
  1013.         // Update the depth slider if it exists
  1014.         if ($('#depthSlider')[0] && myVars.maxDepthForElo !== undefined) {
  1015.             // If current depth is higher than max allowed for this ELO, adjust it
  1016.             if (parseInt($('#depthSlider')[0].value) > myVars.maxDepthForElo) {
  1017.                 $('#depthSlider')[0].value = myVars.maxDepthForElo;
  1018.                 $('#depthText')[0].innerHTML = "Current Depth: <strong>" + myVars.maxDepthForElo + "</strong>";
  1019.                 
  1020.                 // Re-add the depth note
  1021.                 const depthNote = document.getElementById('depthNote');
  1022.                 if (depthNote && $('#depthText')[0]) {
  1023.                     $('#depthText')[0].appendChild(depthNote);
  1024.                 }
  1025.             }
  1026.         }
  1027.     }
  1028.  
  1029.     var lastValue = 11;
  1030.     myFunctions.runChessEngine = function(depth){
  1031.         // Use the depth from slider if no specific depth is provided
  1032.         if (depth === undefined) {
  1033.             depth = parseInt($('#depthSlider')[0].value);
  1034.         }
  1035.         
  1036.         // Ensure depth doesn't exceed the max for current ELO
  1037.         if (myVars.maxDepthForElo !== undefined && depth > myVars.maxDepthForElo) {
  1038.             depth = myVars.maxDepthForElo;
  1039.             console.log(`Depth limited to ${depth} based on current ELO setting`);
  1040.         }
  1041.         
  1042.         //var fen = myFunctions.rescan();
  1043.         var fen = board.game.getFEN();
  1044.         engine.engine.postMessage(`position fen ${fen}`);
  1045.         console.log('updated: ' + `position fen ${fen}`);
  1046.         isThinking = true;
  1047.         engine.engine.postMessage(`go depth ${depth}`);
  1048.         lastValue = depth;
  1049.         
  1050.         // Update the depth text
  1051.         if ($('#depthText')[0]) {
  1052.             $('#depthText')[0].innerHTML = "Current Depth: <strong>" + depth + "</strong>";
  1053.             
  1054.             // Re-add the depth note if it exists
  1055.             const depthNote = document.getElementById('depthNote');
  1056.             if (depthNote && $('#depthText')[0]) {
  1057.                 $('#depthText')[0].appendChild(depthNote);
  1058.             }
  1059.         }
  1060.         
  1061.         // Update the slider value to match
  1062.         if ($('#depthSlider')[0]) {
  1063.             $('#depthSlider')[0].value = depth;
  1064.         }
  1065.     }
  1066.  
  1067.     myFunctions.autoRun = function(lstValue){
  1068.         // Only run if it's the player's turn and not already thinking
  1069.         if(board.game.getTurn() == board.game.getPlayingAs() && !isThinking){
  1070.             console.log(`Auto running engine at depth ${lstValue}`);
  1071.             myFunctions.updateAutoRunStatus('running');
  1072.             myFunctions.runChessEngine(lstValue);
  1073.         } else {
  1074.             console.log("Auto run skipped - not player's turn or engine is already thinking");
  1075.             if (myVars.autoRun) {
  1076.                 myFunctions.updateAutoRunStatus('waiting');
  1077.             }
  1078.         }
  1079.     }
  1080.  
  1081.     document.onkeydown = function(e) {
  1082.         switch (e.keyCode) {
  1083.             case 81:
  1084.                 myFunctions.runChessEngine(1);
  1085.                 break;
  1086.             case 87:
  1087.                 myFunctions.runChessEngine(2);
  1088.                 break;
  1089.             case 69:
  1090.                 myFunctions.runChessEngine(3);
  1091.                 break;
  1092.             case 82:
  1093.                 myFunctions.runChessEngine(4);
  1094.                 break;
  1095.             case 84:
  1096.                 myFunctions.runChessEngine(5);
  1097.                 break;
  1098.             case 89:
  1099.                 myFunctions.runChessEngine(6);
  1100.                 break;
  1101.             case 85:
  1102.                 myFunctions.runChessEngine(7);
  1103.                 break;
  1104.             case 73:
  1105.                 myFunctions.runChessEngine(8);
  1106.                 break;
  1107.             case 79:
  1108.                 myFunctions.runChessEngine(9);
  1109.                 break;
  1110.             case 80:
  1111.                 myFunctions.runChessEngine(10);
  1112.                 break;
  1113.             case 65:
  1114.                 myFunctions.runChessEngine(11);
  1115.                 break;
  1116.             case 83:
  1117.                 myFunctions.runChessEngine(12);
  1118.                 break;
  1119.             case 68:
  1120.                 myFunctions.runChessEngine(13);
  1121.                 break;
  1122.             case 70:
  1123.                 myFunctions.runChessEngine(14);
  1124.                 break;
  1125.             case 71:
  1126.                 myFunctions.runChessEngine(15);
  1127.                 break;
  1128.             case 72:
  1129.                 myFunctions.runChessEngine(16);
  1130.                 break;
  1131.             case 74:
  1132.                 myFunctions.runChessEngine(17);
  1133.                 break;
  1134.             case 75:
  1135.                 myFunctions.runChessEngine(18);
  1136.                 break;
  1137.             case 76:
  1138.                 myFunctions.runChessEngine(19);
  1139.                 break;
  1140.             case 90:
  1141.                 myFunctions.runChessEngine(20);
  1142.                 break;
  1143.             case 88:
  1144.                 myFunctions.runChessEngine(21);
  1145.                 break;
  1146.             case 67:
  1147.                 myFunctions.runChessEngine(22);
  1148.                 break;
  1149.             case 86:
  1150.                 myFunctions.runChessEngine(23);
  1151.                 break;
  1152.             case 66:
  1153.                 myFunctions.runChessEngine(24);
  1154.                 break;
  1155.             case 78:
  1156.                 myFunctions.runChessEngine(25);
  1157.                 break;
  1158.             case 77:
  1159.                 myFunctions.runChessEngine(26);
  1160.                 break;
  1161.             case 187:
  1162.                 myFunctions.runChessEngine(100);
  1163.                 break;
  1164.         }
  1165.     };
  1166.  
  1167.     myFunctions.spinner = function() {
  1168.         if(isThinking == true){
  1169.             $('#overlay')[0].style.display = 'block';
  1170.         }
  1171.         if(isThinking == false) {
  1172.             $('#overlay')[0].style.display = 'none';
  1173.         }
  1174.     }
  1175.  
  1176.     let dynamicStyles = null;
  1177.  
  1178.     function addAnimation(body) {
  1179.         if (!dynamicStyles) {
  1180.             dynamicStyles = document.createElement('style');
  1181.             dynamicStyles.type = 'text/css';
  1182.             document.head.appendChild(dynamicStyles);
  1183.         }
  1184.  
  1185.         dynamicStyles.sheet.insertRule(body, dynamicStyles.length);
  1186.     }
  1187.  
  1188.  
  1189.     var loaded = false;
  1190.     myFunctions.loadEx = function(){
  1191.         try{
  1192.             var tmpStyle;
  1193.             var tmpDiv;
  1194.             board = $('chess-board')[0] || $('wc-chess-board')[0];
  1195.             myVars.board = board;
  1196.  
  1197.             // Create evaluation bar container
  1198.             var evalBarContainer = document.createElement('div');
  1199.             evalBarContainer.id = 'evalBarContainer';
  1200.             evalBarContainer.style = `
  1201.                 position: absolute;
  1202.                 left: -30px;
  1203.                 top: 0;
  1204.                 width: 20px;
  1205.                 height: 100%;
  1206.                 background-color: #f0f0f0;
  1207.                 border: 1px solid #ccc;
  1208.                 overflow: hidden;
  1209.                 z-index: 100;
  1210.             `;
  1211.             
  1212.             // Create the actual evaluation bar
  1213.             evalBar = document.createElement('div');
  1214.             evalBar.id = 'evalBar';
  1215.             evalBar.style = `
  1216.                 position: absolute;
  1217.                 bottom: 0;
  1218.                 width: 100%;
  1219.                 height: 50%;
  1220.                 background-color: #9E9E9E;
  1221.                 transition: height 0.3s, background-color 0.3s;
  1222.             `;
  1223.             
  1224.             // Create evaluation text
  1225.             evalText = document.createElement('div');
  1226.             evalText.id = 'evalText';
  1227.             evalText.style = `
  1228.                 position: absolute;
  1229.                 top: -25px;
  1230.                 width: 100%;
  1231.                 text-align: center;
  1232.                 font-weight: bold;
  1233.                 font-size: 14px;
  1234.                 z-index: 101;
  1235.             `;
  1236.             evalText.textContent = '0.0';
  1237.             
  1238.             // Add elements to the DOM
  1239.             evalBarContainer.appendChild(evalBar);
  1240.             board.parentElement.style.position = 'relative';
  1241.             board.parentElement.appendChild(evalBarContainer);
  1242.             board.parentElement.appendChild(evalText);
  1243.  
  1244.             // Create main container with header
  1245.             var div = document.createElement('div');
  1246.             div.setAttribute('style','background-color:white; height:auto; border-radius: 12px; box-shadow: 0 6px 16px rgba(0,0,0,0.15); padding: 0; max-width: 300px; position: relative; font-family: "Segoe UI", Arial, sans-serif;');
  1247.             div.setAttribute('id','settingsContainer');
  1248.             
  1249.             // Create header with collapse button
  1250.             var header = document.createElement('div');
  1251.             header.style = `
  1252.                 background-color: #2196F3;
  1253.                 color: white;
  1254.                 padding: 12px 15px;
  1255.                 border-top-left-radius: 12px;
  1256.                 border-top-right-radius: 12px;
  1257.                 cursor: pointer;
  1258.                 display: flex;
  1259.                 justify-content: space-between;
  1260.                 align-items: center;
  1261.                 font-weight: 600;
  1262.                 letter-spacing: 0.3px;
  1263.             `;
  1264.             header.innerHTML = `
  1265.                 <span style="font-weight: bold; font-size: 15px;">Chess AI Controls</span>
  1266.                 <span id="collapseBtn" style="transition: transform 0.3s;">▼</span>
  1267.             `;
  1268.             //div.appendChild(header);
  1269.  
  1270.  
  1271.             async function createDraggableHeader(div) {
  1272.                 // Set initial positioning and z-index
  1273.                 div.style.position = 'fixed';
  1274.                 div.style.zIndex = '9999';
  1275.                 div.style.margin = '0';
  1276.                 div.style.padding = '0';
  1277.             
  1278.                 var header = document.createElement('div');
  1279.                 header.style = `
  1280.                     background-color: #2196F3;
  1281.                     color: white;
  1282.                     padding: 12px 15px;
  1283.                     border-top-left-radius: 12px;
  1284.                     border-top-right-radius: 12px;
  1285.                     cursor: move;
  1286.                     display: flex;
  1287.                     justify-content: space-between;
  1288.                     align-items: center;
  1289.                     font-weight: 600;
  1290.                     letter-spacing: 0.3px;
  1291.                     user-select: none;
  1292.                 `;
  1293.                 header.innerHTML = `
  1294.                     <span id="dragArea" style="font-weight: bold; font-size: 15px; flex-grow: 1; cursor: move;">Chess AI Controls</span>
  1295.                     <span id="collapseBtn" style="transition: transform 0.3s;">▼</span>
  1296.                 `;
  1297.                 div.appendChild(header);
  1298.             
  1299.                 // Make the entire div draggable
  1300.                 let isDragging = false;
  1301.                 let currentX;
  1302.                 let currentY;
  1303.                 let initialX;
  1304.                 let initialY;
  1305.                 let xOffset = 0;
  1306.                 let yOffset = 0;
  1307.             
  1308.                 // Restore previous position on load
  1309.                 try {
  1310.                     const savedPosition = await GM.getValue('GUI Position', null);
  1311.                     if (savedPosition) {
  1312.                         xOffset = savedPosition.x;
  1313.                         yOffset = savedPosition.y;
  1314.                         div.style.transform = `translate3d(${xOffset}px, ${yOffset}px, 0)`;
  1315.                     }
  1316.                 } catch (error) {
  1317.                     console.error('Error loading saved position:', error);
  1318.                 }
  1319.             
  1320.                 // Drag area now includes the entire text span
  1321.                 const dragArea = header.querySelector('#dragArea');
  1322.             
  1323.                 // Event listeners for dragging
  1324.                 dragArea.addEventListener('mousedown', dragStart);
  1325.                 document.addEventListener('mouseup', dragEnd);
  1326.                 document.addEventListener('mousemove', drag);
  1327.             
  1328.                 function dragStart(e) {
  1329.                     // Prevent default to stop text selection and scrolling
  1330.                     e.preventDefault();
  1331.                     
  1332.                     initialX = e.clientX - xOffset;
  1333.                     initialY = e.clientY - yOffset;
  1334.             
  1335.                     isDragging = true;
  1336.                 }
  1337.             
  1338.                 function dragEnd(e) {
  1339.                     // Prevent default to stop any browser scrolling behavior
  1340.                     e.preventDefault();
  1341.                     
  1342.                     initialX = currentX;
  1343.                     initialY = currentY;
  1344.             
  1345.                     isDragging = false;
  1346.             
  1347.                     // Save the current position
  1348.                     try {
  1349.                         GM.setValue('GUI Position', { x: xOffset, y: yOffset });
  1350.                     } catch (error) {
  1351.                         console.error('Error saving position:', error);
  1352.                     }
  1353.                 }
  1354.             
  1355.                 function drag(e) {
  1356.                     if (isDragging) {
  1357.                         // Prevent default to stop scrolling and text selection
  1358.                         e.preventDefault();
  1359.                         
  1360.                         // Constrain to viewport
  1361.                         currentX = Math.max(0, Math.min(e.clientX - initialX, window.innerWidth - div.offsetWidth));
  1362.                         currentY = Math.max(0, Math.min(e.clientY - initialY, window.innerHeight - div.offsetHeight));
  1363.             
  1364.                         xOffset = currentX;
  1365.                         yOffset = currentY;
  1366.             
  1367.                         setTranslate(currentX, currentY, div);
  1368.                     }
  1369.                 }
  1370.             
  1371.                 function setTranslate(xPos, yPos, el) {
  1372.                     el.style.transform = `translate3d(${xPos}px, ${yPos}px, 0)`;
  1373.                 }
  1374.             
  1375.                 return header;
  1376.             }
  1377.             
  1378.             // Usage example:
  1379.              (async () => {
  1380.                  //var div = document.createElement('div');
  1381.                  await createDraggableHeader(div);
  1382.              })();
  1383.  
  1384.  
  1385.  
  1386.             // Create content container
  1387.             var contentContainer = document.createElement('div');
  1388.             contentContainer.id = 'aiControlsContent';
  1389.             contentContainer.style = 'padding: 15px; font-family: "Segoe UI", Arial, sans-serif; font-size: 14px;';
  1390.             
  1391.             // Add CSS for tabs
  1392.             var tabStyle = document.createElement('style');
  1393.             tabStyle.textContent = `
  1394.                 .tab-container {
  1395.                     width: 100%;
  1396.                 }
  1397.                 .tab-nav {
  1398.                     display: flex;
  1399.                     border-bottom: 2px solid #2196F3;
  1400.                     margin-bottom: 15px;
  1401.                     overflow-x: hidden; /* Prevent scrolling */
  1402.                     flex-wrap: nowrap; /* Keep tabs in a single row */
  1403.                     justify-content: space-between; /* Distribute space evenly */
  1404.                 }
  1405.                 .tab-button {
  1406.                     padding: 8px 5px; /* Reduce padding to fit all tabs */
  1407.                     background-color: #f8f8f8;
  1408.                     border: none;
  1409.                     border-radius: 8px 8px 0 0;
  1410.                     margin-right: 1px; /* Reduce margin between tabs */
  1411.                     cursor: pointer;
  1412.                     transition: all 0.3s;
  1413.                     font-weight: bold;
  1414.                     color: #666;
  1415.                     flex: 1;
  1416.                     text-align: center;
  1417.                     display: flex;
  1418.                     align-items: center;
  1419.                     justify-content: center;
  1420.                     box-shadow: 0 -2px 5px rgba(0,0,0,0.05);
  1421.                     font-size: 12px; /* Reduce font size to fit better */
  1422.                 }
  1423.                 .tab-button:hover {
  1424.                     background-color: #e9f5ff;
  1425.                     color: #2196F3;
  1426.                     transform: translateY(-2px);
  1427.                 }
  1428.                 .tab-button.active {
  1429.                     background-color: #2196F3;
  1430.                     color: white;
  1431.                     box-shadow: 0 -2px 5px rgba(33,150,243,0.3);
  1432.                     transform: translateY(-3px);
  1433.                     position: relative;
  1434.                 }
  1435.                 .tab-button.active::after {
  1436.                     content: '';
  1437.                     position: absolute;
  1438.                     bottom: -2px;
  1439.                     left: 0;
  1440.                     width: 100%;
  1441.                     height: 2px;
  1442.                     background-color: #2196F3;
  1443.                 }
  1444.                 .tab-content {
  1445.                     display: none;
  1446.                     padding: 10px 0;
  1447.                 }
  1448.                 .tab-content.active {
  1449.                     display: block;
  1450.                     animation: fadeIn 0.3s;
  1451.                 }
  1452.                 @keyframes fadeIn {
  1453.                     from { opacity: 0; }
  1454.                     to { opacity: 1; }
  1455.                 }
  1456.                 
  1457.                 /* Responsive design for small screens */
  1458.                 @media (max-width: 500px) {
  1459.                     .tab-button {
  1460.                         padding: 8px 5px;
  1461.                         font-size: 12px;
  1462.                     }
  1463.                 }
  1464.                 
  1465.                 /* Toggle switch styles */
  1466.                 .switch {
  1467.                     position: relative;
  1468.                     display: inline-block;
  1469.                     width: 46px;
  1470.                     height: 24px;
  1471.                 }
  1472.                 
  1473.                 .switch input {
  1474.                     opacity: 0;
  1475.                     width: 0;
  1476.                     height: 0;
  1477.                 }
  1478.                 
  1479.                 .slider {
  1480.                     position: absolute;
  1481.                     cursor: pointer;
  1482.                     top: 0;
  1483.                     left: 0;
  1484.                     right: 0;
  1485.                     bottom: 0;
  1486.                     background-color: #ccc;
  1487.                     transition: .3s;
  1488.                     border-radius: 24px;
  1489.                 }
  1490.                 
  1491.                 .slider:before {
  1492.                     position: absolute;
  1493.                     content: "";
  1494.                     height: 18px;
  1495.                     width: 18px;
  1496.                     left: 3px;
  1497.                     bottom: 3px;
  1498.                     background-color: white;
  1499.                     transition: .3s;
  1500.                     border-radius: 50%;
  1501.                     box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  1502.                 }
  1503.                 
  1504.                 input:checked + .slider {
  1505.                     background-color: #2196F3;
  1506.                 }
  1507.                 
  1508.                 input:focus + .slider {
  1509.                     box-shadow: 0 0 2px #2196F3;
  1510.                 }
  1511.                 
  1512.                 input:checked + .slider:before {
  1513.                     transform: translateX(22px);
  1514.                 }
  1515.                 
  1516.                 /* Button styles */
  1517.                 button {
  1518.                     transition: all 0.2s ease;
  1519.                 }
  1520.                 
  1521.                 button:hover {
  1522.                     transform: translateY(-2px);
  1523.                     box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  1524.                 }
  1525.                 
  1526.                 button:active {
  1527.                     transform: translateY(0);
  1528.                 }
  1529.                 
  1530.                 /* Input styles */
  1531.                 input[type="range"] {
  1532.                     -webkit-appearance: none;
  1533.                     height: 8px;
  1534.                     border-radius: 4px;
  1535.                     background: #e0e0e0;
  1536.                     outline: none;
  1537.                 }
  1538.                 
  1539.                 input[type="range"]::-webkit-slider-thumb {
  1540.                     -webkit-appearance: none;
  1541.                     appearance: none;
  1542.                     width: 18px;
  1543.                     height: 18px;
  1544.                     border-radius: 50%;
  1545.                     background: #2196F3;
  1546.                     cursor: pointer;
  1547.                     box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  1548.                 }
  1549.                 
  1550.                 input[type="range"]::-moz-range-thumb {
  1551.                     width: 18px;
  1552.                     height: 18px;
  1553.                     border-radius: 50%;
  1554.                     background: #2196F3;
  1555.                     cursor: pointer;
  1556.                     box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  1557.                 }
  1558.                 
  1559.                 /* Select styles */
  1560.                 select {
  1561.                     appearance: none;
  1562.                     background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  1563.                     background-repeat: no-repeat;
  1564.                     background-position: right 10px center;
  1565.                     background-size: 12px;
  1566.                     padding-right: 30px !important;
  1567.                     transition: all 0.2s;
  1568.                 }
  1569.                 
  1570.                 select:focus {
  1571.                     border-color: #2196F3;
  1572.                     box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.2);
  1573.                 }
  1574.                 
  1575.                 /* Tooltip styles */
  1576.                 [title] {
  1577.                     position: relative;
  1578.                 }
  1579.                 
  1580.                 [title]:hover::after {
  1581.                     content: attr(title);
  1582.                     position: absolute;
  1583.                     bottom: 100%;
  1584.                     left: 50%;
  1585.                     transform: translateX(-50%);
  1586.                     background-color: #333;
  1587.                     color: white;
  1588.                     padding: 5px 10px;
  1589.                     border-radius: 4px;
  1590.                     white-space: nowrap;
  1591.                     z-index: 1000;
  1592.                     font-size: 12px;
  1593.                 }
  1594.             `;
  1595.             document.head.appendChild(tabStyle);
  1596.             
  1597.             var content = `<div style="margin: 0;">
  1598.             <!-- Tab Navigation -->
  1599.             <div class="tab-container">
  1600.                 <div class="tab-nav">
  1601.                     <button class="tab-button active" data-tab="engine">
  1602.                         <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 3px;">
  1603.                             <circle cx="12" cy="12" r="10"></circle>
  1604.                             <line x1="12" y1="8" x2="12" y2="12"></line>
  1605.                             <line x1="12" y1="16" x2="12.01" y2="16"></line>
  1606.                         </svg>
  1607.                         Engine
  1608.                     </button>
  1609.                     <button class="tab-button" data-tab="actions">
  1610.                         <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 3px;">
  1611.                             <polygon points="5 3 19 12 5 21 5 3"></polygon>
  1612.                         </svg>
  1613.                         Actions
  1614.                     </button>
  1615.                     <button class="tab-button" data-tab="visual">
  1616.                         <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 3px;">
  1617.                             <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
  1618.                             <circle cx="12" cy="12" r="3"></circle>
  1619.                         </svg>
  1620.                         Visual
  1621.                     </button>
  1622.                     <button class="tab-button" data-tab="playstyle">
  1623.                         <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 3px;">
  1624.                             <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
  1625.                             <circle cx="12" cy="7" r="4"></circle>
  1626.                         </svg>
  1627.                         Play
  1628.                     </button>
  1629.                     <button class="tab-button" data-tab="auto">
  1630.                         <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 3px;">
  1631.                             <path d="M12 2L2 7l10 5 10-5-10-5z"></path>
  1632.                             <path d="M2 17l10 5 10-5"></path>
  1633.                             <path d="M2 12l10 5 10-5"></path>
  1634.                         </svg>
  1635.                         Auto
  1636.                     </button>
  1637.                 </div>
  1638.                 
  1639.                 <!-- Engine Tab -->
  1640.                 <div id="engine-tab" class="tab-content active">
  1641.             <div style="margin-bottom: 15px;">
  1642.                         <p id="depthText" style="margin: 0 0 5px 0;">Current Depth: <strong>11</strong></p>
  1643.                         <div style="display: flex; align-items: center;">
  1644.                             <div style="flex-grow: 1;">
  1645.                                 <label for="depthSlider" style="display: block; margin-bottom: 5px;">Adjust Depth (1-30):</label>
  1646.                 <input type="range" id="depthSlider" name="depthSlider" min="1" max="30" step="1" value="11" 
  1647.                                     oninput="document.getElementById('depthText').innerHTML = 'Current Depth: <strong>' + this.value + '</strong>';" 
  1648.                                     style="width: 100%;" title="Higher depth = stronger analysis but slower calculation">
  1649.                             </div>
  1650.                             <button id="applyDepth" style="margin-left: 10px; padding: 5px 10px; background-color: #4CAF50; color: white; border: none; border-radius: 4px; cursor: pointer; box-shadow: 0 2px 4px rgba(76, 175, 80, 0.2);" title="Apply the selected depth to the engine">Apply</button>
  1651.                         </div>
  1652.             </div>
  1653.             
  1654.             <div style="margin-bottom: 15px;">
  1655.                         <div style="display: flex; align-items: center; margin-bottom: 5px;">
  1656.                             <label for="eloSlider" style="margin-right: 5px;">Engine ELO Rating: <span id="eloValue">1500</span></label>
  1657.                             <button id="eloInfoBtn" title="ELO rating determines the playing strength of the engine" style="margin-left: 5px; padding: 0 5px; background-color: #2196F3; color: white; border: none; border-radius: 50%; cursor: pointer; font-size: 12px;">?</button>
  1658.                         </div>
  1659.                 <input type="range" id="eloSlider" name="eloSlider" min="1000" max="3000" step="50" value="1500" 
  1660.                                oninput="document.myFunctions.updateEngineElo()" style="width: 100%;">
  1661.                         <div id="eloDepthInfo" style="font-size: 12px; color: #666; margin-top: 5px; font-style: italic;">
  1662.                     Note: Lower ELO settings will limit the maximum search depth
  1663.                         </div>
  1664.                 </div>
  1665.             </div>
  1666.             
  1667.                 <!-- Play Style Tab -->
  1668.                 <div id="playstyle-tab" class="tab-content">
  1669.                     <div style="display: flex; flex-direction: column; gap: 15px;">
  1670.                         <!-- Fusion Mode -->
  1671.                         <div style="border-left: 3px solid #2196F3; padding-left: 10px;">
  1672.                             <div style="display: flex; align-items: center; margin-bottom: 5px;">
  1673.                                 <label for="fusionModeToggle" style="margin-right: 10px; font-weight: bold;">Fusion Mode:</label>
  1674.                     <label class="switch">
  1675.                         <input type="checkbox" id="fusionMode" name="fusionMode" value="false">
  1676.                         <span class="slider"></span>
  1677.                     </label>
  1678.                     <span id="fusionModeStatus" style="margin-left: 10px; font-size: 12px; color: #666;">Off</span>
  1679.                 </div>
  1680.                 <div id="opponentRatingInfo" style="font-size: 12px; color: #666; margin-top: 5px;">
  1681.                                 When enabled, the engine will match your opponent's rating
  1682.                 </div>
  1683.             </div>
  1684.             
  1685.                         <!-- Human Mode -->
  1686.                         <div style="border-left: 3px solid #9C27B0; padding-left: 10px;">
  1687.                             <div style="display: flex; align-items: center; margin-bottom: 5px;">
  1688.                                 <label for="humanModeToggle" style="margin-right: 10px; font-weight: bold;">Human Mode:</label>
  1689.                     <label class="switch">
  1690.                         <input type="checkbox" id="humanMode" name="humanMode" value="false">
  1691.                         <span class="slider"></span>
  1692.                     </label>
  1693.                     <span id="humanModeStatus" style="margin-left: 10px; font-size: 12px; color: #666;">Off</span>
  1694.                 </div>
  1695.                             
  1696.                 <div style="margin-top: 10px;">
  1697.                                 <div style="display: flex; align-items: center; margin-bottom: 5px;">
  1698.                                     <label for="humanModeSelect" style="margin-right: 5px;">Human Skill Level: <span id="humanModeLevel">Intermediate</span></label>
  1699.                                     <button id="humanModeInfoBtn" title="Choose how the engine mimics human play" style="margin-left: 5px; padding: 0 5px; background-color: #9C27B0; color: white; border: none; border-radius: 50%; cursor: pointer; font-size: 12px;">?</button>
  1700.                                 </div>
  1701.                                 <select id="humanModeSelect" style="width: 100%; padding: 8px; margin-top: 5px; border-radius: 4px; border: 1px solid #ddd;">
  1702.                         <option value="beginner">Beginner (ELO ~800)</option>
  1703.                         <option value="casual">Casual (ELO ~1200)</option>
  1704.                         <option value="intermediate" selected>Intermediate (ELO ~1600)</option>
  1705.                         <option value="advanced">Advanced (ELO ~2000)</option>
  1706.                         <option value="expert">Expert (ELO ~2400)</option>
  1707.                     </select>
  1708.                 </div>
  1709.                             <div id="humanModeInfo" style="font-size: 12px; color: #666; margin-top: 5px; font-style: italic;">
  1710.                     When enabled, the engine will play like a human with realistic mistakes and timing
  1711.                             </div>
  1712.                         </div>
  1713.                 </div>
  1714.             </div>
  1715.             
  1716.                 <!-- Visual Settings Tab -->
  1717.                 <div id="visual-tab" class="tab-content">
  1718.             <div style="margin-bottom: 15px;">
  1719.                         <label for="evalBarColor" style="display: block; margin-bottom: 5px;">Evaluation Bar Color Theme:</label>
  1720.                         <select id="evalBarColor" style="width: 100%; padding: 8px; border-radius: 4px; border: 1px solid #ddd;">
  1721.                     <option value="default">Default (Green/Red)</option>
  1722.                     <option value="blue">Blue/Orange</option>
  1723.                     <option value="purple">Purple/Yellow</option>
  1724.                     <option value="custom">Custom</option>
  1725.                 </select>
  1726.             </div>
  1727.             
  1728.                     <div id="customColorContainer" style="display: none; margin-bottom: 15px; padding: 10px; border: 1px dashed #ccc; border-radius: 4px;">
  1729.                         <div style="display: flex; gap: 10px; align-items: center; margin-bottom: 10px;">
  1730.                             <label for="whiteAdvantageColor">White Advantage:</label>
  1731.                             <input type="color" id="whiteAdvantageColor" value="#4CAF50" style="width: 40px; height: 30px;">
  1732.                         </div>
  1733.                         <div style="display: flex; gap: 10px; align-items: center;">
  1734.                             <label for="blackAdvantageColor">Black Advantage:</label>
  1735.                             <input type="color" id="blackAdvantageColor" value="#F44336" style="width: 40px; height: 30px;">
  1736.                         </div>
  1737.             </div>
  1738.             
  1739.             <div style="margin-bottom: 15px;">
  1740.                         <div style="display: flex; align-items: center; margin-bottom: 8px;">
  1741.                             <input type="checkbox" id="showArrows" name="showArrows" value="true" checked style="margin-right: 8px;">
  1742.                             <label for="showArrows"> Show move arrows</label>
  1743.                         </div>
  1744.                         
  1745.                         <div style="display: flex; align-items: center; margin-bottom: 12px;">
  1746.                             <input type="checkbox" id="persistentHighlights" name="persistentHighlights" value="true" checked style="margin-right: 8px;">
  1747.                             <label for="persistentHighlights"> Keep highlights until next move</label>
  1748.                         </div>
  1749.  
  1750.                         <div style="margin-top: 10px; border-top: 1px solid #eee; padding-top: 10px;">
  1751.                             <label style="display: block; margin-bottom: 8px; font-weight: bold;">Move Indicator Style:</label>
  1752.                             <div style="display: flex; align-items: center; margin-bottom: 8px;">
  1753.                                 <input type="radio" id="moveIndicatorHighlights" name="moveIndicatorType" value="highlights" checked style="margin-right: 8px;">
  1754.                                 <label for="moveIndicatorHighlights"> Highlights</label>
  1755.                             </div>
  1756.                             <div style="display: flex; align-items: center;">
  1757.                                 <input type="radio" id="moveIndicatorArrows" name="moveIndicatorType" value="arrows" style="margin-right: 8px;">
  1758.                                 <label for="moveIndicatorArrows"> Arrows</label>
  1759.                             </div>
  1760.                         </div>
  1761.                     </div>
  1762.                 </div>
  1763.                 
  1764.                 <!-- Automation Tab -->
  1765.                 <div id="auto-tab" class="tab-content">
  1766.                     <div style="margin-bottom: 20px; border-left: 3px solid #FF9800; padding-left: 12px;">
  1767.                         <div style="display: flex; align-items: center; margin-bottom: 10px;">
  1768.                             <label for="autoRunToggle" style="margin-right: 10px; font-weight: bold; color: #FF9800;">Auto Run:</label>
  1769.                             <label class="switch">
  1770.                                 <input type="checkbox" id="autoRun" name="autoRun" value="false">
  1771.                                 <span class="slider" style="background-color: #ccc;"></span>
  1772.                             </label>
  1773.                             <span id="autoRunStatus" style="margin-left: 10px; font-size: 12px; color: #666;">Off</span>
  1774.                         </div>
  1775.                         <div style="font-size: 12px; color: #666; margin-bottom: 10px;">
  1776.                             Automatically runs the engine when it's your turn
  1777.                         </div>
  1778.                     </div>
  1779.                 
  1780.                     <div style="margin-bottom: 20px; border-left: 3px solid #4CAF50; padding-left: 12px;">
  1781.                         <div style="display: flex; align-items: center; margin-bottom: 10px;">
  1782.                             <label for="autoMove" style="margin-right: 10px; font-weight: bold; color: #4CAF50;">Auto Move:</label>
  1783.                             <label class="switch">
  1784.                                 <input type="checkbox" id="autoMove" name="autoMove" value="false">
  1785.                                 <span class="slider" style="background-color: #ccc;"></span>
  1786.                             </label>
  1787.                             <span id="autoMoveStatus" style="margin-left: 10px; font-size: 12px; color: #666;">Off</span>
  1788.                         </div>
  1789.                         <div style="font-size: 12px; color: #666; margin-bottom: 10px;">
  1790.                             Automatically plays the best move for you
  1791.                         </div>
  1792.                     </div>
  1793.             
  1794.                     <div style="margin-top: 15px; background-color: #f8f8f8; padding: 12px; border-radius: 6px;">
  1795.                         <label style="display: block; margin-bottom: 10px; font-weight: bold;">Auto Run Delay (Seconds):</label>
  1796.                         <div style="display: flex; align-items: center; gap: 10px;">
  1797.                             <div style="flex: 1;">
  1798.                                 <label for="timeDelayMin" style="display: block; font-size: 12px; margin-bottom: 3px;">Minimum:</label>
  1799.                                 <input type="number" id="timeDelayMin" name="timeDelayMin" min="0.1" value="0.1" style="width: 100%; padding: 8px; border-radius: 4px; border: 1px solid #ddd;">
  1800.                             </div>
  1801.                             <span style="color: #666;">to</span>
  1802.                             <div style="flex: 1;">
  1803.                                 <label for="timeDelayMax" style="display: block; font-size: 12px; margin-bottom: 3px;">Maximum:</label>
  1804.                                 <input type="number" id="timeDelayMax" name="timeDelayMax" min="0.1" value="1" style="width: 100%; padding: 8px; border-radius: 4px; border: 1px solid #ddd;">
  1805.                             </div>
  1806.                         </div>
  1807.                         <div style="font-size: 12px; color: #666; margin-top: 8px; font-style: italic;">
  1808.                             Random delay between min and max to simulate human thinking time
  1809.                         </div>
  1810.                     </div>
  1811.                 </div>
  1812.             </div>
  1813.             
  1814.                 <!-- Actions Tab -->
  1815.                 <div id="actions-tab" class="tab-content">
  1816.                     <div style="display: flex; gap: 10px; margin-bottom: 15px;">
  1817.                         <button id="runEngineBtn" style="flex: 1; padding: 10px; background-color: #4CAF50; color: white; border: none; border-radius: 6px; cursor: pointer; font-weight: bold; box-shadow: 0 2px 5px rgba(76, 175, 80, 0.3);">
  1818.                             <span style="display: flex; align-items: center; justify-content: center;">
  1819.                                 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 5px;">
  1820.                                     <polygon points="5 3 19 12 5 21 5 3"></polygon>
  1821.                                 </svg>
  1822.                                 Run Engine
  1823.                             </span>
  1824.                         </button>
  1825.                         <button id="stopEngineBtn" style="flex: 1; padding: 10px; background-color: #F44336; color: white; border: none; border-radius: 6px; cursor: pointer; font-weight: bold; box-shadow: 0 2px 5px rgba(244, 67, 54, 0.3);">
  1826.                             <span style="display: flex; align-items: center; justify-content: center;">
  1827.                                 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 5px;">
  1828.                                     <rect x="6" y="6" width="12" height="12"></rect>
  1829.                                 </svg>
  1830.                                 Stop Engine
  1831.                             </span>
  1832.                         </button>
  1833.                     </div>
  1834.             
  1835.                     <button id="saveSettingsBtn" style="width: 100%; padding: 10px; background-color: #2196F3; color: white; border: none; border-radius: 6px; cursor: pointer; font-weight: bold; margin-bottom: 10px; box-shadow: 0 2px 5px rgba(33, 150, 243, 0.3);">
  1836.                         <span style="display: flex; align-items: center; justify-content: center;">
  1837.                             <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 5px;">
  1838.                                 <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"></path>
  1839.                                 <polyline points="17 21 17 13 7 13 7 21"></polyline>
  1840.                                 <polyline points="7 3 7 8 15 8"></polyline>
  1841.                             </svg>
  1842.                             Save Settings
  1843.                         </span>
  1844.                     </button>
  1845.                     
  1846.                     <button id="showKeyboardShortcuts" style="width: 100%; padding: 10px; background-color: #9C27B0; color: white; border: none; border-radius: 6px; cursor: pointer; font-weight: bold; box-shadow: 0 2px 5px rgba(156, 39, 176, 0.3);">
  1847.                         <span style="display: flex; align-items: center; justify-content: center;">
  1848.                             <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 5px;">
  1849.                                 <rect x="2" y="4" width="20" height="16" rx="2" ry="2"></rect>
  1850.                                 <line x1="6" y1="8" x2="6" y2="8"></line>
  1851.                                 <line x1="10" y1="8" x2="10" y2="8"></line>
  1852.                                 <line x1="14" y1="8" x2="14" y2="8"></line>
  1853.                                 <line x1="18" y1="8" x2="18" y2="8"></line>
  1854.                                 <line x1="8" y1="12" x2="16" y2="12"></line>
  1855.                                 <line x1="6" y1="16" x2="6" y2="16"></line>
  1856.                                 <line x1="18" y1="16" x2="18" y2="16"></line>
  1857.                                 <line x1="10" y1="16" x2="14" y2="16"></line>
  1858.                             </svg>
  1859.                             Keyboard Shortcuts
  1860.                         </span>
  1861.                     </button>
  1862.                 </div>
  1863.             </div>
  1864.             </div>`;
  1865.             
  1866.             contentContainer.innerHTML = content;
  1867.             div.appendChild(contentContainer);
  1868.             
  1869.             // Move history will be added later in the code
  1870.             
  1871.             // Create keyboard shortcuts modal with improved styling
  1872.             var keyboardModal = document.createElement('div');
  1873.             keyboardModal.id = 'keyboardShortcutsModal';
  1874.             keyboardModal.style = `
  1875.                 display: none;
  1876.                 position: fixed;
  1877.                 top: 0;
  1878.                 left: 0;
  1879.                 width: 100%;
  1880.                 height: 100%;
  1881.                 background-color: rgba(0,0,0,0.7);
  1882.                 z-index: 2000;
  1883.                 justify-content: center;
  1884.                 align-items: center;
  1885.             `;
  1886.             
  1887.             var modalContent = document.createElement('div');
  1888.             modalContent.style = `
  1889.                 background-color: white;
  1890.                 padding: 20px;
  1891.                 border-radius: 8px;
  1892.                 max-width: 600px;
  1893.                 max-height: 80vh;
  1894.                 overflow-y: auto;
  1895.                 position: relative;
  1896.                 box-shadow: 0 4px 20px rgba(0,0,0,0.2);
  1897.             `;
  1898.             
  1899.             var closeBtn = document.createElement('span');
  1900.             closeBtn.innerHTML = '&times;';
  1901.             closeBtn.style = `
  1902.                 position: absolute;
  1903.                 top: 10px;
  1904.                 right: 15px;
  1905.                 font-size: 24px;
  1906.                 cursor: pointer;
  1907.                 color: #333;
  1908.                 transition: color 0.2s;
  1909.             `;
  1910.             closeBtn.onmouseover = function() {
  1911.                 this.style.color = '#F44336';
  1912.             };
  1913.             closeBtn.onmouseout = function() {
  1914.                 this.style.color = '#333';
  1915.             };
  1916.             closeBtn.onclick = function() {
  1917.                 keyboardModal.style.display = 'none';
  1918.             };
  1919.             
  1920.             modalContent.appendChild(closeBtn);
  1921.             
  1922.             var shortcutsTitle = document.createElement('h2');
  1923.             shortcutsTitle.textContent = 'Keyboard Shortcuts';
  1924.             shortcutsTitle.style = 'margin-top: 0; color: #2196F3; border-bottom: 2px solid #eee; padding-bottom: 10px;';
  1925.             modalContent.appendChild(shortcutsTitle);
  1926.             
  1927.             // Add a brief description
  1928.             var shortcutsDescription = document.createElement('p');
  1929.             shortcutsDescription.textContent = 'Press any of these keys to quickly run the engine at different depths. Keys are organized by strength level.';
  1930.             shortcutsDescription.style = 'margin-bottom: 20px; color: #666;';
  1931.             modalContent.appendChild(shortcutsDescription);
  1932.             
  1933.             // Add visual keyboard layout
  1934.             var keyboardLayout = document.createElement('div');
  1935.             keyboardLayout.style = `
  1936.                 background-color: #f5f5f5;
  1937.                 border-radius: 8px;
  1938.                 padding: 15px;
  1939.                 margin-bottom: 20px;
  1940.                 text-align: center;
  1941.                 font-family: monospace;
  1942.             `;
  1943.             
  1944.             keyboardLayout.innerHTML = `
  1945.                 <div style="margin-bottom: 10px; font-weight: bold; color: #666;">Visual Keyboard Guide</div>
  1946.                 <div style="display: flex; justify-content: center; margin-bottom: 8px;">
  1947.                     <div style="width: 40px; height: 40px; background-color: #e0e0e0; border: 1px solid #ccc; border-radius: 4px; display: flex; justify-content: center; align-items: center; margin: 0 2px; position: relative;">Q<span style="position: absolute; bottom: 2px; right: 2px; font-size: 8px; color: #F44336;">1</span></div>
  1948.                     <div style="width: 40px; height: 40px; background-color: #e0e0e0; border: 1px solid #ccc; border-radius: 4px; display: flex; justify-content: center; align-items: center; margin: 0 2px; position: relative;">W<span style="position: absolute; bottom: 2px; right: 2px; font-size: 8px; color: #F44336;">2</span></div>
  1949.                     <div style="width: 40px; height: 40px; background-color: #e0e0e0; border: 1px solid #ccc; border-radius: 4px; display: flex; justify-content: center; align-items: center; margin: 0 2px; position: relative;">E<span style="position: absolute; bottom: 2px; right: 2px; font-size: 8px; color: #F44336;">3</span></div>
  1950.                     <div style="width: 40px; height: 40px; background-color: #e0e0e0; border: 1px solid #ccc; border-radius: 4px; display: flex; justify-content: center; align-items: center; margin: 0 2px; position: relative;">R<span style="position: absolute; bottom: 2px; right: 2px; font-size: 8px; color: #FF9800;">4</span></div>
  1951.                     <div style="width: 40px; height: 40px; background-color: #e0e0e0; border: 1px solid #ccc; border-radius: 4px; display: flex; justify-content: center; align-items: center; margin: 0 2px; position: relative;">T<span style="position: absolute; bottom: 2px; right: 2px; font-size: 8px; color: #FF9800;">5</span></div>
  1952.                     <div style="width: 40px; height: 40px; background-color: #e0e0e0; border: 1px solid #ccc; border-radius: 4px; display: flex; justify-content: center; align-items: center; margin: 0 2px; position: relative;">Y<span style="position: absolute; bottom: 2px; right: 2px; font-size: 8px; color: #FF9800;">6</span></div>
  1953.                     <div style="width: 40px; height: 40px; background-color: #e0e0e0; border: 1px solid #ccc; border-radius: 4px; display: flex; justify-content: center; align-items: center; margin: 0 2px; position: relative;">U<span style="position: absolute; bottom: 2px; right: 2px; font-size: 8px; color: #FF9800;">7</span></div>
  1954.                     <div style="width: 40px; height: 40px; background-color: #e0e0e0; border: 1px solid #ccc; border-radius: 4px; display: flex; justify-content: center; align-items: center; margin: 0 2px; position: relative;">I<span style="position: absolute; bottom: 2px; right: 2px; font-size: 8px; color: #FF9800;">8</span></div>
  1955.                     <div style="width: 40px; height: 40px; background-color: #e0e0e0; border: 1px solid #ccc; border-radius: 4px; display: flex; justify-content: center; align-items: center; margin: 0 2px; position: relative;">O<span style="position: absolute; bottom: 2px; right: 2px; font-size: 8px; color: #FF9800;">9</span></div>
  1956.                     <div style="width: 40px; height: 40px; background-color: #e0e0e0; border: 1px solid #ccc; border-radius: 4px; display: flex; justify-content: center; align-items: center; margin: 0 2px; position: relative;">P<span style="position: absolute; bottom: 2px; right: 2px; font-size: 8px; color: #4CAF50;">10</span></div>
  1957.                 </div>
  1958.                 <div style="display: flex; justify-content: center; margin-bottom: 8px; margin-left: 20px;">
  1959.                     <div style="width: 40px; height: 40px; background-color: #e0e0e0; border: 1px solid #ccc; border-radius: 4px; display: flex; justify-content: center; align-items: center; margin: 0 2px; position: relative;">A<span style="position: absolute; bottom: 2px; right: 2px; font-size: 8px; color: #4CAF50;">11</span></div>
  1960.                     <div style="width: 40px; height: 40px; background-color: #e0e0e0; border: 1px solid #ccc; border-radius: 4px; display: flex; justify-content: center; align-items: center; margin: 0 2px; position: relative;">S<span style="position: absolute; bottom: 2px; right: 2px; font-size: 8px; color: #4CAF50;">12</span></div>
  1961.                     <div style="width: 40px; height: 40px; background-color: #e0e0e0; border: 1px solid #ccc; border-radius: 4px; display: flex; justify-content: center; align-items: center; margin: 0 2px; position: relative;">D<span style="position: absolute; bottom: 2px; right: 2px; font-size: 8px; color: #4CAF50;">13</span></div>
  1962.                     <div style="width: 40px; height: 40px; background-color: #e0e0e0; border: 1px solid #ccc; border-radius: 4px; display: flex; justify-content: center; align-items: center; margin: 0 2px; position: relative;">F<span style="position: absolute; bottom: 2px; right: 2px; font-size: 8px; color: #4CAF50;">14</span></div>
  1963.                     <div style="width: 40px; height: 40px; background-color: #e0e0e0; border: 1px solid #ccc; border-radius: 4px; display: flex; justify-content: center; align-items: center; margin: 0 2px; position: relative;">G<span style="position: absolute; bottom: 2px; right: 2px; font-size: 8px; color: #4CAF50;">15</span></div>
  1964.                     <div style="width: 40px; height: 40px; background-color: #e0e0e0; border: 1px solid #ccc; border-radius: 4px; display: flex; justify-content: center; align-items: center; margin: 0 2px; position: relative;">H<span style="position: absolute; bottom: 2px; right: 2px; font-size: 8px; color: #2196F3;">16</span></div>
  1965.                     <div style="width: 40px; height: 40px; background-color: #e0e0e0; border: 1px solid #ccc; border-radius: 4px; display: flex; justify-content: center; align-items: center; margin: 0 2px; position: relative;">J<span style="position: absolute; bottom: 2px; right: 2px; font-size: 8px; color: #2196F3;">17</span></div>
  1966.                     <div style="width: 40px; height: 40px; background-color: #e0e0e0; border: 1px solid #ccc; border-radius: 4px; display: flex; justify-content: center; align-items: center; margin: 0 2px; position: relative;">K<span style="position: absolute; bottom: 2px; right: 2px; font-size: 8px; color: #2196F3;">18</span></div>
  1967.                     <div style="width: 40px; height: 40px; background-color: #e0e0e0; border: 1px solid #ccc; border-radius: 4px; display: flex; justify-content: center; align-items: center; margin: 0 2px; position: relative;">L<span style="position: absolute; bottom: 2px; right: 2px; font-size: 8px; color: #2196F3;">19</span></div>
  1968.                 </div>
  1969.                 <div style="display: flex; justify-content: center; margin-left: 40px;">
  1970.                     <div style="width: 40px; height: 40px; background-color: #e0e0e0; border: 1px solid #ccc; border-radius: 4px; display: flex; justify-content: center; align-items: center; margin: 0 2px; position: relative;">Z<span style="position: absolute; bottom: 2px; right: 2px; font-size: 8px; color: #9C27B0;">20</span></div>
  1971.                     <div style="width: 40px; height: 40px; background-color: #e0e0e0; border: 1px solid #ccc; border-radius: 4px; display: flex; justify-content: center; align-items: center; margin: 0 2px; position: relative;">X<span style="position: absolute; bottom: 2px; right: 2px; font-size: 8px; color: #9C27B0;">21</span></div>
  1972.                     <div style="width: 40px; height: 40px; background-color: #e0e0e0; border: 1px solid #ccc; border-radius: 4px; display: flex; justify-content: center; align-items: center; margin: 0 2px; position: relative;">C<span style="position: absolute; bottom: 2px; right: 2px; font-size: 8px; color: #9C27B0;">22</span></div>
  1973.                     <div style="width: 40px; height: 40px; background-color: #e0e0e0; border: 1px solid #ccc; border-radius: 4px; display: flex; justify-content: center; align-items: center; margin: 0 2px; position: relative;">V<span style="position: absolute; bottom: 2px; right: 2px; font-size: 8px; color: #9C27B0;">23</span></div>
  1974.                     <div style="width: 40px; height: 40px; background-color: #e0e0e0; border: 1px solid #ccc; border-radius: 4px; display: flex; justify-content: center; align-items: center; margin: 0 2px; position: relative;">B<span style="position: absolute; bottom: 2px; right: 2px; font-size: 8px; color: #9C27B0;">24</span></div>
  1975.                     <div style="width: 40px; height: 40px; background-color: #e0e0e0; border: 1px solid #ccc; border-radius: 4px; display: flex; justify-content: center; align-items: center; margin: 0 2px; position: relative;">N<span style="position: absolute; bottom: 2px; right: 2px; font-size: 8px; color: #9C27B0;">25</span></div>
  1976.                     <div style="width: 40px; height: 40px; background-color: #e0e0e0; border: 1px solid #ccc; border-radius: 4px; display: flex; justify-content: center; align-items: center; margin: 0 2px; position: relative;">M<span style="position: absolute; bottom: 2px; right: 2px; font-size: 8px; color: #9C27B0;">26</span></div>
  1977.                 </div>
  1978.                 <div style="margin-top: 15px; display: flex; justify-content: center;">
  1979.                     <div style="width: 80px; height: 40px; background-color: #e0e0e0; border: 1px solid #ccc; border-radius: 4px; display: flex; justify-content: center; align-items: center; margin: 0 2px; position: relative;">=<span style="position: absolute; bottom: 2px; right: 2px; font-size: 8px; color: #E91E63;">MAX</span></div>
  1980.                 </div>
  1981.                 <div style="margin-top: 15px; font-size: 12px;">
  1982.                     <span style="color: #F44336;">■</span> Beginner &nbsp;
  1983.                     <span style="color: #FF9800;">■</span> Intermediate &nbsp;
  1984.                     <span style="color: #4CAF50;">■</span> Advanced &nbsp;
  1985.                     <span style="color: #2196F3;">■</span> Expert &nbsp;
  1986.                     <span style="color: #9C27B0;">■</span> Master &nbsp;
  1987.                     <span style="color: #E91E63;">■</span> Maximum
  1988.                 </div>
  1989.             `;
  1990.             
  1991.             modalContent.appendChild(keyboardLayout);
  1992.             
  1993.             var shortcutsTable = document.createElement('table');
  1994.             shortcutsTable.style = 'width: 100%; border-collapse: collapse;';
  1995.             
  1996.             // Create table header
  1997.             var tableHeader = document.createElement('thead');
  1998.             tableHeader.innerHTML = `
  1999.                 <tr style="background-color: #f5f5f5;">
  2000.                     <th style="text-align: left; padding: 12px; border-bottom: 2px solid #ddd; width: 20%;">Key</th>
  2001.                     <th style="text-align: left; padding: 12px; border-bottom: 2px solid #ddd;">Function</th>
  2002.                     <th style="text-align: left; padding: 12px; border-bottom: 2px solid #ddd;">Strength</th>
  2003.                 </tr>
  2004.             `;
  2005.             shortcutsTable.appendChild(tableHeader);
  2006.             
  2007.             // Create table body with all keyboard shortcuts
  2008.             var tableBody = document.createElement('tbody');
  2009.             
  2010.             // Define all shortcuts with strength categories
  2011.             const shortcuts = [
  2012.                 { key: 'Q', function: 'Run engine at depth 1', strength: 'Beginner' },
  2013.                 { key: 'W', function: 'Run engine at depth 2', strength: 'Beginner' },
  2014.                 { key: 'E', function: 'Run engine at depth 3', strength: 'Beginner' },
  2015.                 { key: 'R', function: 'Run engine at depth 4', strength: 'Intermediate' },
  2016.                 { key: 'T', function: 'Run engine at depth 5', strength: 'Intermediate' },
  2017.                 { key: 'Y', function: 'Run engine at depth 6', strength: 'Intermediate' },
  2018.                 { key: 'U', function: 'Run engine at depth 7', strength: 'Intermediate' },
  2019.                 { key: 'I', function: 'Run engine at depth 8', strength: 'Intermediate' },
  2020.                 { key: 'O', function: 'Run engine at depth 9', strength: 'Intermediate' },
  2021.                 { key: 'P', function: 'Run engine at depth 10', strength: 'Advanced' },
  2022.                 { key: 'A', function: 'Run engine at depth 11', strength: 'Advanced' },
  2023.                 { key: 'S', function: 'Run engine at depth 12', strength: 'Advanced' },
  2024.                 { key: 'D', function: 'Run engine at depth 13', strength: 'Advanced' },
  2025.                 { key: 'F', function: 'Run engine at depth 14', strength: 'Advanced' },
  2026.                 { key: 'G', function: 'Run engine at depth 15', strength: 'Advanced' },
  2027.                 { key: 'H', function: 'Run engine at depth 16', strength: 'Expert' },
  2028.                 { key: 'J', function: 'Run engine at depth 17', strength: 'Expert' },
  2029.                 { key: 'K', function: 'Run engine at depth 18', strength: 'Expert' },
  2030.                 { key: 'L', function: 'Run engine at depth 19', strength: 'Expert' },
  2031.                 { key: 'Z', function: 'Run engine at depth 20', strength: 'Master' },
  2032.                 { key: 'X', function: 'Run engine at depth 21', strength: 'Master' },
  2033.                 { key: 'C', function: 'Run engine at depth 22', strength: 'Master' },
  2034.                 { key: 'V', function: 'Run engine at depth 23', strength: 'Master' },
  2035.                 { key: 'B', function: 'Run engine at depth 24', strength: 'Master' },
  2036.                 { key: 'N', function: 'Run engine at depth 25', strength: 'Master' },
  2037.                 { key: 'M', function: 'Run engine at depth 26', strength: 'Master' },
  2038.                 { key: '=', function: 'Run engine at maximum depth', strength: 'Maximum' }
  2039.             ];
  2040.             
  2041.             // Add rows for each shortcut
  2042.             shortcuts.forEach((shortcut, index) => {
  2043.                 const row = document.createElement('tr');
  2044.                 row.style = index % 2 === 0 ? '' : 'background-color: #f9f9f9;';
  2045.                 
  2046.                 // Set color based on strength
  2047.                 let strengthColor = '#333';
  2048.                 switch(shortcut.strength) {
  2049.                     case 'Beginner': strengthColor = '#F44336'; break;
  2050.                     case 'Intermediate': strengthColor = '#FF9800'; break;
  2051.                     case 'Advanced': strengthColor = '#4CAF50'; break;
  2052.                     case 'Expert': strengthColor = '#2196F3'; break;
  2053.                     case 'Master': strengthColor = '#9C27B0'; break;
  2054.                     case 'Maximum': strengthColor = '#E91E63'; break;
  2055.                 }
  2056.                 
  2057.                 row.innerHTML = `
  2058.                         <td style="padding: 10px; border-bottom: 1px solid #eee;">
  2059.                             <kbd style="background-color: #f1f1f1; border: 1px solid #ccc; border-radius: 4px; padding: 2px 6px; font-family: monospace;">${shortcut.key}</kbd>
  2060.                         </td>
  2061.                         <td style="padding: 10px; border-bottom: 1px solid #eee;">${shortcut.function}</td>
  2062.                     <td style="padding: 10px; border-bottom: 1px solid #eee; color: ${strengthColor};">${shortcut.strength}</td>
  2063.                 `;
  2064.                 
  2065.                 tableBody.appendChild(row);
  2066.             });
  2067.             
  2068.             shortcutsTable.appendChild(tableBody);
  2069.             modalContent.appendChild(shortcutsTable);
  2070.             
  2071.             // Add a note at the bottom
  2072.             var shortcutsNote = document.createElement('p');
  2073.             shortcutsNote.innerHTML = '<strong>Note:</strong> Higher depths provide stronger analysis but take longer to calculate. For casual play, depths 1-10 are usually sufficient. For serious analysis, try depths 15+.';
  2074.             shortcutsNote.style = 'margin-top: 20px; color: #666; font-size: 13px; background-color: #f5f5f5; padding: 10px; border-radius: 4px;';
  2075.             modalContent.appendChild(shortcutsNote);
  2076.             
  2077.             keyboardModal.appendChild(modalContent);
  2078.             document.body.appendChild(keyboardModal);
  2079.             
  2080.             // Add JavaScript for tab switching
  2081.             setTimeout(function() {
  2082.                 const tabButtons = document.querySelectorAll('.tab-button');
  2083.                 const collapseBtn = document.getElementById('collapseBtn');
  2084.                 const aiControlsContent = document.getElementById('aiControlsContent');
  2085.                 const header = document.querySelector('#settingsContainer > div:first-child');
  2086.                 
  2087.                 // Function to toggle content visibility
  2088.                 const toggleContent = () => {
  2089.                     if (aiControlsContent.style.display === 'none') {
  2090.                         aiControlsContent.style.display = 'block';
  2091.                         collapseBtn.style.transform = 'rotate(0deg)';
  2092.                     } else {
  2093.                         aiControlsContent.style.display = 'none';
  2094.                         collapseBtn.style.transform = 'rotate(180deg)';
  2095.                     }
  2096.                 };
  2097.                 
  2098.                 // Add collapse functionality to button
  2099.                 if (collapseBtn && aiControlsContent) {
  2100.                     collapseBtn.addEventListener('click', function(e) {
  2101.                         e.stopPropagation(); // Prevent header click event
  2102.                         toggleContent();
  2103.                     });
  2104.                 }
  2105.                 
  2106.                 // Make header clickable
  2107.                 if (header && aiControlsContent) {
  2108.                     header.addEventListener('click', toggleContent);
  2109.                 }
  2110.                 
  2111.                 // Handle Auto Move toggle
  2112.                 const autoMoveCheckbox = document.getElementById('autoMove');
  2113.                 const autoMoveStatus = document.getElementById('autoMoveStatus');
  2114.                 if (autoMoveCheckbox && autoMoveStatus) {
  2115.                     autoMoveCheckbox.addEventListener('change', function() {
  2116.                         autoMoveStatus.textContent = this.checked ? 'On' : 'Off';
  2117.                         autoMoveStatus.style.color = this.checked ? '#4CAF50' : '#666';
  2118.                     });
  2119.                 }
  2120.                 
  2121.                 // Handle Auto Run toggle
  2122.                 const autoRunCheckbox = document.getElementById('autoRun');
  2123.                 const autoRunStatus = document.getElementById('autoRunStatus');
  2124.                 if (autoRunCheckbox && autoRunStatus) {
  2125.                     autoRunCheckbox.addEventListener('change', function() {
  2126.                         autoRunStatus.textContent = this.checked ? 'On' : 'Off';
  2127.                         autoRunStatus.style.color = this.checked ? '#FF9800' : '#666';
  2128.                     });
  2129.                 }
  2130.                 
  2131.                 tabButtons.forEach(button => {
  2132.                     button.addEventListener('click', function() {
  2133.                         // Remove active class from all tabs
  2134.                         document.querySelectorAll('.tab-button').forEach(btn => btn.classList.remove('active'));
  2135.                         document.querySelectorAll('.tab-content').forEach(content => content.classList.remove('active'));
  2136.                         
  2137.                         // Add active class to clicked tab
  2138.                         this.classList.add('active');
  2139.                         document.getElementById(this.dataset.tab + '-tab').classList.add('active');
  2140.                     });
  2141.                 });
  2142.             }, 500);
  2143.  
  2144.             board.parentElement.parentElement.appendChild(div);
  2145.             
  2146.             // Add move history display
  2147.             const moveHistoryDisplay = myFunctions.createMoveHistoryDisplay();
  2148.             contentContainer.appendChild(moveHistoryDisplay);
  2149.  
  2150.             //spinnerContainer
  2151.             var spinCont = document.createElement('div');
  2152.             spinCont.setAttribute('style','display:none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); z-index: 1000; display: flex; justify-content: center; align-items: center;');
  2153.             spinCont.setAttribute('id','overlay');
  2154.             div.prepend(spinCont);
  2155.             //spinner
  2156.             var spinr = document.createElement('div')
  2157.             spinr.setAttribute('style',`
  2158.             margin: 0 auto;
  2159.             height: 64px;
  2160.             width: 64px;
  2161.             animation: rotate 0.8s infinite linear;
  2162.             border: 5px solid firebrick;
  2163.             border-right-color: transparent;
  2164.             border-radius: 50%;
  2165.             `);
  2166.             spinCont.appendChild(spinr);
  2167.             addAnimation(`@keyframes rotate {
  2168.                            0% {
  2169.                                transform: rotate(0deg);
  2170.                               }
  2171.                          100% {
  2172.                                transform: rotate(360deg);
  2173.                               }
  2174.                                            }`);
  2175.  
  2176.  
  2177.             //Reload Button
  2178.             var reSty = `
  2179.             #relButDiv {
  2180.              position: relative;
  2181.              text-align: center;
  2182.              margin: 0 0 8px 0;
  2183.             }
  2184.             #relEngBut {
  2185.             position: relative;
  2186. 			color: #ffffff;
  2187. 			background-color: #3cba2c;
  2188. 			font-size: 16px;
  2189. 			border: none;
  2190. 			border-radius: 4px;
  2191. 			padding: 10px 20px;
  2192.             letter-spacing: 1px;
  2193. 			cursor: pointer;
  2194.             transition: background-color 0.3s;
  2195. 		    }
  2196. 		    #relEngBut:hover {
  2197. 			background-color: #2d8c22;
  2198. 		    }
  2199.             #relEngBut:active {
  2200.             background-color: #2d8c22;
  2201.             transform: translateY(2px);
  2202.        }`;
  2203.             var reBut = `<button type="button" name="reloadEngine" id="relEngBut" onclick="document.myFunctions.reloadChessEngine()">Reload Chess Engine</button>`;
  2204.             tmpDiv = document.createElement('div');
  2205.             var relButDiv = document.createElement('div');
  2206.             relButDiv.id = 'relButDiv';
  2207.             tmpDiv.innerHTML = reBut;
  2208.             reBut = tmpDiv.firstChild;
  2209.  
  2210.             tmpStyle = document.createElement('style');
  2211.             tmpStyle.innerHTML = reSty;
  2212.             document.head.append(tmpStyle);
  2213.  
  2214.             relButDiv.append(reBut);
  2215.             contentContainer.append(relButDiv);
  2216.  
  2217.             // Issue Button
  2218.             // var isBut = `<button type="button" name="isBut" onclick="window.confirm('Can I take you to the issues page?') ? document.location = 'https://github.com/Auzgame/userscripts/issues' : console.log('cancled')">Got An Issue/Bug?</button>`;
  2219.             // tmpDiv = document.createElement('div');
  2220.             // var isButDiv = document.createElement('div');
  2221.             // isButDiv.style = `
  2222.             //  position: relative;
  2223.             //  text-align: center;
  2224.             //  margin: 0 0 8px 0;
  2225.             // `;
  2226.             // tmpDiv.innerHTML = isBut;
  2227.             // isBut = tmpDiv.firstChild;
  2228.             // isBut.id = 'isBut';
  2229.             // isBut.style = `
  2230.             // position: relative;
  2231.             // color: #ffffff;
  2232.             // background-color: #919191;
  2233.             // font-size: 16px;
  2234.             // border: none;
  2235.             // border-radius: 4px;
  2236.             // padding: 10px 20px;
  2237.             // letter-spacing: 1px;
  2238.             // cursor: pointer;
  2239.             // transition: background-color 0.3s;
  2240.             // `;
  2241.             // isButDiv.append(isBut);
  2242.             // contentContainer.append(isButDiv);
  2243.  
  2244.             // Add event listeners for the new buttons and controls
  2245.             $('#applyDepth').on('click', function() {
  2246.                 myFunctions.runChessEngine();
  2247.             });
  2248.             
  2249.             $('#runEngineBtn').on('click', function() {
  2250.                 myFunctions.runChessEngine();
  2251.             });
  2252.             
  2253.             $('#stopEngineBtn').on('click', function() {
  2254.                 if (engine.engine) {
  2255.                     engine.engine.postMessage('stop');
  2256.                     isThinking = false;
  2257.                     myFunctions.spinner();
  2258.                 }
  2259.             });
  2260.             
  2261.             $('#saveSettingsBtn').on('click', function() {
  2262.                 myFunctions.saveSettings();
  2263.             });
  2264.             
  2265.             $('#showKeyboardShortcuts').on('click', function() {
  2266.                 document.getElementById('keyboardShortcutsModal').style.display = 'flex';
  2267.             });
  2268.             
  2269.             // Add collapse functionality
  2270.             header.onclick = function() {
  2271.                 const content = document.getElementById('aiControlsContent');
  2272.                 const collapseBtn = document.getElementById('collapseBtn');
  2273.                 
  2274.                 if (content.style.display === 'none') {
  2275.                     content.style.display = 'block';
  2276.                     collapseBtn.textContent = '▼';
  2277.                 } else {
  2278.                     content.style.display = 'none';
  2279.                     collapseBtn.textContent = '▲';
  2280.                 }
  2281.             };
  2282.             
  2283.             $('#evalBarColor').on('change', function() {
  2284.                 const theme = $(this).val();
  2285.                 if (theme === 'custom') {
  2286.                     $('#customColorContainer').show();
  2287.                 } else {
  2288.                     $('#customColorContainer').hide();
  2289.                     
  2290.                     // Apply predefined color themes
  2291.                     let whiteColor, blackColor;
  2292.                     switch(theme) {
  2293.                         case 'blue':
  2294.                             whiteColor = '#2196F3'; // Blue
  2295.                             blackColor = '#FF9800'; // Orange
  2296.                             break;
  2297.                         case 'purple':
  2298.                             whiteColor = '#9C27B0'; // Purple
  2299.                             blackColor = '#FFEB3B'; // Yellow
  2300.                             break;
  2301.                         default: // default
  2302.                             whiteColor = '#4CAF50'; // Green
  2303.                             blackColor = '#F44336'; // Red
  2304.                     }
  2305.                     
  2306.                     // Store colors in variables for the updateEvalBar function to use
  2307.                     myVars.whiteAdvantageColor = whiteColor;
  2308.                     myVars.blackAdvantageColor = blackColor;
  2309.                     
  2310.                     // Update the evaluation bar with current value but new colors
  2311.                     updateEvalBar(myVars.currentEvaluation);
  2312.                 }
  2313.             });
  2314.             
  2315.             $('#whiteAdvantageColor, #blackAdvantageColor').on('change', function() {
  2316.                 myVars.whiteAdvantageColor = $('#whiteAdvantageColor').val();
  2317.                 myVars.blackAdvantageColor = $('#blackAdvantageColor').val();
  2318.                 updateEvalBar(myVars.currentEvaluation);
  2319.             });
  2320.             
  2321.             // Initialize color theme variables
  2322.             myVars.whiteAdvantageColor = '#4CAF50';
  2323.             myVars.blackAdvantageColor = '#F44336';
  2324.             
  2325.             // Initialize fusion mode
  2326.             myVars.fusionMode = false;
  2327.             
  2328.             // Load saved settings
  2329.             myFunctions.loadSettings();
  2330.             
  2331.             // Update fusion mode status based on saved settings
  2332.             if (myVars.fusionMode) {
  2333.                 myFunctions.updateFusionMode(true);
  2334.                 $('#fusionMode').prop('checked', true);
  2335.                 $('#eloSlider').prop('disabled', true);
  2336.             }
  2337.             
  2338.             // Periodically check for opponent rating changes when fusion mode is enabled
  2339.             setInterval(function() {
  2340.                 if (myVars.fusionMode) {
  2341.                     extractOpponentRating();
  2342.                 }
  2343.             }, 10000); // Check every 10 seconds
  2344.             
  2345.             // Create ELO info modal
  2346.             var eloInfoModal = document.createElement('div');
  2347.             eloInfoModal.id = 'eloInfoModal';
  2348.             eloInfoModal.style = `
  2349.                 display: none;
  2350.                 position: fixed;
  2351.                 top: 0;
  2352.                 left: 0;
  2353.                 width: 100%;
  2354.                 height: 100%;
  2355.                 background-color: rgba(0,0,0,0.7);
  2356.                 z-index: 2000;
  2357.                 justify-content: center;
  2358.                 align-items: center;
  2359.             `;
  2360.             
  2361.             var eloModalContent = document.createElement('div');
  2362.             eloModalContent.style = `
  2363.                 background-color: white;
  2364.                 padding: 20px;
  2365.                 border-radius: 8px;
  2366.                 max-width: 500px;
  2367.                 max-height: 80vh;
  2368.                 overflow-y: auto;
  2369.                 position: relative;
  2370.             `;
  2371.             
  2372.             var eloCloseBtn = document.createElement('span');
  2373.             eloCloseBtn.innerHTML = '&times;';
  2374.             eloCloseBtn.style = `
  2375.                 position: absolute;
  2376.                 top: 10px;
  2377.                 right: 15px;
  2378.                 font-size: 24px;
  2379.                 cursor: pointer;
  2380.                 color: #333;
  2381.             `;
  2382.             eloCloseBtn.onclick = function() {
  2383.                 eloInfoModal.style.display = 'none';
  2384.             };
  2385.             
  2386.             eloModalContent.appendChild(eloCloseBtn);
  2387.             
  2388.             var eloInfoTitle = document.createElement('h2');
  2389.             eloInfoTitle.textContent = 'ELO Rating and Depth Relationship';
  2390.             eloInfoTitle.style = 'margin-top: 0; color: #2196F3;';
  2391.             eloModalContent.appendChild(eloInfoTitle);
  2392.             
  2393.             var eloInfoText = document.createElement('div');
  2394.             eloInfoText.innerHTML = `
  2395.                 <p>The ELO rating setting affects how strong the chess engine plays. Lower ELO ratings make the engine play more like a beginner, while higher ratings make it play more like a master.</p>
  2396.                 
  2397.                 <p>To ensure the engine plays consistently with its ELO rating, the maximum search depth is limited based on the selected ELO:</p>
  2398.                 
  2399.                 <ul>
  2400.                     <li><strong>1000-1199 ELO:</strong> Maximum depth 5 (Beginner level)</li>
  2401.                     <li><strong>1200-1499 ELO:</strong> Maximum depth 8 (Intermediate level)</li>
  2402.                     <li><strong>1500-1799 ELO:</strong> Maximum depth 12 (Advanced level)</li>
  2403.                     <li><strong>1800-2099 ELO:</strong> Maximum depth 15 (Expert level)</li>
  2404.                     <li><strong>2100-2399 ELO:</strong> Maximum depth 18 (Master level)</li>
  2405.                     <li><strong>2400+ ELO:</strong> Maximum depth 22 (Grandmaster level)</li>
  2406.                 </ul>
  2407.                 
  2408.                 <p>If you set a depth higher than the maximum for the current ELO, it will be automatically limited to the maximum allowed depth.</p>
  2409.                 
  2410.                 <p>This ensures that the engine plays consistently with its ELO rating and doesn't make moves that are too strong for the selected rating.</p>
  2411.             `;
  2412.             eloModalContent.appendChild(eloInfoText);
  2413.             
  2414.             eloInfoModal.appendChild(eloModalContent);
  2415.             document.body.appendChild(eloInfoModal);
  2416.             
  2417.             $('#eloInfoBtn').on('click', function() {
  2418.                 document.getElementById('eloInfoModal').style.display = 'flex';
  2419.             });
  2420.  
  2421.             // Create Human Mode info modal
  2422.             var humanModeInfoModal = document.createElement('div');
  2423.             humanModeInfoModal.id = 'humanModeInfoModal';
  2424.             humanModeInfoModal.style = `
  2425.                 display: none;
  2426.                 position: fixed;
  2427.                 top: 0;
  2428.                 left: 0;
  2429.                 width: 100%;
  2430.                 height: 100%;
  2431.                 background-color: rgba(0,0,0,0.7);
  2432.                 z-index: 2000;
  2433.                 justify-content: center;
  2434.                 align-items: center;
  2435.             `;
  2436.             
  2437.             var humanModeModalContent = document.createElement('div');
  2438.             humanModeModalContent.style = `
  2439.                 background-color: white;
  2440.                 padding: 20px;
  2441.                 border-radius: 8px;
  2442.                 max-width: 500px;
  2443.                 max-height: 80vh;
  2444.                 overflow-y: auto;
  2445.                 position: relative;
  2446.             `;
  2447.             
  2448.             var humanModeCloseBtn = document.createElement('span');
  2449.             humanModeCloseBtn.innerHTML = '&times;';
  2450.             humanModeCloseBtn.style = `
  2451.                 position: absolute;
  2452.                 top: 10px;
  2453.                 right: 15px;
  2454.                 font-size: 24px;
  2455.                 cursor: pointer;
  2456.                 color: #333;
  2457.             `;
  2458.             humanModeCloseBtn.onclick = function() {
  2459.                 humanModeInfoModal.style.display = 'none';
  2460.             };
  2461.             
  2462.             humanModeModalContent.appendChild(humanModeCloseBtn);
  2463.             
  2464.             var humanModeInfoTitle = document.createElement('h2');
  2465.             humanModeInfoTitle.textContent = 'Human Mode: Realistic Chess Play';
  2466.             humanModeInfoTitle.style = 'margin-top: 0; color: #2196F3;';
  2467.             humanModeModalContent.appendChild(humanModeInfoTitle);
  2468.             
  2469.             var humanModeInfoText = document.createElement('div');
  2470.             humanModeInfoText.innerHTML = `
  2471.                 <p>Human Mode makes the chess engine play more like a real human player by introducing:</p>
  2472.                 
  2473.                 <ul>
  2474.                     <li><strong>Realistic thinking time</strong> - varies based on skill level</li>
  2475.                     <li><strong>Occasional mistakes</strong> - humans don't always find the best move</li>
  2476.                     <li><strong>Rare blunders</strong> - even good players make serious mistakes sometimes</li>
  2477.                 </ul>
  2478.                 
  2479.                 <p>Choose from five different skill levels:</p>
  2480.                 
  2481.                 <table style="width: 100%; border-collapse: collapse; margin-top: 10px;">
  2482.                     <tr style="background-color: #f2f2f2;">
  2483.                         <th style="padding: 8px; text-align: left; border: 1px solid #ddd;">Skill Level</th>
  2484.                         <th style="padding: 8px; text-align: left; border: 1px solid #ddd;">ELO Range</th>
  2485.                         <th style="padding: 8px; text-align: left; border: 1px solid #ddd;">Characteristics</th>
  2486.                     </tr>
  2487.                     <tr>
  2488.                         <td style="padding: 8px; border: 1px solid #ddd;"><strong>Beginner</strong></td>
  2489.                         <td style="padding: 8px; border: 1px solid #ddd;">~800</td>
  2490.                         <td style="padding: 8px; border: 1px solid #ddd;">Quick moves, frequent mistakes, occasional blunders</td>
  2491.                     </tr>
  2492.                     <tr>
  2493.                         <td style="padding: 8px; border: 1px solid #ddd;"><strong>Casual</strong></td>
  2494.                         <td style="padding: 8px; border: 1px solid #ddd;">~1200</td>
  2495.                         <td style="padding: 8px; border: 1px solid #ddd;">Moderate thinking time, common mistakes</td>
  2496.                     </tr>
  2497.                     <tr>
  2498.                         <td style="padding: 8px; border: 1px solid #ddd;"><strong>Intermediate</strong></td>
  2499.                         <td style="padding: 8px; border: 1px solid #ddd;">~1600</td>
  2500.                         <td style="padding: 8px; border: 1px solid #ddd;">Longer thinking on complex positions, occasional mistakes</td>
  2501.                     </tr>
  2502.                     <tr>
  2503.                         <td style="padding: 8px; border: 1px solid #ddd;"><strong>Advanced</strong></td>
  2504.                         <td style="padding: 8px; border: 1px solid #ddd;">~2000</td>
  2505.                         <td style="padding: 8px; border: 1px solid #ddd;">Careful consideration, infrequent mistakes</td>
  2506.                     </tr>
  2507.                     <tr>
  2508.                         <td style="padding: 8px; border: 1px solid #ddd;"><strong>Expert</strong></td>
  2509.                         <td style="padding: 8px; border: 1px solid #ddd;">~2400</td>
  2510.                         <td style="padding: 8px; border: 1px solid #ddd;">Deep analysis, rare mistakes, very rare blunders</td>
  2511.                     </tr>
  2512.                 </table>
  2513.                 
  2514.                 <p style="margin-top: 15px;"><strong>Note:</strong> Human Mode and Fusion Mode cannot be active at the same time.</p>
  2515.             `;
  2516.             humanModeModalContent.appendChild(humanModeInfoText);
  2517.             
  2518.             humanModeInfoModal.appendChild(humanModeModalContent);
  2519.             document.body.appendChild(humanModeInfoModal);
  2520.  
  2521.             // Add CSS for toggle switch
  2522.             var toggleStyle = document.createElement('style');
  2523.             toggleStyle.innerHTML = `
  2524.                 /* The switch - the box around the slider */
  2525.                 .switch {
  2526.                     position: relative;
  2527.                     display: inline-block;
  2528.                     width: 50px;
  2529.                     height: 24px;
  2530.                 }
  2531.                 
  2532.                 /* Hide default HTML checkbox */
  2533.                 .switch input {
  2534.                     opacity: 0;
  2535.                     width: 0;
  2536.                     height: 0;
  2537.                 }
  2538.                 
  2539.                 /* The slider */
  2540.                 .slider {
  2541.                     position: absolute;
  2542.                     cursor: pointer;
  2543.                     top: 0;
  2544.                     left: 0;
  2545.                     right: 0;
  2546.                     bottom: 0;
  2547.                     background-color: #ccc;
  2548.                     transition: .4s;
  2549.                 }
  2550.                 
  2551.                 .slider:before {
  2552.                     position: absolute;
  2553.                     content: "";
  2554.                     height: 16px;
  2555.                     width: 16px;
  2556.                     left: 4px;
  2557.                     bottom: 4px;
  2558.                     background-color: white;
  2559.                     transition: .4s;
  2560.                 }
  2561.                 
  2562.                 input:checked + .slider {
  2563.                     background-color: #4CAF50;
  2564.                 }
  2565.                 
  2566.                 input:focus + .slider {
  2567.                     box-shadow: 0 0 1px #4CAF50;
  2568.                 }
  2569.                 
  2570.                 input:checked + .slider:before {
  2571.                     transform: translateX(26px);
  2572.                 }
  2573.                 
  2574.                 /* Rounded sliders */
  2575.                 .slider.round {
  2576.                     border-radius: 24px;
  2577.                 }
  2578.                 
  2579.                 .slider.round:before {
  2580.                     border-radius: 50%;
  2581.                 }
  2582.             `;
  2583.             document.head.appendChild(toggleStyle);
  2584.             
  2585.             // Update auto run status when checkbox changes
  2586.             $('#autoRun').on('change', function() {
  2587.                 const isChecked = this.checked;
  2588.                 myVars.autoRun = isChecked;
  2589.                 myFunctions.updateAutoRunStatus(isChecked ? 'on' : 'off');
  2590.             });
  2591.  
  2592.             $('#fusionMode').on('change', function() {
  2593.                 const isChecked = this.checked;
  2594.                 myFunctions.updateFusionMode(isChecked);
  2595.                 
  2596.                 // Disable the ELO slider when fusion mode is enabled
  2597.                 $('#eloSlider').prop('disabled', isChecked);
  2598.                 
  2599.                 // Extract opponent rating immediately when enabled
  2600.                 if (isChecked) {
  2601.                     extractOpponentRating();
  2602.                 }
  2603.                 
  2604.                 // Disable human mode when fusion mode is enabled
  2605.                 if (isChecked && $('#humanMode').prop('checked')) {
  2606.                     $('#humanMode').prop('checked', false);
  2607.                     myFunctions.updateHumanMode(false);
  2608.                 }
  2609.             });
  2610.  
  2611.             // Human mode toggle event listener
  2612.             $('#humanMode').on('change', function() {
  2613.                 const isChecked = this.checked;
  2614.                 myFunctions.updateHumanMode(isChecked);
  2615.                 
  2616.                 // Disable the ELO slider when human mode is enabled
  2617.                 $('#eloSlider').prop('disabled', isChecked);
  2618.                 
  2619.                 // Disable fusion mode when human mode is enabled
  2620.                 if (isChecked && $('#fusionMode').prop('checked')) {
  2621.                     $('#fusionMode').prop('checked', false);
  2622.                     myFunctions.updateFusionMode(false);
  2623.                 }
  2624.                 
  2625.                 // Apply the selected human mode level
  2626.                 if (isChecked) {
  2627.                     const level = $('#humanModeSelect').val();
  2628.                     setHumanMode(level);
  2629.                 }
  2630.             });
  2631.             
  2632.             // Human mode level select event listener
  2633.             $('#humanModeSelect').on('change', function() {
  2634.                 const level = $(this).val();
  2635.                 
  2636.                 // Only apply if human mode is active
  2637.                 if ($('#humanMode').prop('checked')) {
  2638.                     setHumanMode(level);
  2639.                 }
  2640.             });
  2641.             
  2642.             // Human mode info button event listener
  2643.             $('#humanModeInfoBtn').on('click', function() {
  2644.                 document.getElementById('humanModeInfoModal').style.display = 'flex';
  2645.             });
  2646.             
  2647.             $('#autoMove').on('change', function() {
  2648.                 myVars.autoMove = this.checked;
  2649.                 // Visual feedback for auto move toggle
  2650.                 if (this.checked) {
  2651.                     $(this).parent().append('<span id="autoMoveStatus" style="margin-left: 10px; font-size: 12px; color: #4CAF50;">On</span>');
  2652.                 } else {
  2653.                     $('#autoMoveStatus').remove();
  2654.                 }
  2655.             });
  2656.  
  2657.             $('#showArrows').on('change', function() {
  2658.                 myVars.showArrows = this.checked;
  2659.             });
  2660.  
  2661.             $('#persistentHighlights').on('change', function() {
  2662.                 myVars.persistentHighlights = this.checked;
  2663.                 
  2664.                 // If turning off persistent highlights, clear any existing ones
  2665.                 if (!myVars.persistentHighlights) {
  2666.                     myFunctions.clearHighlights();
  2667.                 }
  2668.             });
  2669.             
  2670.             // Add event listeners for the move indicator type radio buttons
  2671.             $('input[name="moveIndicatorType"]').on('change', function() {
  2672.                 myVars.moveIndicatorType = this.value;
  2673.                 
  2674.                 // Clear any existing highlights and arrows when changing the indicator type
  2675.                 myFunctions.clearHighlights();
  2676.                 myFunctions.clearArrows();
  2677.             });
  2678.             
  2679.             // Improved visual feedback for toggle switches
  2680.             $('.switch input[type="checkbox"]').each(function() {
  2681.                 const statusElement = $('#' + this.id + 'Status');
  2682.                 if (statusElement.length) {
  2683.                     if (this.checked) {
  2684.                         statusElement.text('On');
  2685.                         statusElement.css('color', '#4CAF50');
  2686.                     } else {
  2687.                         statusElement.text('Off');
  2688.                         statusElement.css('color', '#666');
  2689.                     }
  2690.                 }
  2691.             });
  2692.             
  2693.             // Add visual feedback to buttons
  2694.             $('#runEngineBtn, #stopEngineBtn, #saveSettingsBtn, #showKeyboardShortcuts, #applyDepth').each(function() {
  2695.                 $(this).css('transition', 'all 0.2s ease');
  2696.                 
  2697.                 $(this).hover(
  2698.                     function() { 
  2699.                         $(this).css({
  2700.                             'opacity': '0.9',
  2701.                             'transform': 'translateY(-1px)',
  2702.                             'box-shadow': '0 2px 5px rgba(0,0,0,0.2)'
  2703.                         });
  2704.                     },
  2705.                     function() { 
  2706.                         $(this).css({
  2707.                             'opacity': '1',
  2708.                             'transform': 'translateY(0)',
  2709.                             'box-shadow': 'none'
  2710.                         });
  2711.                     }
  2712.                 );
  2713.                 
  2714.                 $(this).mousedown(function() {
  2715.                     $(this).css('transform', 'translateY(1px)');
  2716.                 });
  2717.                 
  2718.                 $(this).mouseup(function() {
  2719.                     $(this).css('transform', 'translateY(-1px)');
  2720.                 });
  2721.             });
  2722.             
  2723.             // Improve color theme selector
  2724.             $('#evalBarColor').on('change', function() {
  2725.                 if (this.value === 'custom') {
  2726.                     $('#customColorContainer').slideDown(200);
  2727.                 } else {
  2728.                     $('#customColorContainer').slideUp(200);
  2729.                 }
  2730.             });
  2731.             
  2732.             // Add tooltips to buttons and controls
  2733.             $('#runEngineBtn').attr('title', 'Analyze the current position with the chess engine');
  2734.             $('#stopEngineBtn').attr('title', 'Stop the engine analysis');
  2735.             $('#saveSettingsBtn').attr('title', 'Save your current settings for future sessions');
  2736.             $('#depthSlider').attr('title', 'Higher depth = stronger analysis but slower calculation');
  2737.             $('#showArrows').attr('title', 'Display arrows showing the best moves on the board');
  2738.             $('#persistentHighlights').attr('title', 'Keep move highlights visible until the next move is made');
  2739.             $('#autoRun').attr('title', 'Automatically run the engine after each move');
  2740.             $('#autoMove').attr('title', 'Automatically make the best move for your side');
  2741.             $('#timeDelayMin').attr('title', 'Minimum delay before auto-running the engine');
  2742.             $('#timeDelayMax').attr('title', 'Maximum delay before auto-running the engine');
  2743.             
  2744.             // Close modals when clicking outside
  2745.             $('.modal-container').on('click', function(event) {
  2746.                 if (event.target === this) {
  2747.                     $(this).css('display', 'none');
  2748.                 }
  2749.             });
  2750.             
  2751.             // Add escape key to close modals
  2752.             $(document).on('keydown', function(event) {
  2753.                 if (event.key === 'Escape') {
  2754.                     $('.modal-container').css('display', 'none');
  2755.                 }
  2756.             });
  2757.             
  2758.             // Add class to modals for easier selection
  2759.             $('#keyboardShortcutsModal, #eloInfoModal, #humanModeInfoModal').addClass('modal-container');
  2760.  
  2761.             loaded = true;
  2762.         } catch (error) {console.log(error)}
  2763.     }
  2764.  
  2765.  
  2766.     function other(delay){
  2767.         console.log(`Scheduling next auto run in ${delay/1000} seconds`);
  2768.         myFunctions.updateAutoRunStatus('waiting');
  2769.         
  2770.         // Use setTimeout instead of setInterval with constant checking
  2771.         setTimeout(() => {
  2772.             // Only proceed if auto run is still enabled
  2773.             if(myVars.autoRun && myTurn && !isThinking) {
  2774.                 myFunctions.autoRun(lastValue);
  2775.             }
  2776.                 canGo = true;
  2777.         }, delay);
  2778.     }
  2779.  
  2780.  
  2781.     async function getVersion(){
  2782.         try {
  2783.             const response = await fetch('https://gf.qytechs.cn/en/scripts/531171-chess-ai');
  2784.             const html = await response.text();
  2785.             const parser = new DOMParser();
  2786.             const doc = parser.parseFromString(html, 'text/html');
  2787.             const versionElement = doc.querySelector('dd.script-show-version span');
  2788.             const version = versionElement.textContent;
  2789.  
  2790.             console.log("Fetched version:", version);
  2791.             console.log("Current version:", currentVersion);
  2792.  
  2793.             if(currentVersion !== version){
  2794.                 console.log("Version mismatch detected!");
  2795.                 if (document.hasFocus()) {
  2796.                     alert('UPDATE THIS SCRIPT IN ORDER TO PROCEED!');
  2797.                     window.open('https://gf.qytechs.cn/en/scripts/531171-chess-ai', '_blank');
  2798.                 }
  2799.                 // Recursive call to keep displaying the popup
  2800.                 setTimeout(getVersion, 1000); // Call again after 1 second
  2801.             } else {
  2802.                 console.log("Version check passed");
  2803.             }
  2804.         } catch (error) {
  2805.             console.error("Error fetching version:", error);
  2806.             // Recursive call to keep trying to fetch the version
  2807.             setTimeout(getVersion, 1000); // Call again after 1 second
  2808.         }
  2809.     }
  2810.  
  2811.     getVersion();
  2812.  
  2813.  
  2814.     const waitForChessBoard = setInterval(() => {
  2815.         if(loaded) {
  2816.             board = $('chess-board')[0] || $('wc-chess-board')[0];
  2817.             
  2818.             // Only update these values when needed, not every 100ms
  2819.             if($('#autoRun')[0]) myVars.autoRun = $('#autoRun')[0].checked;
  2820.             if($('#autoMove')[0]) myVars.autoMove = $('#autoMove')[0].checked;
  2821.             if($('#showArrows')[0]) myVars.showArrows = $('#showArrows')[0].checked;
  2822.             
  2823.             // Update move indicator type if radio buttons exist
  2824.             if($('input[name="moveIndicatorType"]:checked')[0]) {
  2825.                 myVars.moveIndicatorType = $('input[name="moveIndicatorType"]:checked')[0].value;
  2826.             }
  2827.             
  2828.             // Check if turn has changed
  2829.             const currentTurn = board.game.getTurn() == board.game.getPlayingAs();
  2830.             const turnChanged = currentTurn !== myTurn;
  2831.             myTurn = currentTurn;
  2832.             
  2833.             // Only update delay values when needed
  2834.             if($('#timeDelayMin')[0] && $('#timeDelayMax')[0]) {
  2835.                 let minDel = parseFloat($('#timeDelayMin')[0].value);
  2836.                 let maxDel = parseFloat($('#timeDelayMax')[0].value);
  2837.             myVars.delay = Math.random() * (maxDel - minDel) + minDel;
  2838.             }
  2839.             
  2840.             myVars.isThinking = isThinking;
  2841.             myFunctions.spinner();
  2842.             
  2843.             // If turn has changed to player's turn and auto run is enabled, trigger auto run
  2844.             if(turnChanged && myTurn && myVars.autoRun && canGo && !isThinking) {
  2845.                 console.log("Turn changed to player's turn, triggering auto run");
  2846.                 canGo = false;
  2847.                 var currentDelay = myVars.delay != undefined ? myVars.delay * 1000 : 10;
  2848.                 other(currentDelay);
  2849.             }
  2850.             
  2851.             // Update evaluation bar position if board size changes
  2852.             if(evalBar && evalText && board) {
  2853.                 evalText.style.left = `${evalBar.offsetLeft}px`;
  2854.             }
  2855.         } else {
  2856.             myFunctions.loadEx();
  2857.         }
  2858.  
  2859.  
  2860.         if(!engine.engine){
  2861.             myFunctions.loadChessEngine();
  2862.         }
  2863.  
  2864.         // Check if the board exists and we haven't set up the move listener yet
  2865.         if (board && !board._highlightListenerAdded) {
  2866.             // Try to add a listener for moves
  2867.             try {
  2868.                 // Store the current position FEN to detect changes
  2869.                 myVars.lastPositionFEN = board.game.getFEN();
  2870.                 
  2871.                 // Mark that we've added the listener
  2872.                 board._highlightListenerAdded = true;
  2873.             } catch (err) {
  2874.                 console.log('Error setting up move listener:', err);
  2875.             }
  2876.         }
  2877.         
  2878.         // Check if the position has changed (a move was made)
  2879.         if (board && myVars.lastPositionFEN) {
  2880.             const currentFEN = board.game.getFEN();
  2881.             if (currentFEN !== myVars.lastPositionFEN) {
  2882.                 // Position changed, clear highlights and arrows
  2883.                 myFunctions.clearHighlights();
  2884.                 myFunctions.clearArrows();
  2885.                 myVars.lastPositionFEN = currentFEN;
  2886.             }
  2887.         }
  2888.     }, 100);
  2889.  
  2890.      // Function to save user settings using GM.setValue asynchronously
  2891.      myFunctions.saveSettings = async function() {
  2892.         const settings = {
  2893.             eloRating: myVars.eloRating,
  2894.             depth: parseInt($('#depthSlider')[0].value),
  2895.             showArrows: $('#showArrows')[0].checked,
  2896.             persistentHighlights: $('#persistentHighlights')[0].checked,
  2897.             moveIndicatorType: myVars.moveIndicatorType || 'highlights',
  2898.             autoRun: $('#autoRun')[0].checked,
  2899.             autoMove: $('#autoMove')[0].checked,
  2900.             timeDelayMin: parseFloat($('#timeDelayMin')[0].value),
  2901.             timeDelayMax: parseFloat($('#timeDelayMax')[0].value),
  2902.             evalBarTheme: $('#evalBarColor').val(),
  2903.             whiteAdvantageColor: $('#whiteAdvantageColor').val(),
  2904.             blackAdvantageColor: $('#blackAdvantageColor').val(),
  2905.             fusionMode: myVars.fusionMode,
  2906.             humanMode: myVars.humanMode ? {
  2907.                 active: myVars.humanMode.active,
  2908.                 level: myVars.humanMode.level
  2909.             } : { active: false, level: 'intermediate' }
  2910.         };
  2911.  
  2912.         try {
  2913.             await GM.setValue('chessAISettings', JSON.stringify(settings));
  2914.             // Show saved notification (same as before)
  2915.             const notification = document.createElement('div');
  2916.             notification.textContent = 'Settings saved!';
  2917.             notification.style = `
  2918.                 position: fixed;
  2919.                 bottom: 20px;
  2920.                 right: 20px;
  2921.                 background-color: #4CAF50;
  2922.                 color: white;
  2923.                 padding: 10px 20px;
  2924.                 border-radius: 4px;
  2925.                 z-index: 9999;
  2926.                 opacity: 0;
  2927.                 transition: opacity 0.3s;
  2928.             `;
  2929.             document.body.appendChild(notification);
  2930.  
  2931.             setTimeout(() => {
  2932.                 notification.style.opacity = '1';
  2933.             }, 10);
  2934.  
  2935.             setTimeout(() => {
  2936.                 notification.style.opacity = '0';
  2937.                 setTimeout(() => {
  2938.                     document.body.removeChild(notification);
  2939.                 }, 300);
  2940.             }, 2000);
  2941.         } catch (error) {
  2942.             console.error('Error saving settings:', error);
  2943.             // Handle error as needed, e.g., show an error notification
  2944.         }
  2945.     };
  2946.     
  2947.     // Function to load user settings using await GM.getValue
  2948.     myFunctions.loadSettings = async function() {
  2949.         try {
  2950.             // First try to load settings from the combined JSON
  2951.             const savedSettings = await GM.getValue('chessAISettings', null);
  2952.             
  2953.             if (savedSettings) {
  2954.                 // If settings exist as JSON, parse and apply them
  2955.                 const settings = JSON.parse(savedSettings);
  2956.                 
  2957.                 // Apply saved settings to myVars
  2958.                 myVars.eloRating = settings.eloRating || 1500;
  2959.                 myVars.depth = settings.depth || 11;
  2960.                 myVars.showArrows = settings.showArrows !== undefined ? settings.showArrows : true;
  2961.                 myVars.persistentHighlights = settings.persistentHighlights !== undefined ? settings.persistentHighlights : true;
  2962.                 myVars.moveIndicatorType = settings.moveIndicatorType || 'highlights';
  2963.                 myVars.autoRun = settings.autoRun !== undefined ? settings.autoRun : false;
  2964.                 myVars.autoMove = settings.autoMove !== undefined ? settings.autoMove : false;
  2965.                 myVars.fusionMode = settings.fusionMode !== undefined ? settings.fusionMode : false;
  2966.                 myVars.whiteAdvantageColor = settings.whiteAdvantageColor || '#4CAF50';
  2967.                 myVars.blackAdvantageColor = settings.blackAdvantageColor || '#F44336';
  2968.                 
  2969.                 // Set humanMode
  2970.                 if (settings.humanMode) {
  2971.                     myVars.humanMode = {
  2972.                         active: settings.humanMode.active,
  2973.                         level: settings.humanMode.level
  2974.                     };
  2975.                 } else {
  2976.                     myVars.humanMode = { active: false, level: 'intermediate' };
  2977.                 }
  2978.                 
  2979.                 // Update UI elements
  2980.                 if ($('#depthSlider')[0]) {
  2981.                     $('#depthSlider')[0].value = myVars.depth;
  2982.                     $('#depthText').html('Current Depth: <strong>' + myVars.depth + '</strong>');
  2983.                 }
  2984.                 
  2985.                 if ($('#eloSlider')[0]) {
  2986.                     $('#eloSlider')[0].value = myVars.eloRating;
  2987.                     $('#eloText').html('Current ELO: <strong>' + myVars.eloRating + '</strong>');
  2988.                 }
  2989.                 
  2990.                 if ($('#autoMove')[0]) {
  2991.                     $('#autoMove')[0].checked = myVars.autoMove;
  2992.                 }
  2993.                 
  2994.                 if ($('#autoRun')[0]) {
  2995.                     $('#autoRun')[0].checked = myVars.autoRun;
  2996.                 }
  2997.                 
  2998.                 if ($('#showArrows')[0]) {
  2999.                     $('#showArrows')[0].checked = myVars.showArrows;
  3000.                 }
  3001.                 
  3002.                 if ($('#persistentHighlights')[0]) {
  3003.                     $('#persistentHighlights')[0].checked = myVars.persistentHighlights;
  3004.                 }
  3005.                 
  3006.                 if ($('input[name="moveIndicatorType"]').length) {
  3007.                     $('input[name="moveIndicatorType"][value="' + myVars.moveIndicatorType + '"]').prop('checked', true);
  3008.                 }
  3009.                 
  3010.                 if ($('#humanMode')[0] && myVars.humanMode) {
  3011.                     $('#humanMode')[0].checked = myVars.humanMode.active;
  3012.                 }
  3013.                 
  3014.                 if ($('#humanLevelSelect')[0] && myVars.humanMode) {
  3015.                     $('#humanLevelSelect')[0].value = myVars.humanMode.level;
  3016.                 }
  3017.                 
  3018.                 if ($('#fusionMode')[0]) {
  3019.                     $('#fusionMode')[0].checked = myVars.fusionMode;
  3020.                 }
  3021.                 
  3022.                 if ($('#whiteAdvantageColor')[0]) {
  3023.                     $('#whiteAdvantageColor')[0].value = myVars.whiteAdvantageColor;
  3024.                 }
  3025.                 
  3026.                 if ($('#blackAdvantageColor')[0]) {
  3027.                     $('#blackAdvantageColor')[0].value = myVars.blackAdvantageColor;
  3028.                 }
  3029.                 
  3030.                 if (settings.timeDelayMin !== undefined && $('#timeDelayMin')[0]) {
  3031.                     $('#timeDelayMin')[0].value = settings.timeDelayMin;
  3032.                 }
  3033.                 
  3034.                 if (settings.timeDelayMax !== undefined && $('#timeDelayMax')[0]) {
  3035.                     $('#timeDelayMax')[0].value = settings.timeDelayMax;
  3036.                 }
  3037.                 
  3038.                 if (settings.evalBarTheme && $('#evalBarColor')[0]) {
  3039.                     $('#evalBarColor').val(settings.evalBarTheme);
  3040.                     if (settings.evalBarTheme === 'custom') {
  3041.                         $('#customColorContainer').show();
  3042.                     }
  3043.                 }
  3044.             } else {
  3045.                 // Fallback to old method for backward compatibility
  3046.                 const savedDepth = await GM.getValue('depth', 11);
  3047.                 const savedElo = await GM.getValue('elo', 1500);
  3048.                 const savedAutoMove = await GM.getValue('autoMove', false);
  3049.                 const savedAutoRun = await GM.getValue('autoRun', false);
  3050.                 const savedShowArrows = await GM.getValue('showArrows', true);
  3051.                 const savedPersistentHighlights = await GM.getValue('persistentHighlights', true);
  3052.                 const savedMoveIndicatorType = await GM.getValue('moveIndicatorType', 'highlights');
  3053.                 const savedHumanMode = await GM.getValue('humanMode', false);
  3054.                 const savedHumanLevel = await GM.getValue('humanLevel', 'intermediate');
  3055.                 const savedFusionMode = await GM.getValue('fusionMode', false);
  3056.                 const savedWhiteAdvantageColor = await GM.getValue('whiteAdvantageColor', '#4CAF50');
  3057.                 const savedBlackAdvantageColor = await GM.getValue('blackAdvantageColor', '#F44336');
  3058.                 
  3059.                 // Apply saved settings
  3060.                 myVars.depth = savedDepth;
  3061.                 myVars.eloRating = savedElo;
  3062.                 myVars.autoMove = savedAutoMove;
  3063.                 myVars.autoRun = savedAutoRun;
  3064.                 myVars.showArrows = savedShowArrows;
  3065.                 myVars.persistentHighlights = savedPersistentHighlights;
  3066.                 myVars.moveIndicatorType = savedMoveIndicatorType;
  3067.                 myVars.humanMode = { active: savedHumanMode, level: savedHumanLevel };
  3068.                 myVars.fusionMode = savedFusionMode;
  3069.                 myVars.whiteAdvantageColor = savedWhiteAdvantageColor;
  3070.                 myVars.blackAdvantageColor = savedBlackAdvantageColor;
  3071.                 
  3072.                 // Update UI elements to match saved settings
  3073.                 if ($('#depthSlider')[0]) {
  3074.                     $('#depthSlider')[0].value = savedDepth;
  3075.                     $('#depthText').html('Current Depth: <strong>' + savedDepth + '</strong>');
  3076.                 }
  3077.                 
  3078.                 if ($('#eloSlider')[0]) {
  3079.                     $('#eloSlider')[0].value = savedElo;
  3080.                     $('#eloText').html('Current ELO: <strong>' + savedElo + '</strong>');
  3081.                 }
  3082.                 
  3083.                 if ($('#autoMove')[0]) {
  3084.                     $('#autoMove')[0].checked = savedAutoMove;
  3085.                 }
  3086.                 
  3087.                 if ($('#autoRun')[0]) {
  3088.                     $('#autoRun')[0].checked = savedAutoRun;
  3089.                 }
  3090.                 
  3091.                 if ($('#showArrows')[0]) {
  3092.                     $('#showArrows')[0].checked = savedShowArrows;
  3093.                 }
  3094.                 
  3095.                 if ($('#persistentHighlights')[0]) {
  3096.                     $('#persistentHighlights')[0].checked = savedPersistentHighlights;
  3097.                 }
  3098.                 
  3099.                 if ($('input[name="moveIndicatorType"]').length) {
  3100.                     $('input[name="moveIndicatorType"][value="' + savedMoveIndicatorType + '"]').prop('checked', true);
  3101.                 }
  3102.                 
  3103.                 if ($('#humanMode')[0]) {
  3104.                     $('#humanMode')[0].checked = savedHumanMode;
  3105.                 }
  3106.                 
  3107.                 if ($('#humanLevelSelect')[0]) {
  3108.                     $('#humanLevelSelect')[0].value = savedHumanLevel;
  3109.                 }
  3110.                 
  3111.                 if ($('#fusionMode')[0]) {
  3112.                     $('#fusionMode')[0].checked = savedFusionMode;
  3113.                 }
  3114.                 
  3115.                 if ($('#whiteAdvantageColor')[0]) {
  3116.                     $('#whiteAdvantageColor')[0].value = savedWhiteAdvantageColor;
  3117.                 }
  3118.                 
  3119.                 if ($('#blackAdvantageColor')[0]) {
  3120.                     $('#blackAdvantageColor')[0].value = savedBlackAdvantageColor;
  3121.                 }
  3122.                 
  3123.                 // After loading the settings from individual values, save them as a combined object
  3124.                 // This will migrate users to the new format
  3125.                 myFunctions.saveSettings();
  3126.             }
  3127.             
  3128.             // Check for first run (always use individual setting for this)
  3129.             const savedFirstRun = await GM.getValue('firstRun', true);
  3130.             
  3131.             // Show welcome modal for first-time users
  3132.             if (savedFirstRun) {
  3133.                 setTimeout(() => {
  3134.                     myFunctions.showWelcomeModal();
  3135.                     GM.setValue('firstRun', false);
  3136.                 }, 1000);
  3137.             }
  3138.             
  3139.             console.log('Settings loaded successfully');
  3140.         } catch (error) {
  3141.             console.error('Error loading settings:', error);
  3142.         }
  3143.     }
  3144.     
  3145.     // Function to show welcome modal for first-time users
  3146.     function showWelcomeModal() {
  3147.         // Create welcome modal
  3148.         const welcomeModal = document.createElement('div');
  3149.         welcomeModal.id = 'welcomeModal';
  3150.         welcomeModal.style = `
  3151.             display: flex;
  3152.             position: fixed;
  3153.             top: 0;
  3154.             left: 0;
  3155.             width: 100%;
  3156.             height: 100%;
  3157.             background-color: rgba(0,0,0,0.7);
  3158.             z-index: 2000;
  3159.             justify-content: center;
  3160.             align-items: center;
  3161.         `;
  3162.         
  3163.         const modalContent = document.createElement('div');
  3164.         modalContent.style = `
  3165.             background-color: white;
  3166.             padding: 30px;
  3167.             border-radius: 8px;
  3168.             max-width: 600px;
  3169.             max-height: 80vh;
  3170.             overflow-y: auto;
  3171.             position: relative;
  3172.             box-shadow: 0 4px 20px rgba(0,0,0,0.2);
  3173.         `;
  3174.         
  3175.         const closeBtn = document.createElement('span');
  3176.         closeBtn.innerHTML = '&times;';
  3177.         closeBtn.style = `
  3178.             position: absolute;
  3179.             top: 10px;
  3180.             right: 15px;
  3181.             font-size: 24px;
  3182.             cursor: pointer;
  3183.             color: #333;
  3184.             transition: color 0.2s;
  3185.         `;
  3186.         closeBtn.onmouseover = function() {
  3187.             this.style.color = '#F44336';
  3188.         };
  3189.         closeBtn.onmouseout = function() {
  3190.             this.style.color = '#333';
  3191.         };
  3192.         closeBtn.onclick = function() {
  3193.             welcomeModal.style.display = 'none';
  3194.         };
  3195.         
  3196.         modalContent.appendChild(closeBtn);
  3197.         
  3198.         // Welcome content
  3199.         const welcomeTitle = document.createElement('h2');
  3200.         welcomeTitle.textContent = 'Welcome to Chess AI!';
  3201.         welcomeTitle.style = 'margin-top: 0; color: #2196F3; border-bottom: 2px solid #eee; padding-bottom: 10px;';
  3202.         modalContent.appendChild(welcomeTitle);
  3203.         
  3204.         const welcomeText = document.createElement('p');
  3205.         welcomeText.textContent = 'Thank you for installing Chess AI. This tool helps you analyze chess positions and find the best moves during your games on Chess.com.';
  3206.         welcomeText.style = 'margin-bottom: 20px; color: #666;';
  3207.         modalContent.appendChild(welcomeText);
  3208.         
  3209.         // Quick start guide
  3210.         const quickStartTitle = document.createElement('h3');
  3211.         quickStartTitle.textContent = 'Quick Start Guide';
  3212.         quickStartTitle.style = 'color: #4CAF50; margin-bottom: 15px;';
  3213.         modalContent.appendChild(quickStartTitle);
  3214.         
  3215.         const steps = [
  3216.             { title: 'Run the Engine', content: 'Press any key from Q to M to run the engine at different depths. Higher depths give stronger analysis but take longer.' },
  3217.             { title: 'View Best Moves', content: 'The best moves will be highlighted on the board, and the evaluation bar will show who has the advantage.' },
  3218.             { title: 'Adjust Settings', content: 'Click the settings icon to customize the engine strength, visual indicators, and auto-play options.' },
  3219.             { title: 'Keyboard Shortcuts', content: 'Use keyboard shortcuts for quick access. Press the "Keyboard Shortcuts" button to see all available shortcuts.' }
  3220.         ];
  3221.         
  3222.         const stepsList = document.createElement('div');
  3223.         stepsList.style = 'margin-bottom: 25px;';
  3224.         
  3225.         steps.forEach((step, index) => {
  3226.             const stepItem = document.createElement('div');
  3227.             stepItem.style = 'margin-bottom: 15px; display: flex;';
  3228.             
  3229.             const stepNumber = document.createElement('div');
  3230.             stepNumber.textContent = (index + 1);
  3231.             stepNumber.style = `
  3232.                 width: 25px;
  3233.                 height: 25px;
  3234.                 background-color: #2196F3;
  3235.                 color: white;
  3236.                 border-radius: 50%;
  3237.                 display: flex;
  3238.                 justify-content: center;
  3239.                 align-items: center;
  3240.                 margin-right: 15px;
  3241.                 flex-shrink: 0;
  3242.                 font-weight: bold;
  3243.             `;
  3244.             
  3245.             const stepContent = document.createElement('div');
  3246.             
  3247.             const stepTitle = document.createElement('div');
  3248.             stepTitle.textContent = step.title;
  3249.             stepTitle.style = 'font-weight: bold; margin-bottom: 5px;';
  3250.             
  3251.             const stepDescription = document.createElement('div');
  3252.             stepDescription.textContent = step.content;
  3253.             stepDescription.style = 'color: #666;';
  3254.             
  3255.             stepContent.appendChild(stepTitle);
  3256.             stepContent.appendChild(stepDescription);
  3257.             
  3258.             stepItem.appendChild(stepNumber);
  3259.             stepItem.appendChild(stepContent);
  3260.             
  3261.             stepsList.appendChild(stepItem);
  3262.         });
  3263.         
  3264.         modalContent.appendChild(stepsList);
  3265.         
  3266.         // Tips section
  3267.         const tipsTitle = document.createElement('h3');
  3268.         tipsTitle.textContent = 'Pro Tips';
  3269.         tipsTitle.style = 'color: #FF9800; margin-bottom: 15px;';
  3270.         modalContent.appendChild(tipsTitle);
  3271.         
  3272.         const tipsList = document.createElement('ul');
  3273.         tipsList.style = 'margin-bottom: 25px; padding-left: 20px;';
  3274.         
  3275.         const tips = [
  3276.             'Use depths 1-10 for quick analysis and casual play.',
  3277.             'Use depths 15+ for serious analysis and difficult positions.',
  3278.             'Enable "Auto Move" to automatically play the best move.',
  3279.             'Try "Human Mode" to get more natural, human-like suggestions.',
  3280.             'Customize the evaluation bar colors in the Visual tab.'
  3281.         ];
  3282.         
  3283.         tips.forEach(tip => {
  3284.             const tipItem = document.createElement('li');
  3285.             tipItem.textContent = tip;
  3286.             tipItem.style = 'margin-bottom: 8px; color: #666;';
  3287.             tipsList.appendChild(tipItem);
  3288.         });
  3289.         
  3290.         modalContent.appendChild(tipsList);
  3291.         
  3292.         // Get started button
  3293.         const getStartedBtn = document.createElement('button');
  3294.         getStartedBtn.textContent = 'Get Started';
  3295.         getStartedBtn.style = `
  3296.             width: 100%;
  3297.             padding: 12px;
  3298.             background-color: #4CAF50;
  3299.             color: white;
  3300.             border: none;
  3301.             border-radius: 4px;
  3302.             cursor: pointer;
  3303.             font-weight: bold;
  3304.             font-size: 16px;
  3305.             transition: background-color 0.2s;
  3306.         `;
  3307.         getStartedBtn.onmouseover = function() {
  3308.             this.style.backgroundColor = '#45a049';
  3309.         };
  3310.         getStartedBtn.onmouseout = function() {
  3311.             this.style.backgroundColor = '#4CAF50';
  3312.         };
  3313.         getStartedBtn.onclick = function() {
  3314.             welcomeModal.style.display = 'none';
  3315.         };
  3316.         
  3317.         modalContent.appendChild(getStartedBtn);
  3318.         
  3319.         welcomeModal.appendChild(modalContent);
  3320.         document.body.appendChild(welcomeModal);
  3321.     }
  3322.  
  3323.     // Create a move history display
  3324.     myFunctions.createMoveHistoryDisplay = function() {
  3325.         // Create container for move history
  3326.         const moveHistoryContainer = document.createElement('div');
  3327.         moveHistoryContainer.id = 'moveHistoryContainer';
  3328.         moveHistoryContainer.style = `
  3329.             margin-top: 15px;
  3330.             border: 1px solid #ccc;
  3331.             border-radius: 4px;
  3332.             padding: 10px;
  3333.             max-height: 200px;
  3334.             overflow-y: auto;
  3335.         `;
  3336.         
  3337.         // Create header
  3338.         const header = document.createElement('h3');
  3339.         header.textContent = 'Engine Move History';
  3340.         header.style = `
  3341.             margin-top: 0;
  3342.             margin-bottom: 10px;
  3343.             font-size: 16px;
  3344.             color: #333;
  3345.         `;
  3346.         
  3347.         // Create table for moves
  3348.         const moveTable = document.createElement('table');
  3349.         moveTable.id = 'moveHistoryTable';
  3350.         moveTable.style = `
  3351.             width: 100%;
  3352.             border-collapse: collapse;
  3353.         `;
  3354.         
  3355.         // Create table header
  3356.         const tableHeader = document.createElement('thead');
  3357.         tableHeader.innerHTML = `
  3358.             <tr>
  3359.                 <th style="text-align: left; padding: 5px; border-bottom: 1px solid #ddd;">Move</th>
  3360.                 <th style="text-align: left; padding: 5px; border-bottom: 1px solid #ddd;">Eval</th>
  3361.                 <th style="text-align: left; padding: 5px; border-bottom: 1px solid #ddd;">Depth</th>
  3362.             </tr>
  3363.         `;
  3364.         
  3365.         // Create table body
  3366.         const tableBody = document.createElement('tbody');
  3367.         tableBody.id = 'moveHistoryTableBody';
  3368.         
  3369.         // Assemble the components
  3370.         moveTable.appendChild(tableHeader);
  3371.         moveTable.appendChild(tableBody);
  3372.         moveHistoryContainer.appendChild(header);
  3373.         moveHistoryContainer.appendChild(moveTable);
  3374.         
  3375.         // Add clear history button
  3376.         const clearButton = document.createElement('button');
  3377.         clearButton.textContent = 'Clear History';
  3378.         clearButton.style = `
  3379.             margin-top: 10px;
  3380.             padding: 5px 10px;
  3381.             background-color: #f44336;
  3382.             color: white;
  3383.             border: none;
  3384.             border-radius: 4px;
  3385.             cursor: pointer;
  3386.         `;
  3387.         clearButton.onclick = function() {
  3388.             document.getElementById('moveHistoryTableBody').innerHTML = '';
  3389.         };
  3390.         
  3391.         moveHistoryContainer.appendChild(clearButton);
  3392.         
  3393.         return moveHistoryContainer;
  3394.     };
  3395.     
  3396.     // Add a move to the history
  3397.     myFunctions.addMoveToHistory = function(move, evaluation, depth) {
  3398.         const tableBody = document.getElementById('moveHistoryTableBody');
  3399.         if (!tableBody) return;
  3400.         
  3401.         const row = document.createElement('tr');
  3402.         
  3403.         // Format the evaluation
  3404.         let evalText = '';
  3405.         if (typeof evaluation === 'string' && evaluation.includes('Mate')) {
  3406.             evalText = evaluation;
  3407.         } else {
  3408.             const sign = evaluation > 0 ? '+' : '';
  3409.             evalText = `${sign}${parseFloat(evaluation).toFixed(2)}`;
  3410.         }
  3411.         
  3412.         row.innerHTML = `
  3413.             <td style="padding: 5px; border-bottom: 1px solid #ddd;">${move}</td>
  3414.             <td style="padding: 5px; border-bottom: 1px solid #ddd;">${evalText}</td>
  3415.             <td style="padding: 5px; border-bottom: 1px solid #ddd;">${depth}</td>
  3416.         `;
  3417.         
  3418.         // Add the new row at the top
  3419.         if (tableBody.firstChild) {
  3420.             tableBody.insertBefore(row, tableBody.firstChild);
  3421.         } else {
  3422.             tableBody.appendChild(row);
  3423.         }
  3424.         
  3425.         // Limit the number of rows to 50
  3426.         while (tableBody.children.length > 50) {
  3427.             tableBody.removeChild(tableBody.lastChild);
  3428.         }
  3429.     };
  3430.  
  3431.     // Function to update the auto run status indicator
  3432.     myFunctions.updateAutoRunStatus = function(status) {
  3433.         if (!$('#autoRunStatus')[0]) return;
  3434.         
  3435.         switch(status) {
  3436.             case 'on':
  3437.                 $('#autoRunStatus').text('On');
  3438.                 $('#autoRunStatus').css('color', '#4CAF50');
  3439.                 break;
  3440.             case 'off':
  3441.                 $('#autoRunStatus').text('Off');
  3442.                 $('#autoRunStatus').css('color', '#666');
  3443.                 break;
  3444.             case 'waiting':
  3445.                 $('#autoRunStatus').text('Waiting...');
  3446.                 $('#autoRunStatus').css('color', '#FFA500');
  3447.                 break;
  3448.             case 'running':
  3449.                 $('#autoRunStatus').text('Running...');
  3450.                 $('#autoRunStatus').css('color', '#2196F3');
  3451.                 break;
  3452.         }
  3453.     };
  3454.  
  3455.     // Function to evaluate the complexity of the board position
  3456.     function evaluateBoardComplexity(boardState) {
  3457.         let complexity = 0;
  3458.  
  3459.         // Example evaluation criteria
  3460.         const pieceValues = {
  3461.             'p': 1,   // Pawn
  3462.             'r': 5,   // Rook
  3463.             'n': 3,   // Knight
  3464.             'b': 3,   // Bishop
  3465.             'q': 9,   // Queen
  3466.             'k': 0,   // King (not counted)
  3467.         };
  3468.  
  3469.         // Loop through the board state to evaluate material balance
  3470.         for (let row = 0; row < 8; row++) {
  3471.             for (let col = 0; col < 8; col++) {
  3472.                 const piece = boardState[row][col];
  3473.                 if (piece) {
  3474.                     const value = pieceValues[piece.toLowerCase()] || 0;
  3475.                     complexity += piece === piece.toUpperCase() ? value : -value; // Add for white, subtract for black
  3476.                 }
  3477.             }
  3478.         }
  3479.  
  3480.         // Additional complexity factors can be added here
  3481.         // For example, consider piece activity, control of the center, etc.
  3482.         // This is a simple example; you can expand it based on your needs
  3483.  
  3484.         // Normalize complexity to a reasonable range
  3485.         complexity = Math.abs(complexity); // Ensure it's positive
  3486.         return Math.floor(complexity / 10); // Scale down for thinking time calculation
  3487.     }
  3488.  
  3489.     myFunctions.extractOpponentRating = function() {
  3490.         // Try to find the opponent's rating
  3491.         try {
  3492.             const ratingElements = document.querySelectorAll('.user-tagline-rating');
  3493.             if (ratingElements.length >= 2) {
  3494.                 // Find the element that doesn't match the player's username
  3495.                 const playerUsername = document.querySelector('.user-username-component')?.textContent.trim();
  3496.                 
  3497.                 for (const element of ratingElements) {
  3498.                     const usernameElement = element.closest('.user-tagline')?.querySelector('.user-username-component');
  3499.                     if (usernameElement && usernameElement.textContent.trim() !== playerUsername) {
  3500.                         const rating = parseInt(element.textContent.trim());
  3501.                         if (!isNaN(rating)) {
  3502.                             console.log(`Opponent rating detected: ${rating}`);
  3503.                             return rating;
  3504.                         }
  3505.                     }
  3506.                 }
  3507.             }
  3508.         } catch (error) {
  3509.             console.error('Error extracting opponent rating:', error);
  3510.         }
  3511.         
  3512.         return null;
  3513.     }
  3514.     
  3515.     // Function to show welcome modal for first-time users
  3516.     myFunctions.showWelcomeModal = function() {
  3517.         // Create welcome modal
  3518.         const welcomeModal = document.createElement('div');
  3519.         welcomeModal.id = 'welcomeModal';
  3520.         welcomeModal.style = `
  3521.             display: flex;
  3522.             position: fixed;
  3523.             top: 0;
  3524.             left: 0;
  3525.             width: 100%;
  3526.             height: 100%;
  3527.             background-color: rgba(0,0,0,0.7);
  3528.             z-index: 2000;
  3529.             justify-content: center;
  3530.             align-items: center;
  3531.         `;
  3532.         
  3533.         const modalContent = document.createElement('div');
  3534.         modalContent.style = `
  3535.             background-color: white;
  3536.             padding: 30px;
  3537.             border-radius: 8px;
  3538.             max-width: 600px;
  3539.             max-height: 80vh;
  3540.             overflow-y: auto;
  3541.             position: relative;
  3542.             box-shadow: 0 4px 20px rgba(0,0,0,0.2);
  3543.         `;
  3544.         
  3545.         const closeBtn = document.createElement('span');
  3546.         closeBtn.innerHTML = '&times;';
  3547.         closeBtn.style = `
  3548.             position: absolute;
  3549.             top: 10px;
  3550.             right: 15px;
  3551.             font-size: 24px;
  3552.             cursor: pointer;
  3553.             color: #333;
  3554.             transition: color 0.2s;
  3555.         `;
  3556.         closeBtn.onmouseover = function() {
  3557.             this.style.color = '#F44336';
  3558.         };
  3559.         closeBtn.onmouseout = function() {
  3560.             this.style.color = '#333';
  3561.         };
  3562.         closeBtn.onclick = function() {
  3563.             welcomeModal.style.display = 'none';
  3564.         };
  3565.         
  3566.         modalContent.appendChild(closeBtn);
  3567.         
  3568.         // Welcome content
  3569.         const welcomeTitle = document.createElement('h2');
  3570.         welcomeTitle.textContent = 'Welcome to Chess AI!';
  3571.         welcomeTitle.style = 'margin-top: 0; color: #2196F3; border-bottom: 2px solid #eee; padding-bottom: 10px;';
  3572.         modalContent.appendChild(welcomeTitle);
  3573.         
  3574.         const welcomeText = document.createElement('p');
  3575.         welcomeText.textContent = 'Thank you for installing Chess AI. This tool helps you analyze chess positions and find the best moves during your games on Chess.com.';
  3576.         welcomeText.style = 'margin-bottom: 20px; color: #666;';
  3577.         modalContent.appendChild(welcomeText);
  3578.         
  3579.         // Quick start guide
  3580.         const quickStartTitle = document.createElement('h3');
  3581.         quickStartTitle.textContent = 'Quick Start Guide';
  3582.         quickStartTitle.style = 'color: #4CAF50; margin-bottom: 15px;';
  3583.         modalContent.appendChild(quickStartTitle);
  3584.         
  3585.         const steps = [
  3586.             { title: 'Run the Engine', content: 'Press any key from Q to M to run the engine at different depths. Higher depths give stronger analysis but take longer.' },
  3587.             { title: 'View Best Moves', content: 'The best moves will be highlighted on the board, and the evaluation bar will show who has the advantage.' },
  3588.             { title: 'Adjust Settings', content: 'Click the settings icon to customize the engine strength, visual indicators, and auto-play options.' },
  3589.             { title: 'Keyboard Shortcuts', content: 'Use keyboard shortcuts for quick access. Press the "Keyboard Shortcuts" button to see all available shortcuts.' }
  3590.         ];
  3591.         
  3592.         const stepsList = document.createElement('div');
  3593.         stepsList.style = 'margin-bottom: 25px;';
  3594.         
  3595.         steps.forEach((step, index) => {
  3596.             const stepItem = document.createElement('div');
  3597.             stepItem.style = 'margin-bottom: 15px; display: flex;';
  3598.             
  3599.             const stepNumber = document.createElement('div');
  3600.             stepNumber.textContent = (index + 1);
  3601.             stepNumber.style = `
  3602.                 width: 25px;
  3603.                 height: 25px;
  3604.                 background-color: #2196F3;
  3605.                 color: white;
  3606.                 border-radius: 50%;
  3607.                 display: flex;
  3608.                 justify-content: center;
  3609.                 align-items: center;
  3610.                 margin-right: 15px;
  3611.                 flex-shrink: 0;
  3612.                 font-weight: bold;
  3613.             `;
  3614.             
  3615.             const stepContent = document.createElement('div');
  3616.             
  3617.             const stepTitle = document.createElement('div');
  3618.             stepTitle.textContent = step.title;
  3619.             stepTitle.style = 'font-weight: bold; margin-bottom: 5px;';
  3620.             
  3621.             const stepDescription = document.createElement('div');
  3622.             stepDescription.textContent = step.content;
  3623.             stepDescription.style = 'color: #666;';
  3624.             
  3625.             stepContent.appendChild(stepTitle);
  3626.             stepContent.appendChild(stepDescription);
  3627.             
  3628.             stepItem.appendChild(stepNumber);
  3629.             stepItem.appendChild(stepContent);
  3630.             
  3631.             stepsList.appendChild(stepItem);
  3632.         });
  3633.         
  3634.         modalContent.appendChild(stepsList);
  3635.         
  3636.         // Tips section
  3637.         const tipsTitle = document.createElement('h3');
  3638.         tipsTitle.textContent = 'Pro Tips';
  3639.         tipsTitle.style = 'color: #FF9800; margin-bottom: 15px;';
  3640.         modalContent.appendChild(tipsTitle);
  3641.         
  3642.         const tipsList = document.createElement('ul');
  3643.         tipsList.style = 'margin-bottom: 25px; padding-left: 20px;';
  3644.         
  3645.         const tips = [
  3646.             'Use depths 1-10 for quick analysis and casual play.',
  3647.             'Use depths 15+ for serious analysis and difficult positions.',
  3648.             'Enable "Auto Move" to automatically play the best move.',
  3649.             'Try "Human Mode" to get more natural, human-like suggestions.',
  3650.             'Customize the evaluation bar colors in the Visual tab.'
  3651.         ];
  3652.         
  3653.         tips.forEach(tip => {
  3654.             const tipItem = document.createElement('li');
  3655.             tipItem.textContent = tip;
  3656.             tipItem.style = 'margin-bottom: 8px; color: #666;';
  3657.             tipsList.appendChild(tipItem);
  3658.         });
  3659.         
  3660.         modalContent.appendChild(tipsList);
  3661.         
  3662.         // Get started button
  3663.         const getStartedBtn = document.createElement('button');
  3664.         getStartedBtn.textContent = 'Get Started';
  3665.         getStartedBtn.style = `
  3666.             width: 100%;
  3667.             padding: 12px;
  3668.             background-color: #4CAF50;
  3669.             color: white;
  3670.             border: none;
  3671.             border-radius: 4px;
  3672.             cursor: pointer;
  3673.             font-weight: bold;
  3674.             font-size: 16px;
  3675.             transition: background-color 0.2s;
  3676.         `;
  3677.         getStartedBtn.onmouseover = function() {
  3678.             this.style.backgroundColor = '#45a049';
  3679.         };
  3680.         getStartedBtn.onmouseout = function() {
  3681.             this.style.backgroundColor = '#4CAF50';
  3682.         };
  3683.         getStartedBtn.onclick = function() {
  3684.             welcomeModal.style.display = 'none';
  3685.         };
  3686.         
  3687.         modalContent.appendChild(getStartedBtn);
  3688.         
  3689.         welcomeModal.appendChild(modalContent);
  3690.         document.body.appendChild(welcomeModal);
  3691.     }
  3692. }
  3693.  
  3694. //Touching below may break the script
  3695.  
  3696. var isThinking = false
  3697. var canGo = true;
  3698. var myTurn = false;
  3699. var board;
  3700.  
  3701. window.addEventListener("load", (event) => {
  3702.     // Start the main application
  3703.     main();
  3704. });

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

镜像地址随时可能被墙，建议加群获取最新地址

加入Q群

QingJ © 2025

镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址