Moved to Template

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
-<!-- description here -->
+Simple Userscript that allows Downloading the Armyfore Cars in a Usefull way
 
 ## Usage
-<!-- usage explained here-->
+Press `CTRL` + `s` to Save the Current Cards.

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;

src/lib.js

@@ -1,5 +0,0 @@
-function testLib() {
-    console.log('lib works!');
-}
-
-window.testLib = testLib;

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();
+    }
+});

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;

types/GM_getValue.d.js

@@ -1,7 +0,0 @@
-/**
- * @param {string} storageKey
- * @returns {string}
- */
-function GM_getValue(storageKey) {
-    return '';
-}

types/GM_setValue.d.js

@@ -1,5 +0,0 @@
-/**
- * @param {string} storageKey
- * @param {string} value
- */
-function GM_setValue(storageKey, value) {}

types/GM_xmlhttpRequest.d.js

@@ -1,16 +0,0 @@
-/**
- * @param {Object} request
- * @param {string} request.method
- * @param {string} request.url
- * @param {Object<string, string>} [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.
- */

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<HTMLCanvasElement>} A promise that resolves with the generated canvas.
+ */
+function html2canvas(element, config) {
+    return /** @type {Promise<HTMLCanvasElement>} */ null;
+}