deepcrayon
/
lila
1
0
Fork 0
Code Releases Activity

simul UI WIP

more-scalatags
Thibault Duplessis 2019-04-04 15:02:49 +07:00
parent eb43322768
commit fda63f1557
25 changed files with 189 additions and 158 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/views/setup/filter.scala
View File

@ -77,9 +77,9 @@ object filter {
checks: List[String],
content: Frag,
hint: Option[String]
) = label(cls := "hover", title := hint)(
) = label(title := hint)(
input(
`type` := "checkbox",
tpe := "checkbox",
name := s"${form(key).name}[$index]",
st.value := value,
checked := checks.has(value).option(true)

37
app/views/simul/bits.scala
View File

@ -14,17 +14,16 @@ object bits {
def jsI18n()(implicit ctx: Context) = safeJsonValue(i18nJsObject(baseTranslations))
def notFound()(implicit ctx: Context) =
layout(title = trans.noSimulFound.txt()) {
div(id := "simul")(
div(cls := "content_box small_box faq_page")(
views.html.base.layout(
responsive = true,
title = trans.noSimulFound.txt()
) {
main(cls := "page-small box box-pad")(
h1(trans.noSimulFound.frag()),
br, br,
trans.noSimulExplanation.frag(),
br, br,
a(href := routes.Simul.home())(trans.returnToSimulHomepage.frag())
p(trans.noSimulExplanation.frag()),
p(a(href := routes.Simul.home())(trans.returnToSimulHomepage.frag()))
)
)
}
}
def homepageSpotlight(s: lila.simul.Simul)(implicit ctx: Context) =
a(href := routes.Simul.show(s.id), cls := "tour-spotlight little id_@s.id")(
@ -66,26 +65,6 @@ object bits {
sim.variants.map(_.name).mkString(", ")
)
private[simul] def layout(
title: String,
moreJs: Frag = emptyFrag,
moreCss: Frag = emptyFrag,
side: Option[Frag] = None,
chat: Option[Frag] = None,
underchat: Option[Frag] = None,
chessground: Boolean = true,
openGraph: Option[lila.app.ui.OpenGraph] = None
)(body: Frag)(implicit ctx: Context) = views.html.base.layout(
title = title,
moreJs = moreJs,
moreCss = frag(cssTag("simul.css"), moreCss),
side = side.map(_.toHtml),
chat = chat.map(_.toHtml),
underchat = underchat.map(_.toHtml),
chessground = chessground,
openGraph = openGraph
)(body)
private val baseTranslations = Vector(
trans.finished,
trans.withdraw,

51
app/views/simul/form.scala
View File

@ -15,35 +15,34 @@ object form {
import config._
bits.layout(
views.html.base.layout(
responsive = true,
title = trans.hostANewSimul.txt(),
moreCss = cssTag("form3.css")
moreCss = responsiveCssTag("simul.form")
) {
div(id := "simul", cls := "form")(
div(cls := "content_box small_box simul_box")(
h1(trans.hostANewSimul.frag()),
st.form(cls := "form3", action := routes.Simul.create(), method := "POST")(
br, br,
p(trans.whenCreateSimul.frag()),
br, br,
globalError(form),
form3.group(form("variant"), trans.simulVariantsHint.frag()) { f =>
div(cls := "variants")(
views.html.setup.filter.renderCheckboxes(form, "variants", form.value.map(_.variants.map(_.toString)).getOrElse(Nil), translatedVariantChoicesWithVariants)
)
},
form3.split(
form3.group(form("clockTime"), raw("Clock initial time"), help = trans.simulClockHint.frag().some, half = true)(form3.select(_, clockTimeChoices)),
form3.group(form("clockIncrement"), raw("Clock increment"), half = true)(form3.select(_, clockIncrementChoices))
),
form3.group(form("clockExtra"), trans.simulHostExtraTime.frag(), help = trans.simulAddExtraTime.frag().some)(
form3.select(_, clockExtraChoices)
),
form3.group(form("color"), raw("Host color for each game"))(form3.select(_, colorChoices)),
form3.actions(
a(href := routes.Simul.home())(trans.cancel.frag()),
form3.submit(trans.hostANewSimul.frag(), icon = "g".some)
main(cls := "box box-pad page-small simul-form")(
h1(trans.hostANewSimul.frag()),
st.form(cls := "form3", action := routes.Simul.create(), method := "POST")(
br, br,
p(trans.whenCreateSimul.frag()),
br, br,
globalError(form),
form3.group(form("variant"), trans.simulVariantsHint.frag()) { f =>
div(cls := "variants")(
views.html.setup.filter.renderCheckboxes(form, "variants", form.value.map(_.variants.map(_.toString)).getOrElse(Nil), translatedVariantChoicesWithVariants)
)
},
form3.split(
form3.group(form("clockTime"), raw("Clock initial time"), help = trans.simulClockHint.frag().some, half = true)(form3.select(_, clockTimeChoices)),
form3.group(form("clockIncrement"), raw("Clock increment"), half = true)(form3.select(_, clockIncrementChoices))
),
form3.group(form("clockExtra"), trans.simulHostExtraTime.frag(), help = trans.simulAddExtraTime.frag().some)(
form3.select(_, clockExtraChoices)
),
form3.group(form("color"), raw("Host color for each game"))(form3.select(_, colorChoices)),
form3.actions(
a(href := routes.Simul.home())(trans.cancel.frag()),
form3.submit(trans.hostANewSimul.frag(), icon = "g".some)
)
)
)

33
app/views/simul/home.scala
View File

@ -14,29 +14,30 @@ object home {
opens: List[lila.simul.Simul],
starteds: List[lila.simul.Simul],
finisheds: List[lila.simul.Simul]
)(implicit ctx: Context) = bits.layout(
)(implicit ctx: Context) = views.html.base.layout(
responsive = true,
moreCss = responsiveCssTag("simul.list"),
moreJs = jsTag("simul-list.js"),
title = trans.simultaneousExhibitions.txt(),
side = div(cls := "help")(
trans.aboutSimul(),
" ",
a(cls := "more")(trans.more.frag(), "..."),
div(cls := "more none")(
img(src := staticUrl("images/fischer-simul.jpg"), alt := "Simul IRL with Bobby Fischer")(
em("[1964] ", trans.aboutSimulImage.frag()),
p(trans.aboutSimulRealLife.frag()),
p(trans.aboutSimulRules.frag()),
p(trans.aboutSimulSettings.frag())
)
)
).some,
openGraph = lila.app.ui.OpenGraph(
title = trans.simultaneousExhibitions.txt(),
url = s"$netBaseUrl${routes.Simul.home}",
description = trans.aboutSimul.txt()
).some
) {
div(id := "simul_list", dataHref := routes.Simul.homeReload())(
homeInner(opens, starteds, finisheds)
main(cls := "page-menu simul-list")(
st.aside(cls := "page-menu__menu simul-list__help")(
p(trans.aboutSimul()),
img(src := staticUrl("images/fischer-simul.jpg"), alt := "Simul IRL with Bobby Fischer")(
em("[1964] ", trans.aboutSimulImage.frag()),
p(trans.aboutSimulRealLife.frag()),
p(trans.aboutSimulRules.frag()),
p(trans.aboutSimulSettings.frag())
)
),
div(cls := "page-menu__content simul-list__content", dataHref := routes.Simul.homeReload())(
homeInner(opens, starteds, finisheds)
)
)
}
}

6
app/views/simul/homeInner.scala
View File

@ -15,9 +15,9 @@ object homeInner {
starteds: List[lila.simul.Simul],
finisheds: List[lila.simul.Simul]
)(implicit ctx: Context) =
div(cls := "content_box simul_box no_padding")(
div(cls := "box")(
h1(trans.simultaneousExhibitions.frag()),
table(cls := "slist")(
table(cls := "slist slist-pad")(
thead(
tr(
th(colspan := 2, cls := "large")(trans.createdSimuls.frag()),
@ -79,7 +79,7 @@ object homeInner {
private def iconTd(sim: lila.simul.Simul) =
td(cls := List(
"variant_icons" -> true,
"variant-icons" -> true,
"rich" -> sim.variantRich
))(
sim.perfTypes.map { pt =>

51
app/views/simul/show.scala
View File

@ -17,13 +17,32 @@ object show {
data: play.api.libs.json.JsObject,
chatOption: Option[lila.chat.UserChat.Mine],
stream: Option[lila.streamer.Stream]
)(implicit ctx: Context) = bits.layout(
)(implicit ctx: Context) = views.html.base.layout(
responsive = true,
moreCss = responsiveCssTag("simul.show"),
title = sim.fullName,
side = Some(frag(
div(cls := "side_box padded")(
underchat = Some(div(
cls := "watchers none",
aria.live := "off",
aria.relevant := "additions removals text"
)(span(cls := "list inline_userlist"))),
chat = views.html.chat.frag.some,
moreJs = frag(
jsAt(s"compiled/lichess.simul${isProd ?? (".min")}.js"),
embedJs(s"""lichess.simul={
data:${safeJsonValue(data)},
i18n:${bits.jsI18n()},
socketVersion:${socketVersion.value},
userId: $jsUserIdString,
chat: ${chatOption.fold("null")(c => safeJsonValue(views.html.chat.json(c.chat, name = trans.chatRoom.txt(), timeout = c.timeout, public = true)))}}""")
)
) {
main(cls := "simul page-menu")(
st.aside(cls := "page-menu__menu")(
div(cls := "simul__meta")(
div(cls := "game_infos")(
div(cls := List(
"variant_icons" -> true,
"variant-icons" -> true,
"rich" -> sim.variantRich
))(sim.perfTypes.map { pt => span(dataIcon := pt.iconChar) }),
span(cls := "clock")(sim.clock.config.show),
@ -54,27 +73,7 @@ object show {
dataIcon := ""
)(usernameOrId(s.streamer.userId), " is streaming")
}
)),
underchat = Some(div(
cls := "watchers none",
aria.live := "off",
aria.relevant := "additions removals text"
)(span(cls := "list inline_userlist"))),
chat = views.html.chat.frag.some,
moreJs = frag(
jsAt(s"compiled/lichess.simul${isProd ?? (".min")}.js"),
embedJs(s"""lichess.simul={
data:${safeJsonValue(data)},
i18n:${bits.jsI18n()},
socketVersion:${socketVersion.value},
userId: $jsUserIdString,
chat: ${chatOption.fold("null")(c => safeJsonValue(views.html.chat.json(c.chat, name = trans.chatRoom.txt(), timeout = c.timeout, public = true)))}}""")
),
moreCss = cssTags(List(
"chat.css" -> true,
"quote.css" -> sim.isCreated
))
) {
div(id := "simul")
),
div(cls := "page-menu__content simul__content")
}
}

7
public/javascripts/simul-list.js 100644
View File

@ -0,0 +1,7 @@
$(function() {
lichess.StrongSocket.defaults.events.reload = function() {
$('.simul-list__content').load($simulList.data('href'), function() {
lichess.pubsub.emit('content_loaded')();
});
};
});

29
public/stylesheets/simul.css
View File

@ -136,35 +136,6 @@ div.side_box .game_infos {
padding-left: 1em;
}
#simul_list table.slist {
line-height: 2.3em;
}
#simul_list table.slist td {
padding-top: 1em;
padding-bottom: 1em;
}
#simul_list table.slist .header {
letter-spacing: 2px;
cursor: pointer;
transition: transform 0.3s;
padding: 0!important;
}
#simul_list table.slist .header:hover {
transform: translateX(3px);
}
#simul_list table.slist .header a {
padding: 1em;
display: block;
}
#simul_list table.slist .name {
letter-spacing: 3px;
font-size: 1.7em;
display: block;
}
#simul_list table.slist .create td {
padding: 2em;
text-align: center;
}
.setup {
text-transform: uppercase;
}

9
ui/lobby/css/app/_hook-filter.scss
View File

@ -19,6 +19,10 @@
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
label, input {
vertical-align: middle;
cursor: pointer;
}
}
tr.variant td:last-child {
display: flex;
@ -27,11 +31,6 @@
tr.variant .checkable {
width: 33.3%;
}
label.hover,
input {
vertical-align: middle;
cursor: pointer;
}
input {
margin-right: .3em;
}

15
ui/simul/css/_form.scss 100644
View File

@ -0,0 +1,15 @@
.simul-form .variants {
display: flex;
flex-flow: row wrap;
.checkable {
flex: 1 1 33%;
white-space: nowrap;
input {
margin-right: .3em;
}
label, input {
vertical-align: middle;
cursor: pointer;
}
}
}

57
ui/simul/css/_list.scss 100644
View File

@ -0,0 +1,57 @@
.simul-list {
&__help {
color: $c-font-page;
max-width: 350px;
margin: 9em $block-gap 0 0;
img {
@extend %box-radius;
width: 100%;
}
em {
display: block;
font-style: italic;
margin-bottom: 1em;
}
display: none;
@include breakpoint($mq-large) {
display: block;
}
}
.slist {
td {
padding-top: 1em;
padding-bottom: 1em;
}
.header {
cursor: pointer;
}
.header a {
padding: 1em;
display: block;
}
.name {
white-space: nowrap;
letter-spacing: 2px;
font-size: 1.7em;
display: block;
}
.create td {
padding: 2em;
text-align: center;
}
}
.variant-icons {
white-space: nowrap;
padding-right: 0;
span {
font-size: 3.5em;
text-shadow: 0 0 5px $c-bg-high, 0 0 10px $c-bg-high, 0 0 20px $c-bg-high;
&:not(:first-child) {
margin-left: -0.5em;
}
}
&.rich span:not(:first-child) {
margin-left: -.9em;
}
}
}

0
ui/simul/css/_show.scss 100644
View File

3
ui/simul/css/build/_simul.form.scss 100644
View File

@ -0,0 +1,3 @@
@import '../../../common/css/plugin';
@import '../../../common/css/form/form3';
@import '../form';

3
ui/simul/css/build/_simul.list.scss 100644
View File

@ -0,0 +1,3 @@
@import '../../../common/css/plugin';
@import '../../../common/css/component/slist';
@import '../list';

2
ui/simul/css/build/_simul.show.scss 100644
View File

@ -0,0 +1,2 @@
@import '../../../common/css/plugin';
@import '../show';

2
ui/simul/css/build/simul.form.dark.scss 100644
View File

@ -0,0 +1,2 @@
@import '../../../common/css/theme/dark';
@import 'simul.form';

2
ui/simul/css/build/simul.form.light.scss 100644
View File

@ -0,0 +1,2 @@
@import '../../../common/css/theme/light';
@import 'simul.form';

2
ui/simul/css/build/simul.form.transp.scss 100644
View File

@ -0,0 +1,2 @@
@import '../../../common/css/theme/transp';
@import 'simul.form';

2
ui/simul/css/build/simul.list.dark.scss 100644
View File

@ -0,0 +1,2 @@
@import '../../../common/css/theme/dark';
@import 'simul.list';

2
ui/simul/css/build/simul.list.light.scss 100644
View File

@ -0,0 +1,2 @@
@import '../../../common/css/theme/light';
@import 'simul.list';

2
ui/simul/css/build/simul.list.transp.scss 100644
View File

@ -0,0 +1,2 @@
@import '../../../common/css/theme/transp';
@import 'simul.list';

2
ui/simul/css/build/simul.show.dark.scss 100644
View File

@ -0,0 +1,2 @@
@import '../../../common/css/theme/dark';
@import 'simul.show';

2
ui/simul/css/build/simul.show.light.scss 100644
View File

@ -0,0 +1,2 @@
@import '../../../common/css/theme/light';
@import 'simul.show';

2
ui/simul/css/build/simul.show.transp.scss 100644
View File

@ -0,0 +1,2 @@
@import '../../../common/css/theme/transp';
@import 'simul.show';

22
ui/site/src/main.js
View File

@ -920,28 +920,6 @@ lichess.topMenuIntent = function() {
tournament = LichessTournament.start(cfg);
};
///////////////////
// simul.js //
///////////////////
$(function() {
var $simulList = $('#simul_list');
if ($simulList.length) {
// handle simul list
lichess.StrongSocket.defaults.params.flag = "simul";
lichess.StrongSocket.defaults.events.reload = function() {
$simulList.load($simulList.data("href"), function() {
lichess.pubsub.emit('content_loaded')();
});
};
$('#site_header .help a.more').click(function() {
$.modal($(this).parent().find('div.more')).addClass('card');
});
return;
}
});
function startSimul(element, cfg) {
$('body').data('simul-id', cfg.data.id);
var simul;