橋牌主打練習程式 (On-line Javascript 設計)

http://4rdp.blogspot.com/2023/01/on-line-javascript.html?m=0

	♠ ♡ ♢ ♣
♠ ♡ ♢ ♣		♠ ♡ ♢ ♣
	♠ ♡ ♢ ♣
Contract : Win

(西家連續攻擊方塊 AKQ，南家如何完成 4S 合約？)

為了研究橋牌主打合約技巧，需要嘗試不同出牌次序的結果，寫在紙上塗塗改改很不美觀也不方便，消耗紙張更不經濟，因此想寫個程式，除方便自己研究之外，也可以讓橋友們試用，依據以往經驗，Javascript 網頁程式最適合與部落格相搭配，因此選它來設計小程式，以及使用 On-line 程式工具，主要可以省卻軟體工具安裝和設定，所以我選用 Jsbin。

設計網頁或視窗程式，首先要先規劃使用者操作介面，相關內容要怎樣顯示在螢幕上，為了內容不跑位，我使用了表格限制內容可以顯示的範圍，因此 HTML 語法為

<table> ...... </table>

表格內的橫列為

<tr> ...... </tr>

橫列中的欄位用 <td>，幾個欄位就有幾個 <td>

<tr><td> ...1... <td> ...2... <td> ...3... </tr>

此外，還需要能輸入資料的欄位，以及限制欄寬

<input type='text' id='......' value='......' size='5px'>

然後 <br /> 換行

那我又是怎樣知道這些 HTML 語法的呢？我是參考兩本書，是以前逛書店，覺得這些工具書看得懂並且未來有需要才買的，

1. HTML 帶了就走：我是個網頁高手 ISBN 957-22-3264-9

2. 從 HTML5+CSS3+JavaScript 到 jQuery+Node.js 程式設計 ISBN 978-986-312-391-0

不過這回程式設計，多了一個好用的工具，那就是 ChatGPT，只要你指定程式語言並清楚說出功能需求 (不要太複雜)，就可以自動產出程式範例，我就是參考它的程式範例，改寫出想要的功能。

在表格 HTML 中，先預藏 id，例如 <tr><td><td id='NORTH'><td></tr>，當我按下 Reset Buttons 按鈕後，會先清除舊資料，再去讀取北家的牌張資料，然後將牌張按鈕的 HTML 碼新建在 <td id='NORTH'> 之後，部分程式碼如下：

const reset = document.getElementById('RESET');
const color = document.getElementById('COLOR');
var north = document.getElementById('NORTH');

reset.addEventListener('click', function() {
  while (north.childNodes[0] != null)
    north.removeChild(north.childNodes[0]);   // 清除舊資料

  createButton(north, 'S '+document.getElementById('NST').value)  // 讀取牌張再新建按鍵
});

function createButton(obj, str) {
  var cards = Array.from(str);
  for (i=0 ; i<str.length ; i++) {
    if (i<2) {
      switch (cards[i]) {
        case 'S':
          cards[i] = '\u2660';
          break;
        case 'H':
          cards[i] = '\u2661';
          break;
        case 'D':
          cards[i] = '\u2662';
          break;
        case 'C':
          cards[i] = '\u2663';
          break;
      }
      obj.appendChild(document.createTextNode(cards[i]));
    } else {
      var newButton = document.createElement('button');
      newButton.textContent = cards[i];
      newButton.style.backgroundColor = '';
      newButton.addEventListener('click', function onClick() {
        if (this.style.backgroundColor == '') {
          if (color.checked)
            this.style.backgroundColor = '#00ff00';   // Green
          else
            this.style.backgroundColor = 'red';
        } else
          this.style.backgroundColor = '';
      });
      obj.appendChild(newButton);
    }
  }
  obj.appendChild(document.createElement('br'));
}

此外，放一個 Win 勾選的項目，打勾表示主打方獲勝，反之防禦方獲勝，這樣可以標示打過的牌是哪一邊得分，如果打錯牌再按一下可恢復原狀，想重打則按 Reset Buttons。目前沒有檔案讀取及儲存功能，等有空再追加吧。

寫這一篇是給程式新手一個參考，程式是怎樣從無到有設計出來的，Javascript 不是我熟悉的程式語言，這程式剛好不複雜，我差不多用十幾個小時將它完成，可以給入門的人觀摩，學習從不熟悉的東西之中怎樣找資料。