---
title: 如何在訓練家網站的牌組構築工具中更換卡片的順序
tags: PTCG文章
image: https://i.imgur.com/2KNfN8R.png
disqus: bluedaze
---

隨著繁中版PTCG進入朱紫系列，繁中版的地區聯盟賽也迎來事前登錄牌組的新規定。實際上繁中版的官方牌組構築工具已經上線許久，在功能愈發完善的現在，確實是一個啟用牌組事前登錄功能的好時機。

實際上，亞洲區的其他語言版本，也早已啟用了牌組事前登錄的功能，這對於賽事流程進展來說，無疑是一大進步，且可以提高裁判和主辦在賽前、賽中甚至賽後的工作中使用卡表需求時的效率。

不過亞洲區的牌組構築工具雖然已達可使用的最低標準，但還有許多在使用者體驗的設計上不夠優秀的部分。而這便是今天要處理的問題。

如果你有使用過日本訓練家網站的牌組構築系統就會知道，日本訓練家網站的牌組構築系統，是會依據卡片的類型將卡表自動進行分類的。所以當我們看到日版輸出的牌組卡表圖時，基本上都會是像下面這樣容易看出牌組構成的畫面。

<center>


</center>

除此之外，日版的牌組構築工具還提供了可以在同類型卡片間調換順序的按鈕，讓使用者可以客製化自己卡表中的卡片排序。

<center>


</center>

然而這兩項功能，繁中版的牌組構築工具卻一個也沒有：(

不過沒有並不代表做不到，今天就來教大家，如何簡單運用網頁開發者工具來實現「在使用牌組構築工具時，變更卡片順序」的效果。

:::info
**網頁開發者工具**

雖然對於不熟悉的人來說可能很陌生，不過這其實是一個目前一般瀏覽器都有的功能，一般來說可以透過快捷鍵「F12」呼叫出來。

網頁開發者工具可以用於偵測或檢視瀏覽器與網頁互動的行為、上傳/下載的資訊、或者網頁本身的內容等等。

:::

那麼，接下來就一步一步地展示如何實現這個效果吧！

(以下使用Firefox進行示範，實際上若使用Chrome、Edge等其他瀏覽器也能實現這樣的操作)

當我們將卡片加入牌組後，如果想要變換卡片的順序，可以依照以下的步驟執行。

<center>

▲ **將「刺球仙人掌」與「夢歌仙人掌」加入了牌組**
</center>

* **Step 1 開啟網頁開發者工具**
在想要交換的卡片上點擊滑鼠右鍵，呼叫右鍵選單並找到「檢測」的選項(不同瀏覽器名稱可能不同，但意思上大同小異)。

<center>


</center>

* **Step 2 在網頁開發者工具中，找到該卡片在網頁程式碼中的div區塊**
透過偵測方式呼叫出網頁開發者工具的情況，工具會自動帶出該卡圖在網頁程式碼中的位置，圖中框出的部分就是「夢歌仙人掌」的div區塊。

<center>

▲ **網頁開發者工具檢測到的div區塊**
</center>

**tips**：建議可以像下圖這樣，進一步將展開的div區塊收起，方便下一個步驟的操作。
(不同瀏覽器的網頁開發者工具操作方式可能不同，故可能沒有收起區塊的功能，還請自行嘗試自己使用的瀏覽器如何操作)

<center>

▲ **收起後的「夢歌仙人掌」div區塊**
</center>

* **Step 3 將該卡片的div區塊拖曳至想要的位置**
可以簡單明白一下此處的原理，網頁上顯示的這些內容，是透過這樣一個個的區塊所組成。而牌組構築工具中，卡片的順序就是依據他們在網頁程式碼中div區塊的排序而呈現的，換句話說，只要調動不同卡片div區塊在網頁程式碼中的位置，就可以實現改變卡片順序的效果。

<center>

{%youtube o1nYTYR_MxY%}
▲ **如同影片所示，透過拖曳卡片的div區塊就可以任意調動卡片的順序**
</center>

透過上面的方式，就可以簡單地直接變更卡片的順序，而不用為了呈現整齊的卡表，而需要戰戰兢兢地依序輸入卡片了。

<center>

▲ **「以此牌組為基礎新構築牌組」**
</center>

更重要的是，如果在完成牌組之後想要進行微調，也不需要為了牌組順序而重新建構卡表，而可以直接使用官方原本就有的「以此牌組為基礎新構築牌組」的功能，也不用擔心牌組順序會因為調整構築而沒辦法很好地排序了。