Author Topic: Greasemonkey for Homeworlds on SuperDuperGames.org  (Read 425 times)

Dragon

  • Administrator
  • Platinum Level
  • *****
  • Posts: 4650
  • Have you played my game?
    • Farting Cows And The End Of The World
Greasemonkey for Homeworlds on SuperDuperGames.org
« on: March 04, 2021, 00:54:34 »
I've been using Greasemonkey and Tampermonkey for a few years for little adjustments to things here and there. Generally, I use it for sites that I have no direct control over, such as adding links to commonly used pages in ticketing systems. This time, I've used it to adjust a form on site that I've used often - superdupergames.org.

Homeworlds is the most commonly played game on that site, but the site is slow, and the navigation is clunky. Even playing Homeworlds on there is a matter of entering text commands into a form, but the biggest problem that I have with it is that the command form is not even visible on the screen at the same time as the map for the game. Tonight, I created a Greasemonkey script to position the command form and stash near starmap. I've also made that form draggable, in case it's covering up something that you want to see.

Additionally, I've added a link to the Telegram Game in the top nav menu, which is a casual drawing game, like playing the Telephone party game, but with pictures. The Telegram Game is accessible through a small link on the My SDG page, but it's not very noticeable there and I haven't seen it on the navigation menu anywhere else... until now. So here it is:

Code: [Select]
// ==UserScript==
// @name     SDG Enhancements
// @version  1.3
// @match    http://superdupergames.org/*
// ==/UserScript==

// Add Telegram link to main menu
var myMenuP = document.querySelector('p');
var myNewA = document.createElement('a');
myNewA.setAttribute('href',"http://superdupergames.org/?page=telegram");
myNewA.setAttribute('style',"font-weight:bold;");
myNewA.innerText = 'Telegram Game';
myMenuP.append(' | ');
myMenuP.appendChild(myNewA);

// Float Homeworlds form and stash near starmap
if(window.location.search.indexOf('page=play_homeworlds') !== -1) {
  var myForm = document.querySelector('form');
  var myNewP = document.createElement('p');
  myNewP.innerText = 'Is this in your way? You\'re in luck! This box is draggable!';
  myNewP.setAttribute('style', 'text-align:center; font-style:italic;');
  var myImg = document.querySelector('table table table img');
  myImg.setAttribute('style', "max-width:100%");
  myForm.setAttribute('style',"position:fixed; width:400px; left:10%; background-color: #c0c0c0; border: 3px groove; cursor:grab; padding: 10px;");
  //myNewP.setAttribute('style',"position:absolute; right:0;");
  myForm.appendChild(myNewP);
  myNewP.appendChild(myImg);
}

// Make the box draggable: source: https://www.w3schools.com/howto/howto_js_draggable.asp
dragElement(myForm);

function dragElement(elmnt) {
  var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
  if (document.getElementById(elmnt.id + "header")) {
    // if present, the header is where you move the DIV from:
    document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
  } else {
    // otherwise, move the DIV from anywhere inside the DIV:
    elmnt.onmousedown = dragMouseDown;
  }

  function dragMouseDown(e) {
    e = e || window.event;
    e.preventDefault();
    // get the mouse cursor position at startup:
    pos3 = e.clientX;
    pos4 = e.clientY;
    document.onmouseup = closeDragElement;
    // call a function whenever the cursor moves:
    document.onmousemove = elementDrag;
    elmnt.style.cursor = 'move'; // You can do this or use a css class to change the cursor
    return true;
  }

  function elementDrag(e) {
    e = e || window.event;
    e.preventDefault();
    // calculate the new cursor position:
    pos1 = pos3 - e.clientX;
    pos2 = pos4 - e.clientY;
    pos3 = e.clientX;
    pos4 = e.clientY;
    // set the element's new position:
    elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
    elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
  }

  function closeDragElement() {
    // stop moving when mouse button is released:
    document.onmouseup = null;
    document.onmousemove = null;
    elmnt.style.cursor = 'grab'; // You can do this or use a css class to change the cursor
    elmnt.getElementsByTagName('textarea')[0].focus(); // Fix focus after moving
  }
}

I've also uploaded this script to GitHub.

Below are a couple screenshots showing how it looks using my Greasemonkey script on that site.
« Last Edit: July 21, 2021, 18:46:14 by Dragon »
"Hello IT. Have you tried turning it off and on again? ... OK, well, the button on the side. Is it glowing?... Yeah, you need to turn it on. Err, the button turns it on. Yeah, you do know how a button works, don't you? No, not on clothes." - Roy (The IT Crowd)

Dragon

  • Administrator
  • Platinum Level
  • *****
  • Posts: 4650
  • Have you played my game?
    • Farting Cows And The End Of The World
Re: Greasemonkey
« Reply #1 on: March 09, 2021, 20:12:48 »
I tried this on a Mac using Chrome with Tampermonkey tonight and my version 1 wouldn't match the site in Tampermonkey.

Since this site is always using http protocol right now and appears to always be working without the www, I'm making the following change (to be modified in my original post).
Code: [Select]
// @match    http://*.?superdupergames.org/*

Changed to:

Code: [Select]
// @match    http://superdupergames.org/*

Apparently  the URL match to work in Tampermonkey along with Greasemonkey didn't like the wildcard stuff to match the beginning of the URL. Also, I tried removing the http protocol and Greasemonkey hated that. Fortunately this works for both.
"Hello IT. Have you tried turning it off and on again? ... OK, well, the button on the side. Is it glowing?... Yeah, you need to turn it on. Err, the button turns it on. Yeah, you do know how a button works, don't you? No, not on clothes." - Roy (The IT Crowd)

Dragon

  • Administrator
  • Platinum Level
  • *****
  • Posts: 4650
  • Have you played my game?
    • Farting Cows And The End Of The World
Re: Greasemonkey for Homeworlds on SuperDuperGames.org
« Reply #2 on: April 20, 2021, 21:06:13 »
For comparison, here are a couple screenshots showing Homeworlds in progress on SDG without my Greasemonkey script active. The command form is so far away from the star map that you have to scroll completely away from one to see the other.
"Hello IT. Have you tried turning it off and on again? ... OK, well, the button on the side. Is it glowing?... Yeah, you need to turn it on. Err, the button turns it on. Yeah, you do know how a button works, don't you? No, not on clothes." - Roy (The IT Crowd)

Dragon

  • Administrator
  • Platinum Level
  • *****
  • Posts: 4650
  • Have you played my game?
    • Farting Cows And The End Of The World
Re: Greasemonkey for Homeworlds on SuperDuperGames.org
« Reply #3 on: July 15, 2021, 23:52:49 »
Updated to remove unnecessary color changing code and fix cursor changing for mousedown and mouseup.
"Hello IT. Have you tried turning it off and on again? ... OK, well, the button on the side. Is it glowing?... Yeah, you need to turn it on. Err, the button turns it on. Yeah, you do know how a button works, don't you? No, not on clothes." - Roy (The IT Crowd)

Dragon

  • Administrator
  • Platinum Level
  • *****
  • Posts: 4650
  • Have you played my game?
    • Farting Cows And The End Of The World
Re: Greasemonkey for Homeworlds on SuperDuperGames.org
« Reply #4 on: July 21, 2021, 18:48:05 »
Version 1.3 updates the focus for input when the form is moved or clicked on. This is not always an issue, but if a user click on some other part of the page, the focus changes and then it's a little tricky to get back in to type in the form otherwise.
"Hello IT. Have you tried turning it off and on again? ... OK, well, the button on the side. Is it glowing?... Yeah, you need to turn it on. Err, the button turns it on. Yeah, you do know how a button works, don't you? No, not on clothes." - Roy (The IT Crowd)