improve & unify await & join views
This commit is contained in:
parent
a728a85a91
commit
20f0737a9a
|
@ -93,10 +93,10 @@ object Round extends LilaController with TheftPrevention {
|
||||||
|
|
||||||
private def join(pov: Pov)(implicit ctx: Context): Fu[Result] =
|
private def join(pov: Pov)(implicit ctx: Context): Fu[Result] =
|
||||||
GameRepo initialFen pov.gameId zip
|
GameRepo initialFen pov.gameId zip
|
||||||
env.version(pov.gameId) zip
|
Env.api.roundApi.player(pov, Env.api.version) zip
|
||||||
((pov.player.userId orElse pov.opponent.userId) ?? UserRepo.byId) map {
|
((pov.player.userId orElse pov.opponent.userId) ?? UserRepo.byId) map {
|
||||||
case ((fen, version), opponent) => Ok(html.setup.join(
|
case ((fen, data), opponent) => Ok(html.setup.join(
|
||||||
pov, opponent, version, Env.setup.friendConfigMemo get pov.game.id, fen))
|
pov, data, opponent, Env.setup.friendConfigMemo get pov.game.id, fen))
|
||||||
}
|
}
|
||||||
|
|
||||||
def tableWatcher(gameId: String, color: String) = Open { implicit ctx =>
|
def tableWatcher(gameId: String, color: String) = Open { implicit ctx =>
|
||||||
|
|
|
@ -5,7 +5,7 @@
|
||||||
@moreJs = {
|
@moreJs = {
|
||||||
@embedJs {
|
@embedJs {
|
||||||
lichess = lichess || {};
|
lichess = lichess || {};
|
||||||
lichess.await = {
|
lichess.prelude = {
|
||||||
data: @Html(play.api.libs.json.Json.stringify(data)),
|
data: @Html(play.api.libs.json.Json.stringify(data)),
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
@ -16,42 +16,40 @@ title = userOption.isDefined.fold(trans.challengeToPlay,trans.playWithAFriend).s
|
||||||
moreJs = moreJs,
|
moreJs = moreJs,
|
||||||
side = Html(""),
|
side = Html(""),
|
||||||
signedJs = routes.Round.signedJs(pov.gameId).toString.some) {
|
signedJs = routes.Round.signedJs(pov.gameId).toString.some) {
|
||||||
<div class="top">
|
<div class="lichess_game">
|
||||||
<div class="lichess_game cg-512">
|
<div class="lichess_board_wrap cg-512">
|
||||||
<div class="lichess_board_wrap">
|
<div class="lichess_board"></div>
|
||||||
<div class="lichess_board"></div>
|
</div>
|
||||||
</div>
|
<div class="lichess_overboard">
|
||||||
<div class="lichess_overboard">
|
@userOption.map { user =>
|
||||||
@userOption.map { user =>
|
<div id="challenge_await" data-user="@user.id">
|
||||||
<div id="challenge_await" data-user="@user.id">
|
<h2>@trans.challengeToPlay()</h2>
|
||||||
<h2>@trans.challengeToPlay()</h2>
|
@userLink(user, cssClass="target".some)
|
||||||
@userLink(user, cssClass="target".some)
|
<span class="loader"><span data-icon="U"></span></span>
|
||||||
<span class="loader"><span data-icon="U"></span></span>
|
|
||||||
<p class="explanations">
|
|
||||||
@trans.waitingForOpponent()<br />
|
|
||||||
<a href="@routes.Setup.cancel(fullId)">@trans.cancel()</a>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div id="challenge_declined" class="none">
|
|
||||||
<h2>Challenge declined</h2>
|
|
||||||
<a href="@routes.Lobby.home()">@trans.playWithAnotherOpponent()</a>
|
|
||||||
</div>
|
|
||||||
}.getOrElse {
|
|
||||||
@trans.toInviteSomeoneToPlayGiveThisUrl():
|
|
||||||
<input id="lichess_id_input" class="copyable" spellcheck="false" readonly="true" value="@protocol@commonDomain@routes.Round.watcher(gameId, "white")" />
|
|
||||||
<p class="explanations">
|
<p class="explanations">
|
||||||
@trans.theFirstPersonToComeOnThisUrlWillPlayWithYou()<br />
|
@trans.waitingForOpponent()<br />
|
||||||
<a href="@routes.Setup.cancel(fullId)">@trans.cancel()</a>
|
<a href="@routes.Setup.cancel(fullId)">@trans.cancel()</a>
|
||||||
</p>
|
</p>
|
||||||
}
|
|
||||||
@config.map { c =>
|
|
||||||
<p class="explanations">
|
|
||||||
@trans.variant(): @views.html.game.variantLink(c.variant, variantName(c.variant))<br />
|
|
||||||
<span data-icon="p"></span> @clockName(c.makeClock)<br />
|
|
||||||
@trans.mode(): @modeName(c.mode)
|
|
||||||
</p>
|
|
||||||
}
|
|
||||||
</div>
|
</div>
|
||||||
|
<div id="challenge_declined" class="none">
|
||||||
|
<h2>Challenge declined</h2>
|
||||||
|
<a href="@routes.Lobby.home()">@trans.playWithAnotherOpponent()</a>
|
||||||
|
</div>
|
||||||
|
}.getOrElse {
|
||||||
|
@trans.toInviteSomeoneToPlayGiveThisUrl():
|
||||||
|
<input id="lichess_id_input" class="copyable" spellcheck="false" readonly="true" value="@protocol@commonDomain@routes.Round.watcher(gameId, "white")" />
|
||||||
|
<p class="explanations">
|
||||||
|
@trans.theFirstPersonToComeOnThisUrlWillPlayWithYou()<br />
|
||||||
|
<a href="@routes.Setup.cancel(fullId)">@trans.cancel()</a>
|
||||||
|
</p>
|
||||||
|
}
|
||||||
|
@config.map { c =>
|
||||||
|
<p class="explanations">
|
||||||
|
@trans.variant(): @views.html.game.variantLink(c.variant, variantName(c.variant))<br />
|
||||||
|
<span data-icon="p"></span> @clockName(c.makeClock)<br />
|
||||||
|
@trans.mode(): @modeName(c.mode)
|
||||||
|
</p>
|
||||||
|
}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
@(form: Form[_], typ: String, title: Html, route: Call, fields: Html, error: Option[Html] = None)(implicit ctx: Context)
|
@(form: Form[_], typ: String, title: Html, route: Call, fields: Html, error: Option[Html] = None)(implicit ctx: Context)
|
||||||
|
|
||||||
<div class="lichess_overboard auto_center game_config game_config_@typ">
|
<div class="lichess_overboard game_config game_config_@typ">
|
||||||
<a href="@routes.Lobby.home" class="close icon" title="@trans.cancel()" data-icon="L"></a>
|
<a href="@routes.Lobby.home" class="close icon" title="@trans.cancel()" data-icon="L"></a>
|
||||||
<h2>@title</h2>
|
<h2>@title</h2>
|
||||||
@error.map { e =>
|
@error.map { e =>
|
||||||
|
|
|
@ -1,44 +1,51 @@
|
||||||
@(pov: Pov, opponentUser: Option[User], version: Int, config: Option[lila.setup.FriendConfig], initialFen: Option[String])(implicit ctx: Context)
|
@(pov: Pov, data: play.api.libs.json.JsObject, opponentUser: Option[User], config: Option[lila.setup.FriendConfig], initialFen: Option[String])(implicit ctx: Context)
|
||||||
|
|
||||||
@import pov._
|
@import pov._
|
||||||
|
|
||||||
|
@moreJs = {
|
||||||
|
@embedJs {
|
||||||
|
lichess = lichess || {};
|
||||||
|
lichess.prelude = {
|
||||||
|
data: @Html(play.api.libs.json.Json.stringify(data)),
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@round.layout(
|
@round.layout(
|
||||||
title = trans.playWithAFriend.str(),
|
title = trans.playWithAFriend.str(),
|
||||||
|
moreJs = moreJs,
|
||||||
side = Html(""),
|
side = Html(""),
|
||||||
signedJs = routes.Round.signedJs(pov.gameId).toString.some) {
|
signedJs = routes.Round.signedJs(pov.gameId).toString.some) {
|
||||||
<div class="lichess_game lichess_game_not_started clearfix pov_@color">
|
<div class="lichess_game">
|
||||||
<div class="lichess_board_wrap">
|
<div class="lichess_board_wrap cg-512">
|
||||||
<div class="ground cg-512"></div>
|
<div class="lichess_board"></div>
|
||||||
<div class="lichess_overboard auto_center joining @game.id">
|
</div>
|
||||||
@opponentUser.map { u =>
|
<div class="lichess_overboard joining @game.id">
|
||||||
@userLink(u)
|
@opponentUser.map { u =>
|
||||||
}.getOrElse {
|
@userLink(u)
|
||||||
@User.anonymous
|
}.getOrElse {
|
||||||
}
|
@User.anonymous
|
||||||
@config.map { c =>
|
}
|
||||||
<p class="explanations">
|
@config.map { c =>
|
||||||
@views.html.game.variantLink(c.variant, variantName(c.variant)), @modeName(c.mode)<br />
|
<p class="explanations">
|
||||||
<span data-icon="p"></span> @clockName(c.makeClock)<br />
|
@views.html.game.variantLink(c.variant, variantName(c.variant)), @modeName(c.mode)<br />
|
||||||
</p>
|
<span data-icon="p"></span> @clockName(c.makeClock)<br />
|
||||||
}
|
</p>
|
||||||
@initialFen.map { fen =>
|
}
|
||||||
@views.html.game.miniBoard(fen)
|
@initialFen.map { fen =>
|
||||||
}
|
@views.html.game.miniBoard(fen, color = pov.color.name)
|
||||||
@if(!game.rated || ctx.isAuth) {
|
}
|
||||||
@if(game.rated && !game.hasClock) {
|
@if(!game.rated || ctx.isAuth) {
|
||||||
<div class="join_warning warning">@trans.bewareTheGameIsRatedButHasNoClock()</div>
|
@if(game.rated && !game.hasClock) {
|
||||||
}
|
<div class="join_warning warning">@trans.bewareTheGameIsRatedButHasNoClock()</div>
|
||||||
<form style="margin-top: 20px" action="@routes.Setup.join(gameId)" method="post">
|
}
|
||||||
<button name="submit" type="submit" class="submit button" data-icon="G"> @trans.joinTheGame()</button>
|
<form style="margin-top: 20px" action="@routes.Setup.join(gameId)" method="post">
|
||||||
</form>
|
<button name="submit" type="submit" class="submit button" data-icon="G"> @trans.joinTheGame()</button>
|
||||||
} else {
|
</form>
|
||||||
<hr />
|
} else {
|
||||||
<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>
|
<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>
|
||||||
</div>
|
}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@*
|
|
||||||
@embedJs("var _ld_ = " + roundWatcherJsData(pov, version, false, ctx.pref))
|
|
||||||
*@
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -329,7 +329,7 @@ var storage = {
|
||||||
}
|
}
|
||||||
|
|
||||||
if (lichess.round) startRound(document.getElementById('lichess'), lichess.round);
|
if (lichess.round) startRound(document.getElementById('lichess'), lichess.round);
|
||||||
else if (lichess.await) startAwait(document.querySelector('.lichess_game'), lichess.await);
|
else if (lichess.prelude) startPrelude(document.querySelector('.lichess_game'), lichess.prelude);
|
||||||
|
|
||||||
setTimeout(function() {
|
setTimeout(function() {
|
||||||
if (lichess.socket === null) {
|
if (lichess.socket === null) {
|
||||||
|
@ -727,13 +727,13 @@ var storage = {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function startAwait(element, cfg) {
|
function startPrelude(element, cfg) {
|
||||||
var data = cfg.data;
|
var data = cfg.data;
|
||||||
lichess.socket = new lichess.StrongSocket(
|
lichess.socket = new lichess.StrongSocket(
|
||||||
data.url.socket,
|
data.url.socket,
|
||||||
data.player.version, {
|
data.player.version, {
|
||||||
options: {
|
options: {
|
||||||
name: "await"
|
name: "prelude"
|
||||||
},
|
},
|
||||||
params: {
|
params: {
|
||||||
ran: "--ranph--"
|
ran: "--ranph--"
|
||||||
|
@ -742,7 +742,7 @@ var storage = {
|
||||||
|
|
||||||
Chessground(element.querySelector('.lichess_board'), {
|
Chessground(element.querySelector('.lichess_board'), {
|
||||||
viewOnly: true,
|
viewOnly: true,
|
||||||
fen: data.fen,
|
fen: data.game.fen,
|
||||||
orientation: data.player.color,
|
orientation: data.player.color,
|
||||||
check: data.game.check,
|
check: data.game.check,
|
||||||
coordinates: data.pref.coords !== 0,
|
coordinates: data.pref.coords !== 0,
|
||||||
|
|
|
@ -1507,6 +1507,7 @@ div.extra_top {
|
||||||
margin: 20px 20px 0 0;
|
margin: 20px 20px 0 0;
|
||||||
}
|
}
|
||||||
.mini_board .cg-board-wrap {
|
.mini_board .cg-board-wrap {
|
||||||
|
margin: auto;
|
||||||
width: 224px;
|
width: 224px;
|
||||||
height: 224px;
|
height: 224px;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
|
@ -30,7 +30,7 @@
|
||||||
"watchify": "^1.0.2"
|
"watchify": "^1.0.2"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"chessground": "^1.6.1",
|
"chessground": "^1.6.2",
|
||||||
"lodash-node": "^2.4.1",
|
"lodash-node": "^2.4.1",
|
||||||
"mithril": "^0.1.22"
|
"mithril": "^0.1.22"
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue