more chat rewrite

app/controllers/Round.scala

@@ -170,7 +170,7 @@ object Round extends LilaController with TheftPrevention {
               Env.game.crosstableApi(pov.game) zip
               Env.api.roundApi.watcher(pov, lila.api.Mobile.Api.currentVersion, tv = none) map {
                 case ((((tour, simul), chat), crosstable), data) =>
-                  Ok(html.round.watcher(pov, data, tour, simul, crosstable, userTv = userTv, myChat = chat))
+                  Ok(html.round.watcher(pov, data, tour, simul, crosstable, userTv = userTv, chatOption = chat))
               }
           else // web crawlers don't need the full thing
             GameRepo.initialFen(pov.game.id) zip
@@ -189,11 +189,12 @@ object Round extends LilaController with TheftPrevention {
       Env.tournament.api.miniStanding(tid, ctx.userId, withStanding)
     }
 
-  private[controllers] def getWatcherChat(game: GameModel)(implicit ctx: Context) =
-    Env.chat.api.userChat.findMine(s"${game.id}/w", ctx.me)
+  private[controllers] def getWatcherChat(game: GameModel)(implicit ctx: Context) = !ctx.kid ?? {
+    Env.chat.api.userChat.findMine(s"${game.id}/w", ctx.me) map (_.some)
+  }
 
   private[controllers] def getPlayerChat(game: GameModel)(implicit ctx: Context) =
-    game.hasChat ?? {
+    (game.hasChat && !ctx.kid) ?? {
       Env.chat.api.playerChat.find(game.id) map (_.some)
     }
 

app/templating/JsonHelper.scala

@@ -2,6 +2,9 @@ package lila.app
 package templating
 
 import play.api.libs.json._
+import play.twirl.api.Html
+
+import lila.api.Context
 
 trait JsonHelper {
 
@@ -16,4 +19,14 @@ trait JsonHelper {
   }
 
   def J = Json
+
+  def htmlOrNull[A, B](a: Option[A])(f: A => Html) = a.fold(Html("null"))(f)
+
+  def jsOrNull[A: Writes](a: Option[A]) = Html {
+    a.fold("null")(x => toJson(x))
+  }
+
+  def jsUserId(implicit ctx: Context) = Html {
+    ctx.userId.fold("null")(id => s""""$id"""")
+  }
 }

app/templating/UserHelper.scala

@@ -282,9 +282,5 @@ trait UserHelper { self: I18nHelper with StringHelper with NumberHelper =>
     s"$name played $nbGames games since $createdAt.$currentRating"
   }
 
-  def jsUserId(implicit ctx: Context) = Html {
-    ctx.userId.fold("null")(id => s""""$id"""")
-  }
-
   private val donorBadge = """<span data-icon="&#xe001;" class="donor is-gold" title="Lichess donor"></span>"""
 }

app/views/analyse/replay.scala.html

@@ -1,4 +1,4 @@
-@(pov: Pov, data: play.api.libs.json.JsObject, initialFen: Option[String], pgn: String, analysis: Option[lila.analyse.Analysis], analysisInProgress: Option[lila.fishnet.Work.InProgress], simul: Option[lila.simul.Simul], cross: Option[lila.game.Crosstable], userTv: Option[User], myChat: lila.chat.UserChat.Mine)(implicit ctx: Context)
+@(pov: Pov, data: play.api.libs.json.JsObject, initialFen: Option[String], pgn: String, analysis: Option[lila.analyse.Analysis], analysisInProgress: Option[lila.fishnet.Work.InProgress], simul: Option[lila.simul.Simul], cross: Option[lila.game.Crosstable], userTv: Option[User], chatOption: Option[lila.chat.UserChat.Mine])(implicit ctx: Context)
 
 @import pov._
 
@@ -16,13 +16,15 @@ lichess.analyse = {
 data: @Html(J.stringify(data)),
 i18n: @jsI18n(),
 userId: @jsUserId,
+chat: @jsOrNull(chatOption map { c =>
+chat.ChatJsData.json(c.chat, name = trans.spectatorRoom.str(), timeout = c.timeout, withNote = ctx.isAuth)
+}),
 explorer: {
 endpoint: "@explorerEndpoint",
 tablebaseEndpoint: "@tablebaseEndpoint"
 }
 };
 }
-@chat.js(myChat.chat, name = trans.spectatorRoom.str(), timeout = myChat.timeout, withNote = true)
 }
 
 @atom = {

app/views/round/player.scala.html

@@ -12,9 +12,9 @@ lichess.startRound(document.getElementById('lichess'), {
 data: @Html(J.stringify(data)),
 i18n: @jsI18n(),
 userId: @jsUserId,
-chat: @chatOption.fold(Html(""""null"""")) { c =>
-@Html(J.stringify(chat.ChatJsData.json(c, name = trans.chatRoom.str(), timeout = false, withNote = true)))
-}
+chat: @jsOrNull(chatOption map { c =>
+chat.ChatJsData.json(c, name = trans.chatRoom.str(), timeout = false, withNote = true)
+})
 });
 });
 }

app/views/round/watcher.scala.html

@@ -1,4 +1,4 @@
-@(pov: Pov, data: play.api.libs.json.JsObject, tour: Option[lila.tournament.MiniStanding], simul: Option[lila.simul.Simul], cross: Option[lila.game.Crosstable], userTv: Option[User] = None, myChat: lila.chat.UserChat.Mine)(implicit ctx: Context)
+@(pov: Pov, data: play.api.libs.json.JsObject, tour: Option[lila.tournament.MiniStanding], simul: Option[lila.simul.Simul], cross: Option[lila.game.Crosstable], userTv: Option[User] = None, chatOption: Option[lila.chat.UserChat.Mine])(implicit ctx: Context)
 
 @title = @{ s"${gameVsText(pov.game, withRatings = true)} in ${pov.gameId}" }
 
@@ -8,11 +8,13 @@
 $(function() {
 lichess.startRound(document.getElementById('lichess'), {
 data: @Html(J.stringify(data)),
-i18n: @jsI18n()
+i18n: @jsI18n(),
+chat: @jsOrNull(chatOption map { c =>
+chat.ChatJsData.json(c.chat, name = trans.spectatorRoom.str(), timeout = c.timeout, withNote = ctx.isAuth)
+})
 });
 });
 }
-@chat.js(myChat.chat, name = trans.spectatorRoom.str(), timeout = myChat.timeout, withNote = true)
 }
 
 @atom = {

modules/round/src/main/SocketHandler.scala

@@ -50,7 +50,7 @@ private[round] final class SocketHandler(
       socket = socket,
       chat = messenger.chat
     )) { playerId =>
-      {
+      ({
         case ("p", o) => ping(o)
         case ("move", o) => parseMove(o) foreach {
           case (move, blur, lag) =>
@@ -95,7 +95,11 @@ private[round] final class SocketHandler(
         case ("berserk", _) => member.userId foreach { userId =>
           hub.actor.tournamentApi ! Berserk(gameId, userId)
         }
-      }
+      }: Handler.Controller) orElse lila.chat.Socket.in(
+        chatId = gameId,
+        member = member,
+        socket = socket,
+        chat = messenger.chat)
     }
   }
 

public/javascripts/main.js

@@ -1831,6 +1831,8 @@ lichess.notifyApp = (function() {
     analyse = LichessAnalyse(cfg);
     cfg.jumpToIndex = analyse.jumpToIndex;
 
+    lichess.makeChat('chat', cfg.chat);
+
     $('.underboard_content', element).appendTo($('.underboard .center', element)).show();
 
     var chartLoader = function() {

public/javascripts/util.js

@@ -119,7 +119,7 @@ lichess.makeChat = function(id, data, callback) {
   lichess.loadCss('/assets/stylesheets/chat.css');
   if (data.mod) lichess.loadCss('/assets/stylesheets/chat.mod.css');
   lichess.loadScript("/assets/compiled/lichess.chat" + (isDev ? '' : '.min') + '.js').done(function() {
-    callback(LichessChat(document.getElementById(id), data));
+    (callback || $.noop)(LichessChat(document.getElementById(id), data));
   });
 };
 

public/stylesheets/board.css

@@ -1013,85 +1013,6 @@ div.under_chat .watchers {
 div.under_chat .watchers:hover {
   opacity: 1;
 }
-#chat div.top {
-  position: relative;
-}
-#chat div.top .toggle_chat {
-  cursor: pointer;
-  position: absolute;
-  top: 4px;
-  right: 4px;
-  z-index: 1;
-}
-#chat .messages {
-  height: 100%;
-  overflow: hidden;
-  overflow-y: auto;
-  word-wrap: break-word;
-}
-body.no-select #chat li {
-  -moz-user-select: text;
-  -webkit-user-select: text;
-}
-#chat form {
-  position: relative;
-}
-#chat input.lichess_say {
-  border: 0;
-  border-top: 1px solid #ccc;
-  padding: 3px 20px 3px 4px;
-  width: 100%;
-  box-sizing: border-box;
-}
-#chat a.send {
-  position: absolute;
-  top: 0;
-  right: 2px;
-  padding-top: 3px;
-  display: block;
-  height: 16px;
-  width: 16px;
-  z-index: 1;
-  opacity: 0.5;
-}
-#chat a.send:hover {
-  opacity: 1;
-}
-#chat .messages li {
-  padding: 0.4em 0 0.4em 5px;
-  line-height: 14px;
-  margin: 0;
-}
-#chat .messages li.system {
-  padding: 2px 0;
-  margin-left: 0;
-  text-align: center;
-  white-space: nowrap;
-  font-style: italic;
-}
-#chat span.title {
-  padding-left: 3px;
-}
-#chat li span,
-#chat .messages a.user_link {
-  font-family: 'Roboto';
-  font-weight: 300;
-  padding: 0;
-  margin-right: 6px;
-  opacity: 0.8;
-}
-#chat .presets {
-  margin-top: 3px;
-}
-#chat .presets button {
-  margin-right: 3px;
-  padding: 3px 5px;
-}
-#chat.hidden ol.messages,
-#chat.hidden form,
-#chat.hidden .presets {
-  display: none;
-}
 div.game_tournament {
   max-height: 300px;
   overflow: hidden;

public/stylesheets/chat.css

@@ -64,15 +64,69 @@ div.mchat .note textarea {
   outline: none;
 }
 div.mchat .lichess_say {
-  border-width: 1px 0 0 0;
+  border: 0;
+  border-top: 1px solid #ccc;
+  padding: 3px 20px 3px 4px;
+  width: 100%;
+  box-sizing: border-box;
 }
-div.mchat .deleted {
+div.mchat .messages {
+  height: 100%;
+  overflow: hidden;
+  overflow-y: auto;
+  word-wrap: break-word;
+}
+div.mchat .messages li {
+  padding: 0.4em 0 0.4em 5px;
+  line-height: 14px;
+  margin: 0;
+}
+body.no-select div.mchat .messages li {
+  -moz-user-select: text;
+  -webkit-user-select: text;
+}
+div.mchat .messages .deleted {
   opacity: 0.5;
 }
-div.mchat .system {
+div.mchat .messages .system {
   display: block;
   opacity: 0.8;
   font-style: italic;
-  text-align: center;
   font-size: 0.8em;
+  margin-left: 0;
+  text-align: center;
+}
+div.mchat .messages span,
+div.mchat .messages .user_link {
+  font-family: 'Roboto';
+  font-weight: 300;
+  padding: 0;
+  margin-right: 6px;
+  opacity: 0.8;
+}
+div.mchat .presets {
+  display: flex;
+  align-items: center;
+  flex-flow: row nowrap;
+}
+div.mchat .presets span {
+  flex: 1 1 auto;
+  text-align: center;
+  display: block;
+  opacity: 0.7;
+  border-top: 1px solid #ccc;
+  border-right: 1px solid #ccc;
+  font-size: 11px;
+  text-transform: uppercase;
+}
+div.mchat .presets span:not(.disabled) {
+  cursor: pointer;
+}
+div.mchat .presets span.disabled {
+  color: transparent;
+}
+div.mchat .presets span:not(.disabled):hover {
+  background: #3893E8;
+  color: #fff;
+  opacity: 1;
 }

public/stylesheets/chat.mod.css

@@ -1,3 +1,11 @@
+div.mchat.mod div.top {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+div.mchat.mod div.top .toggle_chat {
+  cursor: pointer;
+}
 div.mchat.mod .spinner {
   padding-top: 100px;
 }

ui/chat/src/discussion.js

@@ -4,7 +4,11 @@ var presetView = require('./preset').view;
 
 function renderLine(ctrl) {
   return function(line) {
-    if (line.u === 'lichess') return m('li', m('em.system', line.t));
+    if (line.u === 'lichess') return m('li.system', line.t);
+    if (line.c) return m('li', [
+      m('span', '[' + line.c + ']'),
+      line.t
+    ]);
     return m('li', {
       'data-username': line.u
     }, [

ui/chat/src/moderation.js

@@ -52,13 +52,13 @@ module.exports = {
       if (!data) return;
       return [
         m('div.top', [
+          m('span.text', {
+            'data-icon': '',
+          }, m.trust($.userLink(data.username))),
           m('span.toggle_chat', {
             'data-icon': 'L',
             onclick: ctrl.close
-          }),
-          m('span.text', {
-            'data-icon': '',
-          }, m.trust($.userLink(data.username)))
+          })
         ]),
         m('div.content.moderation', [
           m('div.infos.block', [

ui/chat/src/preset.js

@@ -46,8 +46,8 @@ module.exports = {
     var said = ctrl.said();
     if (sets && said.length < 2) return m('div.presets', sets.map(function(p) {
       var disabled = said.indexOf(p[0]) !== -1;
-      return m('button', {
-        class: 'button hint--top thin',
+      return m('span', {
+        class: 'hint--top' + (disabled ? ' disabled' : ''),
         'data-hint': p[1],
         disabled: disabled,
         onclick: function() {