☰

ptcg_tw_deck_sort

ptcg deck

目前为 2023-02-22 提交的版本。查看 最新版本。

// ==UserScript==
// @name         ptcg_tw_deck_sort
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  ptcg deck
// @author       gxcts
// @match        https://asia.pokemon-card.com/tw/deck-build/
// @icon         https://cdn-icons-png.flaticon.com/512/1169/1169608.png
// @grant        none
// @require      https://cdn.jsdelivr.net/npm/[email protected]/Sortable.min.js
// ==/UserScript==

(function() {
    'use strict';

    // Get the relevant elements
    var searchResultZone = document.getElementById('searchResultZone');
    var decklistZoneCardContainer = document.getElementById('decklistZoneCardContainer');

    // Add event listeners to the searchResultZone for drag and drop functionality
    searchResultZone.addEventListener('dragstart', function(e) {
        e.dataTransfer.setData('text/plain', e.target.id);
    });

    // Add event listeners to the decklistZoneCardContainer for drag and drop functionality
    decklistZoneCardContainer.addEventListener('dragover', function(e) {
        e.preventDefault();
    });

    decklistZoneCardContainer.addEventListener('drop', function(e) {
        e.preventDefault();
        var data = e.dataTransfer.getData('text');
        var draggedElement = document.getElementById(data);
        var clonedElement = draggedElement.cloneNode(true);
        clonedElement.id = 'clone-' + data;
        decklistZoneCardContainer.appendChild(clonedElement);
    });

    // Add event listeners for sorting functionality
    Sortable.create(decklistZoneCardContainer, {
        animation: 150
    });

    // 創建排序按鈕，並且添加到網頁右上角
    const sortButton = document.createElement("button");
    sortButton.innerText = "排序卡牌";
    sortButton.style = "position:fixed; top:10px; right:10px; z-index:1000;";
    document.body.appendChild(sortButton);

function sortCards() {
  // 獲取牌組中所有卡牌元素
  const cardElems = document.querySelectorAll("#decklistZoneCardContainer .card");

  // 將卡牌轉換成陣列
  const cardArr = Array.from(cardElems);

  // 使用 map 排序，先按照是否包含【能量】字串排序，再按照 ID 由小到大排序
  cardArr.sort((a, b) => {
    const aIsEnergy = a.dataset.cardName.includes("能量");
    const bIsEnergy = b.dataset.cardName.includes("能量");

    if (aIsEnergy && !bIsEnergy) {
      return 1; // a放後面
    } else if (!aIsEnergy && bIsEnergy) {
      return -1; // a放前面
    } else {
      return a.id - b.id; // 都不是能量的話按 id 排序
    }
  });

  // 將排好序的卡牌插入到 DOM 中
  const parentElem = cardElems[0].parentNode;
  cardArr.forEach((cardElem) => {
    parentElem.appendChild(cardElem);
  });
}

    // 綁定排序按鈕點擊事件
    sortButton.addEventListener("click", () => {

        sortCards();

    });
})();