Watching the AM vs ChinaA game (part of the Battle of Africa 1 tournament) and wished that you could quickly turn
into
with only 6 clicks?
With either Greasemonkey (Firefox) or Tampermonkey (Chrome) installed, you too can do this.
For Greasemonkey:
Script file:
Questions:
What is that big ugly thing in the middle of the script with all the % signs?
An SVG image, inserted as text.
into
with only 6 clicks?
With either Greasemonkey (Firefox) or Tampermonkey (Chrome) installed, you too can do this.
For Greasemonkey:
- Install Greasemonkey
- Click the Greasemonkey logo
- Click "New User Script..."
- Paste the script file into the window, replacing all the contents of the script that is automatically generated.
- Click the save icon (top left corner)
- Now spectate a civ draft and click on the civ icons to X them out. Click again to remove the X.
- Install Tampermonkey
- Click the Tampermonkey logo
- Click "Dashboard"
- Click the + button for a new user script
- Paste the script file into the window, replacing all the contents of the script that is automatically generated.
- Click the save icon (disk icon just above the editing area, close to where "Search", "Replace", etc. are)
- Now spectate a civ draft and click on the civ icons to X them out. Click again to remove the X.
Script file:
JavaScript:
// ==UserScript==
// @name Cross out AOE2 civ picks.
// @version 1
// @grant none
// @match https://aoe2cm.net/spectate*
// ==/UserScript==
var sheet = document.createElement('style')
// Image from https://openclipart.org/detail/16982/cross
sheet.innerHTML = "div.pick.card { position: relative; top: 0; } div.pick.card.disabled:before { content: ' '; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: url('data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20version%3D%221.0%22%20viewBox%3D%220%200%2034%2034%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Acc%3D%22http%3A%2F%2Fcreativecommons.org%2Fns%23%22%20xmlns%3Adc%3D%22http%3A%2F%2Fpurl.org%2Fdc%2Felements%2F1.1%2F%22%20xmlns%3Ardf%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2F02%2F22-rdf-syntax-ns%23%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22c%22%20x1%3D%2220.153%22%20x2%3D%2240.305%22%20y1%3D%2213.746%22%20y2%3D%2248.977%22%20gradientTransform%3D%22matrix%28.88932%200%200%20.88932%203.5416%203.5416%29%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22rgb%28152%2C%2032%2C%207%29%22%20offset%3D%220%22%2F%3E%3Cstop%20stop-color%3D%22rgb%2881%2C%2015%2C%202%29%22%20offset%3D%221%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22b%22%20x1%3D%2218.505%22%20x2%3D%2247.844%22%20y1%3D%2217.421%22%20y2%3D%2246.762%22%20gradientTransform%3D%22matrix%28.88932%200%200%20.88932%20-32.549%202.4514%29%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22rgb%28241%2C%2020%2C%2012%29%22%20offset%3D%220%22%2F%3E%3Cstop%20stop-color%3D%22rgb%28141%2C%2026%2C%202%29%22%20offset%3D%221%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22a%22%20x1%3D%2218.505%22%20x2%3D%2247.844%22%20y1%3D%2217.421%22%20y2%3D%2246.762%22%20gradientTransform%3D%22matrix%28.88932%200%200%20.88932%203.5416%203.5416%29%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22rgb%28255%2C%20139%2C%20142%29%22%20offset%3D%220%22%2F%3E%3Cstop%20stop-color%3D%22rgb%28180%2C%2035%2C%2020%29%22%20stop-opacity%3D%22.72241%22%20offset%3D%221%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cg%20transform%3D%22translate%28-15%2C-15%29%22%3E%3Cpath%20d%3D%22m16.025%2021.211c-0.376%200.454-0.342%201.12%200.079%201.533l9.256%209.256-9.256%209.256c-0.215%200.213-0.336%200.503-0.336%200.806%200%200.302%200.121%200.592%200.336%200.805l5.03%205.031c0.213%200.215%200.504%200.336%200.806%200.336%200.303%200%200.593-0.121%200.806-0.336l9.256-9.256%209.256%209.256c0.213%200.215%200.503%200.336%200.805%200.336%200.303%200%200.593-0.121%200.806-0.336l5.031-5.031c0.215-0.213%200.336-0.503%200.336-0.805%200-0.303-0.121-0.593-0.336-0.806l-9.256-9.256%209.256-9.256c0.215-0.213%200.336-0.503%200.336-0.806%200-0.302-0.121-0.592-0.336-0.805l-5.031-5.031c-0.213-0.215-0.503-0.336-0.806-0.336-0.302%200-0.592%200.121-0.805%200.336l-9.256%209.256-9.256-9.256c-0.213-0.215-0.503-0.336-0.806-0.336-0.302%200-0.593%200.121-0.806%200.336l-5.03%205.031c-0.028%200.025-0.054%200.051-0.079%200.078z%22%20fill%3D%22url%28%23c%29%22%2F%3E%3Cpath%20transform%3D%22translate%2836.094%201.1033%29%22%20d%3D%22m-14.375%2015.844c-0.18%200.047-0.342%200.145-0.469%200.281l-4.031%204.031c-0.377%200.381-0.377%200.995%200%201.375l9.375%209.375-9.375%209.375c-0.377%200.381-0.377%200.995%200%201.375l4.031%204.032c0.381%200.377%200.995%200.377%201.375%200l9.3752-9.376%209.375%209.376c0.3808%200.377%200.9943%200.377%201.375%200l4.0318-4.032c0.377-0.38%200.377-0.994%200-1.375l-9.3755-9.375%209.3755-9.375c0.377-0.38%200.377-0.994%200-1.375l-4.0318-4.031c-0.3807-0.377-0.9942-0.377-1.375%200l-9.375%209.375-9.3752-9.375c-0.233-0.244-0.576-0.35-0.906-0.281z%22%20fill%3D%22url%28%23b%29%22%2F%3E%3Cpath%20d%3D%22m21.844%2017.656c-0.036%200.014-0.068%200.035-0.094%200.063l-4.031%204.031c-0.032%200.035-0.054%200.078-0.063%200.125-0.016%200.051-0.016%200.105%200%200.156%200.014%200.036%200.035%200.068%200.063%200.094l9.562%209.563c0.088%200.083%200.157%200.198%200.157%200.312s-0.069%200.229-0.157%200.312l-9.562%209.563c-0.032%200.035-0.054%200.078-0.063%200.125-0.016%200.051-0.016%200.105%200%200.156%200.014%200.036%200.035%200.068%200.063%200.094l4.031%204.031c0.035%200.032%200.078%200.054%200.125%200.063%200.051%200.016%200.105%200.016%200.156%200%200.036-0.014%200.068-0.035%200.094-0.063l9.563-9.562c0.083-0.088%200.198-0.157%200.312-0.157s0.229%200.069%200.312%200.157l9.563%209.562c0.035%200.032%200.078%200.054%200.125%200.063%200.051%200.016%200.105%200.016%200.156%200%200.036-0.014%200.068-0.035%200.094-0.063l4.031-4.031c0.032-0.035%200.054-0.078%200.063-0.125%200.016-0.051%200.016-0.105%200-0.156-0.014-0.036-0.035-0.068-0.063-0.094l-9.562-9.563c-0.088-0.083-0.157-0.198-0.157-0.312s0.069-0.229%200.157-0.312l9.562-9.563c0.032-0.035%200.054-0.078%200.063-0.125%200.016-0.051%200.016-0.105%200-0.156-0.014-0.036-0.035-0.068-0.063-0.094l-4.031-4.031c-0.035-0.032-0.078-0.054-0.125-0.063-0.051-0.016-0.105-0.016-0.156%200-0.036%200.014-0.068%200.035-0.094%200.063l-9.563%209.562c-0.083%200.088-0.198%200.157-0.312%200.157s-0.229-0.069-0.312-0.157l-9.563-9.562c-0.035-0.032-0.078-0.054-0.125-0.063-0.051-0.016-0.105-0.016-0.156%200z%22%20fill%3D%22url%28%23a%29%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E'); z-index: 1; }";
document.body.appendChild(sheet);
document.body.addEventListener("click", function (event) {
var actualTarget = null;
var currTarget = event.target;
while (currTarget.parentElement != null) {
if (currTarget.classList.contains("pick") && currTarget.classList.contains("card")) {
actualTarget = currTarget;
break;
}
currTarget = currTarget.parentElement;
}
if (actualTarget != null) {
actualTarget.classList.toggle("disabled");
}
});
Questions:
What is that big ugly thing in the middle of the script with all the % signs?
An SVG image, inserted as text.