gemini pro只吃難吃的:
代码: 全选
這裡為您提供需要修改的 4 個地方,以實作「DP Format」的三段切換(無評論、有評論、帶分支的淡紫色狀態)與文本生成。
### 1. 新增按鈕淡紫色狀態的 CSS
在 `<style>` 區塊中,找到 `.exp-fmt-btn.active[data-odd="1"] { background: orange; }`,在它下方新增 `[data-odd="2"]` 的樣式:
```css
.exp-fmt-btn.active[data-odd="1"] {
background: orange;
}
.exp-fmt-btn.active[data-odd="2"] {
background: #ce93d8; /* 淡紫色 */
}
```
### 2. 新增 `generateDPFormat` 函數
在 `generateExportText` 函數定義的後面,插入處理分支邏輯的新函數 `generateDPFormat`:
```javascript
function generateExportText(isEnglish) {
// ... (原本的代碼保持不變) ...
return text.trim();
}
// 新增:帶有分支與標記的 DP Format 生成函數
function generateDPFormat(isEnglish = false) {
let text = historyFEN.fen + '\n';
if (historyFEN.c && historyFEN.c.trim() !== '') {
text += historyFEN.c.trim() + '\n';
}
let branchQueue = [];
let branchCounter = 1;
// 超過20個分支使用括號數字
function getMarker(num) {
if (num <= 20) return String.fromCharCode(0x245F + num);
return `(${num})`;
}
function processSequence(startNode, absDepth, moveNum, isRed, pathArr) {
let seqText = "";
let curr = startNode;
let lineBuffer = "";
while (curr.v && curr.v.length > 0) {
let choiceIdx = 0;
if (pathArr && pathArr[absDepth] !== undefined) {
choiceIdx = pathArr[absDepth];
}
if (choiceIdx >= curr.v.length) choiceIdx = 0;
let nextNode = curr.v[choiceIdx];
let moveStr = isEnglish ? nextNode.move : NotationConverter.toChinese(nextNode.move);
let markers = "";
for (let i = 0; i < curr.v.length; i++) {
if (i !== choiceIdx) {
let marker = getMarker(branchCounter++);
markers += " " + marker;
branchQueue.push({
marker: marker,
parentNode: curr,
choiceIdx: i,
moveNum: moveNum,
isRedTurn: isRed,
absDepth: absDepth
});
}
}
if (isRed) {
if (lineBuffer === "") {
lineBuffer = `${moveNum}. `;
}
lineBuffer += `${moveStr}${markers}`;
if (nextNode.c && nextNode.c.trim() !== '') {
seqText += lineBuffer + '\n' + nextNode.c.trim() + '\n';
lineBuffer = "";
isRed = false;
} else {
isRed = false;
}
} else {
if (lineBuffer === "") {
lineBuffer = `${moveNum}. ………… `;
} else {
lineBuffer += " ";
}
lineBuffer += `${moveStr}${markers}`;
seqText += lineBuffer + '\n';
if (nextNode.c && nextNode.c.trim() !== '') {
seqText += nextNode.c.trim() + '\n';
}
lineBuffer = "";
isRed = true;
moveNum++;
}
curr = nextNode;
absDepth++;
}
if (lineBuffer !== "") {
seqText += lineBuffer + '\n';
}
return seqText.trim();
}
let mainIsRed = historyFEN.fen.split(' ')[1] === 'w';
let mainText = processSequence(historyFEN, 0, 1, mainIsRed, currentBranch);
text += mainText;
while (branchQueue.length > 0) {
let b = branchQueue.shift();
text += `\n\n${b.marker}\n`;
// 為分支生成虛擬的選擇路徑(只在當前層級選擇特定分支,後續默認走主線0)
let branchPath = [];
for (let i = 0; i < b.absDepth; i++) {
branchPath.push(0);
}
branchPath.push(b.choiceIdx);
let branchText = processSequence(b.parentNode, b.absDepth, b.moveNum, b.isRedTurn, branchPath);
text += branchText;
}
return text;
}
```
### 3. 修改複製行為 (`performCopy`)
找到 `performCopy` 函數,將判定 `cn` 的複製邏輯增加對 `odd === 2` 的支持:
```javascript
function performCopy() {
let textToCopy = "";
const fmt = lastExportFormat || 'cn';
const odd = formatOddStates[fmt] || 0;
if (fmt === 'cn') {
if (odd === 2) {
textToCopy = generateDPFormat(false);
} else if (odd === 1) {
textToCopy = generateTextWithComment(false);
} else {
textToCopy = generateExportText(false);
}
} else if (fmt === 'en') {
textToCopy = odd === 1 ? generateTextWithComment(true) : generateExportText(true);
// ... 後續代碼不變 ...
```
### 4. 修改 UI 界面生成與點擊切換邏輯 (`renderExportTextUI`)
找到 `renderExportTextUI` 函數,並做以下幾處局部修改:
首先,在初始化文本常量的地方加上 `cnTextWithBranches`:
```javascript
const cnText = generateExportText(false);
const cnTextWidthComment = generateTextWithComment(false);
const cnTextWithBranches = generateDPFormat(false); // 新增這行
const enText = generateExportText(true);
```
接著,把按鈕的文字改成 DP Format:
```javascript
commentDiv.innerHTML = `<div class="exp-fmt-outer">
<div class="exp-fmt-btn ${lastExportFormat === 'cn' ? 'active' : ''}" data-fmt="cn" data-odd="${formatOddStates['cn']}">DP Format</div>
<div class="exp-fmt-btn ${lastExportFormat === 'en' ? 'active' : ''}" data-fmt="en" data-odd="${formatOddStates['en']}">English Notation</div>
<div class="exp-fmt-btn ${lastExportFormat === 'engine' ? 'active' : ''}" data-fmt="engine" data-odd="${formatOddStates['engine']}">Engine Format</div>
<div class="exp-fmt-btn ${lastExportFormat === 'url' ? 'active' : ''}" data-fmt="url" data-odd="${formatOddStates['url']}">URL Parameter</div>
</div>`;
```
然後,在按鈕 `click` 事件中的 `wasActive` 狀態切換判定裡,讓 `cn` 支持 3 段切換 (0、1、2):
```javascript
if (wasActive) {
if (fmt === 'cn') {
formatOddStates[fmt] = (formatOddStates[fmt] + 1) % 3; // 新增這行以支援第三階段
} else {
formatOddStates[fmt] = formatOddStates[fmt] === 1 ? 0 : 1;
}
}
btn.setAttribute('data-odd', formatOddStates[fmt]);
```
最後,在 `updateTextarea` 中對應綁定數值 2 的文本內容:
```javascript
const updateTextarea = (fmt) => {
if (fmt === 'cn') {
if (formatOddStates[fmt] === 2) {
textarea.value = cnTextWithBranches;
} else if (formatOddStates[fmt] === 1) {
textarea.value = cnTextWidthComment;
} else {
textarea.value = cnText;
}
} else if (fmt === 'en') {
```