Building a Game Using NEAR, Aurora and BOs

Captions as YouTube publishes them, usually machine-generated, so product and people names can be misheard.

1. 0:04

   foreign great hello everyone my name is Slava I'm from Aurora labs and today we talk about how to write a simple game on a boss using neuron Aurora stack so first of all let me introduce myself I'm working as a devrel and Integrations developer at Aurora um and today we will have uh like two main Heroes unfortunately Michael isn't here uh but he is the original author of the project which I'm presenting today

2. 0:45

   um I'm actually managing the Aurora developer portal you can visit it at devore.dev and the whole presentation you will see here is actually based on the article written by Michael Berger so my advice if you want to know more and read the details please go to deborah.dev and learn more there I also wanted to say a few more words about the presentation itself uh like the boss DG Gateway which is usually

3. 1:17

   used for a ethereum based like Aurora based boss components is a has actually inspired me to use some nostalgic Concepts here and to use the design from the really old video game I've been playing at the late 90s uh on my TV actually with Sega station so it was called Golden ax I'm not sure if you have ever heard about that but I'll use like a gameplay from it to present today so let's let's continue and here we can have I can see the plan adventure for

4. 2:00

   today so we will follow a simple set of rules to create the project and those are just to push the complex operations to the new blockchain to use Aurora for easy easy on board of our users and to do the State Management there using a solidity contract and build a front-end on Boss so overall architecture will look like that uh where like boss UI will just request something from Aurora contract or a contract will do the cross-contract call with the near contract near contract

5. 2:39

   will respond with a callback and everything will just cycle and you'll be able to play your game uh overall it's kind of the same way you can do that with the regular JavaScript and wassum like if you have some complex operation on your front and front end you can encode it in wasm and it will be more efficient uh so if you come just with from a regular like web 2 perspective it looks

6. 3:08

   kind of like that uh so let's first start with the new contract uh and Michael could actually represent the whole team for the adventure so uh he is the rust wizard in this context so let's go into the New Testament forest and catch all of the aspects of the tic-tac-toe game into the contracts net uh oops but first we need to decompose a problem right and to learn a little bit of tic-tac-toe theories that's what

7. 3:40

   Michael actually did and he pushed some ideas norms and got the ideas how to evaluate the move move moves in the game how to represent the game State and how to predict the next move overall in terms of the code which is written in Rust for the near it's just like we have structs for the cell State you can see it could be empty it could be X it could be zero or Circle and the game state will be just

8. 4:13

   represented as an array of the cell State uh so it will just like raw my what's called raw major representation of the tic-tac-toe board and for the moves API the main two things he needed to do is to evaluate the move how good the move is comparing to the previous Ball State and also the main function is is called get move here which by receiving the game state produces the move result so

9. 4:46

   that's the main like the core function of the contract now we are ready to actually produce an ear contract but we need to link everything and then we will test it using the boss component and near uh so we have that big core get move function and Michael has some weapons like the near bingen macro and some borsche wrappers to sterilize the serialized inputs outputs and that's

10. 5:19

    that's how a using rust magic he just finishes the contract uh and now we just jump in into the contract details so two main things here is that we just pattern match uh get more result and as you can see we just can have like two different uh results like the next move or game over when we already can uh we already know who won the game uh and we returned the struct called uh called uh get move responser this winner field

11. 5:51

    and updated State for the board to be displayed uh on the BOS component so let's write some basic UI right now we'll need some HTML CSS and GSX uh and State Management there so uh Michael just uh got some a representation for the game board State managed and used Near View function just to pull the near contract and to get result so uh this UI will be only for the stateless representation of the tic-tac-toe game with no State preserved uh and the core

12. 6:31

    of these uh BRS component is actually inside the Near View function which calls uh the tic-tac-toe contract already deployed to near with the get move method name uh and the board state yeah and UI just includes game boards player select selector like do you want to play for Access or not and the new game button so overall it will look just like that and what's what's interesting is that the feedback when playing the

13. 7:04

    game will be almost instant I can quickly show it to you let me find yeah this this is the one so let me click you see I just clicked and you already have the result I clicked and you already have the results and if I click once more one more time so there is no time you just using the pure view function you don't need to pay anything and everything happens instantaneously uh let's continue but we need to move further and now we need to write our

14. 7:36

    Aurora contract uh now Michael becomes xcc Warrior cross-contract calls and it should be an easy mission right like just to write some solidity wrapper around that that but it won't be so easy if you don't know how to do the cross contact calls that's why let's take a look at the next slide which describes how are we usually working with like how cross-contracts calls uh from Aurora to near work so usually if you have contract on the Aurora solidity contract it costs a

15. 8:13

    cross-contract called pre-compile uh there's some peculiar details about how like it handles synchronicity of the evm and asynchronicity of the near itself which you can actually read and the repo called Aurora context SDK I've included the link uh below but we won't go into those details overall after calling that pre-compile there will be a call to the contract sub account which will have the same name as the like it it will include evm hash uh it

16. 8:51

    it's called ABCD here but it will be like some hashed values are Dr Aurora O'Neill and it will be the representative of that contract on near which we'll call uh the Target contract on here and after that the Callback will be executed overall uh everything which happens here happens using what's called near promises uh but uh yeah and we will see details on the next slides so using some xcc karate Michael produces those promises the near call promise and callback

17. 9:30

    promise join them together and transacts that's how uh he beats that giant uh let's take a look at the details so what you can see here the structs called Promise create arcs is actually the struct which creates promises so the first promise is actually calling the uh tic-tac-toe near contract with get move method and the next one called Aurora call will be we'll be calling our contract our solidity contract you can see address this at the first argument there

18. 10:07

    and we'll call computer turn callback function here with the new data a receipt from the near contract so and the last line here it just composes the promises together and cause transact method to execute everything uh yeah and the next part is uh how exactly we unwrap the results so we have computer turn callback function which actually called inside the Aurora promise here it gets the result unpacks

19. 10:42

    it and overall it just updates a game State here games player is just like a map we will see it next on on the next slides so while we were discussing dxcc Michael has actually managed to finish the solidity contract and he's ready to show us the manuscript let's take a look uh so on this slide we just see a state and the needed structs for the solidity contract it like the first part of the picture includes just structures used by

20. 11:19

    cross-contract calls like near and veneer and some other SDK Primitives like promises and the main state of the game goes into two maps one maps for storing the game states for different users so we have like kind of like multiplayer game in terms of like uh storage and also legal moves which could be done and turn event so you'll be able to index the data on the blockchain uh yeah and here we have some initial initial initialization done

21. 11:57

    so just inside the contract Constructor you can see that we are using uh access roles here uh for the message sender for the author we assign owner role and for the Callback from Aurora SDK which is actually implicit account of our current contract uh our representative owner we are assigning the Callback role so it will be able to uh call callback function of our solidity contract and only it with like no other personal

22. 12:31

    personal or contract uh we're able to do so uh and we need to do initial initialization here because uh we need to create that near counterpart account for our Aurora contract and to do this we need to call once uh the tic-tac-toe contract with get move function and have some veneer uh or winner wrap near uh coins on the contract address that's why author here the owner in this case Michael transfers some storage deposit to the contract so the contract will spend it

23. 13:18

    to cover for the new storage uh for that counterpart yeah and inside game functions uh of the solidity contract they're pretty simple so you just have like new game creation of the new game where you just like a computer take turns and also player churn well when like boss player and computer take turns and that's it so and take computer tone is a cross contract function which we've been looking at previously with those promises and transact method

24. 13:57

    so and the final part we now need to create the UI representation on both GG so now Michael is in a role of the UI Ranger here so he comes to the final boss in the game uh and he sees that yeah boss has some really uh early adoption here and some limited GSX variant so he he has some struggles because he cannot use async await directly and he just needs to join promises using Dan syntaxes and stuff like that he can use use effect

25. 14:30

    and test not test net of Aurora isn't recognized yet from that Gateway so it just says says and recognize but still you can go like you can transact and everything is working great there so just by using his htmlc assassin rack skills Michael defeats the final boss and now he's ready to present his UI code for us so what we have here is just like we're getting the contract API to

26. 15:06

    communicate with the contract from the UI and initialize some State like game board pending player Etc uh and we also need to create like a new game we have the same new game button to start the game and some State updates uh for uh when you like receive new game new board state from the uh contract you need to put it there so you can see that we just updating the boards uh board

27. 15:39

    State here with the result yeah and the Heart uh of the State Management here lies in the player turn functions so when Player move uh we just call uh take player turn method on the contract and after receiving the results from that promise we just update in the State uh and that's it we also have some really simple style sales components we just uh which are just like table cells in the HTML and we have a game board player selector and new game button uh designed in the

28. 16:21

    same way it was done on the near boss component so the final UI looks like that and we can do a small demo now yeah we have the recording here which represents the gameplay overall uh it's I just don't want to spend much time that's why I put the video here and playback speed 2 because we need to do some meta mask and to wait for some RPC calls uh callbacks to come back so as you can see it has more delay overall

29. 17:03

    comparing to the stateless boss component but nevertheless it still works you can play with it and have everything managed uh Let Me Wait maybe maybe we will have a winner now probably one more call let me just fast track a little bit to the last last term yeah so we have a draw here we have a draw and we can start a new game after new game we just need to to do one more transaction wait some time and it will be reloaded with the first turn done by the

30. 17:43

    near contract oh yeah so that's it that's it let me let me go back to the slideshow so in conclusion what we can say that like the main lesson learned here is that we can efficiently combine Aurora near and boss together to create uh in the easily way with no infrastructure deployed with no servers away for the users to interact with the blockchain and easy on board users using

31. 18:31

    Aurora using either Aurora plus but really soon we will release Aurora pass on the next week and we are using like Aurora contracts for the State Management in this case uh yeah I will share the presentation uh I hope it will be included to the recording and you will be able to see the links but you can just go to the devil or the dev developer portal right now or just find me to ask for questions after the presentation and I will happily answer that uh thank you everyone for attention

32. 19:07

    any questions I'm ready to answer thank you foreign