From 1811287ffa3477d0eed0bd9f4ab0a7f1733e9794 Mon Sep 17 00:00:00 2001
From: Victor Costa <vfcosta@gmail.com>
Date: Mon, 6 Apr 2015 15:43:31 -0300
Subject: [PATCH] Display gamification status for user

---
 lib/gamification_plugin.rb                        |  2 +-
 public/images/badge-icon.png                      | Bin 0 -> 1906 bytes
 public/images/level-icon.png                      | Bin 0 -> 676 bytes
 public/images/points-icon.png                     | Bin 0 -> 665 bytes
 public/main.js                                    | 14 +++++++++++++-
 public/style.css                                  | 33 ++++++++++++++++++++++++++++++++-
 test/unit/gamification_plugin_test.rb             |  4 ++--
 views/gamification/display_notifications.html.erb |  8 +++++++-
 8 files changed, 55 insertions(+), 6 deletions(-)
 create mode 100644 public/images/badge-icon.png
 create mode 100644 public/images/level-icon.png
 create mode 100644 public/images/points-icon.png

diff --git a/lib/gamification_plugin.rb b/lib/gamification_plugin.rb
index 5d99d66..ae302cd 100644
--- a/lib/gamification_plugin.rb
+++ b/lib/gamification_plugin.rb
@@ -10,7 +10,7 @@ class GamificationPlugin < Noosfero::Plugin
 
   def user_data_extras
     proc do
-      current_person.present? ? {:points => current_person.points} : {}
+      current_person.present? ? {:gamification_plugin => {:points => current_person.points, :badges => current_person.badges, :level => current_person.level}} : {}
     end
   end
 
diff --git a/public/images/badge-icon.png b/public/images/badge-icon.png
new file mode 100644
index 0000000..c1aaf2f
Binary files /dev/null and b/public/images/badge-icon.png differ
diff --git a/public/images/level-icon.png b/public/images/level-icon.png
new file mode 100644
index 0000000..6c89859
Binary files /dev/null and b/public/images/level-icon.png differ
diff --git a/public/images/points-icon.png b/public/images/points-icon.png
new file mode 100644
index 0000000..f32f54b
Binary files /dev/null and b/public/images/points-icon.png differ
diff --git a/public/main.js b/public/main.js
index 4f0c2d1..d04d5a3 100644
--- a/public/main.js
+++ b/public/main.js
@@ -1,6 +1,6 @@
 var gamificationPlugin = {
 
-  display_notification: function(html) {
+  displayNotification: function(html) {
     var n = noty({
       text: html,
       type: 'success',
@@ -14,5 +14,17 @@ var gamificationPlugin = {
         speed : 500
       }
     });
+  },
+  displayUserInfo: function(gamificationPlugin) {
+    var info = jQuery('.gamification-plugin.user-info-template').clone();
+    info.find('.badges .value').text(gamificationPlugin.badges.length);
+    info.find('.points .value').text(gamificationPlugin.points);
+    info.find('.level .value').text(gamificationPlugin.level);
+    info.insertAfter('#user .logged-in #homepage-link');
+    info.show();
   }
 }
+
+jQuery(window).bind("userDataLoaded", function(event, data) {
+  gamificationPlugin.displayUserInfo(data.gamification_plugin);
+});
diff --git a/public/style.css b/public/style.css
index 8b90eaf..c765912 100644
--- a/public/style.css
+++ b/public/style.css
@@ -1,7 +1,38 @@
+#user .gamification-plugin.user-info-template {
+  margin-left: 2px;
+  text-decoration: none;
+  padding: 2px;
+}
+#user .gamification-plugin.user-info-template:hover {
+  background-color: rgb(228, 228, 228);
+}
+.gamification-plugin.user-info-template .icon {
+  background-size: 14px;
+  background-repeat: no-repeat;
+  width: 17px;
+  display: inline-block;
+  border: 0;
+}
+.gamification-plugin.user-info-template .icon:hover {
+  background-color: transparent;
+}
+.gamification-plugin.user-info-template .level .icon {
+  background-image: url(/plugins/gamification/images/level-icon.png);
+}
+.gamification-plugin.user-info-template .badges .icon  {
+  background-image: url(/plugins/gamification/images/badge-icon.png);
+}
+.gamification-plugin.user-info-template .points .icon  {
+  background-image: url(/plugins/gamification/images/points-icon.png);
+}
+
 .gamification-notification .badge .image {
   width: 110px;
   height: 80px;
-  background: gray;
+  background-image: url(/plugins/gamification/images/badge-icon.png);
+  background-repeat: no-repeat;
+  background-position: center;
+  background-color: rgba(128, 128, 128, 0.25);
   margin-left: auto;
   margin-right: auto;
 }
diff --git a/test/unit/gamification_plugin_test.rb b/test/unit/gamification_plugin_test.rb
index 30dbe35..cb28253 100644
--- a/test/unit/gamification_plugin_test.rb
+++ b/test/unit/gamification_plugin_test.rb
@@ -9,8 +9,8 @@ class GamificationPluginTest < ActiveSupport::TestCase
 
   attr_accessor :plugin, :current_person
 
-  should 'return user points in user_data_extras' do
-    assert_equal({:points => 0}, instance_eval(&plugin.user_data_extras))
+  should 'return user points and badges in user_data_extras' do
+    assert_equal({:gamification_plugin => {:points => 0, :badges => [], :level => 0}}, instance_eval(&plugin.user_data_extras))
   end
 
 end
diff --git a/views/gamification/display_notifications.html.erb b/views/gamification/display_notifications.html.erb
index 4941f5a..c379d50 100644
--- a/views/gamification/display_notifications.html.erb
+++ b/views/gamification/display_notifications.html.erb
@@ -1,8 +1,14 @@
 <%= stylesheet_link_tag '/plugins/gamification/animate.css' %>
 
+<%= link_to({:controller => 'gamification_plugin_profile', :action => :info, :profile => current_person.identifier }, :class => 'gamification-plugin user-info-template', :style => 'display: none') do %>
+  <span class="level"><span class="icon">&nbsp;</span><span class="value"></span></span>
+  <span class="points"><span class="icon">&nbsp;</span><span class="value"></span></span>
+  <span class="badges"><span class="icon">&nbsp;</span><span class="value"></span></span>
+<% end %>
+
 <script>
 <% badges.each do |badge| %>
   <% html = render :file => 'gamification/notification_badge', :locals => {:badge => badge} %>
-  <%= "gamificationPlugin.display_notification('#{j html}');" %>
+  <%= "gamificationPlugin.displayNotification('#{j html}');" %>
 <% end %>
 </script>
--
libgit2 0.21.2