let people embed the daily puzzle in their site!
Thibault Duplessis
parent
fd6a5ee3e4
commit
8ae8b90335
|
|
@ -48,8 +48,7 @@ object Main extends LilaController {
|
|||
|
||||
def embed = Action { req =>
|
||||
Ok {
|
||||
"""document.write("<iframe src='%s?embed=" + document.domain + "' class='lichess-iframe' allowtransparency='true' frameBorder='0' style='width: %dpx; height: %dpx;' title='Lichess free online chess'></iframe>");"""
|
||||
.format(Env.api.Net.BaseUrl, getInt("w", req) | 820, getInt("h", req) | 650)
|
||||
s"""document.write("<iframe src='${Env.api.Net.BaseUrl}?embed=" + document.domain + "' class='lichess-iframe' allowtransparency='true' frameBorder='0' style='width: ${getInt("w", req) | 820}px; height: ${getInt("h", req) | 650}px;' title='Lichess free online chess'></iframe>");"""
|
||||
} as JAVASCRIPT withHeaders (CACHE_CONTROL -> "max-age=86400")
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -144,4 +144,22 @@ object Puzzle extends LilaController {
|
|||
) map (_ as JSON)
|
||||
}
|
||||
}
|
||||
|
||||
def embed = Action { req =>
|
||||
Ok {
|
||||
val bg = get("bg", req) | "light"
|
||||
val theme = get("theme", req) | "brown"
|
||||
val url = s"""${req.domain + routes.Puzzle.frame}?bg=$bg&theme=$theme"""
|
||||
s"""document.write("<iframe src='http://$url&embed=" + document.domain + "' class='lichess-training-iframe' allowtransparency='true' frameBorder='0' style='width: 224px; height: 264px;' title='Lichess free online chess'></iframe>");"""
|
||||
} as JAVASCRIPT withHeaders (CACHE_CONTROL -> "max-age=86400")
|
||||
}
|
||||
|
||||
def frame = Open { implicit ctx =>
|
||||
OptionOk(env.daily()) { daily =>
|
||||
html.puzzle.embed(
|
||||
daily,
|
||||
get("bg") | "light",
|
||||
lila.pref.Theme(~get("theme")).cssClass)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,31 @@
|
|||
@(daily: lila.puzzle.DailyPuzzle, bg: String, theme: String)(implicit ctx: Context)
|
||||
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>lichess.org training</title>
|
||||
@if(bg == "dark") {
|
||||
@cssTag("dark.css")
|
||||
}
|
||||
@cssTag(s"piece/merida.css")
|
||||
@cssTag("common.css")
|
||||
@cssTag("board.css")
|
||||
<meta charset="utf-8">
|
||||
</head>
|
||||
<body
|
||||
class="base highlight @bg"
|
||||
style="width: 224px; height: 264px; overflow: hidden;">
|
||||
<div id="daily_puzzle" class="is2d highlight @bg @theme merida" title="@trans.clickToSolve()">
|
||||
@daily.html
|
||||
<div class="vstext" style="text-align: center">
|
||||
@trans.puzzleOfTheDay()<br />
|
||||
@daily.color.fold(trans.whitePlays, trans.blackPlays)()
|
||||
</div>
|
||||
</div>
|
||||
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
|
||||
@jsTag("vendor/chessground.min.js")
|
||||
@jsTagCompiled("puzzle.js")
|
||||
@base.ga()
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
|
@ -43,6 +43,35 @@
|
|||
<br />
|
||||
<br />
|
||||
|
||||
<div class="content_box small_box developers">
|
||||
<h1 id="embed-puzzle" class="lichess_title">Embed the daily puzzle in your site</h1>
|
||||
|
||||
<div style="text-align: center;">
|
||||
<script src="http://en.@netDomain/training/embed?theme=green&bg=light"></script>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
Just add the following line to your site html:
|
||||
</p>
|
||||
|
||||
<pre><script src="http://en.@netDomain/training/embed?theme=green&bg=light"></script></pre>
|
||||
|
||||
<p>
|
||||
Parameters:
|
||||
<ul>
|
||||
<li>- <strong>theme</strong>: Controls the board theme. Available themes: @lila.pref.Theme.list.map(_.name).mkString(", ").</li>
|
||||
<li>- <strong>bg</strong>: Controls the background color. Available backgrounds: light, dark.</li>
|
||||
</ul>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
The text is automatically translated to your visitor language.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<br />
|
||||
<br />
|
||||
|
||||
<div class="content_box small_box developers">
|
||||
<h1 id="use-api" class="lichess_title">Lichess HTTP API</h1>
|
||||
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
<meta charset="utf-8">
|
||||
</head>
|
||||
<body
|
||||
class="base"
|
||||
class="base highlight @bg"
|
||||
style="width: 224px; height: 264px; overflow: hidden;"
|
||||
data-stream-url="@routes.Tv.streamOut">
|
||||
<div id="featured_game" class="is2d highlight @bg @theme merida" title="lichess.org TV">
|
||||
|
|
|
|||
|
|
@ -89,6 +89,8 @@ POST /training/difficulty controllers.Puzzle.difficulty
|
|||
GET /training/new controllers.Puzzle.newPuzzle
|
||||
GET /training/history controllers.Puzzle.history
|
||||
GET /training/daily controllers.Puzzle.daily
|
||||
GET /training/embed controllers.Puzzle.embed
|
||||
GET /training/frame controllers.Puzzle.frame
|
||||
GET /training/:id controllers.Puzzle.show(id: Int)
|
||||
GET /training/:id/load controllers.Puzzle.load(id: Int)
|
||||
POST /training/:id/attempt controllers.Puzzle.attempt(id: Int)
|
||||
|
|
|
|||
|
|
@ -0,0 +1,11 @@
|
|||
var elem = document.querySelector('#daily_puzzle .mini_board');
|
||||
elem.target = '_blank';
|
||||
var lm = elem.getAttribute('data-lastmove');
|
||||
Chessground(elem, {
|
||||
coordinates: false,
|
||||
viewOnly: true,
|
||||
minimalDom: true,
|
||||
fen: elem.getAttribute('data-fen'),
|
||||
lastMove: lm ? [lm[0] + lm[1], lm[2] + lm[3]] : null,
|
||||
orientation: elem.getAttribute('data-color')
|
||||
});
|
||||
|
|
@ -5,7 +5,6 @@ function parseFen($elem) {
|
|||
$elem.each(function() {
|
||||
var $this = $(this).removeClass('parse_fen');
|
||||
var lm = $this.data('lastmove');
|
||||
var lastMove = lm ? [lm[0] + lm[1], lm[2] + lm[3]] : [];
|
||||
var color = $this.data('color');
|
||||
var ground = $this.data('chessground');
|
||||
var playable = $this.data('playable');
|
||||
|
|
|
|||
Loading…
Reference in New Issue