☰

Deckbox Enhancements

Various enhancements for Deckbox (deckbox.org)

// ==UserScript==
// @name         Deckbox Enhancements
// @namespace    https://github.com/stuson
// @version      1.0.3
// @description  Various enhancements for Deckbox (deckbox.org)
// @author       Sam Tuson
// @match        https://deckbox.org/sets/*
// @icon         https://www.google.com/s2/favicons?domain=deckbox.org
// ==/UserScript==
(function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()({1:[function(require,module,exports){
'use strict';
// For more information about browser field, check out the browser field at https://github.com/substack/browserify-handbook#browser-field.

var styleElementsInsertedAtTop = [];

var insertStyleElement = function(styleElement, options) {
    var head = document.head || document.getElementsByTagName('head')[0];
    var lastStyleElementInsertedAtTop = styleElementsInsertedAtTop[styleElementsInsertedAtTop.length - 1];

    options = options || {};
    options.insertAt = options.insertAt || 'bottom';

    if (options.insertAt === 'top') {
        if (!lastStyleElementInsertedAtTop) {
            head.insertBefore(styleElement, head.firstChild);
        } else if (lastStyleElementInsertedAtTop.nextSibling) {
            head.insertBefore(styleElement, lastStyleElementInsertedAtTop.nextSibling);
        } else {
            head.appendChild(styleElement);
        }
        styleElementsInsertedAtTop.push(styleElement);
    } else if (options.insertAt === 'bottom') {
        head.appendChild(styleElement);
    } else {
        throw new Error('Invalid value for parameter \'insertAt\'. Must be \'top\' or \'bottom\'.');
    }
};

module.exports = {
    // Create a <link> tag with optional data attributes
    createLink: function(href, attributes) {
        var head = document.head || document.getElementsByTagName('head')[0];
        var link = document.createElement('link');

        link.href = href;
        link.rel = 'stylesheet';

        for (var key in attributes) {
            if ( ! attributes.hasOwnProperty(key)) {
                continue;
            }
            var value = attributes[key];
            link.setAttribute('data-' + key, value);
        }

        head.appendChild(link);
    },
    // Create a <style> tag with optional data attributes
    createStyle: function(cssText, attributes, extraOptions) {
        extraOptions = extraOptions || {};

        var style = document.createElement('style');
        style.type = 'text/css';

        for (var key in attributes) {
            if ( ! attributes.hasOwnProperty(key)) {
                continue;
            }
            var value = attributes[key];
            style.setAttribute('data-' + key, value);
        }

        if (style.sheet) { // for jsdom and IE9+
            style.innerHTML = cssText;
            style.sheet.cssText = cssText;
            insertStyleElement(style, { insertAt: extraOptions.insertAt });
        } else if (style.styleSheet) { // for IE8 and below
            insertStyleElement(style, { insertAt: extraOptions.insertAt });
            style.styleSheet.cssText = cssText;
        } else { // for Chrome, Firefox, and Safari
            style.appendChild(document.createTextNode(cssText));
            insertStyleElement(style, { insertAt: extraOptions.insertAt });
        }
    }
};

},{}],2:[function(require,module,exports){
require("./style.css");

const injectRowAdded = () => {
    PanelCardInfo.prototype.addRow = inject(PanelCardInfo.prototype.addRow, {
        callback: (rowIndex) => {
            setTimeout(() => {
                updateFormRow(rowIndex);
                updateDropdown(rowIndex);
            }, 10);
        },
    });
};

const injectSelectData = () => {
    PanelCardInfo.prototype.selectData = inject(PanelCardInfo.prototype.selectData, {
        after: (rowIndex) => {
            updateFormRow(rowIndex);
            updateDropdown(rowIndex);
        },
    });
};

const updateFoilStatus = (button, formIndex) => {
    const flags = Dropdown.all[`details[${formIndex}][flags]`].selectedValues.values();
    const isFoil = flags.includes("is_foil");
    setFoil(button.parent, isFoil);
};

const updateFormRow = (rowIndex) => {
    const button = getButtonFromRowIndex(rowIndex);
    const img = getImgFromButton(button);
    replacePictureSprite(img);
    updateFoilStatus(button, rowIndex);
};

const updateDropdown = (rowIndex) => {
    const mapPicture = (valueSet) => {
        valueSet[0] = valueSet[0].replace(
            /(src='.*?')(.*?data-tt='(.*?)')/,
            "src='https://s.deckbox.org/system/images/mtg/cards/$3.jpg'$2"
        );
        return valueSet;
    };

    const mappedValues =
        Dropdown.all[`details[${rowIndex}][card_edition_id]`].values.map(mapPicture);
    Dropdown.all[`details[${rowIndex}][card_edition_id]`].values = mappedValues;
};

const inject = (fn, injectedFuncs) => {
    const blankFunc = () => {};
    const defaultArgs = { after: blankFunc, before: blankFunc, callback: blankFunc };

    return function () {
        const { after, before, callback } = { ...defaultArgs, ...injectedFuncs };

        before.apply(this, arguments);
        let r = fn.apply(this, arguments);
        after.apply(this, arguments);
        r = callback.apply(this, [r, ...arguments]);
        return r;
    };
};

const getButtonFromRowIndex = (rowIndex) => {
    return Dropdown.all[`details[${rowIndex}][card_edition_id]`].button;
};

const getImgFromButton = (button) => {
    return button.parent.getElementsByClassName("sprite s_picture")[0];
};

const replacePictureSprite = (img) => {
    img.src = `https://s.deckbox.org/system/images/mtg/cards/${img.dataset.tt}.jpg`;
};

const setFoil = (buttonContainer, isFoil = false) => {
    isFoil ? buttonContainer.classList.add("foil") : buttonContainer.classList.remove("foil");
};

injectSelectData();
injectRowAdded();

},{"./style.css":3}],3:[function(require,module,exports){
var css = ".details_row img.sprite.s_picture,\n._menu_item img.sprite.s_picture {\n  width: 106px;\n  height: 148px;\n  margin: 10px;\n  background-image: none;\n}\n.esym {\n  position: relative;\n  z-index: 3;\n}\n.foil {\n  position: relative;\n}\n.foil::before,\n.foil::after {\n  content: \"\";\n  position: absolute;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  top: 0;\n  background-repeat: no-repeat;\n  background-position: 50% 50%;\n  pointer-events: none;\n}\n.foil::before {\n  background-size: 250% 250%;\n  background-image: linear-gradient(\n        115deg,\n        transparent 20%,\n        #ec9bb6 36%,\n        #ccac6f 43%,\n        #69e4a5 50%,\n        #8ec5d6 57%,\n        #b98cce 64%,\n        transparent 80%\n    );\n  opacity: 0.8;\n  mix-blend-mode: color-dodge;\n  z-index: 1;\n  filter: brightness(0.6) contrast(1.3);\n  animation: foilTurn 55s ease-in-out infinite;\n}\n.foil::after {\n  background-image: url(https://i.imgur.com/NVFh3V8.gif),\n        linear-gradient(\n            125deg,\n            #ff008460 15%,\n            #fca40050 30%,\n            #ffff0040 40%,\n            #00ff8a30 60%,\n            #00cfff50 70%,\n            #cc4cfa60 85%\n        );\n  background-size: 160%;\n  z-index: 2;\n  mix-blend-mode: color-dodge;\n  background-blend-mode: overlay;\n  opacity: 0.15;\n  animation: foilScroll 55s infinite;\n}\n@keyframes foilTurn {\n  0%, 10%, 90%, 100% {\n    background-position: 50% 50%;\n  }\n\n  30%, 40% {\n    background-position: 0% 0%;\n  }\n\n  60%, 70% {\n    background-position: 100% 100%;\n  }\n}\n@keyframes foilScroll {\n  0%, 10%, 90%, 100% {\n    opacity: 0.15;\n  }\n\n  30%, 40% {\n    opacity: 0.4;\n  }\n\n  60%, 70% {\n    opacity: 0.4;\n  }\n}\n"; (require("browserify-css").createStyle(css, { "href": "src/style.css" }, { "insertAt": "bottom" })); module.exports = css;
},{"browserify-css":1}]},{},[2]);