Skip to content

Latest commit

 

History

History
565 lines (456 loc) · 21 KB

06.md

File metadata and controls

565 lines (456 loc) · 21 KB
title actions requireLogin material
Zobrazovanie Zombie Armád
checkAnswer
hints
true
editor
language startingCode answer
html
index.html zombieownership.sol zombieattack.sol zombiehelper.sol zombiefeeding.sol zombiefactory.sol ownable.sol safemath.sol erc721.sol
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CryptoZombies front-end</title> <script language="javascript" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script language="javascript" type="text/javascript" src="web3.min.js"></script> <script language="javascript" type="text/javascript" src="cryptozombies_abi.js"></script> </head> <body> <div id="zombies"></div> <script> var cryptoZombies; var userAccount; function startApp() { var cryptoZombiesAddress = "YOUR_CONTRACT_ADDRESS"; cryptoZombies = new web3js.eth.Contract(cryptoZombiesABI, cryptoZombiesAddress); var accountInterval = setInterval(function() { // Skontrolujeme či sa zmenil aktívny účet v MetaMasku if (web3.eth.accounts[0] !== userAccount) { userAccount = web3.eth.accounts[0]; // Zavoláme funkciu ktorá aktualizuje stránku pre nový účet getZombiesByOwner(userAccount) .then(displayZombies); } }, 100); } function displayZombies(ids) { // Začni tu } function getZombieDetails(id) { return cryptoZombies.methods.zombies(id).call() } function zombieToOwner(id) { return cryptoZombies.methods.zombieToOwner(id).call() } function getZombiesByOwner(owner) { return cryptoZombies.methods.getZombiesByOwner(owner).call() } window.addEventListener('load', function() { // Skontrolujeme či bol Web3 vložený do našeho prehliadača (Mist/Metamask) if (typeof web3 !== 'undefined') { // Použi provider Mistu/MetaMasku web3js = new Web3(web3.currentProvider); } else { // Musíme sa postarať o prípad kedy užívateľ nemá v prehliadači web3. // Zrejme im ukážeme správu, že si musia nainštalovať Metamask // na to, aby našu aplikáciu mohli používať } // Teraz môžme naštartovať našu aplikáciu a používať web3js startApp() }) </script> </body> </html>
pragma solidity ^0.4.19; import "./zombieattack.sol"; import "./erc721.sol"; import "./safemath.sol"; contract ZombieOwnership is ZombieAttack, ERC721 { using SafeMath for uint256; mapping (uint => address) zombieApprovals; function balanceOf(address _owner) public view returns (uint256 _balance) { return ownerZombieCount[_owner]; } function ownerOf(uint256 _tokenId) public view returns (address _owner) { return zombieToOwner[_tokenId]; } function _transfer(address _from, address _to, uint256 _tokenId) private { ownerZombieCount[_to] = ownerZombieCount[_to].add(1); ownerZombieCount[msg.sender] = ownerZombieCount[msg.sender].sub(1); zombieToOwner[_tokenId] = _to; Transfer(_from, _to, _tokenId); } function transfer(address _to, uint256 _tokenId) public onlyOwnerOf(_tokenId) { _transfer(msg.sender, _to, _tokenId); } function approve(address _to, uint256 _tokenId) public onlyOwnerOf(_tokenId) { zombieApprovals[_tokenId] = _to; Approval(msg.sender, _to, _tokenId); } function takeOwnership(uint256 _tokenId) public { require(zombieApprovals[_tokenId] == msg.sender); address owner = ownerOf(_tokenId); _transfer(owner, msg.sender, _tokenId); } }
pragma solidity ^0.4.19; import "./zombiehelper.sol"; contract ZombieAttack is ZombieHelper { uint randNonce = 0; uint attackVictoryProbability = 70; function randMod(uint _modulus) internal returns(uint) { randNonce++; return uint(keccak256(now, msg.sender, randNonce)) % _modulus; } function attack(uint _zombieId, uint _targetId) external onlyOwnerOf(_zombieId) { Zombie storage myZombie = zombies[_zombieId]; Zombie storage enemyZombie = zombies[_targetId]; uint rand = randMod(100); if (rand <= attackVictoryProbability) { myZombie.winCount++; myZombie.level++; enemyZombie.lossCount++; feedAndMultiply(_zombieId, enemyZombie.dna, "zombie"); } else { myZombie.lossCount++; enemyZombie.winCount++; _triggerCooldown(myZombie); } } }
pragma solidity ^0.4.19; import "./zombiefeeding.sol"; contract ZombieHelper is ZombieFeeding { uint levelUpFee = 0.001 ether; modifier aboveLevel(uint _level, uint _zombieId) { require(zombies[_zombieId].level >= _level); _; } function withdraw() external onlyOwner { owner.transfer(this.balance); } function setLevelUpFee(uint _fee) external onlyOwner { levelUpFee = _fee; } function levelUp(uint _zombieId) external payable { require(msg.value == levelUpFee); zombies[_zombieId].level++; } function changeName(uint _zombieId, string _newName) external aboveLevel(2, _zombieId) onlyOwnerOf(_zombieId) { zombies[_zombieId].name = _newName; } function changeDna(uint _zombieId, uint _newDna) external aboveLevel(20, _zombieId) onlyOwnerOf(_zombieId) { zombies[_zombieId].dna = _newDna; } function getZombiesByOwner(address _owner) external view returns(uint[]) { uint[] memory result = new uint[](ownerZombieCount[_owner]); uint counter = 0; for (uint i = 0; i < zombies.length; i++) { if (zombieToOwner[i] == _owner) { result[counter] = i; counter++; } } return result; } }
pragma solidity ^0.4.19; import "./zombiefactory.sol"; contract KittyInterface { function getKitty(uint256 _id) external view returns ( bool isGestating, bool isReady, uint256 cooldownIndex, uint256 nextActionAt, uint256 siringWithId, uint256 birthTime, uint256 matronId, uint256 sireId, uint256 generation, uint256 genes ); } contract ZombieFeeding is ZombieFactory { KittyInterface kittyContract; modifier onlyOwnerOf(uint _zombieId) { require(msg.sender == zombieToOwner[_zombieId]); _; } function setKittyContractAddress(address _address) external onlyOwner { kittyContract = KittyInterface(_address); } function _triggerCooldown(Zombie storage _zombie) internal { _zombie.readyTime = uint32(now + cooldownTime); } function _isReady(Zombie storage _zombie) internal view returns (bool) { return (_zombie.readyTime <= now); } function feedAndMultiply(uint _zombieId, uint _targetDna, string _species) internal onlyOwnerOf(_zombieId) { Zombie storage myZombie = zombies[_zombieId]; require(_isReady(myZombie)); _targetDna = _targetDna % dnaModulus; uint newDna = (myZombie.dna + _targetDna) / 2; if (keccak256(_species) == keccak256("kitty")) { newDna = newDna - newDna % 100 + 99; } _createZombie("NoName", newDna); _triggerCooldown(myZombie); } function feedOnKitty(uint _zombieId, uint _kittyId) public { uint kittyDna; (,,,,,,,,,kittyDna) = kittyContract.getKitty(_kittyId); feedAndMultiply(_zombieId, kittyDna, "kitty"); } }
pragma solidity ^0.4.19; import "./ownable.sol"; import "./safemath.sol"; contract ZombieFactory is Ownable { using SafeMath for uint256; event NewZombie(uint zombieId, string name, uint dna); uint dnaDigits = 16; uint dnaModulus = 10 ** dnaDigits; uint cooldownTime = 1 days; struct Zombie { string name; uint dna; uint32 level; uint32 readyTime; uint16 winCount; uint16 lossCount; } Zombie[] public zombies; mapping (uint => address) public zombieToOwner; mapping (address => uint) ownerZombieCount; function _createZombie(string _name, uint _dna) internal { uint id = zombies.push(Zombie(_name, _dna, 1, uint32(now + cooldownTime), 0, 0)) - 1; zombieToOwner[id] = msg.sender; ownerZombieCount[msg.sender]++; NewZombie(id, _name, _dna); } function _generateRandomDna(string _str) private view returns (uint) { uint rand = uint(keccak256(_str)); return rand % dnaModulus; } function createRandomZombie(string _name) public { require(ownerZombieCount[msg.sender] == 0); uint randDna = _generateRandomDna(_name); randDna = randDna - randDna % 100; _createZombie(_name, randDna); } }
/** * @title Ownable * @dev The Ownable contract has an owner address, and provides basic authorization control * functions, this simplifies the implementation of "user permissions". */ contract Ownable { address public owner; event OwnershipTransferred(address indexed previousOwner, address indexed newOwner); /** * @dev The Ownable constructor sets the original `owner` of the contract to the sender * account. */ function Ownable() public { owner = msg.sender; } /** * @dev Throws if called by any account other than the owner. */ modifier onlyOwner() { require(msg.sender == owner); _; } /** * @dev Allows the current owner to transfer control of the contract to a newOwner. * @param newOwner The address to transfer ownership to. */ function transferOwnership(address newOwner) public onlyOwner { require(newOwner != address(0)); OwnershipTransferred(owner, newOwner); owner = newOwner; } }
pragma solidity ^0.4.18; /** * @title SafeMath * @dev Math operations with safety checks that throw on error */ library SafeMath { /** * @dev Multiplies two numbers, throws on overflow. */ function mul(uint256 a, uint256 b) internal pure returns (uint256) { if (a == 0) { return 0; } uint256 c = a * b; assert(c / a == b); return c; } /** * @dev Integer division of two numbers, truncating the quotient. */ function div(uint256 a, uint256 b) internal pure returns (uint256) { // assert(b > 0); // Solidity automatically throws when dividing by 0 uint256 c = a / b; // assert(a == b * c + a % b); // There is no case in which this doesn't hold return c; } /** * @dev Subtracts two numbers, throws on overflow (i.e. if subtrahend is greater than minuend). */ function sub(uint256 a, uint256 b) internal pure returns (uint256) { assert(b <= a); return a - b; } /** * @dev Adds two numbers, throws on overflow. */ function add(uint256 a, uint256 b) internal pure returns (uint256) { uint256 c = a + b; assert(c >= a); return c; } }
contract ERC721 { event Transfer(address indexed _from, address indexed _to, uint256 _tokenId); event Approval(address indexed _owner, address indexed _approved, uint256 _tokenId); function balanceOf(address _owner) public view returns (uint256 _balance); function ownerOf(uint256 _tokenId) public view returns (address _owner); function transfer(address _to, uint256 _tokenId) public; function approve(address _to, uint256 _tokenId) public; function takeOwnership(uint256 _tokenId) public; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CryptoZombies front-end</title> <script language="javascript" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script language="javascript" type="text/javascript" src="web3.min.js"></script> <script language="javascript" type="text/javascript" src="cryptozombies_abi.js"></script> </head> <body> <div id="zombies"></div> <script> var cryptoZombies; var userAccount; function startApp() { var cryptoZombiesAddress = "YOUR_CONTRACT_ADDRESS"; cryptoZombies = new web3js.eth.Contract(cryptoZombiesABI, cryptoZombiesAddress); var accountInterval = setInterval(function() { // Check if account has changed if (web3.eth.accounts[0] !== userAccount) { userAccount = web3.eth.accounts[0]; // Call a function to update the UI with the new account getZombiesByOwner(userAccount) .then(displayZombies); } }, 100); } function displayZombies(ids) { $("#zombies").empty(); for (id of ids) { // Look up zombie details from our contract. Returns a `zombie` object getZombieDetails(id) .then(function(zombie) { // Using ES6's "template literals" to inject variables into the HTML. // Append each one to our #zombies div $("#zombies").append(`<div class="zombie"> <ul> <li>Name: ${zombie.name}&lt;/li&gt; &lt;li&gt;DNA: ${zombie.dna}</li> <li>Level: ${zombie.level}&lt;/li&gt; &lt;li&gt;Wins: ${zombie.winCount}</li> <li>Losses: ${zombie.lossCount}&lt;/li&gt; &lt;li&gt;Ready Time: ${zombie.readyTime}</li> </ul> </div>`); }); } } function getZombieDetails(id) { return cryptoZombies.methods.zombies(id).call() } function zombieToOwner(id) { return cryptoZombies.methods.zombieToOwner(id).call() } function getZombiesByOwner(owner) { return cryptoZombies.methods.getZombiesByOwner(owner).call() } window.addEventListener('load', function() { // Checking if Web3 has been injected by the browser (Mist/MetaMask) if (typeof web3 !== 'undefined') { // Use Mist/MetaMask's provider web3js = new Web3(web3.currentProvider); } else { // Handle the case where the user doesn't have Metamask installed // Probably show them a message prompting them to install Metamask } // Now you can start your app & access web3 freely: startApp() }) </script> </body> </html>

Tento tutoriál by nebol kompletný, keby sme ti neukázali ako môžeme zobraziť zombie dáta z kontraktu ležiaceho na blockchaine.

V reále by sme použili moderný front-endový framework ako napríklad React alebo Vue.JS. Robia život front-end programátora oveľa ľahší. Preberanie Reactu alebo Vue.js je však nad rámec tohoto tutoriálu. Tým by sa dal venovať jeden celý osobitný tutoriál, prípadne aspoň niekoľko lekcií.

Aby sme udržali stránku CryptoZombies.io zameranú na Ethereum a smart kontrakty, ukážeme si len jednoduchý príklad v JQuery. Budeme demonštrovať ako môžme spracovať a zobraziť dáta obdržané z našeho smart kontraktu.

Zobrazovanie zombie dát - hrubý príklad

Do tela našeho html dokumentu sme pridali prázdny div <div id="zombies"></div>. Taktiež sme pridali prázdnu funkciu displayZombies.

Spomeň si, že v predchádzajúcej kapitole sme z funkcie startApp() volali funkciu displayZombies. Tá parametrom príjma výsledok volania getZombiesByOwner, ktorý bude obsahovať pole identifikačných čisiel zombie. Niečo ako:

[0, 13, 47]

Takže potrebujeme aby funkcia displayZombies spravila nasledovné:

  1. Najprv zmaže obsah #zombies divu, v prípade že tam už niečo je. (Takže ak si užívateľ prepne aktívny účet v Metamasku, pred tým že na stránke zobrazia nový zombie, zombie patriaci predošlého účtu zmiznú).

  2. Prejde cez všetky id, a pre každé z nich zavolá getZombieDetails(id). Tak z našeho smart kontraktu obdrží všetky detailné informácie o danom zombie.

  3. Detailné informácie o zombie zobrazí do HTML šablóny ktorá ich naformátuje, a výsledok prilepí do HTML divu #zombies.

Budeme používať len knižnicu JQuery, ktorá nemá špeciálnu podporu na šablónovanie. Preto výsledok vzhľadovo nebude vyzerať moc pekne. Dáta o každom zombie môžme teda zobraziť napríklad takto:

// Získaj detaily o našom zombie z našho kontraktu. Naspäť obdržíme `zombie` objekt
getZombieDetails(id)
.then(function(zombie) {
  // Pomocou funkcie "template literals" z ES6 vložíme hodnoty premenných do HTML
  // Každý HTML blok s podrobnosťami o zombie vložíme do #zombies divu  
  $("#zombies").append(`<div class="zombie">
    <ul>
      <li>Name: ${zombie.name}</li>
      <li>DNA: ${zombie.dna}</li>
      <li>Level: ${zombie.level}</li>
      <li>Wins: ${zombie.winCount}</li>
      <li>Losses: ${zombie.lossCount}</li>
      <li>Ready Time: ${zombie.readyTime}</li>
    </ul>
  </div>`);
});

Ako na zobrazovanie zombie obrázkov?

V príklade vyššie zobrazujeme DNA jednoducho ako reťazec znakov. Na webovom front ende ho ale chceme skonvertovať na jednotlivé obrázky, aby sme zombieho zobrazili vizuálne.

To môžme dosiahnuť tak, že DNA rozdelíme na menšie podreťazce. Každé dve cifry tak budú referovať na obrázok nejakej časti zombie. Nejako takto:

// Vypočítaj z DNA hlavy číslo 1-7 pre reprezentáciu hlavy
var head = parseInt(zombie.dna.substring(0, 2)) % 7 + 1

// Pripravených máme 7 obrázkov pomenovaných sekvenčne
var headSrc = "../assets/zombieparts/head-" + head + ".png"

Každá komponenta môže byť umiestnená pomocou CSS absolute positioningu tak, aby do seba jednotlivé obrázky časti zombie pekne zapadali.

Ak by si chcel vidieť presnú implementáciu, k dispozicií je open source Vue.js komponenta ktorú používame pre vykresľovanie vzhľadu zombie. Nájdeš ju tu.

Každopádne, keďže spomínaný súbor obstahuje veľké množstvo kódu, bolo by opäť nad rámec tutoriálu sa s ním zaoberať. Budeme sa tu držať jednoduchej JQuery implementáciu. Necháme na tebe sa do toho zanoriť hlbšie a vytvoriť nádhernú implementáciu, ak chceš.

Vyskúšaj si to sám

Vytvorili sme za teba prázdnu funkciu displayZombies. Poďme ju teraz vyplniť.

  1. Prvá vec ktorú v nej musíš spraviť je vyprázdniť #zombies div. Pomocou JQuery to môžeš spraviť takto: $("#zombies").empty();.

  2. Ďalej chceme cyklom iterovať cez všetky IDčka. Použi for cyklus: for (id of ids) {.

  3. Vo vnútri cyklu, skopíruj zhora blok kódu ktorý volal getZombieDetails(id) pre každé ID. Potom použi $("#zombies").append(...) na to, aby si výsledok pridal do HTML.