more challenge stuff

app/views/challenge/explanation.scala.html

@@ -0,0 +1,10 @@
+@(c: lila.challenge.Challenge)(implicit ctx: Context)
+
+<p class="explanations">
+  @views.html.game.variantLink(c.variant, variantName(c.variant)) • @modeName(c.mode)<br />
+  @c.daysPerTurn.map { days =>
+  <span class="text" data-icon=";">@{(days == 1).fold(trans.oneDay(), trans.nbDays(days))}</span>
+  }.getOrElse {
+  <span class="text" data-icon="p">@shortClockName(c.clock.map(_.chessClock))</span>
+  }
+</p>

app/views/challenge/js.scala.html

@@ -0,0 +1,11 @@
+@(c: lila.challenge.Challenge, json: play.api.libs.json.JsObject, owner: Boolean)(implicit ctx: Context)
+
+@jsTag("challenge.js")
+@embedJs {
+lichess.startChallenge(document.getElementById('challenge'), {
+socketUrl: '@routes.Challenge.websocket(c.id, apiVersion)',
+xhrUrl: '@routes.Challenge.show(c.id)',
+owner: @owner,
+data: @Html(toJson(json))
+});
+}

app/views/challenge/mine.scala.html

@@ -2,18 +2,6 @@
 
 @import lila.challenge.Challenge.Status
 
-@moreJs = {
-@jsTag("challenge.js")
-@embedJs {
-lichess.startChallenge(document.getElementById('my_challenge'), {
-socketUrl: '@routes.Challenge.websocket(c.id, apiVersion)',
-xhrUrl: '@routes.Challenge.show(c.id)',
-owner: true,
-data: @Html(toJson(json))
-});
-}
-}
-
 @cancelForm = {
 <form method="post" action="@routes.Challenge.cancel(c.id)">
   <button type="submit" class="button text" data-icon="L">@trans.cancel()</button>
@@ -23,11 +11,14 @@ data: @Html(toJson(json))
 @round.layout(
 title = c.destUserId.isDefined.fold(trans.challengeToPlay,trans.playWithAFriend).str(),
 side = Html(""),
-moreJs = moreJs) {
-<div class="lichess_game" id="my_challenge">
+moreJs = js(c, json, true)) {
+<div class="lichess_game" id="challenge">
   <div class="lichess_board_wrap cg-512">
     <div class="lichess_board"></div>
   </div>
+  <div class="lichess_ground">
+    @base.quote(lila.quote.Quote.one(c.id))
+  </div>
   <div class="lichess_overboard">
     @c.status match {
     case Status.Created | Status.Offline => {
@@ -45,10 +36,15 @@ moreJs = moreJs) {
       <input id="lichess_id_input" class="copyable" spellcheck="false" readonly="true" value="@protocol@commonDomain@routes.Round.watcher(c.id, "white")" />
       <button class="copy button" data-rel="lichess_id_input" data-icon="&quot;"></button>
       <div class="explanations">
-        @trans.theFirstPersonToComeOnThisUrlWillPlayWithYou()<br />
+        @trans.theFirstPersonToComeOnThisUrlWillPlayWithYou()
+        <br /><br />
         @cancelForm
       </div>
       }
+      @c.initialFen.map { fen =>
+      <br />
+      @views.html.game.miniBoard(fen, color = c.chessColor.name)
+      }
     </div>
     }
     case Status.Declined => {
@@ -70,17 +66,7 @@ moreJs = moreJs) {
     </div>
     }
     }
-    <p class="explanations">
-      @trans.variant(): @views.html.game.variantLink(c.variant, variantName(c.variant))<br />
-      @c.daysPerTurn.map { days =>
-      <span data-icon=";" class="text">@{(days == 1).fold(trans.oneDay(), trans.nbDays(days))}</span>
-      }.getOrElse {
-      <span data-icon="p" class="text">@shortClockName(c.clock.map(_.chessClock))</span>
-      }
-      <br />
-      @trans.mode(): @modeName(c.mode)
-    </p>
-    @base.quote(lila.quote.Quote.one(c.id))
+    @explanation(c)
   </div>
 </div>
 }

app/views/challenge/theirs.scala.html

@@ -1,56 +1,33 @@
 @(c: lila.challenge.Challenge, json: play.api.libs.json.JsObject)(implicit ctx: Context)
-@*
-@import pov._
 
-@moreJs = {
-@embedJs {
-lichess = lichess || {};
-lichess.prelude = {
-data: @Html(play.api.libs.json.Json.stringify(data)),
-};
-}
-}
+@import lila.challenge.Challenge.Status
 
 @round.layout(
 title = trans.playWithAFriend.str(),
-moreJs = moreJs,
-side = Html("")) {
-<div class="lichess_game">
+side = Html(""),
+moreJs = js(c, json, false)) {
+<div class="lichess_game" id="challenge">
   <div class="lichess_board_wrap cg-512">
     <div class="lichess_board"></div>
   </div>
-  <div class="lichess_overboard joining @game.id">
-    @opponentUser.map { u =>
-    @userLink(u)
-    }.getOrElse {
-    @User.anonymous
+  <div class="lichess_overboard">
+    @userIdLink(c.challengerUserId)
+    @explanation(c)
+    @c.initialFen.map { fen =>
+    <br />
+    @views.html.game.miniBoard(fen, color = c.chessColor.name)
     }
-    @config.map { c =>
-    <p class="explanations">
-      @views.html.game.variantLink(c.variant, variantName(c.variant)), @modeName(c.mode)<br />
-      @game.daysPerTurn.map { days =>
-      <span class="text" data-icon=";">@{(days == 1).fold(trans.oneDay(), trans.nbDays(days))}</span>
-      }.getOrElse {
-      <span class="text" data-icon="p">@shortClockName(c.makeClock)</span>
-      }
-      <br />
-    </p>
-    }
-    @initialFen.map { fen =>
-    @views.html.game.miniBoard(fen, color = pov.color.name)
-    }
-    @if(!game.rated || ctx.isAuth) {
-    @if(game.rated && game.isUnlimited) {
+    @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.Setup.join(gameId)" method="post">
+    <form style="margin-top: 20px" 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(pov.gameId, "white")">log in</a> to join it.</p>
+    <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>
     }
   </div>
 </div>
 }
-*@

modules/challenge/src/main/Challenge.scala

@@ -34,6 +34,7 @@ case class Challenge(
     case TimeControl.Correspondence(d) => d.some
     case _                             => none
   }
+  def unlimited = TimeControl == TimeControl.Unlimited
 
   def clock = timeControl match {
     case c: TimeControl.Clock => c.some

public/javascripts/challenge.js

@@ -1,5 +1,6 @@
 lichess = lichess || {};
 lichess.startChallenge = function(element, opts) {
+  console.log(opts);
   var challenge = opts.data.challenge;
   if (!opts.owner && lichess.openInMobileApp(challenge.id)) return;
   lichess.socket = new lichess.StrongSocket(

public/stylesheets/challengeApp.css

@@ -53,16 +53,23 @@
   border-width: 1px 1px 0 0;
 }
 #challenge_app .challenge button,
-#challenge_app .challenge .text {
+#challenge_app .challenge .owner {
   height: 42px;
   box-sizing: border-box;
 }
-#challenge_app .challenge .text {
+#challenge_app .challenge .owner {
   border: 1px solid #e2e2e2;
   border-width: 1px 1px 0 0;
   vertical-align: center;
   line-height: 42px;
 }
+#challenge_app .challenge .owner .view,
+#challenge_app .challenge .owner:hover .waiting {
+  display: none;
+}
+#challenge_app .challenge .owner:hover .view {
+  display: block;
+}
 #challenge_app .challenge button::before {
   line-height: 42px;
 }

public/stylesheets/dark.css

@@ -375,7 +375,7 @@ body.dark table.slist thead {
 }
 body.dark .button,
 body.dark a.button,
-body.dark #challenge_app .text,
+body.dark #challenge_app .owner,
 body.dark .ui-button,
 body.dark .ui-slider-handle,
 body.dark .ui-widget-content,

ui/challenge/src/view.js

@@ -1,6 +1,7 @@
 var m = require('mithril');
 
 function user(u) {
+  if (!u) return 'Open challenge';
   var rating = u.rating + (u.provisional ? '?' : '');
   var fullName = (u.title ? u.title + ' ' : '') + u.name;
   return {
@@ -51,7 +52,12 @@ function inButtons(ctrl, c) {
 
 function outButtons(ctrl, c) {
   return [
-    m('span.text', 'waiting...'),
+    m('div.owner', [
+      m('span.waiting', 'waiting...'),
+      m('a.view', {
+        href: '/' + c.id
+      }, 'View challenge')
+    ]),
     m('form', {
       method: 'post',
       action: '/challenge/' + c.id + '/cancel'