paegan / G123 Experimental JumpDrive

// ==UserScript==
// @name        G123 Experimental JumpDrive
// @namespace   G123EJD
// @author      PAEGAN
// @run-at      document-idle
// @license     CC-BY-NC-SA-4.0; https://creativecommons.org/licenses/by-nc-sa/4.0/legalcode
// @license     GPL-3.0-or-later; http://www.gnu.org/licenses/gpl-3.0.txt
// @updateURL   https://openuserjs.org/meta/paegan/G123_Experimental_JumpDrive.meta.js
// @version     0.1.1
// @description Installs an experimental jumpdrive into your spaceship interface to allow faster planet-hopping.
// @match       *://galactic123.net/playgame.php?theop=20&thesubop=*
// @grant       GM_addStyle
// ==/UserScript==

// Get current location
const urlParams = new URLSearchParams(window.location.search);
var myxcord = urlParams.get('thecoordx');
var myycord = urlParams.get('thecoordy');
var myxcordu = (myxcord++);
var myycordu = (myycord++);
var myxcordd = (myxcord--);
var myycordd = (myycord--);

/*--- Create a button in a container div.  It will be styled and
    positioned with CSS.
*/
var zNode = document.createElement('div');
zNode.innerHTML = '<span style="font-face:Verdana; display:block; font-size:9px;">Experimental Jumpdrive</span>' +
  '<a href="playgame.php?theop=20&thesubop=5&thecoordx=' + (myxcord) + '&thecoordy=' + (myycordu) + '" title="Up"><button id="goup" type="button">^</button></a>' +
  '<a href="playgame.php?theop=20&thesubop=5&thecoordx=' + (myxcordd) + '&thecoordy=' + (myycord) + '" title="Left"><button id="goleft" type="button"><</button></a>' +
  '<a href="playgame.php?theop=20&thesubop=5&thecoordx=' + (myxcord) + '&thecoordy=' + (myycordd) + '" title="Down"><button id="godown" type="button">v</button></a>' +
  '<a href="playgame.php?theop=20&thesubop=5&thecoordx=' + (myxcordu) + '&thecoordy=' + (myycord) + '" title="Right"><button id="goright" type="button">></button></a>';
zNode.setAttribute('id', 'jd_controls');
document.body.appendChild(zNode);

//--- Activate the buttons.
document.getElementById("goup").addEventListener(
  "click", ButtonClickAction, false
);

//--- Activate the buttons.
document.getElementById("godown").addEventListener(
  "click", ButtonClickAction, false
);

//--- Activate the buttons.
document.getElementById("goleft").addEventListener(
  "click", ButtonClickAction, false
);

//--- Activate the buttons.
document.getElementById("goright").addEventListener(
  "click", ButtonClickAction, false
);

function ButtonClickAction(zEvent) {
  /*--- old dummy action, we'll just add a line of text to the top
      of the screen.
  */
  var zNode = document.createElement('p');
  zNode.innerHTML = 'The button was clicked.';
  document.getElementById("myContainer").appendChild(zNode);
}

//--- Style our newly added elements using CSS.
GM_addStyle(`
    #jd_controls {
        position:               absolute;
        top:                    260px;
        left:                   202px;
        font-size:              20px;
        background:             grey;
        border:                 3px outset black;
        margin:                 5px;
        opacity:                0.9;
        z-index:                1100;
        padding:                5px 20px;
    }
    #jd_controls button {
        cursor:                 pointer;
        font: bold 11px Arial;
        text-decoration: none;
        background-color: #001020;
        color: #eeeedd;
        padding: 2px 6px 2px 6px;
        border-top: 1px solid #CCCCCC;
        border-right: 1px solid #333333;
        border-bottom: 1px solid #333333;
        border-left: 1px solid #CCCCCC;
        display: inline-block;
        width: 25px;
        height: 25px;
    }
    #jd_controls p {
        color:                  red;
        background:             white;
    }
`);