neo:
Hey Ravinder, I implements the badges you requested (badged in no particular order, originally by alphabet because just prototype):
With this rough but working PHP code:
<?php
$color = array();
if ($modaluser['posts'] > 1000) {
$color['fauser'] = 'black';
} elseif ($modaluser['posts'] > 500) {
$color['fauser'] = 'indigo';
} elseif ($modaluser['posts'] > 100) {
$color['fauser'] = 'blue';
} elseif ($modaluser['posts'] > 10) {
$color['fauser'] = 'limegreen';
} else {
$color['fauser'] = 'lightgray';
}
if ($modaluser['posts'] > 0) {
$color['faaward'] = 'limegreen';
}
if ($modaluser['posts'] > 99) {
$color['fajediorder'] = 'blue';
}
if ($modaluser['posts'] > 499) {
$color['faphoenix'] = 'indigo';
}
if ($modaluser['posts'] > 999) {
$color['fajedi'] = 'black';
}
if ($modaluser['posts'] > 9999) {
$color['faatom'] = 'black';
}
$badgejs = '<script>';
$badgejs .= 'var badge = [];';
$badgejs .= 'var mbclass = [];';
$badgejs .= 'badge["posts"] = "' . $color[fauser] . '";';
$badgejs .= 'badge["firstpost"] = "' . $color[faaward] . '";';
$badgejs .= 'badge["100posts"] = "' . $color[fajediorder] . '";';
$badgejs .= 'badge["500posts"] = "' . $color[faphoenix] . '";';
$badgejs .= 'badge["1000posts"] = "' . $color[fajedi] . '";';
$badgejs .= 'badge["10000posts"] = "' . $color[faatom] . '";';
$badgejs .= '</script>';
jQuery:
$(function () {
$('.fa-award').css("color", badge["firstpost"]);
$('.fa-award').css("cursor", "pointer").attr("title", "First Post Completed!");
$('.fa-award').closest('div').find('.fa-circle').css("color", badge["firstpost"]);
$('.fa-jedi-order').css("color", badge["100posts"]);
$('.fa-jedi-order').css("cursor", "pointer").attr("title", "100 Posts Completed!");
$('.fa-jedi-order').closest('div').find('.fa-circle').css("color", badge["100posts"]);
$('.fa-phoenix-squadron').css("color", badge["500posts"]);
$('.fa-phoenix-squadron').css("cursor", "pointer").attr("title", "500 Posts Completed!");
$('.fa-phoenix-squadron').closest('div').find('.fa-circle').css("color", badge["500posts"]);
$('.fa-phoenix-squadron').css("color", badge["500posts"]);
$('.fa-phoenix-squadron').css("cursor", "pointer").attr("title", "500 Posts Completed!");
$('.fa-phoenix-squadron').closest('div').find('.fa-circle').css("color", badge["500posts"]);
$('.fa-jedi').css("color", badge["1000posts"]);
$('.fa-jedi').css("cursor", "pointer").attr("title", "1000 Posts Completed!");
$('.fa-jedi').closest('div').find('.fa-circle').css("color", badge["1000posts"]);
$('.fa-atom').css("color", badge["10000posts"]);
$('.fa-atom').css("cursor", "pointer").attr("title", "10000 Posts Completed!");
$('.fa-atom').closest('div').find('.fa-circle').css("color", badge["10000posts"]);
$('.fa-child').css("color", badge["posts"]);
$('.fa-child').closest('div').find('.fa-circle').css("color", badge["posts"]);
});
Cheers!
Thanks for the good ideas!
Your Welcome Neo.
I just written a sample code by copying your code(since I am not sure how data is coming to php code etc so tried a bit). Here I am trying to go through an array which is having TAGs values for user and checking if for a specific tag user is having more than 999 thanks then do some action.
<?php
$color = array();
$tag_array =user's tags values(may be coming from DB's queries?)
foreach($tag_array as $value) { {
if ($modaluser['thanks'] > 999 && $value>999) {
$color['fauser'] = 'black';
$color['faaward'] = 'gold';
}
else {
$color['fauser'] = 'lightgray';
}
}
It is just a simple try and I have NOT at all tested it.
Thanks,
Neo
December 29, 2018, 3:07am
22
I understand, I will try to find time to code the "thank you" award series later today or at least by tomorrow.
Neo
December 29, 2018, 3:11am
23
Seriously,
I just realized that when the prototype badge system is finished, someone could easily show there badge grid to a potential employer.
Might help them a "little bit" ;
2 Likes
Neo
December 29, 2018, 3:47am
25
OK.... since "thanks" is really important, I will prototype six badges for "received thanks", per this PHP code:
<?php
$color['fathumbsup'] = 'lightgray';
$color['fatrophy'] = 'lightgray';
$color['fachalkboardteacher'] = 'lightgray';
$color['fashieldalt'] = 'lightgray';
$color['fastroopwafel'] = 'lightgray';
$color['fafirstorderalt'] = 'lightgray';
if ($modaluser['post_thanks_thanked_times'] > 0) {
$color['fathumbsup'] = 'limegreen';
}
if ($modaluser['post_thanks_thanked_times'] > 99) {
$color['fathumbsup'] = 'blue';
$color['fatrophy'] = 'black';
}
if ($modaluser['post_thanks_thanked_times'] > 999) {
$color['fathumbsup'] = 'indigo';
$color['fachalkboardteacher'] = 'black';
}
if ($modaluser['post_thanks_thanked_times'] > 1999) {
$color['fathumbsup'] = 'black';
$color['fashieldalt'] = 'black';
}
if ($modaluser['post_thanks_thanked_times'] > 2999) {
$color['fastroopwafel'] = 'black';
}
if ($modaluser['post_thanks_thanked_times'] > 3999) {
$color['fafirstorderalt'] = 'black';
}
$badgejs .= 'badge["thanked"] = "' . $color['fathumbsup'] . '";';
$badgejs .= 'badge["100thanked"] = "' . $color['fatrophy'] . '";';
$badgejs .= 'badge["1000thanked"] = "' . $color['fachalkboardteacher'] . '";';
$badgejs .= 'badge["2000thanked"] = "' . $color['fashieldalt'] . '";';
$badgejs .= 'badge["3000thanked"] = "' . $color['fastroopwafel'] . '";';
$badgejs .= 'badge["4000thanked"] = "' . $color['fafirstorderalt'] . '";';
;
Will write the jQuery for this next.
Neo
December 29, 2018, 4:10am
26
Draft jQuery for six thanked badged done:
$('.fa-thumbs-up').css("color",badge["thanked"]);
$('.fa-thumbs-up').css("cursor","pointer").attr("title","Received First Thanks!");
$('.fa-thumbs-up').closest('div').find('.fa-circle').css("color",badge["thanked"]);
$('.fa-trophy').css("color",badge["100thanked"]);
$('.fa-trophy').css("cursor","pointer").attr("title","Received 100 Thanks!");
$('.fa-trophy').closest('div').find('.fa-circle').css("color",badge["100thanked"]);
$('.fa-chalkboard-teacher').css("color",badge["1000thanked"]);
$('.fa-chalkboard-teacher').css("cursor","pointer").attr("title","Received 1000 Thanks!");
$('.fa-chalkboard-teacher').closest('div').find('.fa-circle').css("color",badge["1000thanked"]);
$('.fa-shield-alt').css("color",badge["2000thanked"]);
$('.fa-shield-alt').css("cursor","pointer").attr("title","Received 2000 Thanks!");
$('.fa-shield-alt').closest('div').find('.fa-circle').css("color",badge["2000thanked"]);
$('.fa-stroopwafel').css("color",badge["3000thanked"]);
$('.fa-stroopwafel').css("cursor","pointer").attr("title","Received 3000 Thanks!");
$('.fa-stroopwafel').closest('div').find('.fa-circle').css("color",badge["3000thanked"]);
$('.fa-first-order-alt').css("color",badge["4000thanked"]);
$('.fa-first-order-alt').css("cursor","pointer").attr("title","Received 4000 Thanks!");
$('.fa-first-order-alt').closest('div').find('.fa-circle').css("color",badge["4000thanked"]);
Neo
December 29, 2018, 4:26am
27
Great.. six more protos done.... 17 out of 48... this is the addition of six new badges related to thanks.
Seems to work as designed.
1 Like
Awesome, I confirm it seems to be working for me.
Thanks,
Neo
December 29, 2018, 4:45am
29
Thanks!
Yeah, 17 done, 31 to go. I think I will add another top level badge for thanks . for the 5000 mark.
Neo
December 29, 2018, 5:38am
30
OK.. just idling ... made two trival badges related to the user profile, contact and info field, not really necesary, but wanted to cover the UIM:
<?php
$idfields = 0;
if ($modaluserfields['field1']) {
$idfields++;
}
if ($modaluserfields['field2']) {
$idfields++;
}
if ($modaluserfields['field3']) {
$idfields++;
}
if ($modaluserfields['field4']) {
$idfields++;
}
switch ($idfields) {
case 0:
$color['faidbadge'] = 'lightgray';
break;
case 1:
$color['faidbadge'] = 'limegreen';
break;
case 2:
$color['faidbadge'] = 'blue';
break;
case 3:
$color['faidbadge'] = 'indigo';
break;
case 4:
$color['faidbadge'] = 'black';
break;
}
$contacts = 0;
if ($show['pm']) {
$contacts++;
}
if ($show['email']) {
$contacts++;
}
switch ($contacts) {
case 0:
$color['faaddressbook'] = 'lightgray';
break;
case 1:
$color['faaddressbook'] = 'blue';
break;
case 2:
$color['faaddressbook'] = 'black';
break;
default:
$color['faaddressbook'] = 'lightgray';
}
<?php
$badgejs .= 'badge["contacttotal"] = "' . $contacts . '";';
$badgejs .= 'badge["profilenumber"] = "' . $idfields . '";';
$('.fa-id-badge').css("color",badge["profile"]);
$('.fa-id-badge').css("cursor","pointer").attr("title","Profile Fields Completed: "+badge["profilenumber"]);
$('.fa-id-badge').closest('div').find('.fa-circle').css("color",badge["profile"]);
$('.fa-address-book').css("color",badge["contact"]);
$('.fa-address-book').css("cursor","pointer").attr("title","Contacts: "+badge["contacttotal"]);
$('.fa-address-book').closest('div').find('.fa-circle').css("color",badge["contact"]);
No really necessary, but it's covered now... and 19 out of 48 badge protos are done.
Neo
December 29, 2018, 5:42am
31
Just doing some clean up, added to profile field related badges:
<?php
$idfields = 0;
if ($modaluserfields['field1']) {
$idfields++;
}
if ($modaluserfields['field2']) {
$idfields++;
}
if ($modaluserfields['field3']) {
$idfields++;
}
if ($modaluserfields['field4']) {
$idfields++;
}
switch ($idfields) {
case 0:
$color['faidbadge'] = 'lightgray';
break;
case 1:
$color['faidbadge'] = 'limegreen';
break;
case 2:
$color['faidbadge'] = 'blue';
break;
case 3:
$color['faidbadge'] = 'indigo';
break;
case 4:
$color['faidbadge'] = 'black';
break;
}
$contacts = 0;
if ($show['pm']) {
$contacts++;
}
if ($show['email']) {
$contacts++;
}
if($modaluser[homepage]){
$contacts++;
}
switch ($contacts) {
case 0:
$color['faaddressbook'] = 'lightgray';
break;
case 1:
$color['faaddressbook'] = 'limegreen';
break;
case 2:
$color['faaddressbook'] = 'blue';
break;
case 3:
$color['faaddressbook'] = 'black';
break;
default:
$color['faaddressbook'] = 'lightgray';
}
$badgejs .= 'badge["profile"] = "' . $color['faidbadge'] . '";';
$badgejs .= 'badge["contact"] = "' . $color['faaddressbook'] . '";';
$badgejs .= 'badge["contacttotal"] = "' . $contacts . '";';
$badgejs .= 'badge["profilenumber"] = "' . $idfields . '";';
jQuery:
$('.fa-id-badge').css("color",badge["profile"]);
$('.fa-id-badge').css("cursor","pointer").attr("title","Profile Fields Completed: "+badge["profilenumber"]);
$('.fa-id-badge').closest('div').find('.fa-circle').css("color",badge["profile"]);
$('.fa-address-book').css("color",badge["contact"]);
$('.fa-address-book').css("cursor","pointer").attr("title","Contacts: "+badge["contacttotal"]);
$('.fa-address-book').closest('div').find('.fa-circle').css("color",badge["contact"]);
19 of 48 badges done.... (I think, lost count LOL)
Neo
December 29, 2018, 8:20am
32
Two badges added for bits... bringing us to 21 out of 24 prototype badges. Maybe expand bits to more more badge later, let's see:
<?php
$color['fabtc'] = 'lightgray';
$color['fauniversity'] = 'lightgray';
if ($total_bits < -20000) {
$color['fabtc'] = 'red';
}
else if ($total_bits < 0) {
$color['fabtc'] = 'dark orange';
}
if ($total_bits > 0) {
$color['fabtc'] = 'limegreen';
}
if ($total_bits > 100000) {
$color['fabtc'] = 'blue';
}
if ($total_bits > 1000000) {
$color['fabtc'] = 'indigo';
}
if ($total_bits > 10000000) {
$color['fabtc'] = 'black';
$color['fauniversity'] = 'blue';
}
if ($total_bits > 1000000000) {
$color['fauniversity'] = 'blue';
}
$badgejs .= 'badge["fabtc"] = "' . $color['fabtc'] . '";';
$badgejs .= 'badge["fauniversity"] = "' . $color['fauniversity'] . '";';
$badgejs .= 'badge["bits"] = "' . $totalbits . '";';
jQuery:
$('.fa-btc').css("color",badge["fabtc"]);
$('.fa-btc').css("cursor","pointer").attr("title",badge["bits"] + " Bits in the Bank");
$('.fa-btc').closest('div').find('.fa-circle').css("color",badge["fabtc"]);
$('.fa-university').css("color",badge["fauniversity"]);
$('.fa-university').css("cursor","pointer").attr("title","Bits Banker");
$('.fa-university').closest('div').find('.fa-circle').css("color",badge["fauniversity"]);
Neo
December 29, 2018, 9:07am
33
Certainly subject to change, here is the prototype "current activity badge"
<?php
$color['fausergraduate'] = 'lightgray';
$time_inactive = time() - $modaluser['lastactivity'];
$week = 7 * 24 * 60 * 60;
$month = 4* $week;
$quarter = $week * (52 / 4);
$halfyear = $week * (52 / 2);
$year = $week * 52;
$twoyears = 2 * $year;
$threeyears = 3 * $year;
if ($time_inactive < $week) {
$color['fausergraduate'] = 'black';
} elseif ($time_inactive < $month) {
$color['fausergraduate'] = 'indigo';
} elseif ($time_inactive < $quarter) {
$color['fausergraduate'] = 'blue';
} elseif ($time_inactive < $halfyear) {
$color['fausergraduate'] = 'green';
} elseif ($time_inactive < $year) {
$color['fausergraduate'] = 'lightgray';
} elseif ($time_inactive < $twoyears) {
$color['fausergraduate'] = 'darkorange';
} elseif ($time_inactive < $threeyears) {
$color['fausergraduate'] = 'red';
}
jQuery:
$('.fa-user-graduate').css("color",badge["activity"]);
$('.fa-user-graduate').css("cursor","pointer").attr("title","Current Forum Activity");
$('.fa-user-graduate').closest('div').find('.fa-circle').css("color",badge["activity"]);
Neo
December 29, 2018, 9:09am
34
Subject to change, here is the proto "forum activity badge" logic:
<?php
$color['fausergraduate'] = 'lightgray';
$time_inactive = time() - $modaluser['lastactivity'];
$week = 7 * 24 * 60 * 60;
$month = 4* $week;
$quarter = $week * (52 / 4);
$halfyear = $week * (52 / 2);
$year = $week * 52;
$twoyears = 2 * $year;
$threeyears = 3 * $year;
if ($time_inactive < $week) {
$color['fausergraduate'] = 'black';
} elseif ($time_inactive < $month) {
$color['fausergraduate'] = 'indigo';
} elseif ($time_inactive < $quarter) {
$color['fausergraduate'] = 'blue';
} elseif ($time_inactive < $halfyear) {
$color['fausergraduate'] = 'green';
} elseif ($time_inactive < $year) {
$color['fausergraduate'] = 'lightgray';
} elseif ($time_inactive < $twoyears) {
$color['fausergraduate'] = 'darkorange';
} elseif ($time_inactive < $threeyears) {
$color['fausergraduate'] = 'red';
}
$badgejs .= 'badge["activity"] = "' . $color['fausergraduate'] . '";';
jQuery:
$('.fa-user-graduate').css("color",badge["activity"]);
$('.fa-user-graduate').css("cursor","pointer").attr("title","Current Forum Activity");
$('.fa-user-graduate').closest('div').find('.fa-circle').css("color",badge["activity"]);
Neo
December 29, 2018, 9:43am
35
Great. I'm nearly done with the first half of this badge system prototyping (and this thread, will start a new one).
Just added another badge based on posts per day:
<?php
$color['fabolt'] = 'lightgray';
$activity = floatval($prepared['postsperday']);
if ($activity < 0.02) {
$color['fabolt'] = 'red';
} elseif ($activity < 0.1) {
$color['fabolt'] = 'darkorange';
} elseif ($activity < 0.5) {
$color['fabolt'] = 'green';
} elseif ($activity < 1.0) {
$color['fabolt'] = 'blue';
} elseif ($activity < 2.0) {
$color['fabolt'] = 'indigo';
} else {
$color['fabolt'] = 'black';
}
jQuery:
$('.fa-bolt').css("color",badge["ppd"]);
$('.fa-bolt').css("cursor","pointer").attr("title", badge["ppdval"]+ " Posts Per day");
$('.fa-bolt').closest('div').find('.fa-circle').css("color",badge["ppd"]);
Neo
December 30, 2018, 2:55am
36
Have added one simple line of jQuery so that all badges in the grid are marked "Reserved" when they are not yet active:
$('.fa-stack').find('.fas, .fab').css("cursor","pointer").attr("title","Reserved");
Neo
December 30, 2018, 4:42am
37
Hey Ravinder,
I just added two lines of jQuery to the code to make all "Reserved" badges less visible, so you can easily see the difference between the reserved (not yet defined) badges and the badges with logic (defined):
$( "i[title='Reserved']" ).closest('div').find('.far').css("opacity","0.3");
$( "i[title='Reserved']" ).css("opacity","0.3");
Hope this helps.
You can see where Neo has all but three badges (Thanks 2000, 3000, 4000):
RudiC has all but three badges (Formulator, Admin, Dev Ops Team)
Hopefully this is even more clear
1 Like
Neo
December 30, 2018, 4:55am
38
Here is the current jQuery file for the above:
https://www.unix.com/scripts/js/badge.js?v=31
I'm about to call is "done" for Phase I unless anyone, including you, have logic changes for these first 24 out of 48 badges.
I think, now, the extra opacity for reserved badges is "good enough for now", and so no real reason to go to 35 badges or a reduced grid size.
Neo
December 30, 2018, 9:15am
39
Just added badge number 25... The Knight .... for Threads Started:
<?php
$queryc = "SELECT COUNT(threadid) AS threadcount FROM thread WHERE postuserid='" . $uid . "'";
$resultsc = $db->query_first_slave($queryc);
if ($resultsc['threadcount'] > 500) {
$color['faknight'] = 'black';
} elseif ($resultsc['threadcount'] > 250) {
$color['faknight'] = 'indigo';
} elseif ($resultsc['threadcount'] > 100) {
$color['faknight'] = 'blue';
} elseif ($resultsc['threadcount'] > 1) {
$color['faknight'] = 'limegreen';
} else {
$color['faknight'] = 'lightgray';
}
jQuery:
$('.fa-chess-knight').css("color",badge["starter"]);
$('.fa-chess-knight').css("cursor","pointer").attr("title", badge["starterval"]+ " Discussions Started");
$('.fa-chess-knight').closest('div').find('.fa-circle').css("color",badge["starter"]);
Neo
December 30, 2018, 9:43am
40
Draft prototype badge 26 "Attachments Uploaded" ....
<?php
if ($userattachments['totalattachments'] > 500) {
$color['fadownload'] = 'black';
} elseif ($userattachments['totalattachments'] > 100) {
$color['fadownload'] = 'indigo';
} elseif ($userattachments['totalattachments'] > 10) {
$color['fadownload'] = 'blue';
} elseif ($userattachments['totalattachments'] > 1) {
$color['fadownload'] = 'limegreen';
} else {
$color['fadownload'] = 'lightgray';
}
$badgejs .= 'badge["fadownload"] = "' . $color['fadownload'] . '";';
$badgejs .= 'badge["fadownloadval"] = "' . $userattachments['totalattachments'] . '";'
jQuery:
$('.fa-download').css("color",badge["fadownload"]);
$('.fa-download').css("cursor","pointer").attr("title", badge["fadownloadval"]+ " Attachments Uploaded");
$('.fa-download').closest('div').find('.fa-circle').css("color",badge["fadownload"]);
