Construire un Dapp Tic-Tac-Toe décentralisé Full-Stack sur la blockchain Bitcoin SV : le guide ultime

"Cet article fournit un aperçu complet d'une pile technologique Web3 pour développer des applications décentralisées complètes sur la blockchain Bitcoin SV. La pile technologique comprend sCrypt Frameworks, Yours Wallet et React. Le processus de création d'une pile décentralisée complète de tic-tac-toe Le jeu est décrit en détail, y compris l'écriture d'un contrat intelligent, le déploiement du contrat, l'intégration du front-end (à l'aide de React) et l'intégration de votre portefeuille. En suivant le guide, les lecteurs peuvent comprendre comment créer des applications décentralisées entièrement fonctionnelles sur Bitcoin SV. blockchain."

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

Créez une application Tic-Tac-Toe décentralisée Full-Stack sur la blockchain Bitcoin SV : un guide complet

Introduction

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.

Dans ce guide détaillé, nous vous guiderons tout au long du processus de création d'une application Tic-Tac-Toe décentralisée full-stack sur la blockchain Bitcoin SV (BSV). Ce parcours complet couvrira la création d'un contrat intelligent, son déploiement, l'intégration d'un front-end utilisant React et la connexion au portefeuille d'un utilisateur. À la fin, vous posséderez une application Tic-Tac-Toe entièrement fonctionnelle fonctionnant de manière transparente sur la blockchain BSV.

Prerequisites

Conditions préalables

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

Pour vous lancer dans cette aventure, vous aurez besoin des prérequis suivants :

• 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 (version 16 ou supérieure)npmGitYours Wallet Extensions ChromeCrypt CLI (installé à l'aide de npm install -g scrypt-cli)Pile technologique

Our tech stack consists of the following key components:

Notre pile technologique se compose des éléments clés suivants :

• 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 : cadre TypeScript pour le développement de contrats intelligents BSV. Yours Wallet : portefeuille numérique open source pour BSV qui permet l'interaction avec des applications décentralisées construites sur BSV. React : bibliothèque JavaScript pour créer des interfaces utilisateur. Conception du contrat

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.

Définissons le plan de notre jeu. Le contrat Tic-Tac-Toe sera initialisé avec les adresses Bitcoin de deux joueurs, Alice et Bob. Ils miseront le même montant et verrouilleront leurs paris dans le contrat. Le gagnant remporte la totalité du pot, tandis qu'un match nul entraîne une répartition égale entre les deux joueurs.

Creating the Contract

Création du contrat

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

A l'aide du framework sCrypt, nous allons créer le contrat en TypeScript dans le fichier src/contracts/tictactoe.ts :

import {
importer {
  prop,
soutenir,
  method,
méthode,
  SmartContract,
Contrat intelligent,
  PubKey,
Clé de Pub,
  FixedArray,
Tableau fixe,
  assert,
affirmer,
  Sig,
Dire,
  Utils,
utilitaires,
  toByteString,
àByteString,
  hash160,
hachage160,
  hash256,
hachage256,
  fill,
remplir,
  ContractTransaction,
Transaction contractuelle,
  MethodCallOptions,
MéthodeAppelOptions,
  bsv
bsv
} from "scrypt-ts";
} de "scrypt-ts" ;

export class TicTacToe extends SmartContract {
la classe d'exportation TicTacToe étend SmartContract {
  @prop()
@soutenir()
  alice: PubKey;
Alice : Clé Publique ;

  @prop()
@soutenir()
  bob: PubKey;
bob : PubKey ;

  @prop(true)
@prop(vrai)
  isAliceTurn: boolean;
isAliceTurn : booléen ;

  @prop(true)
@prop(vrai)
  board: FixedArray;
carte :FixedArray ;

  static readonly EMPTY: bigint = 0n;
statique en lecture seule VIDE : bigint = 0n ;
  static readonly ALICE: bigint = 1n;
ALICE statique en lecture seule : bigint = 1n ;
  static readonly BOB: bigint = 2n;
BOB statique en lecture seule : bigint = 2n ;

  constructor(alice: PubKey, bob: PubKey) {
constructeur (alice : PubKey, bob : PubKey) {
    super(...arguments);
super(...arguments);
    this.alice = alice;
ceci.alice = alice;
    this.bob = bob;
this.bob = bob;
    this.isAliceTurn = true;
this.isAliceTurn = true ;
    this.board = fill(TicTacToe.EMPTY, 9);
this.board = fill(TicTacToe.EMPTY, 9);
  }
}

  @method()
@méthode()
  public move(n: bigint, sig: Sig) {
mouvement public (n : bigint, sig : Sig) {
    // check position `n`
// vérifie la position `n`
    assert(n >= 0n && n < 9n);
assert(n >= 0n && n < 9n);

    // check signature `sig`
// vérifie la signature `sig`
    let player: PubKey = this.isAliceTurn ? this.alice : this.bob;
laissez le joueur : PubKey = this.isAliceTurn ? ceci.alice : ceci.bob;
    assert(this.checkSig(sig, player), `checkSig failed, pubkey: ${player}`);
assert(this.checkSig(sig, player), `checkSig a échoué, pubkey : ${player}`);

    // update stateful properties to make the move
// met à jour les propriétés avec état pour effectuer le déplacement
    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, `le tableau à la position ${n} n'est pas vide : ${this.board[Number(n)]}`);
    let play = this.isAliceTurn ? TicTacToe.ALICE : TicTacToe.BOB;
laissez jouer = this.isAliceTurn ? TicTacToe.ALICE : TicTacToe.BOB;
    this.board[Number(n)] = play;
this.board[Number(n)] = jouer ;
    this.isAliceTurn = !this.isAliceTurn;
this.isAliceTurn = !this.isAliceTurn;

    // build the transation outputs
// construit les sorties de la transaction
    let outputs = toByteString('');
let sorties = toByteString('');
    if (this.won(play)) {
if (this.won(play)) {
      outputs = Utils.buildPublicKeyHashOutput(hash160(player), this.ctx.utxo.value);
sorties = 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;
sorties = aliceOutput + bobOutput ;
    }
}
}
 else {
      // build a output that contains latest contract state.
// crée une sortie contenant le dernier état du contrat.
      outputs = this.buildStateOutput(this.ctx.utxo.value);
sorties = this.buildStateOutput(this.ctx.utxo.value);
    }
}
}

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

    // make sure the transaction contains the expected outputs built above
// s'assure que la transaction contient les résultats attendus construits ci-dessus
    assert(this.ctx.hashOutputs === hash256(outputs), "check hashOutputs failed");
assert(this.ctx.hashOutputs === hash256(outputs), "la vérification des hashOutputs a échoué");
  }
}

  @method()
@méthode()
  won(play: bigint): boolean {
gagné(play: bigint): booléen {
    let lines: FixedArray, 8> = [
let lignes :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;
laissez anyLine = false;
    for (let i = 0; i < 8; i++) {
pour (soit i = 0; i < 8; i++) {
      let line = true;
laissez la ligne = vrai ;
      for (let j = 0; j < 3; j++) {
pour (soit j = 0; j < 3; j++) {
        line = line && this.board[Number(lines[i][j])] === play;
line = line && this.board[Number(lines[i][j])] === jouer;
      }
}
}
}
      anyLine = anyLine || line;
n'importe quelleLigne = n'importe quelleLigne || doubler;
    }
}
}

    return anyLine;
retourner n'importe quelle ligne ;
  }
}

  @method()
@méthode()
  full(): boolean {
full() : booléen {
    let full = true;
soit full = true ;
    for (let i = 0; i < 9; i++) {
pour (soit i = 0; i < 9; i++) {
      full = full && this.board[i] !== TicTacToe.EMPTY;
full = full && this.board[i] !== TicTacToe.EMPTY;
    }
}
}
    return full;
revenir plein;
  }
}
}

Integrating the Front-End with React

}Intégrer le Front-End avec 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:

Il est temps de connecter notre contrat à l’interface utilisateur. Après avoir compilé le contrat et généré le fichier d'artefact, nous l'utiliserons pour initialiser le contrat dans le front-end :

import {
importer {
 TicTacToe } from './contracts/tictactoe';
import artifact from '../artifacts/tictactoe.json';
importer un artefact depuis '../artifacts/tictactoe.json' ;

TicTacToe.loadArtifact(artifact);

Connect to the Wallet

TicTacToe.loadArtifact(artefact);Connectez-vous au portefeuille

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

Nous utiliserons Yours Wallet pour nous connecter au réseau BSV et interagir avec notre contrat.

Call the Contract

Appelez le contrat

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

Désormais, nous pouvons permettre aux utilisateurs de jouer au jeu. Chaque mouvement déclenche un appel de contrat, mettant à jour son état :

const { tx: callTx } = await p2pkh.methods.unlock(
const { tx: callTx } = attendre p2pkh.methods.unlock(
  (sigResponses: SignatureResponse[]) => findSig(sigResponses, $publickey),
(sigResponses : SignatureResponse[]) => findSig(sigResponses, $publickey),
  $publickey,
$clé publique,
  {
{
    pubKeyOrAddrToSign: $publickey.toAddress()
pubKeyOrAddrToSign : $publickey.toAddress()
  }
}
 as MethodCallOptions
);

Conclusion

);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.

Toutes nos félicitations! Vous avez créé avec succès une dApp Tic-Tac-Toe entièrement fonctionnelle sur la blockchain BSV. Cette aventure a mis en valeur la puissance de cette pile technologique de pointe.

Additional Resources

Ressources additionnelles

• 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.

Explorez le code : https://github.com/[URL du dépôt]En savoir plus sur sCrypt : https://github.com/moneybutton/sCrypt/blob/master/README.mdAccédez au portefeuille Yours : https://yours. bitcoin.com/Découvrez-en plus sur Bitcoin SV : https://www.bitcoinsv.io/Rejoignez le sCrypt Hackathon 2024 (17 mars 2024) : [lien d'inscription] Puisse ce guide complet vous inspirer pour créer des applications décentralisées plus innovantes et plus attrayantes. sur la blockchain BSV.