From 339c4992128cfc054d353705f12390baa2b309e4 Mon Sep 17 00:00:00 2001
From: Thibault Duplessis <thibault.duplessis@gmail.com>
Date: Sat, 17 Jan 2015 15:51:54 +0100
Subject: [PATCH] remind variant on correspondence games - resolves #256

---
 app/views/round/player.scala.html      |  5 +++++
 modules/rating/src/main/PerfType.scala |  1 +
 public/stylesheets/board.css           | 21 +++++++++++++++++++++
 ui/round/src/view/main.js              | 23 +++++++++++++++++++++--
 4 files changed, 48 insertions(+), 2 deletions(-)

diff --git a/app/views/round/player.scala.html b/app/views/round/player.scala.html
index a189972016..f5f53ed90e 100644
--- a/app/views/round/player.scala.html
+++ b/app/views/round/player.scala.html
@@ -14,6 +14,11 @@ data: @Html(play.api.libs.json.Json.stringify(data)),
 routes: roundRoutes.controllers,
 i18n: @jsI18n()
 };
+lichess.variantIcons = {
+@lila.rating.PerfType.variants.map { variant =>
+@variant.key: @Html(s""""${variant.iconChar.toString}""""),
+}
+};
 }
 }
 
diff --git a/modules/rating/src/main/PerfType.scala b/modules/rating/src/main/PerfType.scala
index c5c698f02d..dd065b46ad 100644
--- a/modules/rating/src/main/PerfType.scala
+++ b/modules/rating/src/main/PerfType.scala
@@ -96,4 +96,5 @@ object PerfType {
 
   val nonPuzzle: List[PerfType] = List(Bullet, Blitz, Classical, Correspondence, Chess960, KingOfTheHill, ThreeCheck, Antichess, Atomic)
   val leaderboardable: List[PerfType] = List(Bullet, Blitz, Classical, Chess960, KingOfTheHill, ThreeCheck)
+  val variants: List[PerfType] = List(Chess960, KingOfTheHill, ThreeCheck, Antichess, Atomic)
 }
diff --git a/public/stylesheets/board.css b/public/stylesheets/board.css
index 6d65cca05f..7d407a0ad8 100644
--- a/public/stylesheets/board.css
+++ b/public/stylesheets/board.css
@@ -981,6 +981,27 @@ div.dont_touch {
   font-size: 1.2em;
   padding: 1em 0;
 }
+.lichess_board_wrap .variant_reminder {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 5;
+  transition: 0.6s;
+  text-shadow: 7px 10px 2px rgba(0,0,0,0.3);
+  width: 512px;
+  height: 512px;
+  line-height: 512px;
+  text-align: center;
+}
+.lichess_board_wrap .variant_reminder::before {
+  font-size: 290px;
+  opacity: 0.9;
+  color: #888;
+}
+.lichess_board_wrap .variant_reminder.gone {
+  opacity: 0;
+  transform: translateY(-100px);
+}
 #promotion_choice {
   position: absolute;
   top: 0;
diff --git a/ui/round/src/view/main.js b/ui/round/src/view/main.js
index acd05f8bde..2469814e22 100644
--- a/ui/round/src/view/main.js
+++ b/ui/round/src/view/main.js
@@ -34,6 +34,24 @@ function wheel(ctrl, e) {
   return false;
 }
 
+function renderVariantReminder(ctrl) {
+  if (ctrl.data.game.speed !== 'correspondence') return;
+  var icon = lichess.variantIcons[ctrl.data.game.perf];
+  if (!icon) return;
+  return m('div', {
+    class: 'variant_reminder is',
+    'data-icon': icon,
+    config: function(el, isUpdate) {
+      if (!isUpdate) setTimeout(function() {
+        el.classList.add('gone');
+        setTimeout(function() {
+          el.remove();
+        }, 600);
+      }, 1000);
+    }
+  });
+}
+
 function visualBoard(ctrl) {
   return m('div.lichess_board_wrap', [
     m('div.lichess_board.' + ctrl.data.game.variant.key, {
@@ -44,7 +62,8 @@ function visualBoard(ctrl) {
       },
       onclick: ctrl.data.player.spectator ? toggleDontTouch : null
     }, chessground.view(ctrl.chessground)),
-    renderPromotion(ctrl)
+    renderPromotion(ctrl),
+    renderVariantReminder(ctrl)
   ]);
 }
 
@@ -70,7 +89,7 @@ module.exports = function(ctrl) {
   return [
     m('div.top', [
       m('div.lichess_game', {
-        config: function(el, isUpdate, context) {
+        config: function(el, isUpdate) {
           if (isUpdate) return;
           $('body').trigger('lichess.content_loaded');
         }