hey @kenn.eth.
Thanks for the reply.
I tried your second solution like you said it’ll be more optimal.
Please check the below code, is that what you meant?
async function breedKitties(gen){
if(isRender == true) return;
var arrayId = await instance.methods.getKittyIds(contractOwner).call();
for(var i = 0 ; i < arrayId.length ; i++){
appendBreed(arrayId[i],gen);
}
isRender = true;
}
And I got another problem as we’re rending once so it’s displaying cats for one gender only
@kenn.eth,
but yeah… the first one is working well.
var isFirst = false;
async function breedKitties(gen){
if(isFirst == true) $('#catsDiv').html("");
var arrayId = await instance.methods.getKittyIds(contractOwner).call();
for(var i = 0 ; i < arrayId.length ; i++){
appendBreed(arrayId[i],gen);
}
isFirst = true;
}
In this case you just need to use same function for both genders and provide gender as argument.
By clicking the gender box just pass what gender you will select and save it globally also, So with another function or variable you check the gender to select.
@REGO350, @kenn.eth
Having issues with rendering cats still. I had used Filip’s project and it worked but I decided to re-do some of that work, to practice but now is not rendering correctly.
Main issues:
Cat head and body colors are not saved.
Colors on the cat shapes are not saved though the pattern changes are.
The animation also does not get saved
And the DNA sequence only displays 10 digits.
My files for the CSS, HTML, ShowCats and Build are like Philip’s but my Solidity Contracts are the ones I worked on.
I seem to think it has to do with ShowCats.js files but I’ve spent a few days and can’t figure out why this happens.
any insight - would be greatly appreciated
https://github.com/brlojam4932/myCryptoKitties_master.git
…this is what they should look like
I think you @kenn.eth mentioned that the CSS file needs to be different for the Catalogue page? Can you explain a bit more or give an example?
hey @bjamRez! Whats need to be different is JS functions from factory JS.
Please check the render function and each that affect the styles. The main issue is always the selector, so makes sure each function are pointing to a cat Id element.
@kenn.eth, in the catSettings.js file, the randomization is mainly handled by this function
var dnaStr = String(Math.floor(Math.random()*1E16))
when I apply this function into the showCat.js, I do get back random attributes back but of course they change each time I refresh the page.
I am curious if the other method that was taught in the course was more reliable?
So basically, it’s coming down to the random variation not getting saved when it comes to display it in the My Kitties page or catalogue
@REGO350, @AdamFortuna any other devs who are available…
@REGO350, @kenn.eth , @AdamFortuna
Hello Devs, can someone just please look at my post from a couple of days ago. It’s just seems to be a minor problem – the randomization of the cats is not getting copied over to the finalized cats - I have samples - follow link
hello @bjamRez !
You have to use a pattern that let you use a dna that create the same design. So in this case we will save this dna into the smart contract and use it to recreate styles. But for this you will need a some predefined styles.
Thank Kenn, your comment made me think about the createKittyGen0 function in the contract, the show and build js files were fine. I compared my code with Filip’s and changed some things and now I get back the proper color and animation variation.
emit Birth(owner, newKittenId, uint256(_kitty.mumId), uint256(_kitty.dadId), _kitty.genes);
Adding the uint256 to the mumId and dadId seemed to make a difference
@REGO350, @kenn.eth, @AdamFortuna AdamFortuna
XOR vs AND Operator for more randomness
Can anyone explain why we did not use the Exclusive Or Operator? There was a link to read as homework but we never used it. Instead we used the And Operator?
hey @bjamRez this depends on the case. Somethings we need to check both conditions are true with AND or just single condition with OR ||
There’s a function in Kittycontract.sol that is working in truffle console. It returns the array of kitties owned by owner.
I haven’t been able to get it to work by calling it in the browser console, instead receiving this TypeError:
instance.methods.tokensOfOwner is not a function
The createKitty function works, no problem.
However, any ideas on what I’m missing in the myKitties function in index.js?
function tokensOfOwner(address owner) public view returns (uint256[] memory) {
uint256 tokenCount = balanceOf(owner);
if (tokenCount == 0) {
return new uint256[](0);
} else {
uint256[] memory result = new uint256[](tokenCount);
uint256 totalCats = totalSupply();
uint256 resultIndex = 0;
uint256 catId;
for (catId = 1; catId <= totalCats; catId++) {
if (kittyIndexToOwner[catId] == owner) {
result[resultIndex] = catId;
resultIndex++;
}
}
return result;
}
}```
var web3 = new Web3(Web3.givenProvider); //connect to ETH blockchain
var instance;
var user;
var contractAddress = "0xC1645d1253C7169D00154F644cCEA9599BDe86bf";
$(document).ready(function(){
window.ethereum.enable().then(function(accounts){
instance = new web3.eth.Contract(abi, contractAddress, {from: accounts[0]});
user = accounts[0];
console.log(instance);
instance.events.Birth().on('data', function(event){
console.log(event);
alert( "This here cat is ALIVE!!!" );
})
.on('error', console.error);
})
})
function createKitty(){
var dnaStr = getDna();
instance.methods.createKittyGen0(dnaStr).send({}, function(error, txHash){
if(error)
console.log(error);
else
console.log(txHash);
})
}
function myKitties() {
var arrayId = instance.methods.tokensOfOwner(user).call();
for (i = 0; i < arrayId.length; i++) {
console.log(arrayId[i])
}
}
Hey @WMXgTW6wh, hope you are well.
What about the ABI? did you also update that file too? although your index.js init function to the contract instance looks good, maybe its the abi file the one which you missed? 
Carlos Z
Thanks! That was it - I had to update the abi.js array. 
The Bigcat-alogue is progressing - many thanks to @thecil @kenn.eth @tanu_g @REGO350 for providing inspiration and direction!
That SVG may look gnarly under the hood but it works. 
Lots more to do, back to it!
If it helps anyone later, here’s the relevant bit of index.js:
async function myKitties() {
var arrayId = await instance.methods.tokensOfOwner(user).call();
for (i = 0; i < arrayId.length; i++) {
appendKitty(arrayId[i])
}
}
async function appendKitty(id) {
var kitty = await instance.methods.getKitty(id).call();
appendCat(kitty.genes,id,kitty.generation);
}
var colors = Object.values(allColors());
function appendCat(dna, id, gen){
var num = dna;
var digits = num.toString().split('');
var realDigits = digits.map(Number);
var hc = (realDigits[0] * 10) + realDigits[1];
var tc = (realDigits[2] * 10) + realDigits[3];
var mc = (realDigits[4] * 10) + realDigits[5];
var ec = (realDigits[6] * 10) + realDigits[7];
var dc = (realDigits[8] * 10) + realDigits[9];
var es = realDigits[10];
var dp = realDigits[11];
var a1 = realDigits[12];
var a2 = realDigits[13];
var ln = realDigits[14];
var bodycolor = headColorBuild(hc);
var tailcolor = tailColorBuild(tc);
var manecolor = maneColorBuild(mc);
var eyescolor = eyesColorBuild(ec);
var linecolor = lineColorBuild(dc);
var eyeshape = eyeVariationBuild(es);
var decor = decorationVariationBuild(dp);
var anim2 = animationVariation2Build(a2);
let catBody =
`
<div class="col-lg-3 catalogueBox" style="background-color: #e2efff;border-radius: 10px;padding-left: 1.3rem;padding-right: 1.3rem;padding-top: 2rem;display: block;height: 235px;margin-bottom: 50px;background:#e2efff;box-shadow: 0px 5px 7px 0px #444444;">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1561 1095" preserveAspectRatio="xMinYMin meet" class="svg-content-catalogue">
<g id="body">
<path fill="#`
+bodycolor+
`" d="M636,1458c-5.36-1.49-10.73-3-16.08-4.49-13.62-3.92-20.27-13.42-22-27.11-1.1-8.67-2.62-17.29-4-25.92a6,6,0,0,0-2.19-3.66,53.54,53.54,0,0,0,.4,7.18c1.41,7.8,2.51,15.72,4.7,23.31s-4,15.09-10.5,20.38c-7,5.64-15.7,4.52-24,4.14-4.6-.2-9.19-.87-13.76-1.53-16.72-2.43-24.57-18-26.64-31.53-1.38-9-3.13-18-4.5-27a103.84,103.84,0,0,1-.94-12.08q-.39-12.56-.48-25.14c0-6.58-1.08-12.57-5.73-17.83-5.9-6.7-5.36-6.68.65-13.34,8.55-9.49,16.64-19.4,24.93-29.13l2.67-3.15c14.17,10.09,28.69,18.6,44.4,24.58,15.41,5.86,31.17,11.08,48,11.25,8.92.09,18,1.22,26.73-.16,14-2.23,28-5.07,41.35-9.66,13.49-4.64,26.27-11.46,39.08-17.87,5-2.48,9.21-6.41,13.71-9.78,2.62-2,4.32-1.85,6.57,1,15,18.82,33,33.94,54.77,44.64,10.61,5.21,21.66,7.8,33.19,8.91,8.77.85,17.6,2.06,26.35,1.77,17.18-.58,34.18-2.63,50.87-7.35,20.39-5.78,37.5-17.25,53.49-30.32a385.55,385.55,0,0,0,34.87-32.77c15-15.78,27.06-33.91,38.3-52.56,1.07-1.78,3.09-3.79,5-4.16,20.56-4,40.22-11,59.56-18.64,11.45-4.52,22.35-10.74,32.86-17.25a315.68,315.68,0,0,0,31.89-22.6c15.19-12.26,27.19-27,34.07-45.8,3.26-8.87,3.93-17.82,4.46-27a44.55,44.55,0,0,1,1-5.31h1c12.34,23.24,21.74,47.67,29.53,72.77a79.06,79.06,0,0,0,5.73,12.71c6.36,12.23,12.08,24.89,19.54,36.41,9,13.86,21.5,24.85,34.17,35.34,13.13,10.88,26.43,21.63,40.38,31.4,15.5,10.87,32.79,18.44,50.8,24.43a198.86,198.86,0,0,0,74.3,9.68c11.52-.64,23-2.63,34.42-4.28,5.64-.81,11.22-2.1,16.77-3.44,14.14-3.43,27.75-8.39,39.59-17,11-8,21.53-16.56,32.15-25,3.63-2.89,6.82-6.34,10.44-9.24a9,9,0,0,1,4.92-1.68,22.89,22.89,0,0,1,5.84,1c8.58,2,8.64,2,4,9.71a243.22,243.22,0,0,1-37,47.33c-20.2,19.83-43.41,35-69.94,44.74-12.56,4.6-25.58,8.06-38.54,11.45-5.2,1.37-10.81,1.36-16.25,1.65-9.28.48-18.58,1.16-27.85.91a220.9,220.9,0,0,1-27.16-2.49c-35.57-5.45-69.72-16.51-104-27.05-19.93-6.13-39.56-13.27-59.28-20.07-1.56-.54-2.79-2-4.19-3.08-.36,5.44-.57,11.33-1.18,17.19-.92,8.88-1.87,17.78-3.28,26.6-2.59,16.29-5.34,32.56-8.38,48.77-2.17,11.53-4.55,23-7.53,34.38-3.42,13-13.46,16.92-23.34,17.6-13.75.94-27.61.53-41.41.29a104.65,104.65,0,0,1-16.2-2.06c-4.44-.77-8.86-1.91-10.36-7.17-.11-.39-1.11-.53-1.69-.79-.1-1-.19-2-.29-3l-.81.23L1125,1443c-4.69,1.67-9.36,4.63-14.09,4.72a182.17,182.17,0,0,1-28.05-2.08c-7-.94-10.54-6.84-10.48-14.47.05-5.91-.5-11.82-.69-17.74-.25-7.74-5.38-11.18-11.77-13.57q-16.77-6.28-33.54-12.6a4.13,4.13,0,0,1-2.36-2.53l7-1.19,0,.47q-15.13,0-30.26,0c-9.33,0-18.65.15-28,.06q-43.86-.45-87.73-1c-19.95-.27-39.9-.55-59.84-1.1-16.42-.44-32.83-1.15-49.22-2-15.87-.82-31.73-1.92-47.58-3-7.76-.53-15.49-1.3-23.24-1.9-1.79-.14-3.59,0-5.92,0,0,2.06-.15,3.67,0,5.24,1.22,11.66,2.26,23.35,3.88,35,.87,6.22.76,12.11-1.29,18a29.18,29.18,0,0,1-18.16,18.49c-7.18,2.63-15,3.54-22.5,5.26a11.66,11.66,0,0,0-2.18,1Zm486.13-20.87h1.41c0-8.22.49-16.48-.17-24.64-.49-6.19-4.41-10.39-10.57-12.56q-24.84-8.72-49.5-18c-2.58-1-4.82-3.08-7-5a68.77,68.77,0,0,1-5.29-5.74l-1.11.86c1.56,2.46,3.11,4.93,4.88,7.73l-9.44.68c5.9,1.38,10.39,2.06,14.62,3.49,16.83,5.7,33.63,11.5,50.34,17.52,9.09,3.28,11.78,7.59,11.79,17.24Q1122.15,1428,1122.13,1437.13Zm-555.55-79.5c4,5.56,8.46,10.47,15.19,12.15,4,1,7.1,2.34,7.06,7.31l1.9-4.74c6.94-.79,13.73-1.4,19.58-6.16C593.34,1374.82,579.53,1368.88,566.58,1357.63Z" transform="translate(-126 -363)"/>
</g>
<g id="tail">
<g>
<path fill="#`
+tailcolor+
`" `+anim2+`c-.33,1-.16,5.11-.49,6.11.33,3.34.16,3.55.49,6.89v9c-.66,2.63-1.11,5.33-2,7.87-3.57,10.08-7.28,20.12-10.93,30.17-3.31,5.25-5.8,11.21-12.09,13.87l-8,5.1-12,4.84-3,1.15h-10l-6.91-2.21-10.27-3.69-12.87-7-9-7-8-14v-17c2.26-7.24,3.55-11.61,5.89-18.83.59-1.82,2.48-6.41,3.27-8.17a43.55,43.55,0,0,1,16.89-15.82l10-5,5-2c1.64-1.73,4-3.2,4.75-5.26,1.33-3.75,1.68-7.85,2.44-11.8q3.38-16.53,6.77-33.06h5l8,4.17,7,3.82,8,7,6,8q5,9.49,10,19c1.64,6,3.26,12,4.94,18a12.21,12.21,0,0,0,1,2.09Z" transform="translate(-126 -363)"/>
</g>
</g>
<g id="head">
<g>
<path fill="#`
+bodycolor+
`" d="M529,1250a7.2,7.2,0,0,0-2.2-.93c-8.29-.4-16.6-.44-24.86-1.14-11.52-1-23-2.14-34.5-3.7-15.87-2.18-31.7-4.66-47.51-7.25-32.15-5.27-63.39-13.39-90.67-32.2q-46.22-31.89-54.9-87.64c-2.87-18.61-3-37.3-2.24-56a345.48,345.48,0,0,1,6.49-52,355.33,355.33,0,0,1,10.22-41.4c1.44-4.46,2.22-9.17,4.05-13.45.59-1.39,3.63-2.6,5.45-2.47,11.23.77,22.41,2.28,33.64,2.91,15.06.85,29-4.3,42.81-9.38,15.76-5.83,29.91-14.75,41.16-27.27,6.55-7.28,11.44-16.06,17.09-24.16.46-.65,1-1.24,1.86-2.27,1.57,1.8,3,3.32,4.28,4.95,8.88,11.25,21.95,14.32,34.8,17.81,14.47,3.94,29,7.23,44.19,6.51a112.07,112.07,0,0,0,32.2-6.43c20.63-7.28,37.73-19.82,53.73-34.22.49-.43,1.06-.77,2.38-1.73,1.23,6,2.51,11.51,3.46,17.06,2.49,14.46,8.63,27.33,16,39.91,6,10.32,15.7,15.65,25.46,21a133.55,133.55,0,0,0,19.93,8.69c7.68,2.67,15.69,3.9,23.87,1.95a16.82,16.82,0,0,1,3.49-.17c13.52-.28,26.25-4.31,38.56-9.22,6-2.42,11.06-7.41,16.65-11.07,1.57-1,3.54-1.46,6.5-2.64-19.33,44.8-15,85.69,10.62,125.53-4.57,2.69-10.22,5.49-15.29,9.11-12.13,8.63-24.07,17.54-36,26.53-16.08,12.18-28.37,27.84-39.68,44.3a155.86,155.86,0,0,0-22.84,49.53c-.94,3.67-1.88,3.63-5.73,3a95.55,95.55,0,0,0-24-.61,99.08,99.08,0,0,0-21.15,4.69A129.87,129.87,0,0,0,559,1232.79c-6.19,5.52-12,11.46-18,17.21Z" transform="translate(-126 -363)"/>
<path fill="#`
+bodycolor+
`" d="M126,704c.86-1.41,2.26-2.74,2.49-4.24,2.3-15.12,7.22-29.25,13.44-43.28,8.76-19.75,23.32-32.83,42.32-41.51,11.58-5.29,23.46-10,35.5-14.19,8.74-3,17.9-2.36,27-.26,3.21.74,3.64,2.35,3.21,4.91-4.27,25.42,1.37,49.27,11.53,72.37,1.58,3.58,3.76,6.9,5.61,10.37a2.79,2.79,0,0,1,.4,1.77c-4.39,18.82-5.26,38-5.81,57.19,0,.12-.2.24-.88,1-14-9.51-27.73-20-43.89-26l-.78,1.29c1.3.82,2.59,1.65,3.89,2.46,12.67,7.86,25.25,15.87,38.06,23.51,5.94,3.54,4.16,9.51,4.7,14.27,2,17.82,5.28,35.36,10.91,52.36,3.06,9.25,7.08,18.22,11,27.15,1.53,3.46,1.64,5.54-1.94,7.78-8.44,5.29-16.27,11.65-25.05,16.24-3.71,2-9.26,1.13-13.84.55-28.59-3.65-52.81-17.3-74.91-34.7a99.84,99.84,0,0,1-28.12-35.71c-5.36-11.11-8-22.84-11.06-34.52-1.44-5.56-1.21-11.55-2-17.32-.2-1.55-1.19-3-1.82-4.48V715c.3-3,3.65-6,0-9Z" transform="translate(-126 -363)"/>
<path fill="#`
+bodycolor+
`" d="M923.65,783.45c-28.81,8.77-58.54,15.53-81.37,38.79-4.44-7.65-8.6-15-12.9-22.17-7.3-12.25-14.45-24.64-25.25-34.32-2.64-2.37-2.75-4.64-.43-7.29,5.81-6.6,11.47-13.34,17.35-19.88,20.28-22.55,41.47-44.17,67.7-59.88,10.92-6.54,22.53-12,34-17.43,5.87-2.79,12.18-4.7,18.36-6.81a29,29,0,0,1,7.21-1.43,58.12,58.12,0,0,1,38.86,11.17c9.53,6.83,19.29,13.58,27.68,21.68,5.67,5.46,10.11,12.77,13.38,20a94.94,94.94,0,0,1,8,37.16c.56,23.54-2.19,46.2-11.08,68.25-12.92,32-34,56-65.55,70.4-13.55,6.18-27.8,5.87-42.09,4.94-14.53-.94-29-2.75-43.55-3.35-9.28-.39-9.07.21-11.95-8.15-5.1-14.84-10.5-29.58-15.85-44.34a47.49,47.49,0,0,0-3-5.62c10.34-11.59,23.55-19.24,37.73-25s28.64-10.33,43-15.42C923.87,784.32,923.76,783.88,923.65,783.45Z" transform="translate(-126 -363)"/>
</g>
</g>
<g id="eyes">
<circle id="white_left" data-name="white left" class="cls-5" cx="257.52" cy="660.08" r="30.66"/>
<circle id="white_right" data-name="white right" class="cls-5" cx="479" cy="670.2" r="30.66"/>
<g id="eyes-2" data-name="eyes">
<g>
<path fill="#`
+eyescolor+
`" d="M382.22,1062.34c-16.65,1.44-38.7-13.1-39-37.52-.26-19.59,17.29-36,37.59-36.93,23.71-1,39.92,18.56,40.44,35.78C421.9,1045.22,402.21,1063.81,382.22,1062.34Zm6-67.82c-3.74,1.17-7.85,1.71-11.16,3.62-9.1,5.28-8.67,16,.49,21.05,9.85,5.46,18.3,2.81,26.43-6.31,3.21-3.61,2-7.47-.66-10.91C399.57,997.15,394.43,995.27,388.22,994.52Zm-17.58,28.17a7.49,7.49,0,0,0-7.77-7.74,7.57,7.57,0,0,0-7.6,7.47,8.18,8.18,0,0,0,7.58,8.22A8,8,0,0,0,370.64,1022.69Z" transform="translate(-126 -363)"/>
<path fill="#`
+eyescolor+
`" d="M603.49,997.62c21.55-1.75,39,17.08,39.74,34.66,1,22.69-18.1,39-36.46,39.62-23.17.84-41-15.52-41.3-37.69C565.19,1014.87,583.27,996.64,603.49,997.62Zm1.58,5.71c-3.44,1-7.17,1.48-10.26,3.14-7.87,4.2-9.32,14.47-3.11,19.53,9.08,7.4,23.3,5.23,29.86-4.52,2.35-3.5,1.88-6.88-.37-10.16C617.35,1005.74,611.83,1003.72,605.07,1003.33Zm-20.25,41a7.49,7.49,0,0,0,7.33-7.76c.05-4.9-2.87-7.91-7.58-7.82s-7.3,2.89-7.4,7.57A7.68,7.68,0,0,0,584.82,1044.34Z" transform="translate(-126 -363)"/>
</g>
`
+eyeshape+
`
</g>
</g>
<g id="lines">
<path fill="#`
+linecolor+
`" d="`
+decor+
`"
transform="translate(-126 -363)"/>
</g>
<g id="mane">
<path fill="#`
+manecolor+
`" d="M1212,1060.16c-9.68-36.85-28.26-68.74-54.16-96.49-2.07-2.21-2.16-3.53-.26-5.79,19.9-23.67,34.49-50.12,41-80.56,9.33-43.33-.93-82.49-26-118.27A227.82,227.82,0,0,0,1091,687.13c-.38-.19-.59-.69-1.61-2l6.2.49c.61-3.65,1.7-7.36,1.76-11.08.34-20.49-.24-40.92-5.1-61-9.29-38.41-33.51-64.45-67.67-82.59-25.8-13.7-53.44-21-82.14-25.06a5.36,5.36,0,0,1-1-.13c-8.12-2.94-14.8-2-18.69,6.78-.13.28-.86.29-2.57.79a63.57,63.57,0,0,1,3.35-6.28c13.05-18.45,12.8-39.29-.88-56.54-10.16-12.81-23.57-21.52-37.85-28.87-38.81-20-80-27.28-123.37-22.52-23.51,2.59-45.56,10.24-66.85,20.33a60.83,60.83,0,0,1-13.83,4.92c9.91-7.85,22.4-10.44,33.93-16.71-2.35-2.08-4.27-4.06-6.45-5.67-26.8-19.81-57-31.38-89.84-36-7.23-1-14.55-1.33-21.83-2.05a10,10,0,0,1-2.56-1H573a31.34,31.34,0,0,1-4.6,1.17c-32.9,3.45-63.18,14-89.82,33.88A100.72,100.72,0,0,0,447,436.75c-.49,1.05-1.06,2.07-1.64,3.07-.16.27-.5.43-.75.65-.32-.06-.76,0-.92-.18-12.17-14.25-28.82-13.89-45.11-13a82.62,82.62,0,0,0-42.46,14.43c-17.23,11.76-32.5,25.44-41.3,44.88-4.79,10.59-8.27,21.57-7.42,33.52.09,1.2-1.84,2.77-3.13,3.8-22.75,18.23-41.42,39.46-49.55,68.22-7.26,25.71-4.7,50.94,4.58,75.68,2.08,5.55,4.56,11,7.23,17.34,1.4-5.17,2.49-9.43,3.72-13.66a17.8,17.8,0,0,1,1.6-3c.38,1.19.82,2.35,1.11,3.56a9.37,9.37,0,0,1,.08,2c-2,9-4.83,17.85-5.82,26.93-1.83,16.75-3.91,33.65-3.47,50.43a206.92,206.92,0,0,0,13.79,70.27c4.58,11.69,10.52,22.83,15.8,34.25a23.31,23.31,0,0,1,1,3.57L293,860,287,849c-11.23,7.81-22.2,14.92-32.61,22.78-24.87,18.77-46.53,40.6-62.35,67.76-9.67,16.6-14.93,34.52-17.13,53.56-5.27,45.78,7.45,86.6,33.71,123.69,2.89,4.08,2.08,6.5-.67,9.86-12.86,15.69-26.29,31-35,49.64-5.2,11.18-9.3,22.64-10.09,35.07,0,.56-.59,1.08-.9,1.61v9c.35,2.52.84,5,1,7.57,1.3,19.35,6,37.66,16.61,54.13,8.2,12.8,20.87,20.07,34.56,24.87,17,6,34.53,10.33,51.83,15.41a24.28,24.28,0,0,1,5.12,1.72c26.53,14.89,54,27.77,83,37.1,7.63,2.45,15.92,3,23.93,4.17,5.63.85,11.3,1.37,17,2h22c6.22-1.25,12.52-2.19,18.65-3.8,23.87-6.24,44.85-18,63.81-33.63a190.82,190.82,0,0,0,36.76-40.25c.47-.69.91-1.4,1.5-2.31,6.56,4.08,12.49,7.93,18.58,11.52,18.8,11.06,38.65,19.31,60.41,22.46,47.58,6.91,90.76-4.28,130-31.61.14-.09.27-.19.4-.29,8.52-6.38,8.47-6.34,15.18,1.92,15.61,19.18,34.61,34.08,57.78,42.76,9.11,3.41,19.24,4.12,28.9,6.06,24.28,2.21,48.48,2,72.12-4.65,21.34-6,39.67-17.73,56.63-31.61a308.83,308.83,0,0,0,69.37-80.49c1.1-1.83,1.44-4.12,2.29-6.68,13.81-3.94,28.82-7.58,43.39-12.51,36.18-12.25,69.18-30.23,96.51-57.34,13.75-13.63,23-30,25.79-49.5.06-.39.6-.7.91-1v-21C1214.68,1071.39,1213.49,1065.74,1212,1060.16ZM667.05,737l-6.74,5.63c-.4-.49-.8-1-1.19-1.48l6.8-5.56Zm-10.72,467.74c-4.06-.5-9.25-1.41-14.47-1.74-22.59-1.44-42.68,6.5-61.75,17.4-18.48,10.58-32.84,25.91-46.45,42-1.28,1.52-2.64,3-4,4.46l-1.48.54.45-1.7c3.31-4.33,6.62-8.66,10.43-13.66-3.54-.37-6.53-.81-9.55-1-12.59-.73-25.23-.88-37.75-2.19-18.33-1.91-36.68-4-54.81-7.18-19.84-3.49-39.64-7.57-59.09-12.79a157.86,157.86,0,0,1-64.4-34.57c-22.28-19.68-34.62-44.68-40.24-73.17-2.55-12.91-4.33-26.31-3.92-39.4.66-20.84,3.46-41.61,5.28-62.41a13.64,13.64,0,0,0-.59-3.75,87,87,0,0,0,2.71-8.43c2.2-10.15,3.92-20.42,6.42-30.49,1.69-6.85,4.4-13.44,6.62-20.15.51-1.55.89-3.15,1.44-5.1l-11.07-2.91c0-.45,0-.9,0-1.35a17.46,17.46,0,0,1,4.28.05,159,159,0,0,0,51.37,4.67c38.72-2.73,70.61-18.08,92.24-51.59,3.93-6.1,5.57-11.82,2.65-19.48-5.21-13.65-4.54-28-.67-42,.26-1,1.27-1.72,1.93-2.58a11.59,11.59,0,0,1,.19,3.35,81.65,81.65,0,0,0,.21,39.84c3.34,12.84,11.1,21.5,23.12,26.77,15.34,6.72,31.49,9.93,48,12,32.66,4.09,59.71-9,85.12-27.3,4.7-3.37,8.89-7.46,13.52-10.94,3.37-2.53,4-5.56,3.62-9.55-2.11-22.61-.72-45.13,6.3-66.69a110.73,110.73,0,0,1,23.25-39.41c6.22-6.92,13.08-13.28,19.71-19.83a31.06,31.06,0,0,1,3.78-2.8l.91.9c-1.1,1.21-2.1,2.53-3.3,3.62-12.15,11-23.16,22.91-31.59,37.07-7.56,12.7-13.36,26.07-14.77,40.89-1.26,13.17-2.92,26.43-2.53,39.6.73,24.42,6.17,47.81,18.52,69.39,5.75,10,15.09,15.11,24.2,20.82,36.19,22.67,90.12,10.16,114.6-20,4.46-5.51,8-11.71,12.13-17.54a32,32,0,0,1,3.13-3.37l1.25.85a78.43,78.43,0,0,1-4.81,8.07c-9.63,12.62-17.42,26.17-21.86,41.53a119.47,119.47,0,0,0-3,52.19c2.77,18,8.27,34.74,18.54,49.84a21.48,21.48,0,0,1,1.48,3.34c12.89-5.44,25.91-10.59,40-12.42C735,1079.64,681.68,1126.87,656.33,1204.76ZM998.8,855.86c-15.12,16.94-34.36,29.36-57.57,32.4-10.71,1.41-21.85-.41-32.8-.77-2.81-.09-5.63-.21-8.44-.32a125.08,125.08,0,0,0-34.15-.17c.92,8,1.81,15.52,2.69,23.09l-1.62.26C856.54,849.64,833.59,795.3,788,751.84c1.73,1.29,3.46,2.57,5.18,3.87l5.85,4.44,9.27-10c9.14-10.11,17.88-20.6,27.52-30.2s19.76-18.3,30-27C886.47,675.47,910,663,935.1,653.58c14.08-5.3,28.5-5.11,41.88,2.74,10,5.88,19.88,12.09,29.41,18.73,17.41,12.12,26.13,29.72,29.68,50.09C1044.71,774.68,1032,818.6,998.8,855.86Z" transform="translate(-126 -363)"/>
</g>
<g id="nose">
<path class="cls-9" d="M484,1073c8.19,3.57,16.39,7.13,24.55,10.75a14,14,0,0,1,2.5,1.89c-5.88,13.51-17.77,17.41-30.68,19.67-1.18,6.19,2.3,10.81,4.67,15.75l-7.6-8.79c-5.33,10.82-15.73,11.9-27.52,11.06,0,11.16-.42,22,.22,32.68a22.71,22.71,0,0,0,4.67,12c8.31,10.43,31.8,10.57,40.74.62,5.57-6.19,7.56-13.78,8.25-21.88-16.68-2.91-31.91,1.32-46.86,7.49,14.41-9.1,30.15-11.67,46.91-9.91v-16.51a36.72,36.72,0,0,1-6,0c-5-.9-10.31-1.37-12.91-6.85,15,8.76,29.2,4.74,43.19-2.76a3.94,3.94,0,0,1,1.36-.17l.66,1.42c-3.67,1.82-7.2,4-11,5.37-4.17,1.48-8.61,2.18-12.16,3-.82,9.46-.9,18.61-2.53,27.47-2.33,12.65-9.66,20.89-23.37,21.85-.37,0-.71.54-1.06.83H467a14.75,14.75,0,0,0-2.08-1.09c-10.48-3.53-17-10.15-17.11-21.8-.05-10.61,0-21.23,0-31.7-3.73-1.77-8-2.9-11.05-5.46-5-4.16-9.21-9.25-13.75-14v-3c1.21,1.2,2.72,2.21,3.58,3.62,5,8.2,11.95,14,21.3,15.94,14.61,3.09,27.08-1.07,29.71-15.7-3.58-2-7.35-3.71-10.74-6-6.53-4.41-10.29-10.47-8.66-18.6.35-1.75,2.41-3.62,4.15-4.5,2.67-1.34,5.75-1.88,8.66-2.76Z" transform="translate(-126 -363)"/>
</g>
<g id="bottommouth">
<path class="cls-10" d="M488,1145h17v5c-.67,2-1.22,4-2,5.94-5.21,12.43-6.36,17.92-22.84,20.06a18.44,18.44,0,0,0-3.14,1h-9c-7.24-2.28-13.11-6.34-17-13v-4c3.81-2.25,7.39-5.09,11.46-6.63C470.84,1150.21,479.47,1147.75,488,1145Z" transform="translate(-126 -363)"/>
</g>
<g id="topmouth">
<g>
<path class="cls-11" d="M476,1112h2c3,7.16,7.33,13.13,15.31,15,3.44.82,7.12.67,10.69,1v16c-2.09.33-4.17.78-6.27,1-7.81.72-16,.21-23.37,2.35-7.82,2.26-14.94,7-22.36,10.67h-3l0-3.07c0-2.8.13-5.61,0-8.41-.24-4.84-.65-9.68-1-14.52v-6c4.43-1,8.81-2.25,13.28-3C468.25,1122,473,1118.15,476,1112Z" transform="translate(-126 -363)"/>
<path class="cls-12" d="M448,1132c.33,4.84.74,9.68,1,14.52.13,2.8,0,5.61,0,8.41l-1,.07Z" transform="translate(-126 -363)"/>
</g>
</g>
</svg>
</div>
`;
let info =
`<div class="col-lg-3 infobox" style="padding-left: 1rem;">
<p>ID: ${(id)}<br />
Generation: ${(gen)}<br />
DNA: ${(dna)}</p>
</div>
<div style="margin-bottom: 35px;"></div>
`;
$("#catsDiv").append(catBody, info);
}
function headColorBuild(code) {
var color = colors[code];
return color;
}
function tailColorBuild(code) {
var color = colors[code];
return color;
}
function maneColorBuild(code) {
var color = colors[code];
return color;
}
function eyesColorBuild(code) {
var color = colors[code];
return color;
}
function lineColorBuild(code) {
var color = colors[code];
return color;
}
function eyeVariationBuild(num) {
if(num == 2){
let et1 = `
<g id="hearteyesBuilt">
<path class="lefteyeheart" d="M503,916c2.54,1,5.14,1.94,7.6,3.12C524,925.54,530,937.36,532.91,951c3.3,15.18.45,29.91-5.26,44A172.57,172.57,0,0,1,496,1045.46c-2.18,2.43-4.09,3-7.25,2-34.63-10.28-60.32-31.45-77.34-63.2-1.76-3.29-3-6.87-4.44-10.31V957c.32-.35.85-.65.93-1,3.53-16.26,15.06-23.94,30-28,9-2.44,15,0,19.88,8,1.4,2.29,2.83,4.56,4.25,6.84-.87-8.81,1.39-14.07,9.62-19.56,4.2-2.8,8.89-4.86,13.36-7.26Zm-21.51,38.66c-3,.92-6.91,1.44-10.12,3.21-9.21,5.09-9.05,15.69,0,21,7.64,4.46,14.83,3.76,21.75-1.48,3.45-2.62,7.38-5.22,6.53-10.29-.88-5.35-4.69-8.67-9.57-10.54C487.62,955.6,484.92,955.38,481.49,954.66Zm-24.71,35.45a7.8,7.8,0,0,0,7.66-8,7.47,7.47,0,0,0-7.5-7.59,7.56,7.56,0,0,0-7.72,7.44A8,8,0,0,0,456.78,990.11Z" transform="translate(-219 -322)"/>
<path class="righteyeheart" d="M670,1055c-2.77-5.63-5.62-11.23-8.3-16.9-7.49-15.85-13.86-32.14-16.07-49.63-2.26-17.81-.19-34.92,11-49.86a38.19,38.19,0,0,1,60.48-1.07c4.39,5.43,6.92,11.27,4.13,18.75,1.07-1.3,2.15-2.58,3.21-3.88,7.27-8.94,14.46-10.5,24.58-5.27,12,6.17,20.09,15.42,22.92,28.86v12c-3.73,7.26-6.39,15.38-11.38,21.64-19.14,24.06-45.2,36.84-74.71,43.36l-8.91,2Zm28.2-61.41a30.73,30.73,0,0,0,15.51-8c4-4,4.36-8.28.92-12.9-6.72-9-23.39-9.24-30.31-.36-3.56,4.57-3.62,11.62.81,14.84C689,990,693.8,991.5,698.2,993.59Zm-19.59-3.1c-4.47-.08-7.42,2.82-7.58,7.47s3.14,8.21,7.5,8.15a7.83,7.83,0,0,0,7.44-7.83A7.38,7.38,0,0,0,678.61,990.49Z" transform="translate(-219 -323)"/>
</g>
`;
return et1;
}
else if(num == 3){
let et2 = `
<g id="stareyesBuilt">
<g>
<path class="lefteyestar" d="M453,918c6.73,9.48,13.59,18.87,20.14,28.47,2.75,4,5.66,2.11,8.73,1.06q23.34-7.92,46.69-15.8a46.31,46.31,0,0,1,5.94-1c-3.47,8.45-6,16.16-9.7,23.29-6.26,12.09-13,24-20.07,35.59-2.19,3.6-2.05,5.83.23,9.08,6,8.57,11.67,17.39,17.46,26.12a9.75,9.75,0,0,1,1.9,5c-3.12-1.84-6.28-3.61-9.35-5.53-6.62-4.14-13.25-8.29-19.76-12.59-2.63-1.74-4.28-2-6.56.9-9.06,11.66-18.45,23.08-27.76,34.55-1.39,1.72-3,3.26-5.2,5.61-.31-2.07-.55-3-.57-3.91-.41-16.12-.86-32.24-1.13-48.37-.1-5.85-1.38-10-7.78-12.56-15.59-6.16-30.83-13.21-46.21-19.9v-2c16.05.77,31.74-1.77,47.37-5,3.48-.71,4.82-2.24,4.73-6-.28-12.31-.1-24.64-.1-37Z" transform="translate(-219 -322)"/>
<path class="righteyestar" d="M706,1063c-3.78-7.19-7.47-14.43-11.36-21.56-4.06-7.45-8.66-14.62-12.34-22.24-2.1-4.34-4.34-4.47-8.17-2.76-9.67,4.32-19.47,8.38-30.62,13.16a29.47,29.47,0,0,1,2.28-3.82c7.4-8.11,14.7-16.31,22.35-24.17,2.79-2.87,3.1-5.12,1.45-8.74A272.58,272.58,0,0,1,650.06,930,20,20,0,0,1,654,931.1c15,8,30,15.9,44.76,24.23,4.39,2.48,7.13,3,11-1.18a208.55,208.55,0,0,1,23.42-21.32c-1.23,7.41-2.43,14.82-3.7,22.22-.73,4.25-1.65,8.47-2.31,12.72-.39,2.48-.73,5.14,2.58,6.13q21.9,6.55,43.83,13.06a13,13,0,0,0,3.48,0v2c-18.31,4.66-36.64,9.27-54.9,14.12-1.28.34-2.62,2.37-3,3.86-1.42,5.61-2.51,11.32-3.62,17-2.53,13-5,26-7.49,39Z" transform="translate(-219 -323)"/>
</g>
</g>
`;
return et2;
}
else {
let et0 = ``;
return et0;
}
}
function decorationVariationBuild(num) {
if(num == 1) {
let dvb1 = `
M666.31,1097.27c-.65-.48-2.52-1.16-2.68-2.13-.21-1.26.55-3.51,1.56-4q14.91-7.55,30.1-14.48c1-.47,3.75.39,4,1.22.48,1.33.09,4.16-.81,4.61-10,5-20.26,9.74-30.44,14.53A9.88,9.88,0,0,1,666.31,1097.27Z
M305.24,1079.45c-1-.73-2.94-1.55-2.93-2.36,0-1.53.76-3.66,1.93-4.45a66.27,66.27,0,0,1,8.79-4.42c6.39-3,12.71-6.23,19.25-8.9,1.62-.66,4,.45,6,.75-1,1.77-1.49,4.38-3,5.16-8.63,4.52-17.48,8.61-26.28,12.82C308,1078.54,306.87,1078.85,305.24,1079.45Z
M642.16,1093.41c-.53-1.57-1.63-3.23-1.43-4.7a6.2,6.2,0,0,1,2.67-4.17c5.43-2.85,11.07-5.28,16.63-7.89,3.61-1.68,7.1-3.75,10.87-4.94,1.73-.55,4,.62,6,1-.92,1.8-1.39,4.48-2.85,5.23-8.7,4.47-17.62,8.51-26.49,12.64a20.39,20.39,0,0,1-3.32.94Z
M312.58,1052.41c1,.77,2.7,1.41,3,2.47s-.37,2.82-1.18,3.84-2.21,1.36-3.4,1.94c-8.32,4-16.65,8-25,12-2.33,1.11-5,2.06-6.5-1-1.68-3.31,1.2-4.31,3.42-5.38q12.72-6.15,25.48-12.22C309.59,1053.53,310.84,1053.11,312.58,1052.41Z
`;
return dvb1;
}
else if(num == 2) {
let dvb2 = `
M296,1011c3-2.57,5.89-2.6,9.29-.28,7.8,5.33,15.81,10.37,23.77,15.48,2.43,1.56,4.84,3.66,2.49,6.23-1.11,1.21-5.1,1.24-6.81.2-9.74-5.94-19.19-12.37-28.74-18.63Z
M662,1037.06a48.48,48.48,0,0,1,4.37,2.23c8.11,5.21,16.16,10.51,24.28,15.7,2.35,1.51,4.35,3.61,2.29,5.94-1.1,1.23-4.82,1.63-6.35.71-9-5.37-17.71-11.15-26.36-17.05-1.19-.81-1.92-3-2-4.57s1.08-3.08,1.69-4.62Z
`;
return dvb2;
}
else {
let dvb3 = ``;
return dvb3;
}
}
function animationVariation2Build(num) {
if(num == 1){
let av2b1 = `d="M1683,1180`;
return av2b1;
}
else if(num == 2) {
let av2b2 = `class="tailanim" d="M1540,840`;
return av2b2;
}
}
@kenn.eth quick question: what needs to be displayed in the catalogues page? All the NFTs ever created? Or just the ones for sell?
Thanks
Em
Hey Kenneth, how will my cat be displayed on the page? Do I need to copy all the cat HTML from the factory page into the new MyCats page - like all the head html (including eyes, ears mouth etc).
I’m struggling a bit in understanding how the cat will be displayed visually. Could you please explain it to me.
And how do I retrieve the relevant information of the cat using only the id? Will I need to use instance.methods.getKitty(), which will give me all the info and then somehow combine it with my JS code? How do I connect the Id to the DNA and the indivdual DNA components (numbers) to the corresponding HTML body parts?
I understand the concept of looping through the owners array and then appending each cat, but how to even start getting there is a mystery at the moment.
Just in case, here’s my GitHub page: https://github.com/EmmerichS/HelloKitties
Hey @Emmerich ! I got this example code from @WMXgTW6wh
async function myKitties() {
var arrayId = await instance.methods.tokensOfOwner(user).call();
for (i = 0; i < arrayId.length; i++) {
appendKitty(arrayId[i])
}
}
async function appendKitty(id) {
var kitty = await instance.methods.getKitty(id).call();
appendCat(kitty.genes,id,kitty.generation);
}
So basically what you need is to use the basic structure from the Factory with a single cat, and then use that same HTML to render multiple cats inside a div
The appendCat(kitty.genes,id,kitty.generation) function will contain each cat HTML using unique id to render the cat. So we use our renderCat(catId) function with the given catId to render the design on each created cat Box
function appendCat(genes,id,generation){
//Notice that im using this special quotes in order to write html with break lines
let catBox = `<div id="`+id+`">
<div class="catHead"></div>
<div class="catBody"></div>
<div class="catTail"></div>
</div>`
renderCat(id)
}
Render function will select the correct box and apply styles.
Let me know if this solve your questions.
Hi Kenneth, thanks for the detailed reply. I understand the myKitties() and the appendKitty(id) functions, but still don’t get the appendCat() function. I’ve pasted my code below. Please have a look at what I’m doing wrong.
var web3js = new Web3(Web3.givenProvider);
var instance;
var user;
var contractAddress = "0xAEBc3F9340cd9D52e6722C90c96E987F7A16b9c5";
$(document).ready(function() {
checkAccount();
})
function checkAccount() {
ethereum.request({ method: 'eth_accounts' })
.then(function(accounts) {
let account = accounts[0];
//This console.log is just for my own reference and will be deleted later
console.log(account + " Waddup " + localStorage.getItem("currentAccount"));
//This is where I compare the two addresses to one another. If they are the same I call the connect function which
//will save me the hassle of always having to manually re-connect
if(account == localStorage.getItem("currentAccount")) {
connect();
}
})
.catch((error) => {
console.log(error);
})
}
function connect() {
ethereum.request({ method: 'eth_requestAccounts' })
.then(function(accounts) {
instance = new web3js.eth.Contract(abi, contractAddress, {from: accounts[0]})
user = accounts[0];
//Here I store the address I've just logged in with in localSotrage
localStorage.setItem("currentAccount", accounts[0]);
})
.catch((error) => {
console.log(error);
})
}
async function myKitties() {
var arrayId = await instance.methods.allNFTsPerOwner().call();
for (i = 0; i < arrayId.length; i++) {
appendKitty(arrayId[i])
}
}
async function appendKitty(id) {
var kitty = await instance.methods.getKitty(id).call();
appendCat(kitty.genes, id, kitty.generation);
}
function appendCat(genes, id, generation){
//Notice that im using these special quotes in order to write html with break lines
let catBox = `<div id="`+id+`">
//This is all the HTML for a cat taken from the factory.html page
<div id="cat`+id+`">
<div id="body`+id+`">
<div id="tummy`+id+`">
<div id="decoration`+id+`">
<div id="top_decoration`+id+`"></div>
<div id="middle_decoration`+id+`"></div>
<div id="bottom_decoration`+id+`"></div>
</div>
</div>
</div>
<div id="left_arm`+id+`">
<div id="paw`+id+`"></div>
</div>
<div id="right_arm`+id+`"></div>
<div id="ears`+id+`">
<div class="ear left_ear`+id+`"></div>
<div class="ear right_ear`+id+`"></div>
</div>
<div id="head`+id+`">
<div id="eyes`+id+`">
<div class="eye eye_left`+id+`">
<div class="pupil left_pupil`+id+`">
<div class="pupil left_pupil2`+id+`"></div>
</div>
</div>
<div class="eye eye_right`+id+`">
<div class="pupil right_pupil`+id+`">
<div class="pupil right_pupil2`+id+`"></div>
</div>
</div>
</div>
<div id="mouth_area`+id+`">
<div id="nose`+id+`"></div>
<div id="mouth`+id+`">
<div id="tongue`+id+`"></div>
</div>
</div>
<div id="whiskers`+id+`">
<div id="whiskers_left`+id+`">
<div class="whisker`+id+`"></div>
<div class="whisker`+id+`"></div>
<div class="whisker`+id+`"></div>
</div>
<div id="whiskers_right`+id+`">
<div class="whisker`+id+`"></div>
<div class="whisker`+id+`"></div>
<div class="whisker`+id+`"></div>
</div>
</div>
</div>
<div id="feet`+id+`">
<div id="left_foot`+id+`">
<div id="big_toe_left`+id+`"></div>
<div id="little_toe_left`+id+`"></div>
</div>
<div id="right_foot`+id+`">
<div id="big_toe_right`+id+`"></div>
<div id="little_toe_right`+id+`"></div>
</div>
</div>
</div>
</div>`
document.getElementById("catBoxes").innerHTML += catBox;
renderCat(id)
}
I have some questions:
Shouldn’t I also use “document.getElementById(“catBoxes”).innerHTML += catBox;” to actually display the cat.
renderCat(dna) takes an entire DNA string as an argument, why only use the id here?
What I don’t understand is how the id correlates to the DNA (genes) string for each body part. For the head to be a certain colour I need the first two numbers of the DNY string. How do I get that from just the id?
Also, what is the purpose of “user” in your example of myKitties():
var arrayId = await instance.methods.tokensOfOwner(user).call();
I got an error, because the actual function calling this array doesn’t take an argument.
Also, again, here’s my GitHub: https://github.com/EmmerichS/HelloKitties
Thanks again for all your help so far. I really do appreciate it.