From bbdb5aad154f23cc32efae05d825384e7e9849da Mon Sep 17 00:00:00 2001
From: Thibault Duplessis <thibault.duplessis@gmail.com>
Date: Thu, 4 Feb 2016 07:58:01 +0700
Subject: [PATCH] improve challenge UI and anon support

---
 app/views/challenge/theirs.scala.html | 27 +++++++++++++++++++++++++--
 public/javascripts/challenge.js       | 17 +++++++++++++----
 2 files changed, 38 insertions(+), 6 deletions(-)

diff --git a/app/views/challenge/theirs.scala.html b/app/views/challenge/theirs.scala.html
index 7c1b72e51d..b5706d866f 100644
--- a/app/views/challenge/theirs.scala.html
+++ b/app/views/challenge/theirs.scala.html
@@ -15,19 +15,42 @@ moreJs = js(c, json, false)) {
     @explanation(c)
     @c.initialFen.map { fen =>
     <br />
-    @views.html.game.miniBoard(fen, color = c.chessColor.name)
+    @views.html.game.miniBoard(fen, color = (!(c.chessColor)).name)
     }
+    <br />
+    @c.status match {
+    case Status.Created | Status.Offline => {
     @if(!c.mode.rated || ctx.isAuth) {
     @if(c.mode.rated && c.unlimited) {
     <div class="join_warning warning">@trans.bewareTheGameIsRatedButHasNoClock()</div>
     }
-    <form style="margin-top: 20px" action="@routes.Challenge.accept(c.id)" method="post">
+    <form class="accept" action="@routes.Challenge.accept(c.id)" method="post">
       <button name="submit" type="submit" class="submit text button" data-icon="G">@trans.joinTheGame()</button>
     </form>
     } else {
     <hr />
     <p class="error">This game is rated<br />You must <a href="@routes.Auth.login?referrer=@routes.Round.watcher(c.id, "white")">log in</a> to join it.</p>
     }
+    }
+    case Status.Declined => {
+    <div class="declined">
+      <h2>Challenge declined</h2>
+      <a class="button" href="@routes.Lobby.home()">@trans.playWithAnotherOpponent()</a>
+    </div>
+    }
+    case Status.Accepted => {
+    <div class="accepted">
+      <h2>Challenge accepted!</h2>
+      <a id="challenge_redirect" href="@routes.Round.watcher(c.id, "white")" class="button">@trans.joinTheGame()</a>
+    </div>
+    }
+    case Status.Canceled => {
+    <div class="canceled">
+      <h2>Challenge canceled.</h2>
+      <a class="button" href="@routes.Lobby.home()">@trans.playWithAnotherOpponent()</a>
+    </div>
+    }
+    }
   </div>
 </div>
 }
diff --git a/public/javascripts/challenge.js b/public/javascripts/challenge.js
index 32b3f371d6..7f8969182c 100644
--- a/public/javascripts/challenge.js
+++ b/public/javascripts/challenge.js
@@ -1,7 +1,7 @@
 lichess = lichess || {};
 lichess.startChallenge = function(element, opts) {
-  console.log(opts);
   var challenge = opts.data.challenge;
+  var accepting;
   if (!opts.owner && lichess.openInMobileApp(challenge.id)) return;
   lichess.socket = new lichess.StrongSocket(
     opts.socketUrl,
@@ -19,7 +19,8 @@ lichess.startChallenge = function(element, opts) {
             url: opts.xhrUrl,
             success(html) {
               $('.lichess_overboard').replaceWith($(html).find('.lichess_overboard'));
-              $('#challenge_redirect').each(function() {
+              init();
+              if (!accepting) $('#challenge_redirect').each(function() {
                 location.href = $(this).attr('href');
               });
             }
@@ -28,6 +29,14 @@ lichess.startChallenge = function(element, opts) {
       }
     });
 
+  var init = function() {
+    $('.lichess_overboard').find('form.accept').submit(function() {
+      accepting = true;
+      $(this).html('<div class="square-wrap"><div class="square-spin"></div></div>');
+    });
+  };
+  init();
+
   var pingNow = function() {
     if (document.getElementById('ping_challenge')) {
       lichess.socket.send('ping');
@@ -36,10 +45,10 @@ lichess.startChallenge = function(element, opts) {
   };
   pingNow();
 
-  Chessground(element.querySelector('.lichess_board'), {
+  var ground = Chessground(element.querySelector('.lichess_board'), {
     viewOnly: true,
     fen: challenge.initialFen,
-    orientation: challenge.color,
+    orientation: (opts.owner ^ challenge.color === 'black') ? 'white' : 'black',
     coordinates: false,
     disableContextMenu: true
   });