show user specific rating in hook setup

app/views/setup/config.scala.html

@@ -19,4 +19,15 @@
     }
   </div>
   }
+  @ctx.me.map { me =>
+  <div class="ratings">
+    @List("bullet", "blitz", "classical", "chess960", "kingOfTheHill", "threeCheck").map { key =>
+    @lila.rating.PerfType(key).map { perfType =>
+    <div class="@key">
+      @trans.ratingX(s"""<strong data-icon="${perfType.iconChar}">${me.perfs(key).map(_.intRating).getOrElse("?")}</strong> ${perfType.name}""")
+    </div>
+    }
+    }
+  </div>
+  }
 </div>

modules/user/src/main/Perfs.scala

@@ -39,6 +39,8 @@ case class Perfs(
     "classical" -> classical,
     "puzzle" -> puzzle)
 
+  def apply(key: String): Option[Perf] = perfsMap get key
+
   def pool(key: String) = pools get key getOrElse Perf.default
 
   def standardAndPools = standard :: pools.values.toList

public/javascripts/big.js

@@ -2068,7 +2068,28 @@ var storage = {
       var $timeInput = $form.find('.time_choice input');
       var $incrementInput = $form.find('.increment_choice input');
       var isHook = $form.hasClass('game_config_hook');
-      var myRating = parseInt($('#user_tag').data('rating'), 10);
+      var $ratings = $form.find('.ratings > div');
+      var showRating = function() {
+        var key;
+        switch ($variantSelect.val()) {
+          case '1':
+            var time = $timeInput.val() * 60 + $incrementInput.val() * 30;
+            if (time < 180) key = 'bullet';
+            else if (time < 480) key = 'blitz';
+            else key = 'classical';
+            break;
+          case '2':
+            key = 'chess960';
+            break;
+          case '4':
+            key = 'kingOfTheHill';
+            break;
+          case '5':
+            key = 'threeCheck';
+        }
+        console.log(key);
+        $ratings.hide().filter('.' + key).show();
+      };
       if (isHook) {
         var $formTag = $form.find('form');
         var ajaxSubmit = function(color) {
@@ -2103,6 +2124,7 @@ var storage = {
             time = sliderTime(ui.value);
             $value.text(time);
             $input.attr('value', time);
+            showRating();
             $form.find('.color_submits button').toggle(
               $timeInput.val() > 0 || $incrementInput.val() > 0);
           }
@@ -2146,6 +2168,7 @@ var storage = {
         if (isHook && !checked) {
           $casual.click();
         }
+        showRating();
         $.centerOverboard();
       }).trigger('change');
       var $ratingRangeConfig = $form.find('.rating_range_config');
@@ -2185,6 +2208,7 @@ var storage = {
         $fenPosition.toggle(fen);
         $modeChoicesWrap.toggle(!fen);
         if (fen) $casual.click();
+        showRating();
         $.centerOverboard();
       }).trigger('change');
 

public/stylesheets/dark.css

@@ -41,6 +41,7 @@ body.dark div.lichess_board_wrap,
 body.dark #translation_call,
 body.dark #footer_wrap,
 body.dark div.game_config .optional_config,
+body.dark div.game_config .ratings,
 body.dark .ui-state-default,
 body.dark .ui-widget-content,
 body.dark div.side_box,
@@ -258,6 +259,7 @@ body.dark table.translations tbody tr:nth-child(odd),
 body.dark form.translation_form div.message:nth-child(even),
 body.dark div.content_box table.datatable tr:nth-child(odd),
 body.dark div.game_config .optional_config,
+body.dark div.game_config .ratings,
 body.dark div.search_status,
 body.dark #friend_box,
 body.dark #powerTip {

public/stylesheets/home.css

@@ -554,6 +554,9 @@ div.new_posts li span.extract {
 #daily_puzzle > div.vstext {
   text-align: center;
 }
+div.game_config {
+  padding-bottom: 0;
+}
 div.game_config div.ui-buttonset {
   margin-bottom: 1em;
 }
@@ -569,12 +572,15 @@ div.game_config div.ui-slider {
   margin: 0 15px;
 }
 div.game_config .optional_config {
-  background: #f4f4f4;
   margin-bottom: 1em;
   padding: 3px 0;
-  border-top: solid 1px #e4e4e4;
   border-bottom: solid 1px #e4e4e4;
 }
+div.game_config .optional_config,
+div.game_config .ratings {
+  background: #f4f4f4;
+  border-top: solid 1px #e4e4e4;
+}
 div.game_config input[type="text"] {
   border: 1px solid #ccc;
   width: 87%;
@@ -619,6 +625,15 @@ div.game_config .time_choice span {
 div.game_config label.pointer {
   cursor: pointer;
 }
+div.game_config .ratings {
+  margin-top: 1.7em;
+  line-height: 50px;
+  width: 100%;
+  text-align: center;
+}
+div.game_config .ratings > div {
+  display: none;
+}
 div.game_config div.color_submits {
   margin-top: 1em;
   height: 65px;