Wire up a lot of types and colors for our avatar creator

ivatar/ivataraccount/templates/avatar_creator.html

@@ -16,31 +16,95 @@
   }
 </style>
 
+<script>
+  var skin_color = 0;
+  var hair_color = 0;
+  var facial_hair_type = 0;
+  var facial_hair_color = 0;
+  var top_type = -1;
+  var hat_color = 0;
+  var mouth_type = 0;
+
+  function update_image() {
+    var url = "{% url 'avataaar' %}?skin_color=" + skin_color + "&hair_color=" + hair_color +
+      "&facial_hair_type=" + facial_hair_type + "&facial_hair_color=" + facial_hair_color +
+      "&top_type=" + top_type + "&hat_color=" + hat_color + "&mouth_type=" + mouth_type;
+    $("#avatar_image").attr('src', url);
+  }
+</script>
+
 <h3>{% trans 'Adjust your avatar:' %}</h3>
 <div>
   <div style="width:172px;margin-left:20px;float:left">
     <img id="avatar_image" width="172px">
     <script>
-      var skin = "{{ SkinColor.0.main_value }}";
+      update_image();
-      var url = "{% url 'avataaar' %}?skin=" + skin
-      var ai = document.getElementById("avatar_image");
-      ai.src = url;
     </script>
   </div>
   <div>
     <div class="btn-group form-group" role="group" style="float:none;">
       <h3>{% trans 'Skin color' %}</h3>
       {% for color in SkinColor %}
-        <a class="button achoose" style="background:{{ color.main_value }};">&nbsp;</a>
+        <a class="button achoose" style="background:{{ color.main_value }};" onclick='skin_color="{{ color.value }}"; update_image();'>&nbsp;</a>
       {% endfor %}
     </div>
     <br/>
     <div>
       <h3>{% trans 'Hair color' %}</h3>
       {% for color in HairColor %}
-        <a class="button achoose" style="background:{{ color.main_value }};">&nbsp;</a>
+      <a class="button achoose" style="background:{{ color.main_value }};" onclick='hair_color="{{ color.value }}"; update_image();'>&nbsp;</a>
       {% endfor %}
     </div>
+    <br/>
+    <div>
+      <h3>{% trans 'Facial hair type' %}</h3>
+      {% for type in FacialHairType %}
+      <a class="button" onclick='facial_hair_type="{{ type.value }}"; update_image();'>
+        {% if type.name == 'BEARD_MEDIUM' %}
+          Medium
+        {% elif type.name == 'BEARD_LIGHT' %}
+          Light
+        {% elif type.name == 'BEARD_MAJESTIC' %}
+          Majestic
+        {% elif type.name == 'MOUSTACHE_FANCY' %}
+          Moustache fancy
+        {% elif type.name == 'MOUSTACHE_MAGNUM' %}
+          Moustache magnum
+        {% else %}
+          Default
+        {% endif %}
+      </a>
+      {% endfor %}
+    </div>
+    <br/>
+    <div>
+      <h3>{% trans 'Facial hair color' %}</h3>
+      {% for color in HairColor %}
+      <a class="button achoose" style="background:{{ color.main_value }};" onclick='facial_hair_color="{{ color.value }}"; update_image();'>&nbsp;</a>
+      {% endfor %}
+    </div>
+    <br/>
+    <div>
+      <h3>{% trans 'Top Type' %}</h3>
+      {% for type in TopType %}
+      <a class="button" onclick='top_type="{{ type.value }}"; update_image();'>{{ type.name }}</a>
+      {% endfor %}
+    </div>
+    <br/>
+    <div>
+      <h3>{% trans 'Hat color' %}</h3>
+      {% for color in HatColor %}
+      <a class="button achoose" style="background:{{ color.main_value }};" onclick='hat_color="{{ color.value }}"; update_image();'>&nbsp;</a>
+      {% endfor %}
+    </div>
+    <br/>
+    <div>
+      <h3>{% trans 'Mouth type' %}</h3>
+      {% for type in MouthType %}
+      <a class="button" onclick='mouth_type="{{ type.value }}"; update_image();'>{{ type.name }}</a>
+      {% endfor %}
+    </div>
+
   </div>
 </div>
 <div style="height:40px"></div>

ivatar/ivataraccount/views.py

@@ -40,7 +40,7 @@ from ipware import get_client_ip
 
 from email_validator import validate_email
 
-from py_avataaars import PyAvataaar
+import py_avataaars as pa
 
 from libravatar import libravatar_url
 from ivatar.settings import (
@@ -1275,8 +1275,12 @@ class AvatarCreatorView(TemplateView):
         Provide additional context data
         """
         context = super().get_context_data(**kwargs)
-        context["SkinColor"] = list(PyAvataaar.SkinColor)
+        context["SkinColor"] = list(pa.SkinColor)
-        context["HairColor"] = list(PyAvataaar.HairColor)
+        context["HairColor"] = list(pa.HairColor)
+        context["FacialHairType"] = list(pa.FacialHairType)
+        context["TopType"] = list(pa.TopType)
+        context["HatColor"] = list(pa.Color)
+        context["MouthType"] = list(pa.MouthType)
         return context
 
 
@@ -1290,5 +1294,38 @@ class AvatarView(View):
         """
         Handle get for create view
         """
-        avatar = PyAvataaar.PyAvataaar()
+        skin_color = list(pa.SkinColor)[0]
+        hair_color = list(pa.HairColor)[0]
+        facial_hair_type = list(pa.FacialHairType)[0]
+        top_type = pa.TopType.SHORT_HAIR_SHORT_FLAT
+        hat_color = list(pa.Color)[0]
+        mouth_type = list(pa.MouthType)[0]
+        if "skin_color" in request.GET:
+            skin_color = list(pa.SkinColor)[int(request.GET["skin_color"])]
+        if "hair_color" in request.GET:
+            hair_color = list(pa.HairColor)[int(request.GET["hair_color"])]
+        if "facial_hair_type" in request.GET:
+            facial_hair_type = list(pa.FacialHairType)[
+                int(request.GET["facial_hair_type"])
+            ]
+        if "facial_hair_color" in request.GET:
+            facial_hair_color = list(pa.HairColor)[
+                int(request.GET["facial_hair_color"])
+            ]
+        if "top_type" in request.GET:
+            top_type = list(pa.TopType)[int(request.GET["top_type"])]
+        if "hat_color" in request.GET:
+            hat_color = list(pa.Color)[int(request.GET["hat_color"])]
+        if "mouth_type" in request.GET:
+            mouth_type = list(pa.MouthType)[int(request.GET["mouth_type"])]
+
+        avatar = pa.PyAvataaar(
+            skin_color=skin_color,
+            hair_color=hair_color,
+            facial_hair_type=facial_hair_type,
+            facial_hair_color=facial_hair_color,
+            top_type=top_type,
+            hat_color=hat_color,
+            mouth_type=mouth_type,
+        )
         return HttpResponse(avatar.render_png(), content_type="image/png")