Assignment Summary
Bonus Assignment
As always, if you have any questions feel free to ask us below!
Hello!
I think this part is missing from the course!
It should be after the web3.js category.
To render all cats from a owner, you will need to loop the renderCat function. In the smart contract, you will need to keep track of the cats an address own. You retrieve all ids from owner, and use for expamaple the getCat(catId) to retrieve information of each of this ids.
Ok, I’ll try my best.
Might take a few days.
Great let me know if you get stack.
What I was trying to do but failed
For couple of days, I was trying to implement React to the website.
Rather than copying & pasting cat code every time, I thought it would be smarter to create one cat container. The container would create a cat based on the DNA input. Even if an owner has multiple cats, I could use the map method to loop through owned cats array.
However, I totally got stuck creating the container. First, how do I create dynamic CSS? Yes, I can use inline CSS or styled components but I have to define styling for every div (every part of the cat) because React cannot use className selector, unlike jQuery. Second, even if I manage to accomplish the first issue after hard work, the cat won’t update in the cat factory. The reason is that I need to implement state (useState). However, my cat have many changing part, including shapes and sizes. How to keep track all of them? Third, animation doesn’t work.
I spent couple of days learning React and trying to implement it, but it did not work out as I expected too. Maybe React wasn’t a great choice for NFT?
Other than using containers like in React, I have no idea how to list all cats that owners have. Because in normal HTML, you have to copy & paste code every time, right?
Hey @REGO350, yes using react in this project is a bit too much because you are learning too much new things. Better to do it simple. I show how:
So we have a function to render a simple cat like in the cat factory. We have that HTML in the website like usual. What we can do in this case, is to place this HTML code into a JS function using the special quotes to be able to use break lines. Then we pass the arguments we need in order to apply style to the cat.
Code example:
function renderCat(catInfoArray){
let id = catInfoArray.catId;
let dna = catInfoArray.dna
//notice that Im using this speacial quotes to write html code inside with line breaks
let catBox = `<div id="`+ id +`">
<div id="catHead`+ id +`">
<div id="catBody`+ id +`">
<div id="catTail`+ id +`">
<div id="catPaws`+ id +`">
</div>`
document.getElementById("catBoxes").innerHTML += catBox;
//Optionally you can use jquery with method $("#catBoxes").append(catBox)
//OR document.getElementById("catBoxes").appendChild(catBox);
}
So to place this content you will only have a simple < div > with id of catBoxes in your html, like this :
<div id="catBoxes">
</div>
Then you just call the function from your js file like catBox(catInfoArray)
If you notice because this is a JS function, now we can loop into it. When you have an array of cats or calling each cat.
function renderMultipleCats(catsArray){
if(catsArray.length > 0){
for(var i = 0; i < catsArray.length; i++){
//Calling our renderCat function for each cat in the array.
let catInfoArray = catsArray[i];
renderCat(catInfoArray)
}
}
}
With the function renderCat we create a boxes for each part of the cat like catEyes, we can use the functions from the factory to seclect this box that we just render and apply the correct style for example :
function eyesShape(catId){
$("#catEyes"+ catId).css(your style code here)
}
Hopes this little guide helps. Let me know if this works for you.
Thank you very much for the detailed advice!
I didn’t know that you can put html code in vanilla JS variable! (Kind of like JSX)
Later today, I will try it out.
Thanks again!
Took me a few days but I finally did it!
id in every div, I put id in the very first parent div of catBox. In this case, the selector looks in the following way (example): $(`#${id}`).find('.cat__mouth')
$(`#${id} .cat__mouth`)
I reused catSettings.js instead of making another styling file (buildCat.js). I renamed catSettings.js to renderCat.js in the full code. I wanted to avoid code duplication.
Hover card to see information about Doraemon. How to do hover to flip: https://www.w3schools.com/howto/howto_css_flip_card.asp
Start button works as a Metamask login button. In every (document).ready function, it checks that the user is logged in or not.
In the contract, I created owner to token ID array mapping. I didn’t want to loop through allTokens array to query owned tokens.
Full code: https://github.com/REGO350/nftgame
Mind if I ask you a question. How did you know Filip’s version used (buildCat.js) - I mean, I really think these videos which I do think this lesson existed, originally, were omitted, to make us reach harder of course but if we are all basically using the same functions and so forth, why not just have the complete course on line?
There is no video.
I studied the source code from IvanOnTech GitHub:
https://github.com/Ivan-on-Tech-Academy/academy-cryptokitties
I see - well, thank you listing your code and inspiring the rest of us!
@kenn.eth @REGO350 @AdamFortuna
Hello Devs;
So I have spent about a week trying to follow Filip’s code to render the NFTs. My cat NFTs are not showing up properly. I do not know if the way I structured the factory HTML or the Index.js file is at fault or something else. The build.js and the catalogue_ShowCat.js files seem good to me but I just don’t know at this point.
It looks like they have different DNAs but they all render mostly white, same color and the shape of the cat is totally off.
Here is a link to my project.
https://github.com/brlojam4932/myCryptoKitties_master.git
This is what the cat is meant to look like
Similar thing happened to me when I put my cat to Filip’s code.
I basically had to rebuild the css so that every part will be relative to CATBOX.
yes, when I build my html file and the css file, they were different than Filip’s - I was not sure if that was the case - thanks Rego
hey @bjamRez in this case you will have to ajust your CSS for fixing into each box. This CSS properties you will use, should be different from a single cat. My advice is to render 1 into a 3 rows div and make sure its work. The issue here is that the first cat CSS is made for single cat. Also the functions that apply styles to each box, should select and apply each box you want separetly selecting it by Id.
heya!!
Firstly, I would like to give a BIG thanks to @REGO350 and @kenn.eth as without your inspiration I couldn’t get so far. Thanks a lot guys. 
So, here’s a clip for the catalogue. Ahh…one more thing, metamask popup is not visible in the clip on the click of new Gen0 button. Apart from this, it’s going well.
Catalogue Video
Repo
Cheers!!
Hey @kenn.eth,
I’m having an issue while loading cats in the modal box for breeding purposes.
The problem is, whenever I open a new modal, it seems to keep the content of the previous calls made. It keeps replicating cats until the screen is refreshed.
on the first call -
on the second call
You see… these last 3 cats are my default ones without any styling and they aren’t supposed to be here as I have created only the first 3 cats.
on the third call
and so on.
Thanks
Edit : that’s my repo link
very nice! - great idea of making a video !
just waiting to see what results the devs give you