Planning & Coding My NFT Game
I wrote about why i decided to use a smart contract as backend and how i created NFTs in my last story. Since then, i have been working on the landing page and smart contract of the game.
There will be 2 main pages on the website; one for minting a vehicle and other is for managing the vehicles. First i thought i could buy and use a Crpyto ICO theme from themeforest to not to spend so much time on design but then i decided to go with a really simple page and do it myself.
I am planning to add some opening animations, may be a gradient on the background, a link to “Play / Garage” page and an about section. That will be enough for now i guess.
Designing the Mint Page
I used Audiowide font because it’s readability and futuristic look. I used a dark purple background because of the Truck Constructor sprite pack but i might darken it a bit more for more contrast. May be some more animated sprites could be added to background but i don’t want this page to be too cramped.
I love the wheelspin mechanism in Forza Horizon games and i want to use a similar design for my mint button. Vehicles will be minted one by one. They will be predetermined probably because it is hard to use randomness in smart contracts, but it’s a game and i want to give the feel of wheelspins.
Writing the Smart Contract
It is my first time writing a smart contract and i had no idea where to start. I started with OpenZeppelin’s Wizard to generate an ERC721 contract for minting. Then i modified it a little bit to store metadata on IPFS, i changed symbol and function names etc. Lastly i wrote some tests for it.
This contract has only mint and burn functionality so far. I need two more; renting and transfering. And i also need one more contract for the in-game currency. I am planning to call it $RENT. Player will receive $RENT as they “stake” their NFTs and they will pay $RENT to buy new vehicles or other special stuff.
Making Front-End to Talk to the Smart Contract
I used ethers.js to interact with the smart contract. One other option is Web3.js but i found ethers to be easier to use. Also there are options like Moralis. It is like the Firebase of Web3. It would probably make my job a lot easier but i want to build the app from scratch.
I used Vue as the front-end framework and Bootstrap because i have the most experience with them. As i am pretty new to Web 3 stuff, i didn’t think it would be the best idea to try new things on front-end too.
I have a Vuex instance and a ConnectWallet function in it. The ConnectWallet function first tries to connect with MetaMask with eth_requestAccounts method. Then ensures the chain is correct. Lastly it gets the signed provider and puts it in store. I will use it almost all functions to interact with the smart contract.
This function returns an object that has “status” and “message” keys. If something goes wrong, it returns something like { status: false, message: "An error occurred" } and i show the message to the user. Ethers.js has pretty good error messages and it makes error handling a lot easier. Users probably never will see “an error occurred” text. Errors will be a lot more descriptive.
I am planning to write about an in-depth look to my ethers.js setup in the future after i finish building the basics.
Final Thoughts
Writing a smart contract seems like a big deal in the first place but it is not much different than writing JavaScript. Testing the contract was the hardest for me. You can’t just console.log stuff. And deploying it for testing is impossible. Hardhat makes it possible to deploy it on your local machine and you can test it with fake wallets. Also you can write tests so you don’t have to keep worrying if you broke something.
My plan is to first finish the mint page, then i will write the contract for $RENT token and start working on the playing with the vehicle mechanisms. I am pretty clueless for now but i hope things will get clearer when i start working on them.
I will keep documenting this process so me and others can see the concepts it was hard to grasp for me in the beginning and what helped me to understand them.
