In the previous lecture, we were implementing the very, very basic things. We were changing to the web sockets provider, which is now seems to be not necessary and the way going forward interacting with blockchain nodes and we were adding truffle-contract, and check theory, but we haven't used it yet. So, this lecture, I want to make use of a little bit of the truffle-contract and our contracts in order to start the game and join a game. And the first thing that we obviously want to do is, we want to import contracts from truffle-contract. So, in order to have access to the truffle-contract library. But as you can see here, it's still yet grayed out so, we haven't made any use of it. The second thing, is we have to import the artifacts if we are deploying our smart contracts.

Now our smart contracts are not deployed yet. There is no built folder here. It's empty and we have yet to deploy our smart contracts and that's what I want to do now. And in order to do that, there are two ways. Way Number One is we start Ganache... We start Ganache and then add another terminal. We're going to type in 'truffle migrate' and this one doesn't find any config files. So, we have to go into the 'truffle-config.js' and it's a wrong folder. 'truffle migrate.' If it says it cannot find a suitable network configuration then the development network part is commented out. So, it's always good to know where to look forward for the error messages, how to fix them. The contracts are deployed and what you find now: here is the build folder and inside the build folder, you have the contracts folder, and inside the contract folder, you have the artifact. And what we need is our GameManager and our ThreeInaRow.json file.

So first of all, we have 'gameManagerArtifact' from 'GameManager,' and the second one is 'threeInaRowArtifact,' from our 'ThreeInaRow' game. And we are going to remove everything which we don't need. The try block here... 'refreshBalance.' We're still going to need the accounts, so I just leave them in. We're going to remove the 'refreshBalance' for account and accounts. We are removing the 'sendCoin' function. The only thing that I leave here is the 'setStatus,' which is kind of a generic function, just to set an element called status and I leave addEventListener which files unload. And then I'm going to save this one and now I go in app src index.html and here we're going to make some important changes in order to reflect our " 'ThreeInARow' Game on the Blockchain' is going to be our title. We can remove the style for now. That's not necessary, and we are going to give it a little bit of a better html. So first of all, I'm going to call this 'Three in a row Game,' and that one is going to be 'Decentralized Blockchain App Game,' and we take our status and I want to have the status over here, but I'm going to make this a div and... Yeah, that's it. That's it for now. The rest, I can just remove it. And the only thing we leave is the script tech and this index.js is generated from our webpack.

So, if you go into the webpack.config.js, then you see that there is an entry point and the entry point is source index and there's an output, which is also called index.js. So, what happens internally is that our webpack, if we go into our app folder and start the npm run dev, npm run dev will give us on localhost:8080 Our project in our app folder. But the way it does this, it takes all the Truffle Scripts it felt are necessary in order to make this game work and namely, everything that we import and everything that we have in our index.js, it will package this together, and it will output another file called 'index.js' inside the directory where it hosts our files and localhost:8080. Now it sounds all very complicated. Think of it like a 'copy and paste' operation. Go inside the source folder, look for the import statements, go in the 'node_modules' folder, find the web3, paste it here, find everything that is imported in the web3, paste it here as well, and so on and so forth until you have everything in one file, and then name this file also 'index.js.' Great. The next thing that we want to do is, we want to open a browser and check out our game which doesn't do anything yet, but just keep it open for now. localhost:8080 is still our truffle-contract. Why is that? I forgot to save, and I'll go back.

Now we have a 'Three in a row' Game. And the next thing that you want to do, and this is where we are going to work for a very long time now, is our Developer Console. And our Developer Console doesn't show any errors. This is good for now, and now we can start implementing some JavaScript. So, if you are working in the Developer Console, and you need access to this app here, and you want to do something called functions, then you can do this by going in your app Developer Console. Either the Console, or you should stay at the sources. And you go to your Console here, at the bottom. You have a little prompt here, and you can always go in and say, 'App.account.' It will give you the account. Why does it give you the account? We go into the start, which is started after initializing the app, and then here we say, 'App.account' is going to be the account from 'web3.eth.getAccounts().' And this will give you the accounts array with Ganache. It gives you 10 accounts, and the first one it will assign to account. And over here, it is also where we want to have our GameManager instance. 'gameManager' in order to access our GameManager.

And it gets a little bit tricky. That's something that you really have to look at this video, because you will most likely not find it on a lot of places anymore: how you configure truffle-contract the right way, in order to use it throughout your whole project, the right way. Obviously, we want to do 'this.gameManager,' we want to assign something here and that is going to be contract. And then it's going to be the '(gameManagerArtifact).' So, all it does is it gives the 'gameManagerArtifact.json' file to truffle-contract. And truffle-contract will look into this .json file, and we'll see at the network we are connected to, we have an address that the smart contract is deployed, we have an ABI array, we have a name and we have a lot of metadata in order to interact with our smart contract and know how it was deployed. But from where does truffle-contract know the current network that comes from web3 itself?

So, the next thing you have to do is the 'gameManager.setProvider,' and that is going to be '(web3).currentProvider.' Why does this work? We are getting the web3 object from the app from this. So, it gives us- it would be the same as this, web3 is just easier to write. And that one is set during initialization of our event where the window is loaded. So, we said that 'app.web3' is a new 'Web3.providers.WebsocketProvider,' or if you use MetaMask, which we're going to use in the next section, than our web3 will come from the mathematic plugin. So, we always have access to a 'web3.currentProvider' object. Then there's one last thing to do is after getting the account, we have to set the default account from which we're going to send off transactions. And this way we are going to say 'this.gameManager.defaults,' and this takes a configuration object. And here we can say by default we want to use this account. And now we have to do the same with the 'threeInaRowArtifact.' We had 'threeInaRow' object here, another variable to our app. We said we had a new 'ThreeInaRow' contract to setProvider and the default.

And this is something that I would ask you to do now as kind of a challenge or at least the coding practice for this lecture. And obviously I will do it in a second as well. Just see that you understood everything, and just repeat everything, and we're going to do it in a second together. It wasn't probably that hard. We're doing a 'threeInARow:null,' and then we say this 'threeInARow = contract(threeInARowArtifact);' and this 'threeInaRow.setProvider = (web3.currentProvider).' And then over here, we have to set the default as well, 'this.threeInARow.defaults,' from this account. Now that is just starting and we haven't done anything yet. So, in order to do something we have to maybe at least get the high scores back. And for this I want to create a new function that is maybe called 'refreshHighscore:' And that is going to be an async function. And inside here we are going to get the gameManager... gameManager from the app, and then we could say, 'let top10 be'... First of all, no. This was just a little bit too fast. 'let gameManagerInstance = await gameManager.deployed().' This we know probably, or hopefully, still from the tests that we were writing. And then if we have the 'gameManagerInstance' then we can say the top10 are going to be the 'gameManagerInstance.getTop10()' and then we can just output this and then see if this is working, as the last thing that we want to do in this lecture.

Go to the right browser, 'App.refreshHighscore().' Something went wrong. What went wrong is, in my window, I have a MetaMask plugin, and I have to either deactivate this or... If you have no meta mask plugin, then this would probably work, what we did. If you have the MetaMask plugin, then try to open the incognito window or private window and go to the very same address. Open it. And in this case we have no MetaMask plugin. So, here we can just go in and say, 'App.refreshHighscore(),' and that should just work fine. And we get back our High Score list, like with two elements, and that's an array with two elements. And they're inside, this an array with 10 elements each, the 10 addresses and the 10 number of wins that is currently zero, because we have nobody winning there yet. And that's exactly what we're going to do in the next lecture. In the next lecture, we are going to implement our 'Start Game,' and join the game functionality. Before we are talking about how to implement the front end here. I'll see you in the next lecture.

Creating the Basic Game Functionality

About