在 Bitcoin SV 區塊鏈上建立全端去中心化 Tic-Tac-Toe Dapp：終極指南

「本文全面概述了用於在 Bitcoin SV 區塊鏈上開發全棧去中心化應用程式的 Web3 技術堆疊。該技術堆疊包括 sCrypt Frameworks、Yours Wallet 和 React。建立全堆疊去中心化井字遊戲的過程詳細介紹了遊戲的流程，包括編寫智能合約、部署合約、整合前端（使用React）、整合Yours錢包等，按照指南，讀者可以了解如何在Bitcoin SV上建立功能齊全的去中心化應用程式區塊鏈。”

Build a Full-Stack Decentralized Tic-Tac-Toe App on the Bitcoin SV Blockchain: A Comprehensive Guide

在 Bitcoin SV 區塊鏈上建立全端去中心化 Tic-Tac-Toe 應用程式：綜合指南

Introduction

介紹

In this detailed guide, we will guide you through the process of building a complete full-stack decentralized Tic-Tac-Toe application on the Bitcoin SV (BSV) blockchain. This comprehensive journey will cover the creation of a smart contract, deploying it, integrating a front-end using React, and connecting to a user's wallet. By the end, you will possess a fully functional Tic-Tac-Toe application running seamlessly on the BSV blockchain.

在本詳細指南中，我們將引導您完成在 Bitcoin SV (BSV) 區塊鏈上建立完整的全端去中心化 Tic-Tac-Toe 應用程式的過程。這個全面的旅程將涵蓋智慧合約的創建、部署、使用 React 整合前端以及連接到用戶的錢包。最後，您將擁有一個在 BSV 區塊鏈上無縫運行的功能齊全的 Tic-Tac-Toe 應用程式。

Prerequisites

先決條件

To embark on this adventure, you will need the following prerequisites:

要開始這次冒險，您需要滿足以下先決條件：

• Node.js (version 16 or higher)
• npm
• Git
• Yours Wallet Chrome extension
• sCrypt CLI (installed using npm install -g scrypt-cli)

Technology Stack

Node.js（版本 16 或更高版本）npmGitYours Wallet Chrome 擴充功能Crypt CLI（使用 npm install -g scrypt-cli 安裝）技術堆疊

Our tech stack consists of the following key components:

我們的技術堆疊由以下關鍵組件組成：

• sCrypt Framework: TypeScript framework for developing BSV smart contracts.
• Yours Wallet: Open-source digital wallet for BSV that enables interaction with decentralized applications built on BSV.
• React: JavaScript library for building user interfaces.

Designing the Contract

sCrypt Framework：用於開發 BSV 智能合約的 TypeScript 框架。Yours Wallet：BSV 開源數位錢包，可與基於 BSV 構建的去中心化應用程式進行交互。React：用於構建用戶界面的 JavaScript 庫。設計合約

Let's define the blueprint of our game. The Tic-Tac-Toe contract will be initialized with the Bitcoin addresses of two players, Alice and Bob. They will wager the same amount and lock their bets in the contract. The winner claims the entire pot, while a draw results in an equal split between both players.

讓我們定義遊戲的藍圖。 Tic-Tac-Toe 合約將使用兩個玩家 Alice 和 Bob 的比特幣地址進行初始化。他們將下相同金額的賭注並將賭注鎖定在合約中。獲勝者將獲得全部底池，而平手則由兩名玩家平分。

Creating the Contract

創建合約

Using the sCrypt framework, we will create the contract in TypeScript in the src/contracts/tictactoe.ts file:

使用 sCrypt 框架，我們將在 src/contracts/tictactoe.ts 檔案中以 TypeScript 建立合約：

import {
進口 {
  prop,
支柱，
  method,
方法，
  SmartContract,
智能合約，
  PubKey,
公鑰，
  FixedArray,
固定陣列，
  assert,
斷言，
  Sig,
說，
  Utils,
實用程序，
  toByteString,
到位元組字串，
  hash160,
哈希160，
  hash256,
哈希256，
  fill,
充滿，
  ContractTransaction,
合約交易，
  MethodCallOptions,
方法呼叫選項，
  bsv
BSV
} from "scrypt-ts";
來自“scrypt-ts”；

export class TicTacToe extends SmartContract {
匯出類別 TicTacToe 擴充了 SmartContract {
  @prop()
@支柱（）
  alice: PubKey;
愛麗絲：公鑰；

  @prop()
@支柱（）
  bob: PubKey;
鮑伯：公鑰；

  @prop(true)
@prop（真）
  isAliceTurn: boolean;
isAliceTurn: 布林值；

  @prop(true)
@prop（真）
  board: FixedArray;
板：固定陣列；

  static readonly EMPTY: bigint = 0n;
靜態唯讀空：bigint = 0n；
  static readonly ALICE: bigint = 1n;
靜態只讀 ALICE: bigint = 1n;
  static readonly BOB: bigint = 2n;
靜態唯讀 BOB：bigint = 2n；

  constructor(alice: PubKey, bob: PubKey) {
建構子（愛麗絲：PubKey，鮑伯：PubKey）{
    super(...arguments);
超級（...參數）；
    this.alice = alice;
this.alice = 愛麗絲;
    this.bob = bob;
this.bob = 鮑伯；
    this.isAliceTurn = true;
this.isAliceTurn = true;
    this.board = fill(TicTacToe.EMPTY, 9);
this.board = fill(TicTacToe.EMPTY, 9);
  }
}

  @method()
@方法（）
  public move(n: bigint, sig: Sig) {
公共移動（n：bigint，sig：Sig）{
    // check position `n`
// 檢查位置 `n`
    assert(n >= 0n && n < 9n);
斷言(n >= 0n && n < 9n);

    // check signature `sig`
// 檢查簽章 `sig`
    let player: PubKey = this.isAliceTurn ? this.alice : this.bob;
讓玩家：PubKey = this.isAliceTurn ？這個.愛麗絲：這個.鮑伯；
    assert(this.checkSig(sig, player), `checkSig failed, pubkey: ${player}`);
斷言(this.checkSig(sig, 玩家), `checkSig 失敗, pubkey: ${player}`);

    // update stateful properties to make the move
// 更新有狀態屬性以進行移動
    assert(this.board[Number(n)] === TicTacToe.EMPTY, `board at position ${n} is not empty: ${this.board[Number(n)]}`);
assert(this.board[Number(n)] === TicTacToe.EMPTY, `${n} 位置的棋盤不為空：${this.board[Number(n)]}`);
    let play = this.isAliceTurn ? TicTacToe.ALICE : TicTacToe.BOB;
讓我們玩= this.isAliceTurn ？井字遊戲.ALICE : 井字遊戲.BOB;
    this.board[Number(n)] = play;
this.board[Number(n)] = 玩；
    this.isAliceTurn = !this.isAliceTurn;
this.isAliceTurn = !this.isAliceTurn;

    // build the transation outputs
// 建立交易輸出
    let outputs = toByteString('');
讓輸出= toByteString('');
    if (this.won(play)) {
if (this.won(play)) {
      outputs = Utils.buildPublicKeyHashOutput(hash160(player), this.ctx.utxo.value);
輸出 = Utils.buildPublicKeyHashOutput(hash160(player), this.ctx.utxo.value);
    }
}
}
 else if (this.full()) {
      const halfAmount = this.ctx.utxo.value / 2n;
const halfAmount = this.ctx.utxo.value / 2n;
      const aliceOutput = Utils.buildPublicKeyHashOutput(hash160(this.alice), halfAmount);
const aliceOutput = Utils.buildPublicKeyHashOutput(hash160(this.alice), halfAmount);
      const bobOutput = Utils.buildPublicKeyHashOutput(hash160(this.bob), halfAmount);
const bobOutput = Utils.buildPublicKeyHashOutput(hash160(this.bob), halfAmount);
      outputs = aliceOutput + bobOutput;
輸出 = aliceOutput + bobOutput；
    }
}
}
 else {
      // build a output that contains latest contract state.
// 建置包含最新合約狀態的輸出。
      outputs = this.buildStateOutput(this.ctx.utxo.value);
輸出 = this.buildStateOutput(this.ctx.utxo.value);
    }
}
}

    if (this.changeAmount > 0n) {
if (this.changeAmount > 0n) {
      outputs += this.buildChangeOutput();
輸出 += this.buildChangeOutput();
    }
}
}

    // make sure the transaction contains the expected outputs built above
// 確保交易包含上面建構的預期輸出
    assert(this.ctx.hashOutputs === hash256(outputs), "check hashOutputs failed");
assert(this.ctx.hashOutputs === hash256(outputs), "檢查 hashOutputs 失敗");
  }
}

  @method()
@方法（）
  won(play: bigint): boolean {
贏了（玩：bigint）：布林值{
    let lines: FixedArray, 8> = [
讓行：FixedArray = [
      [0n, 1n, 2n],
[0n，1n，2n]，
      [3n, 4n, 5n],
[3n，4n，5n]，
      [6n, 7n, 8n],
[6n，7n，8n]，
      [0n, 3n, 6n],
[0n，3n，6n]，
      [1n, 4n, 7n],
[1n，4n，7n]，
      [2n, 5n, 8n],
[2n，5n，8n]，
      [0n, 4n, 8n],
[0n，4n，8n]，
      [2n, 4n, 6n]
[2n、4n、6n]
    ];
];

    let anyLine = false;
讓任何行=假；
    for (let i = 0; i < 8; i++) {
for (設 i = 0; i < 8; i++) {
      let line = true;
讓線=真；
      for (let j = 0; j < 3; j++) {
for (設 j = 0; j < 3; j++) {
        line = line && this.board[Number(lines[i][j])] === play;
line = line && this.board[Number(lines[i][j])] === play;
      }
}
}
}
      anyLine = anyLine || line;
任意行 = 任意行 ||線;
    }
}
}

    return anyLine;
返回任意行；
  }
}

  @method()
@方法（）
  full(): boolean {
完整（）：布林值{
    let full = true;
令完整=真；
    for (let i = 0; i < 9; i++) {
for (設 i = 0; i < 9; i++) {
      full = full && this.board[i] !== TicTacToe.EMPTY;
full = full && this.board[i] !== TicTacToe.EMPTY;
    }
}
}
    return full;
返回完整；
  }
}
}

Integrating the Front-End with React

}將前端與 React 集成

Time to connect our contract with the user interface. After compiling the contract and generating the artifact file, we will use it to initialize the contract in the front-end:

是時候將我們的合約與使用者介面連接起來了。編譯合約並產生工件檔案後，我們將使用它在前端初始化合約：

import {
進口 {
 TicTacToe } from './contracts/tictactoe';
import artifact from '../artifacts/tictactoe.json';
從 '../artifacts/tictactoe.json' 導入工件；

TicTacToe.loadArtifact(artifact);

Connect to the Wallet

TicTacToe.loadArtifact(artifact);連接錢包

We will use Yours Wallet to connect to the BSV network and interact with our contract.

我們將使用 Yours Wallet 連接到 BSV 網路並與我們的合約互動。

Call the Contract

致電合約

Now, we can enable users to play the game. Each move triggers a contract call, updating its state:

現在，我們可以讓用戶玩遊戲了。每次移動都會觸發合約調用，更新其狀態：

const { tx: callTx } = await p2pkh.methods.unlock(
const { tx: callTx } = 等待 p2pkh.methods.unlock(
  (sigResponses: SignatureResponse[]) => findSig(sigResponses, $publickey),
(sigResponses: SignatureResponse[]) => findSig(sigResponses, $publickey),
  $publickey,
$公鑰，
  {
{
    pubKeyOrAddrToSign: $publickey.toAddress()
pubKeyOrAddrToSign: $publickey.toAddress()
  }
}
 as MethodCallOptions
);

Conclusion

）;結論

Congratulations! You have successfully created a fully functional Tic-Tac-Toe dApp on the BSV blockchain. This adventure has showcased the power of this cutting-edge technology stack.

恭喜！您已在 BSV 區塊鏈上成功創建了一個功能齊全的 Tic-Tac-Toe dApp。這次冒險展示了這一尖端技術堆疊的力量。

Additional Resources

其他資源

• Explore the code: https://github.com/[repo URL]
• Learn more about sCrypt: https://github.com/moneybutton/sCrypt/blob/master/README.md
• Access the Yours Wallet: https://yours.bitcoin.com/
• Discover more about Bitcoin SV: https://www.bitcoinsv.io/
• Join the sCrypt Hackathon 2024 (March 17, 2024): [registration link]

May this comprehensive guide inspire you to build more innovative and engaging decentralized applications on the BSV blockchain.

瀏覽程式碼：https://github.com/[repo URL]以了解更多關於sCrypt 的資訊：https://github.com/moneybutton/sCrypt/blob/master/README.md造訪Yours 錢包：https:// yours. bitcoin.com/了解更多關於比特幣SV 的資訊：https://www.bitcoinsv.io/加入2024 年sCrypt 黑客馬拉松（2024 年3 月17 日）：[註冊連結]希望這份綜合指南能夠激勵您建立更具創新性和吸引力的去中心化應用程式在 BSV 區塊鏈上。