more integration of center chess

app/package.scala

@@ -1,3 +1,3 @@
 package lila
 
-package object app extends PackageObject with WithPlay with socket.WithSocket 
+package object app extends PackageObject with WithPlay with socket.WithSocket

app/templating/SetupHelper.scala

@@ -3,14 +3,13 @@ package templating
 
 import chess.{ Mode, Variant, Speed }
 import lila.api.Context
-import lila.setup._
 import lila.tournament.System
 
 trait SetupHelper { self: I18nHelper =>
 
   def translatedModeChoices(implicit ctx: Context) = List(
-    Mode.Casual.id.toString -> trans.casual.str(),
-    Mode.Rated.id.toString -> trans.rated.str()
+    (Mode.Casual.id.toString, trans.casual.str(), none),
+    (Mode.Rated.id.toString, trans.rated.str(), none)
   )
 
   def translatedSystemChoices(implicit ctx: Context) = List(
@@ -19,25 +18,33 @@ trait SetupHelper { self: I18nHelper =>
   )
 
   def translatedVariantChoices(implicit ctx: Context) = List(
-    Variant.Standard.id.toString -> trans.standard.str(),
-    Variant.Chess960.id.toString -> Variant.Chess960.name.capitalize
+    (Variant.Standard.id.toString, trans.standard.str(), variantDesc.Standard.some),
+    (Variant.Chess960.id.toString, Variant.Chess960.name.capitalize, variantDesc.Chess960.some)
   )
 
   def translatedVariantChoicesWithFen(implicit ctx: Context) =
-    translatedVariantChoices(ctx) :+ (Variant.FromPosition.id.toString -> "FEN")
+    translatedVariantChoices(ctx) :+
+      (Variant.FromPosition.id.toString, "FEN", variantDesc.FEN.some)
 
   def translatedVariantChoicesWithCenterAndFen(implicit ctx: Context) =
     translatedVariantChoices(ctx) :+
-      (Variant.Center.id.toString -> "CenterChess") :+
-      (Variant.FromPosition.id.toString -> "FEN")
+      (Variant.Center.id.toString, "Center", variantDesc.Center.some) :+
+      (Variant.FromPosition.id.toString, "FEN", variantDesc.FEN.some)
 
   def translatedSpeedChoices(implicit ctx: Context) = Speed.all map { s =>
-    s.id.toString -> {
+    (s.id.toString, {
       (s.range.min, s.range.max) match {
         case (0, y)            => s.toString + " - " + trans.lessThanNbMinutes(y / 60 + 1)
         case (x, Int.MaxValue) => trans.unlimited.str()
         case (x, y)            => s.toString + " - " + trans.xToYMinutes(x / 60, y / 60 + 1)
       }
-    }
+    }, none)
+  }
+
+  object variantDesc {
+    val Standard = "Standard rules of chess (FIDE)"
+    val Chess960 = "Starting position of the home rank pieces is randomized"
+    val Center = "Bring your king to the center to win the game"
+    val FEN = "Custom starting position"
   }
 }

app/views/game/side.scala.html

@@ -45,10 +45,10 @@
     <span data-icon="p"> @shortClockName(game.clock)</span>
     @game.variant match {
     case chess.Variant.Chess960 => {
-    , @variantName(game.variant).capitalize
+    , <a data-hint="@variantDesc.Chess960" class="hint--bottom">@variantName(game.variant).capitalize</a>
     }
     case chess.Variant.Center => {
-    , <a data-hint="Bring your king to the center to win the game" class="hint--bottom">@variantName(game.variant).capitalize</a>
+    , <a data-hint="@variantDesc.Center" class="hint--bottom">@variantName(game.variant).capitalize</a>
     }
     case _ => {}
     }

app/views/lobby/home.scala.html

@@ -104,7 +104,7 @@ openGraph = Map(
   <div class="lichess_ground">
     <div class="lichess_table onbg lichess_table_not_started" id="start_buttons">
       @lobbyMenu.all.map { b =>
-      <a class="lichess_button button config_@b.code hint--bottom" href="@b.route" onclick="return false">@b.name()</a>
+      <a class="fat button config_@b.code hint--bottom" href="@b.route" onclick="return false">@b.name()</a>
       }
     </div>
     @puzzle.map { p =>

app/views/setup/filterCheckbox.scala.html

@@ -1,10 +1,12 @@
-@(form: Form[_], key: String, index: Int, value: String, checks: List[String], text: Html)
+@(form: Form[_], key: String, index: Int, value: String, checks: List[String], text: Html, hint: Option[String])
 
-<label class="hover">
-  <input 
-  type="checkbox" 
-  name="@{form(key).name}[@index]" 
-  value="@value" 
+<label @hint.map { h =>
+  data-hint="@h" class="hover hint--bottom"
+  }.getOrElse {class="hover"}>
+  <input
+  type="checkbox"
+  name="@{form(key).name}[@index]"
+  value="@value"
   @(if(checks contains value) "checked" else "") />
   @text
 </label>

app/views/setup/filterCheckboxes.scala.html

@@ -1,7 +1,7 @@
-@(form: Form[_], key: String, checks: List[String], options: Seq[(Any,String)])(implicit ctx: Context)
+@(form: Form[_], key: String, checks: List[String], options: Seq[(Any, String, Option[String])])(implicit ctx: Context)
 
-@options.zipWithIndex.map { 
-case ((value, text), index) => {
-@setup.filterCheckbox(form, key, index, value.toString, checks, Html(text))
+@options.zipWithIndex.map {
+case ((value, text, hint), index) => {
+@setup.filterCheckbox(form, key, index, value.toString, checks, Html(text), hint)
 }
 }

app/views/setup/radios.scala.html

@@ -1,12 +1,14 @@
-@(field: play.api.data.Field, options: Seq[(String,String)])
+@(field: play.api.data.Field, options: Seq[(String,String, Option[String])])
 
 @options.map { v =>
-<input 
-type="radio" 
-id="@(field.id)_@v._1" 
-name="@field.name" 
-value="@v._1" 
+<input
+type="radio"
+id="@(field.id)_@v._1"
+name="@field.name"
+value="@v._1"
 @(if(field.value == Some(v._1)) "checked" else "")
 />
-<label class="required" for="@(field.id)_@v._1">@v._2</label>
+<label @v._3.map { hint =>
+  data-hint="@hint" class="required hint--bottom"
+  }.getOrElse {class="required"} for="@(field.id)_@v._1">@v._2</label>
 }

app/views/tournament/form.scala.html

@@ -37,11 +37,11 @@ moreJs = moreJs) {
         </tr>
         <tr>
           <th><label for="@form("variant").id">@trans.variant()</label></th>
-          <td>@base.select(form("variant"), translatedVariantChoices)</td>
+          <td>@base.select(form("variant"), translatedVariantChoices.map(x => x._1 -> x._2))</td>
         </tr>
         <tr>
           <th><label for="@form("mode").id">@trans.mode()</label></th>
-          <td>@base.select(form("mode"), translatedModeChoices)</td>
+          <td>@base.select(form("mode"), translatedModeChoices.map(x => x._1 -> x._2))</td>
         </tr>
         <tr>
           <th><label>@trans.timeControl()</label></th>

modules/setup/src/main/AiConfig.scala

@@ -62,7 +62,7 @@ object AiConfig extends BaseConfig {
 
   val levels = (1 to 8).toList
 
-  val levelChoices = levels map { l => l.toString -> l.toString }
+  val levelChoices = levels map { l => (l.toString, l.toString, none) }
 
   import lila.db.JsTube
   import play.api.libs.json._

public/javascripts/big.js

@@ -2052,9 +2052,11 @@ var storage = {
       var $modeChoicesWrap = $form.find('.mode_choice');
       var $modeChoices = $modeChoicesWrap.find('input');
       var $variantChoices = $form.find('.variants input');
+      var $variantDescriptions = $form.find('.variant_descriptions p');
       var $casual = $modeChoices.eq(0),
         $rated = $modeChoices.eq(1);
       var $fenVariant = $variantChoices.filter('#variant_3');
+      var $centerVariant = $variantChoices.filter('#variant_4');
       var $fenPosition = $form.find(".fen_position");
       var $clockCheckbox = $form.find('.clock_choice input');
       var $timeInput = $form.find('.time_choice input');
@@ -2173,11 +2175,13 @@ var storage = {
 
       $variantChoices.on('change', function() {
         var fen = $fenVariant.prop('checked');
+        var center = $centerVariant.prop('checked');
         if (fen && $fenInput.val() !== '') validateFen();
         $fenPosition.toggle(fen);
-        $modeChoicesWrap.toggle(!fen);
-        if (fen) $casual.click();
+        $modeChoicesWrap.toggle(!fen && !center);
+        if (fen || center) $casual.click();
         $.centerOverboard();
+        $variantDescriptions.hide().filter('.variant_' + $(this).val()).show();
       }).trigger('change');
 
       $form.find('div.level').each(function() {
@@ -2199,8 +2203,7 @@ var storage = {
     }
 
     $startButtons.find('a').click(function() {
-      $startButtons.removeClass('active');
-      $(this).addClass('active');
+      $(this).addClass('active').siblings().removeClass('active');
       $('div.lichess_overboard').remove();
       $.ajax({
         url: $(this).attr('href'),

public/stylesheets/board.css

@@ -672,7 +672,7 @@ div.lichess_separator {
   margin: 10px 0;
   border-bottom: 1px solid #ddd;
 }
-div.lichess_table .lichess_button {
+#start_buttons a {
   margin: 2.5em 0 0 0;
   font-size: 1.3em;
   padding: 1em;

public/stylesheets/home.css

@@ -610,6 +610,10 @@ div.game_config div.color_submits {
   height: 65px;
   text-align: center;
 }
+div.game_config div.variant_descriptions p {
+  font-size: 0.8em;
+  display: none;
+}
 div.game_config button {
   display: inline-block;
   margin: 0 5px;