From a30e4d9dbe973b84f4e50655f1679ada03b47ada Mon Sep 17 00:00:00 2001 From: Snoweuph Date: Sat, 21 Dec 2024 15:44:20 +0100 Subject: [PATCH] Moved to Template --- {.gitea => .forgejo}/workflows/qs.yml | 0 Readme.md | 10 ++-- src/generate.js | 67 +++++++++++++++++++++++++++ src/lib.js | 5 -- src/main.user.js | 21 ++++++--- src/utils.js | 29 ++++++++++++ types/GM_getValue.d.js | 7 --- types/GM_setValue.d.js | 5 -- types/GM_xmlhttpRequest.d.js | 16 ------- types/html2canvas.d.js | 30 ++++++++++++ 10 files changed, 145 insertions(+), 45 deletions(-) rename {.gitea => .forgejo}/workflows/qs.yml (100%) create mode 100644 src/generate.js delete mode 100644 src/lib.js create mode 100644 src/utils.js delete mode 100644 types/GM_getValue.d.js delete mode 100644 types/GM_setValue.d.js delete mode 100644 types/GM_xmlhttpRequest.d.js create mode 100644 types/html2canvas.d.js diff --git a/.gitea/workflows/qs.yml b/.forgejo/workflows/qs.yml similarity index 100% rename from .gitea/workflows/qs.yml rename to .forgejo/workflows/qs.yml diff --git a/Readme.md b/Readme.md index f6c0ada..ee557ad 100644 --- a/Readme.md +++ b/Readme.md @@ -1,14 +1,14 @@ # Armyforge_Cards -![Stars Badge](https://git.euph.dev//Userscripts/Armyforge_Cards/badges/stars.svg?style=flat-square&label=★Stars&labelColor=gray&color=yellow) -![QS Badge](https://git.euph.dev//Userscripts/Armyforge_Cards/actions/workflows/qs.yml/badge.svg?style=flat-square&label=Status&labelColor=gray) +![Stars Badge](https://git.euph.dev/Userscripts/Armyforge_Cards/badges/stars.svg?style=flat-square&label=★Stars&labelColor=gray&color=yellow) +![QS Badge](https://git.euph.dev/Userscripts/Armyforge_Cards/actions/workflows/qs.yml/badge.svg?style=flat-square&label=Status&labelColor=gray) ## Installation -[![Install Userscript](https://img.shields.io/badge/Install_Userscript-Armyforge_Cards-gray?style=for-the-badge&logo=greasyfork&logoColor=black&labelColor=brown)](https://git.euph.dev//Userscripts/Armyforge_Cards/raw/branch/main/src/main.user.js) +[![Install Userscript](https://img.shields.io/badge/Install_Userscript-Armyforge_Cards-gray?style=for-the-badge&logo=greasyfork&logoColor=black&labelColor=brown)](https://git.euph.dev/Userscripts/Armyforge_Cards/raw/branch/main/src/main.user.js) ## Description - +Simple Userscript that allows Downloading the Armyfore Cars in a Usefull way ## Usage - +Press `CTRL` + `s` to Save the Current Cards. diff --git a/src/generate.js b/src/generate.js new file mode 100644 index 0000000..de545f6 --- /dev/null +++ b/src/generate.js @@ -0,0 +1,67 @@ +function generateCards() { + const cards_root = + document.getElementsByClassName('MuiContainer-root')[0] + .firstElementChild; + + Array.from(cards_root.children).forEach(child => { + const card = child.firstElementChild; + const header = card.firstElementChild; + const title = window.getHeaderTitle(header); + const unit_count = getUnitCount(title); + + const marker_section = document.createElement('div'); + marker_section.style.display = 'grid'; + marker_section.style.gridTemplateColumns = 'repeat(10, 1fr)'; + marker_section.style.gap = '0.5rem'; + marker_section.style.padding = '0.5rem'; + marker_section.style.marginBottom = '0.5rem'; + + for (let i = 0; i < 10 * unit_count; i++) { + const maker_space = document.createElement('div'); + maker_space.style.width = '3rem'; + maker_space.style.aspectRatio = '1'; + maker_space.style.borderRadius = '100%'; + maker_space.style.border = 'dashed 1px lightgray'; + marker_section.appendChild(maker_space); + } + card.insertBefore(marker_section, header.nextSibling); + + html2canvas(card, { scale: 15, backgroundColor: null }).then(canvas => { + const link = document.createElement('a'); + link.download = title + '.png'; + link.href = canvas.toDataURL(); + document.body.appendChild(link); + link.click(); + }); + }); +} + +function generateRules() { + const rules_root = + document.getElementsByClassName('MuiContainer-root')[0].lastElementChild + .firstElementChild.firstElementChild.firstElementChild; + const rules_list = + /** @type {HTMLElement} */ + ( + rules_root.firstElementChild.lastElementChild.firstElementChild + .firstElementChild.firstElementChild.firstElementChild + .firstElementChild + ); + + rules_list.style.display = 'flex'; + rules_list.style.flexDirection = 'column'; + rules_list.style.gap = '1rem'; + + html2canvas(rules_root, { scale: 8, backgroundColor: null }).then( + canvas => { + const link = document.createElement('a'); + link.download = 'Rules.png'; + link.href = canvas.toDataURL(); + document.body.appendChild(link); + link.click(); + } + ); +} + +window.generateCards = generateCards; +window.generateRules = generateRules; diff --git a/src/lib.js b/src/lib.js deleted file mode 100644 index ada0ad5..0000000 --- a/src/lib.js +++ /dev/null @@ -1,5 +0,0 @@ -function testLib() { - console.log('lib works!'); -} - -window.testLib = testLib; diff --git a/src/main.user.js b/src/main.user.js index d426a31..8cf95b0 100644 --- a/src/main.user.js +++ b/src/main.user.js @@ -1,13 +1,20 @@ // ==UserScript== // @name Armyforge_Cards // @namespace https://git.euph.dev/Userscripts -// @match * -// @require /Userscripts/Armyforge_Cards/raw/branch/main/src/lib.js -// @grant GM_setValue -// @grant GM_getValue -// @grant GM_xmlhttpRequest -// @version 0.0.1 +// @match https://army-forge.onepagerules.com/view* +// @require https://git.euph.dev/Userscripts/Armyforge_Cards/raw/branch/main/src/utils.js +// @require https://git.euph.dev/Userscripts/Armyforge_Cards/raw/branch/main/src/generate.js +// @require https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js +// @require https://html2canvas.hertzen.com/dist/html2canvas.min.js +// @grant none +// @version 1.0.0 // @author Userscripts // ==/UserScript== -window.testLib(); +document.addEventListener('keydown', event => { + if (event.ctrlKey && event.key === 's') { + event.preventDefault(); + window.generateCards(); + window.generateRules(); + } +}); diff --git a/src/utils.js b/src/utils.js new file mode 100644 index 0000000..5fd4809 --- /dev/null +++ b/src/utils.js @@ -0,0 +1,29 @@ +/** + * Get the Count of Units from the String + * @param {string} str + * @returns {number} + */ +function getUnitCount(str) { + const match = str.match(/^\d+/); + return match ? parseInt(match[0], 10) : 1; +} + +/** + * Get The Title of a Unit + * @param {Element} p + * @returns {string} + */ +function getHeaderTitle(p) { + let textContent = ''; + p.firstElementChild.firstElementChild.firstElementChild.childNodes.forEach( + node => { + if (node.nodeType === Node.TEXT_NODE) { + textContent += node.textContent; + } + } + ); + return textContent; +} + +window.getUnitCount = getUnitCount; +window.getHeaderTitle = getHeaderTitle; diff --git a/types/GM_getValue.d.js b/types/GM_getValue.d.js deleted file mode 100644 index 60a8662..0000000 --- a/types/GM_getValue.d.js +++ /dev/null @@ -1,7 +0,0 @@ -/** - * @param {string} storageKey - * @returns {string} - */ -function GM_getValue(storageKey) { - return ''; -} diff --git a/types/GM_setValue.d.js b/types/GM_setValue.d.js deleted file mode 100644 index a003dd5..0000000 --- a/types/GM_setValue.d.js +++ /dev/null @@ -1,5 +0,0 @@ -/** - * @param {string} storageKey - * @param {string} value - */ -function GM_setValue(storageKey, value) {} diff --git a/types/GM_xmlhttpRequest.d.js b/types/GM_xmlhttpRequest.d.js deleted file mode 100644 index 9d09b8f..0000000 --- a/types/GM_xmlhttpRequest.d.js +++ /dev/null @@ -1,16 +0,0 @@ -/** - * @param {Object} request - * @param {string} request.method - * @param {string} request.url - * @param {Object} [request.headers] - * @param {function(GMXMLHttpRequestResponse):void} [request.onload] - * @param {Function} [request.onerror] - * @returns {void} - */ -function GM_xmlhttpRequest(request) {} - -/** - * Response object for the HTTP request. - * @typedef {Object} GMXMLHttpRequestResponse - * @property {string} responseText - The response body as text. - */ diff --git a/types/html2canvas.d.js b/types/html2canvas.d.js new file mode 100644 index 0000000..979b276 --- /dev/null +++ b/types/html2canvas.d.js @@ -0,0 +1,30 @@ +/** + * @typedef {Object} Html2CanvasConfig + * @property {boolean} [allowTaint=false] - Whether to allow cross-origin images to taint the canvas. + * @property {boolean} [useCORS=false] - Enable cross-origin image loading. + * @property {boolean} [logging=false] - Enable console logging for debugging. + * @property {boolean} [removeContainer=true] - Remove the temporary cloned DOM container after rendering. + * @property {boolean} [backgroundColor=null] - Background color to use (default: transparent). + * @property {number} [width=null] - Set custom width for the canvas. + * @property {number} [height=null] - Set custom height for the canvas. + * @property {number} [x=0] - X-coordinate of the top-left corner of the canvas. + * @property {number} [y=0] - Y-coordinate of the top-left corner of the canvas. + * @property {string} [scrollX=window.scrollX] - X-scroll position to use. + * @property {string} [scrollY=window.scrollY] - Y-scroll position to use. + * @property {string} [windowWidth=document.documentElement.offsetWidth] - Width of the window to use for rendering. + * @property {string} [windowHeight=document.documentElement.offsetHeight] - Height of the window to use for rendering. + * @property {number} [scale=1] - Scale factor for rendering. + * @property {number} [proxy=null] - Proxy URL for loading cross-origin images. + * @property {HTMLElement} [target=null] - The target element to render. + */ + +/** + * Renders an HTML element into a canvas. + * See https://html2canvas.hertzen.com/configuration + * @param {Element} element - The HTML element to render. + * @param {Html2CanvasConfig} config - Configuration options for rendering. + * @returns {Promise} A promise that resolves with the generated canvas. + */ +function html2canvas(element, config) { + return /** @type {Promise} */ null; +}