431 lines
16 KiB
JavaScript
431 lines
16 KiB
JavaScript
var colors = Object.values(allColors());
|
|
|
|
function birdDna(dna) {
|
|
var dnaObject = {
|
|
"topFeatherColor": dna.genes.substring(0, 2),
|
|
"bodyFeatherColor": dna.genes.substring(2, 4),
|
|
"topBeakColor": dna.genes.substring(4, 6),
|
|
"bottomBeakColor": dna.genes.substring(6, 8),
|
|
"eyesShape": parseInt(dna.genes.substring(8, 9)),
|
|
"decorationPattern": parseInt(dna.genes.substring(9, 10)),
|
|
"decorationColor": dna.genes.substring(10, 12),
|
|
"decorationMidColor": dna.genes.substring(12, 14),
|
|
"decorationSmallColor": dna.genes.substring(14, 16),
|
|
"animation": parseInt(dna.genes.substring(16, 17)),
|
|
"generation": dna.generation,
|
|
"mum": dna.mumId,
|
|
"dad": dna.dadId
|
|
};
|
|
return dnaObject;
|
|
};
|
|
|
|
function renderBird(boxId, dna, id){
|
|
topFeatherColor(boxId, colors[dna.topFeatherColor], dna.topFeatherColor, id);
|
|
bodyFeatherColor(boxId, colors[dna.bodyFeatherColor],dna.bodyFeatherColor, id);
|
|
topBeakColor(boxId, colors[dna.topBeakColor],dna.topBeakColor, id);
|
|
bottomBeakColor(boxId, colors[dna.bottomBeakColor],dna.bottomBeakColor, id);
|
|
eyesVariation(boxId, dna.eyesShape, id);
|
|
decorationVariation(boxId, dna.decorationPattern, id);
|
|
decorationMainColor(boxId, colors[dna.decorationColor],dna.decorationColor, id);
|
|
middleColor(boxId, colors[dna.decorationMidColor],dna.decorationMidColor, id);
|
|
smallColor(boxId, colors[dna.decorationSmallColor],dna.decorationSmallColor, id);
|
|
animationVariation(boxId, dna.animation, id);
|
|
printGeneration(dna.generation, id);
|
|
printMum(dna.mum, id);
|
|
printDad(dna.dad, id);
|
|
};
|
|
|
|
function topFeatherColor(boxId, color, code, id) {
|
|
$(`${boxId} .feather_top`).css('background', '#' + color);
|
|
$(`${boxId} .feather_bottom`).css('background', '#' + color);
|
|
$('#dnaTopFeather' + id).html(code);
|
|
};
|
|
|
|
function bodyFeatherColor(boxId, color, code, id) {
|
|
$(`${boxId} .bird_body_inner`).css('background', '#' + color);
|
|
$('#dnaBodyFeather' + id).html(code);
|
|
};
|
|
|
|
function topBeakColor(boxId, color, code, id) {
|
|
$(`${boxId} .beak_upper`).css('background', '#' + color);
|
|
$('#dnaTopBeak' + id).html(code);
|
|
};
|
|
|
|
function bottomBeakColor(boxId, color, code, id) {
|
|
$(`${boxId} .beak_lower`).css('background', '#' + color);
|
|
$('#dnaBottomBeak' + id).html(code);
|
|
};
|
|
|
|
function eyesVariation(boxId, num, id) {
|
|
$('#dnaEyesShape' + id).html(num);
|
|
switch (num) {
|
|
case 0:
|
|
basicEyes(boxId);
|
|
$('#bottomeyetext' + id).html('Basic Eyes');
|
|
break;
|
|
case 1:
|
|
basicEyes(boxId);
|
|
$('#bottomeyetext' + id).html('Chilled Eyes');
|
|
eyesType1(boxId);
|
|
break;
|
|
case 2:
|
|
basicEyes(boxId);
|
|
$('#bottomeyetext' + id).html('Eyes Turned Upwards');
|
|
eyesType2(boxId);
|
|
break;
|
|
case 3:
|
|
basicEyes(boxId);
|
|
$('#bottomeyetext' + id).html('Eyes Turned Right');
|
|
eyesType3(boxId);
|
|
break;
|
|
case 4:
|
|
basicEyes(boxId);
|
|
$('#bottomeyetext' + id).html('Eyes Turned Left');
|
|
eyesType4(boxId);
|
|
break;
|
|
case 5:
|
|
basicEyes(boxId);
|
|
$('#bottomeyetext' + id).html('Dazzled Eyes');
|
|
eyesType5(boxId);
|
|
break;
|
|
case 6:
|
|
basicEyes(boxId);
|
|
$('#bottomeyetext' + id).html('Eye Slits');
|
|
eyesType6(boxId);
|
|
break;
|
|
case 7:
|
|
basicEyes(boxId);
|
|
$('#bottomeyetext' + id).html('Masked Eyes');
|
|
eyesType7(boxId);
|
|
break;
|
|
default:
|
|
basicEyes(boxId);
|
|
$('#bottomeyetext' + id).html('Basic Eyes');
|
|
};
|
|
};
|
|
|
|
function basicEyes(boxId) {
|
|
$(`${boxId} .eye`).css({'border-top': 'none', 'border-bottom': 'none',
|
|
'border-left': 'none', 'border-right': 'none', 'border': '0.9em black solid'});
|
|
$(`${boxId} .eye_right .eyebrow`).css({'left': '-1em', 'top': '-1.5em'});
|
|
$(`${boxId} .eye_left .eyebrow`).css({'left': '-3em', 'top': '-1.5em'});
|
|
$(`${boxId} .eye_right .pupil`).css({'left': '1.5em', 'top': '3em'});
|
|
$(`${boxId} .eye_left .pupil`).css({'left': '5em', 'top': '3em'});
|
|
};
|
|
|
|
function eyesType1(boxId) {//Chilled
|
|
$(`${boxId} .eye`).css('border-top', '4em solid');
|
|
$(`${boxId} .eye_right .eyebrow`).css({'left': '-1em', 'top': '-4.5em'});
|
|
$(`${boxId} .eye_left .eyebrow`).css({'left': '-3em', 'top': '-4.5em'});
|
|
$(`${boxId} .eye_right .pupil`).css({'left': '1.5em', 'top': '1em'});
|
|
$(`${boxId} .eye_left .pupil`).css({'left': '5em', 'top': '1em'});
|
|
};
|
|
|
|
function eyesType2(boxId) {//Up
|
|
$(`${boxId} .eye`).css('border-bottom', '4em solid');
|
|
$(`${boxId} .eye_right .eyebrow`).css({'left': '-1em', 'top': '-2em'});
|
|
$(`${boxId} .eye_left .eyebrow`).css({'left': '-3em', 'top': '-2em'});
|
|
$(`${boxId} .eye_right .pupil`).css({'left': '1.5em', 'top': '2em'});
|
|
$(`${boxId} .eye_left .pupil`).css({'left': '5em', 'top': '2em'});
|
|
};
|
|
|
|
function eyesType3(boxId) {//Right
|
|
$(`${boxId} .eye`).css('border-left', '2.5em solid');
|
|
$(`${boxId} .eye_right .eyebrow`).css({'left': '-1em', 'top': '-1.5em'});
|
|
$(`${boxId} .eye_left .eyebrow`).css({'left': '-3em', 'top': '-1.5em'});
|
|
$(`${boxId} .eye_right .pupil`).css({'left': '5em', 'top': '3em'});
|
|
$(`${boxId} .eye_left .pupil`).css({'left': '5em', 'top': '3em'});
|
|
};
|
|
|
|
function eyesType4(boxId) {//Left
|
|
$(`${boxId} .eye`).css('border-right', '2.5em solid');
|
|
$(`${boxId} .eye_right .eyebrow`).css({'left': '-1em', 'top': '-1.5em'});
|
|
$(`${boxId} .eye_left .eyebrow`).css({'left': '-3em', 'top': '-1.5em'});
|
|
$(`${boxId} .eye_right .pupil`).css({'left': '0em', 'top': '3em'});
|
|
$(`${boxId} .eye_left .pupil`).css({'left': '0em', 'top': '3em'});
|
|
};
|
|
|
|
function eyesType5(boxId) {//Dazzled
|
|
$(`${boxId} .eye`).css({'border-top': '4em solid', 'border-bottom': '4em solid'});
|
|
$(`${boxId} .eye_right .eyebrow`).css({'left': '-1em', 'top': '-5.5em'});
|
|
$(`${boxId} .eye_left .eyebrow`).css({'left': '-3em', 'top': '-5.5em'});
|
|
$(`${boxId} .eye_right .pupil`).css({'left': '3em', 'top': '0em'});
|
|
$(`${boxId} .eye_left .pupil`).css({'left': '3em', 'top': '0em'});
|
|
};
|
|
|
|
function eyesType6(boxId) {//Slit
|
|
$(`${boxId} .eye`).css({'border-top': '4em solid', 'border-left': '4em solid',
|
|
'border-right': '4em solid'});
|
|
$(`${boxId} .eye_right .eyebrow`).css({'left': '-4em', 'top': '-5em'});
|
|
$(`${boxId} .eye_left .eyebrow`).css({'left': '-6em', 'top': '-5em'});
|
|
$(`${boxId} .eye_right .pupil`).css({'left': '-0.1em', 'top': '1em'});
|
|
$(`${boxId} .eye_left .pupil`).css({'left': '-0.1em', 'top': '1em'});
|
|
};
|
|
|
|
function eyesType7(boxId) {//Mask
|
|
$(`${boxId} .eye`).css('border', '3em solid');
|
|
$(`${boxId} .eye_right .eyebrow`).css({'left': '-3em', 'top': '-5em'});
|
|
$(`${boxId} .eye_left .eyebrow`).css({'left': '-5em', 'top': '-5em'});
|
|
$(`${boxId} .eye_right .pupil`).css({'left': '1em', 'top': '1em'});
|
|
$(`${boxId} .eye_left .pupil`).css({'left': '1em', 'top': '1em'});
|
|
};
|
|
|
|
function decorationVariation(boxId, num, id) {
|
|
$('#dnaDecorationPattern' + id).html(num)
|
|
switch (num) {
|
|
case 0:
|
|
$('#bottomdecorationpatterntext' + id).html('Basic Decoration');
|
|
resetDecoration(boxId);
|
|
break;
|
|
case 1:
|
|
resetDecoration(boxId);
|
|
$('#bottomdecorationpatterntext' + id).html('Large Spots');
|
|
decorationType1(boxId);
|
|
break;
|
|
case 2:
|
|
resetDecoration(boxId);
|
|
$('#bottomdecorationpatterntext' + id).html('Maximum Spots');
|
|
decorationType2(boxId);
|
|
break;
|
|
case 3:
|
|
resetDecoration(boxId);
|
|
$('#bottomdecorationpatterntext' + id).html('Decoration only at Eyes');
|
|
decorationType3(boxId);
|
|
break;
|
|
case 4:
|
|
resetDecoration(boxId);
|
|
$('#bottomdecorationpatterntext' + id).html('Decoration on Back only');
|
|
decorationType4(boxId);
|
|
break;
|
|
case 5:
|
|
resetDecoration(id);
|
|
$('#bottomdecorationpatterntext' + id).html('No Decoration');
|
|
decorationType5(boxId);
|
|
break;
|
|
case 6:
|
|
resetDecoration(boxId);
|
|
$('#bottomdecorationpatterntext' + id).html('Cross Decoration');
|
|
decorationType6(boxId);
|
|
break;
|
|
case 7:
|
|
resetDecoration(boxId);
|
|
$('#bottomdecorationpatterntext' + id).html('Cross & Eyes Decoration');
|
|
decorationType7(boxId);
|
|
break;
|
|
default:
|
|
resetDecoration(boxId);
|
|
$('#bottomdecorationpatterntext' + id).html('Basic Decoration');
|
|
};
|
|
};
|
|
|
|
function resetDecoration(boxId) {
|
|
$(`${boxId} .deco_1`).css({'display': 'initial', 'transform':
|
|
'rotate(-25deg) scaleY(1) translateX(0em) translateY(0em)'});
|
|
$(`${boxId} .deco_2`).css({'display': 'initial', 'transform':
|
|
'rotate(-15deg) scaleY(1) translateX(0em) translateY(0em)'});
|
|
$(`${boxId} .deco_3`).css({'display': 'initial', 'transform':
|
|
'rotate(-10deg) scaleY(1) translateY(0em)'});
|
|
$(`${boxId} .deco_4`).css({'display': 'initial', 'transform':
|
|
'rotate(-10deg) scaleY(1) translateY(0em)'});
|
|
};
|
|
|
|
function decorationType1(boxId) {//Large
|
|
$(`${boxId} .deco_1`).css('transform', 'rotate(-25deg) scaleY(2)');
|
|
$(`${boxId} .deco_2`).css('transform', 'rotate(-15deg) scaleY(2)');
|
|
$(`${boxId} .deco_3`).css('transform', 'rotate(-10deg) scaleY(2)');
|
|
$(`${boxId} .deco_4`).css('transform', 'rotate(-10deg) scaleY(2)');
|
|
};
|
|
|
|
function decorationType2(boxId) {//Max
|
|
$(`${boxId} .deco_1`).css('transform', 'rotate(-25deg) scaleY(3) translateY(-2.5em)');
|
|
$(`${boxId} .deco_2`).css('transform', 'rotate(-15deg) scaleY(3) translateY(-2.5em)');
|
|
$(`${boxId} .deco_3`).css('transform', 'rotate(-10deg) scaleY(3) translateY(-2.5em)');
|
|
$(`${boxId} .deco_4`).css('transform', 'rotate(-10deg) scaleY(3) translateY(-1.8em)');
|
|
};
|
|
|
|
function decorationType3(boxId) {//Eyes Only
|
|
$(`${boxId} .deco_1`).css('display', 'none');
|
|
$(`${boxId} .deco_2`).css('display', 'none');
|
|
$(`${boxId} .deco_3`).css('transform', 'rotate(-10deg) scaleY(3) translateY(-2.5em)');
|
|
$(`${boxId} .deco_4`).css('transform', 'rotate(-10deg) scaleY(3) translateY(-1.8em)');
|
|
};
|
|
|
|
function decorationType4(boxId) {//Back Only
|
|
$(`${boxId} .deco_1`).css('transform', 'rotate(-25deg) scaleY(3) translateY(-2.5em)');
|
|
$(`${boxId} .deco_2`).css('transform', 'rotate(-15deg) scaleY(3) translateY(-2.5em)');
|
|
$(`${boxId} .deco_3`).css('display', 'none');
|
|
$(`${boxId} .deco_4`).css('display', 'none');
|
|
};
|
|
|
|
function decorationType5(boxId) {//None
|
|
$(`${boxId} .deco_1`).css('display', 'none');
|
|
$(`${boxId} .deco_2`).css('display', 'none');
|
|
$(`${boxId} .deco_3`).css('display', 'none');
|
|
$(`${boxId} .deco_4`).css('display', 'none');
|
|
};
|
|
|
|
function decorationType6(boxId) {//Cross
|
|
$(`${boxId} .deco_1`).css('transform',
|
|
'rotate(90deg) scaleY(3) translateX(-9em) translateY(-0.5em)');
|
|
$(`${boxId} .deco_2`).css('transform',
|
|
'rotate(0deg) scaleY(3) translateX(-3.5em) translateY(-2.5em)');
|
|
$(`${boxId} .deco_3`).css('display', 'none');
|
|
$(`${boxId} .deco_4`).css('display', 'none');
|
|
}
|
|
;
|
|
function decorationType7(boxId) {//Cross & Eyes
|
|
$(`${boxId} .deco_1`).css('transform',
|
|
'rotate(90deg) scaleY(3) translateX(-9em) translateY(-0.5em)');
|
|
$(`${boxId} .deco_2`).css('transform',
|
|
'rotate(0deg) scaleY(3) translateX(-3.5em) translateY(-2.5em)');
|
|
$(`${boxId} .deco_3`).css('transform', 'rotate(-10deg) scaleY(2)');
|
|
$(`${boxId} .deco_4`).css('transform', 'rotate(-10deg) scaleY(2)');
|
|
};
|
|
|
|
function decorationMainColor(boxId, color, code, id) {
|
|
$(`${boxId} .deco_3`, `${boxId} .deco_4`).css('background', '#' + color);
|
|
$('#dnaDecorationAtEye' + id).html(code);
|
|
};
|
|
|
|
function middleColor(boxId, color, code, id) {
|
|
$(`${boxId} .deco_2`).css('background', '#' + color);
|
|
$('#dnaDecorationMid' + id).html(code);
|
|
};
|
|
|
|
function smallColor(boxId, color, code, id) {
|
|
$(`${boxId} .deco_1`).css('background', '#' + color);
|
|
$('#dnaDecorationSmall' + id).html(code);
|
|
};
|
|
|
|
function animationVariation(boxId, num, id) {
|
|
$('#dnaAnimation' + id).html(num);
|
|
switch (num) {
|
|
case 0:
|
|
resetAnimation(boxId);
|
|
$('#bottomanimationtext' + id).html('No animation');
|
|
break;
|
|
case 1:
|
|
resetAnimation(boxId);
|
|
$('#bottomanimationtext' + id).html('Animation: Kick');
|
|
animationType1(boxId);
|
|
break;
|
|
case 2:
|
|
resetAnimation(boxId);
|
|
$('#bottomanimationtext' + id).html('Animation: Float');
|
|
animationType2(boxId);
|
|
break;
|
|
case 3:
|
|
resetAnimation(boxId);
|
|
$('#bottomanimationtext' + id).html('Animation: Compress');
|
|
animationType3(boxId);
|
|
break;
|
|
case 4:
|
|
resetAnimation(boxId);
|
|
$('#bottomanimationtext' + id).html('Animation: Speak');
|
|
animationType4(boxId);
|
|
break;
|
|
case 5:
|
|
resetAnimation(boxId);
|
|
$('#bottomanimationtext' + id).html('Animation: Wag');
|
|
animationType5(boxId);
|
|
break;
|
|
case 6:
|
|
resetAnimation(boxId);
|
|
$('#bottomanimationtext' + id).html('Animation: Attention');
|
|
animationType6(boxId);
|
|
break;
|
|
case 7:
|
|
resetAnimation(boxId);
|
|
$('#bottomanimationtext' + id).html('Combi Animation');
|
|
animationType7(boxId);
|
|
break;
|
|
case 8:
|
|
resetAnimation(boxId);
|
|
$('#bottomanimationtext' + id).html('Eyes Follow Mouse');
|
|
animationType8(boxId);
|
|
break;
|
|
default:
|
|
resetAnimation(boxId);
|
|
$('#bottomanimationtext' + id).html('No animation');
|
|
};
|
|
};
|
|
|
|
function resetAnimation(boxId) {
|
|
$(`${boxId} .bird`).removeClass('slowRotateBird floatingBird compressingBird');
|
|
$(`${boxId} .beak_upper`).removeClass('upperSpeakingBird');
|
|
$(`${boxId} .beak_lower`).removeClass('lowerSpeakingBird');
|
|
$(`${boxId} .tail_top`).removeClass('topWaggingTail');
|
|
$(`${boxId} .tail_middle`).removeClass('middleWaggingTail');
|
|
$(`${boxId} .tail_bottom`).removeClass('bottomWaggingTail');
|
|
$(`${boxId} .feather_top`).removeClass('topAttention');
|
|
$(`${boxId} .feather_bottom`).removeClass('bottomAttention');
|
|
$(`${boxId} .pupil`).removeClass('eyesFollow');
|
|
};
|
|
|
|
function animationType1(boxId) {
|
|
$(`${boxId} .bird`).addClass('slowRotateBird');
|
|
};
|
|
|
|
function animationType2(boxId) {
|
|
$(`${boxId} .bird`).addClass('floatingBird');
|
|
};
|
|
|
|
function animationType3(boxId) {
|
|
$(`${boxId} .bird`).addClass('compressingBird');
|
|
};
|
|
|
|
function animationType4(boxId) {
|
|
$(`${boxId} .beak_upper`).addClass('upperSpeakingBird');
|
|
$(`${boxId} .beak_lower`).addClass('lowerSpeakingBird');
|
|
};
|
|
|
|
function animationType5(boxId) {
|
|
$(`${boxId} .tail_top`).addClass('topWaggingTail');
|
|
$(`${boxId} .tail_middle`).addClass('middleWaggingTail');
|
|
$(`${boxId} .tail_bottom`).addClass('bottomWaggingTail');
|
|
};
|
|
|
|
function animationType6(boxId) {
|
|
$(`${boxId} .feather_top`).addClass('topAttention');
|
|
$(`${boxId} .feather_bottom`).addClass('bottomAttention');
|
|
};
|
|
|
|
function animationType7(boxId) {
|
|
$(`${boxId} .bird`).addClass('floatingBird');
|
|
$(`${boxId} .beak_upper`).addClass('upperSpeakingBird');
|
|
$(`${boxId} .beak_lower`).addClass('lowerSpeakingBird');
|
|
$(`${boxId} .tail_top`).addClass('topWaggingTail');
|
|
$(`${boxId} .tail_middle`).addClass('middleWaggingTail');
|
|
$(`${boxId} .tail_bottom`).addClass('bottomWaggingTail');
|
|
$(`${boxId} .feather_top`).addClass('topAttention');
|
|
$(`${boxId} .feather_bottom`).addClass('bottomAttention');
|
|
};
|
|
|
|
function animationType8(boxId) {
|
|
basicEyes(boxId);
|
|
$(`${boxId} .pupil`).addClass('eyesFollow');
|
|
};
|
|
|
|
function printGeneration(genNo, id) {
|
|
$('#generation' + id).html(genNo);
|
|
};
|
|
|
|
function printMum(mum, id) {
|
|
var print;
|
|
if (mum == 0) {
|
|
print = 'n/a'
|
|
} else {
|
|
print = mum;
|
|
}
|
|
$('#mum' + id).html(print);
|
|
};
|
|
|
|
function printDad(dad, id) {
|
|
var print;
|
|
if (dad == 0) {
|
|
print = 'n/a'
|
|
} else {
|
|
print = dad;
|
|
};
|
|
$('#dad' + id).html(print);
|
|
}; |