☰

JOL+

Various JOL improvements for noobs like myself

  1. // ==UserScript==
  2. // @name         JOL+
  3. // @namespace    https://github.com/shmup
  4. // @version      1.0.7
  5. // @description  Various JOL improvements for noobs like myself
  6. // @author       shmug
  7. // @include	 https://deckserver.net/jol/*
  8. // @include	 https://www.deckserver.net/jol/*
  9. // @run-at       document-idle
  10. // @grant        GM_addStyle
  11. // ==/UserScript==
  12.  
  13. /* jshint esversion: 6 */
  14.  
  15. /* Written for https://tampermonkey.net */
  16. /* https://greasyfork.org/en/scripts/378099-jol */
  17.  
  18. GM_addStyle("details {font-size: .875rem;margin-left: 5px;}");
  19. GM_addStyle("pre {font-family: monospace;}");
  20. GM_addStyle("#preview {height: 375px}");
  21. GM_addStyle("#preview img {height: 100%}");
  22. GM_addStyle("#popup { position: fixed; top: 0; right: 0;}");
  23. GM_addStyle("#popup img { width: 250px; }");
  24.  
  25. (function(window) {
  26.   "use strict";
  27.  
  28.   document.body.innerHTML += "<div id='popup' />";
  29.  
  30.   /*
  31.    * Example command tech
  32.    */
  33.   unsafeWindow.populateCommand = el => {
  34.     const command = document.getElementById("command");
  35.     command.value = el.selectedOptions[0].innerText;
  36.     command.focus();
  37.   };
  38.  
  39.   const drawOptions = () => {
  40.     return `
  41.       <div class="form-group form-row mb-1">
  42. <details>
  43. <summary tabindex="-1">Help</summary>
  44. <pre>
  45. pool     [PLAYER] [+|-]AMOUNT
  46. blood    [PLAYER] [REGION CARD] [+|-]AMOUNT
  47. capacity [PLAYER] [REGION] CARD [+|-]amount
  48. discard  CARD|random [ draw]
  49. draw     [crypt] [NUM]
  50. edge     [PLAYER] [burn]
  51. label    [PLAYER] [REGION] CARD [text here]
  52. move     [SRCPLAYER] [SRCREGION] CARD [→ PLAYER] [→ REGION] [→ CARD]
  53. order    index1 index2 index3 index4 index5
  54. play     [vamp] CARD [PLAYER] [REGION] [CARD] [draw]
  55. random   [NUMBER]
  56. show     [REGION] amount [[PLAYER]|all]
  57. shuffle  [PLAYER] [REGION] [num]
  58. transfer [REGION] VAMP [+|-]AMOUNT
  59. lock     [PLAYER] [REGION] CARD
  60. unlock   [PLAYER] [REGION] [CARD]
  61. votes    [PLAYER] [REGION CARD] [+|-]AMOUNT</pre>
  62. </details>
  63.       </div>`;
  64.   };
  65.  
  66.   /*
  67.    * Card preview tech
  68.    */
  69.   document.getElementById("loaded").innerHTML += "<div id='preview' />";
  70.   const preview = document.getElementById("preview");
  71.  
  72.   const commands = document.querySelector(
  73.     "#playerCommands .form-group:nth-child(2)"
  74.   );
  75.  
  76.   commands.insertAdjacentHTML("afterend", drawOptions());
  77.  
  78.   const drawCards = () => {
  79.     document
  80.       .getElementById("playerHand")
  81.       .querySelectorAll(".card-name")
  82.       .forEach(card => {
  83.         appendCard(cleanCard(card.innerText));
  84.       });
  85.   };
  86.  
  87.   const clearPreview = () => {
  88.     preview.innerHTML = "";
  89.   };
  90.  
  91.   const cleanCard = name => {
  92.     return name.toLowerCase().replace(/\W/g, "");
  93.   };
  94.  
  95.   const appendCard = name => {
  96.     const img = document.createElement("img");
  97.     img.src = `https://smell.flowers/rubbish/vtes/scans/${name}.jpg`;
  98.     preview.appendChild(img);
  99.   };
  100.  
  101.   // Select the node that will be observed for mutations
  102.   const playerHand = document.getElementById("playerHand");
  103.  
  104.   new MutationObserver((mutationsList, observer) => {
  105.     let cards;
  106.  
  107.     for (const mutation of mutationsList) {
  108.       if (mutation.type === "childList") {
  109.         clearPreview();
  110.         drawCards();
  111.       }
  112.     }
  113.   }).observe(playerHand, {
  114.     attributes: true,
  115.     childList: true,
  116.     subtree: true
  117.   });
  118. })(window);