show opening names in opening trainer

app/views/opening/JsData.scala

@@ -35,7 +35,7 @@ object JsData extends lila.Steroids {
             "quality" -> quality.name)
         }),
         "url" -> s"$netBaseUrl${routes.Opening.show(opening.id)}",
-        "names" -> names
+        "names" -> names.take(3)
       ),
       "animation" -> Json.obj(
         "duration" -> ctx.pref.animationFactor * animationDuration.toMillis

modules/opening/src/main/OpeningApi.scala

@@ -77,7 +77,8 @@ private[opening] final class OpeningApi(
       BSONDocument("_id" -> fen),
       BSONDocument("_id" -> false)
     ).one[BSONDocument] map { opt =>
-        ~(opt ?? (_.getAs[List[String]]("names")))
+        val names = ~(opt ?? (_.getAs[List[String]]("names")))
+        names.map { _.split(',').take(2).mkString(",") }.distinct
       }
   }
 }

public/stylesheets/opening.css

@@ -35,7 +35,7 @@
   border-radius: 25px;
   padding: 10px;
   box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
-  margin-top: 20px;
+  margin: 20px 0 10px 0;
 }
 #opening .meter ul {
   width: 490px;

ui/opening/src/view.js

@@ -20,7 +20,7 @@ function renderAnalysisButton(ctrl) {
 }
 
 function renderPlayTable(ctrl) {
-  return m('div.table',
+  return m('div.table', [
     m('div.table_inner', [
       m('div.current_player',
         m('div.player.' + ctrl.data.opening.color, [
@@ -38,7 +38,8 @@ function renderPlayTable(ctrl) {
         ' ',
         renderAnalysisButton(ctrl)
       ])
-    ]));
+    ])
+  ]);
 }
 
 function renderViewTable(ctrl) {
@@ -258,7 +259,10 @@ module.exports = function(ctrl) {
       ))
     ]),
     m('div.center', [
-      progress(ctrl), (ctrl.data.user && ctrl.data.user.history) ? renderHistory(ctrl) : null
+      progress(ctrl),
+      m('ul.names', ctrl.data.opening.names.map(function(name) {
+        return m('li', name);
+      })), (ctrl.data.user && ctrl.data.user.history) ? renderHistory(ctrl) : null
     ])
   ]);
 };