Combine Game Datacards scripts

game-datacards-enhancements.user.js

@@ -1,26 +0,0 @@
-// ==UserScript==
-// @name         Game-Datacards Enhancements
-// @description  Changes the way external images are shown when printing
-// @author       luxick
-// @version      2025-09-24
-// @updateURL    https://git.luxick.de/luxick/scripts/raw/branch/master/game-datacards-enhancements.user.js
-// @downloadURL  https://git.luxick.de/luxick/scripts/raw/branch/master/game-datacards-enhancements.user.js
-// @namespace    https://game-datacards.eu/
-// @match        https://game-datacards.eu/*
-// @grant        none
-// @run-at       document-end
-// ==/UserScript==
-
-(function () {
-  'use strict';
-
-  const style = document.createElement('style');
-  style.textContent = `
-    .header_container::before {
-      width: 600px !important;
-      height: 196px !important;
-      z-index: 100;
-    }
-  `;
-  document.head.appendChild(style);
-})();

js/game-datcards-improved.user.js

@@ -1,18 +1,23 @@
 // ==UserScript==
-// @name         Game Datacards - Image Export/Import (ZIP)
+// @name         Game Datacards - Improved
 // @namespace    local
-// @match        https://game-datacards.eu/*
+// @version      1.0
+// @description  Adds card image export/import (ZIP) to the header and a button to rotate card backs for printing
+// @match        *://game-datacards.eu/*
 // @grant        none
-// @version      2.1
 // @run-at       document-idle
 // @require      https://cdn.jsdelivr.net/npm/fflate@0.8.3/umd/index.js
-// @downloadURL  https://git.luxick.de/luxick/scripts/raw/branch/master/js/datacards-import-export.user.js
+// @downloadURL  https://git.luxick.de/luxick/scripts/raw/branch/master/js/game-datcards-improved.user.js
-// @updateURL    https://git.luxick.de/luxick/scripts/raw/branch/master/js/datacards-import-export.user.js
+// @updateURL    https://git.luxick.de/luxick/scripts/raw/branch/master/js/game-datcards-improved.user.js
 // ==/UserScript==
 
 (function () {
   'use strict';
 
+  // ---------------------------------------------------------------------------
+  // Image export / import (IndexedDB <-> ZIP)
+  // ---------------------------------------------------------------------------
+
   const DB_NAME = 'CardImagesDB';
   const STORE = 'images';
 
@@ -154,7 +159,7 @@
     return b;
   }
 
-  function addButtons() {
+  function addHeaderButtons() {
     if (document.getElementById('gdc-img-export')) return true;
 
     const settingsBtn = document.querySelector('.app-header-settings-btn');
@@ -173,11 +178,78 @@
     return true;
   }
 
-  // The app renders after load, so retry until the header exists.
+  // ---------------------------------------------------------------------------
-  if (!addButtons()) {
+  // Rotate card backs for printing
-    const obs = new MutationObserver(() => {
+  // ---------------------------------------------------------------------------
-      if (addButtons()) obs.disconnect();
+
+  function rotateCardBacks() {
+    var wrappers = document.querySelectorAll('.unit-card-back-wrapper');
+    var count = 0;
+
+    wrappers.forEach(function (wrapper) {
+      var outer = wrapper.parentElement;
+      if (!outer) return;
+
+      var current = outer.style.rotate;
+      if (current === '180deg') {
+        outer.style.rotate = '0deg';
+      } else {
+        outer.style.rotate = '180deg';
+      }
+      count++;
     });
-    obs.observe(document.body, { childList: true, subtree: true });
+
+    console.log('Rotated ' + count + ' card back(s).');
+    return count;
+  }
+
+  function createRotateButton() {
+    var button = document.createElement('button');
+    button.id = 'rotate-card-backs-button';
+    button.textContent = 'Rotate card backs';
+    button.style.display = 'block';
+    button.style.width = '100%';
+    button.style.marginTop = '10px';
+    button.style.padding = '8px 12px';
+    button.style.background = '#381a3a';
+    button.style.color = 'white';
+    button.style.border = 'none';
+    button.style.borderRadius = '4px';
+    button.style.cursor = 'pointer';
+    button.style.fontFamily = 'sans-serif';
+    button.style.fontSize = '13px';
+
+    button.addEventListener('click', rotateCardBacks);
+    return button;
+  }
+
+  function addRotateButton() {
+    if (document.getElementById('rotate-card-backs-button')) return true;
+
+    var sidebar = document.querySelector('.print-settings-scroll');
+    if (!sidebar) return false;
+
+    sidebar.appendChild(createRotateButton());
+    console.log('Rotate card backs button added to the sidebar.');
+    return true;
+  }
+
+  // ---------------------------------------------------------------------------
+  // Bootstrap
+  // ---------------------------------------------------------------------------
+
+  // The app renders after load, and the print sidebar only exists on the print
+  // view, so keep watching the DOM until both mount points have been handled.
+  var headerDone = addHeaderButtons();
+  var sidebarDone = addRotateButton();
+
+  if (!headerDone || !sidebarDone) {
+    var observer = new MutationObserver(function () {
+      if (!headerDone) headerDone = addHeaderButtons();
+      if (!sidebarDone) sidebarDone = addRotateButton();
+      if (headerDone && sidebarDone) observer.disconnect();
+    });
+
+    observer.observe(document.documentElement, { childList: true, subtree: true });
   }
 })();

js/rotate-datacard-backs.user.js

@@ -1,83 +0,0 @@
-// ==UserScript==
-// @name         Rotate Datasheet Card Backs for Printing
-// @namespace    local.print.helper
-// @version      3.0
-// @description  Adds a button to the print sidebar that rotates the outer wrapper of every unit-card-back card 180 degrees
-// @match        *://game-datacards.eu/*
-// @grant        none
-// @run-at       document-idle
-// @downloadURL  https://git.luxick.de/luxick/scripts/raw/branch/master/js/rotate-datacard-backs.user.js
-// @updateURL    https://git.luxick.de/luxick/scripts/raw/branch/master/js/rotate-datacard-backs.user.js
-// ==/UserScript==
-
-(function () {
-  'use strict';
-
-  function rotateCardBacks() {
-    var wrappers = document.querySelectorAll('.unit-card-back-wrapper');
-    var count = 0;
-
-    wrappers.forEach(function (wrapper) {
-      var outer = wrapper.parentElement;
-      if (!outer) return;
-
-      var current = outer.style.rotate;
-      if (current === '180deg') {
-        outer.style.rotate = '0deg';
-      } else {
-        outer.style.rotate = '180deg';
-      }
-      count++;
-    });
-
-    console.log('Rotated ' + count + ' card back(s).');
-    return count;
-  }
-
-  function createButton() {
-    var button = document.createElement('button');
-    button.id = 'rotate-card-backs-button';
-    button.textContent = 'Rotate card backs';
-    button.style.display = 'block';
-    button.style.width = '100%';
-    button.style.marginTop = '10px';
-    button.style.padding = '8px 12px';
-    button.style.background = '#381a3a';
-    button.style.color = 'white';
-    button.style.border = 'none';
-    button.style.borderRadius = '4px';
-    button.style.cursor = 'pointer';
-    button.style.fontFamily = 'sans-serif';
-    button.style.fontSize = '13px';
-
-    button.addEventListener('click', rotateCardBacks);
-    return button;
-  }
-
-  function tryAddButton() {
-    var sidebar = document.querySelector('.print-settings-scroll');
-    if (!sidebar) return false;
-
-    // Avoid adding the button more than once.
-    if (document.getElementById('rotate-card-backs-button')) return true;
-
-    sidebar.appendChild(createButton());
-    console.log('Rotate card backs button added to the sidebar.');
-    return true;
-  }
-
-  // Try right away in case the sidebar is already there.
-  if (tryAddButton()) return;
-
-  // Otherwise watch the page until the sidebar appears.
-  var observer = new MutationObserver(function () {
-    if (tryAddButton()) {
-      observer.disconnect();
-    }
-  });
-
-  observer.observe(document.documentElement, {
-    childList: true,
-    subtree: true
-  });
-})();