oogadex

css bs
目前为 2024-03-17 提交的版本。查看最新版本。
换行
// ==UserScript==
// @name        oogadex
// @match       *://idle-pixel.com/login/play*
// @grant       none
// @version     1.0
// @author      ooga  booga
// @description css bs
// @require     https://gf.qytechs.cn/scripts/441206-idlepixel/code/IdlePixel+.js
// @namespace https://gf.qytechs.cn/users/826975
// ==/UserScript==

class OogaDex extends IdlePixelPlusPlugin {
  constructor() {
    super("oogadex", {
      about: {
        name: GM_info.script.name,
        version: GM_info.script.version,
        author: GM_info.script.author,
        description: GM_info.script.description
      }
    });
  }

  onLogin() {
    let css = document.createElement('style');
    css.innerHTML = `
      .tcg-card-type-container {
        overflow: hidden;
        transition: 0.5s;
        /* todo: fix it: https://stackoverflow.com/a/43965099 */
        max-height: 5000px;
      }

      .tcg-card-container {
        width: 250px;
        display: inline-flex;
      }

      .tiny {
        max-height: 0px;
      }

      .tcg-card {
        min-width: 200px;
        transition: 0.5s;
        position: relative;
        z-index: 1;
      }

      .tcg-card:hover {
        translate: 0px -20px;
      }

      .tcg-holo {
        position: relative;
        /* need to offset an entire card backwards */
        translate: calc(-100% - 20px) -20px;
        z-index: 0;
      }

      .tcg-holo:hover {
        translate: calc(-100% - 20px) -60px;
      }
    `;
    document.head.appendChild(css);

    CToe.loadCards = (raw) => {
      if(raw == "NONE") return;
      let fields = raw.split('~');
      let cards = [];
      for(let i=0; i<fields.length;){
        cards.push({
          id: fields[i++],
          ...CardData.data[fields[i]],
          name: fields[i++],
          isHolo: fields[i++] == 'true',
        });
      }
      console.log(cards);

      let tcgContext = document.getElementById("tcg-area-context");
      tcgContext.innerHTML = "";
      let categories = [...new Set(Object.entries(CardData.data).map(x => x[1].description_title))];
      for(let category of categories){
        let box = document.createElement('div');
        box.id = `tcg-type-category-${category}`;
        box.className = `tcg-type-category`;
        let boxTitle = document.createElement('div');
        boxTitle.innerText = category;
        boxTitle.className = 'hover';
        boxTitle.onclick = function(){
          this.nextElementSibling.classList.toggle('tiny');
        };
        box.appendChild(boxTitle);
        let boxEntries = document.createElement('div');
        boxEntries.id = `tcg-${category}-entries`;
        boxEntries.className = 'tcg-card-type-container';
        box.appendChild(boxEntries);
        let entries = Object.entries(CardData.data).filter(x => x[1].description_title == category).map(x => x[1]);
        console.log(entries);
        for(let entry of entries){
          let cardData = cards.filter(x => x.label == entry.label);
          if(cardData.length) console.log(entry, cardData);
          let name = Object.keys(CardData.data).find(key => CardData.data[key].label == entry.label);
          let cardContainer = document.createElement('div');
          cardContainer.className = 'tcg-card-container';
          boxEntries.appendChild(cardContainer);
          // normal
          let card = document.createElement('div');
          cardContainer.appendChild(card);
          card.outerHTML = CardData.getCardHTML(cardData.find(x => !x.isHolo)?.id, name, false);
          card = cardContainer.children[cardContainer.children.length-1];
          card.style.filter = cardData.find(x => !x.isHolo) ? 'contrast(1)' : 'contrast(0.05) saturate(0) brightness(1.5)';
          // holo
          card = document.createElement('div');
          cardContainer.appendChild(card);
          card.outerHTML = CardData.getCardHTML(cardData.find(x => x.isHolo)?.id, name, true);
          card = cardContainer.children[cardContainer.children.length-1];
          card.classList.add('tcg-holo');
          card.style.filter = cardData.find(x => x.isHolo) ? 'contrast(1)' : 'contrast(0.05) saturate(0) brightness(1.5)';
        }
        tcgContext.appendChild(box);
      }
    }
  }
}

const plugin = new OogaDex();
IdlePixelPlus.registerPlugin(plugin);
欢迎访问Greasy Fork镜像
