rewrite simul templates

app/actor/Renderer.scala

@@ -18,7 +18,7 @@ private[app] final class Renderer extends Actor {
       sender ! V.tournament.enterable(tours).render
 
     case lila.simul.actorApi.SimulTable(simuls) =>
-      sender ! V.simul.allCreated(simuls).render
+      sender ! V.simul.bits.allCreated(simuls).render
 
     case lila.puzzle.RenderDaily(puzzle, fen, lastMove) =>
       sender ! V.puzzle.bits.daily(puzzle, fen, lastMove).render

app/controllers/Simul.scala

@@ -14,7 +14,7 @@ object Simul extends LilaController {
 
   private def env = Env.simul
 
-  private def simulNotFound(implicit ctx: Context) = NotFound(html.simul.notFound())
+  private def simulNotFound(implicit ctx: Context) = NotFound(html.simul.bits.notFound())
 
   val home = Open { implicit ctx =>
     pageHit

app/templating/JsonHelper.scala

@@ -23,4 +23,7 @@ trait JsonHelper {
   def jsUserId(implicit ctx: Context) = Html {
     ctx.userId.fold("null")(id => s""""$id"""")
   }
+  def jsUserIdString(implicit ctx: Context) = Html {
+    ctx.userId.fold("null")(id => s""""$id"""")
+  }
 }

app/views/chat.scala

@@ -2,6 +2,7 @@ package views.html
 
 import play.api.libs.json.Json
 import play.twirl.api.Html
+import scalatags.Text.RawFrag
 
 import lila.api.Context
 import lila.app.templating.Environment._
@@ -10,6 +11,7 @@ import lila.i18n.I18nKeys
 object chat {
 
   val html = Html("""<div id="chat" class="side_box"></div>""")
+  val frag = RawFrag(html.toString)
 
   import lila.chat.JsonView.chatIdWrites
 

app/views/lobby/bits.scala

@@ -66,7 +66,7 @@ object bits {
         span(cls := "title text", dataIcon := "|")(trans.simultaneousExhibitions())
       ),
       div(id := "enterable_simuls", cls := "enterable_list undertable_inner")(
-        views.html.simul.allCreated(simuls)
+        views.html.simul.bits.allCreated(simuls)
       )
     )
   )

app/views/lobby/home.scala

@@ -49,7 +49,7 @@ object home {
       events map { bits.spotlight(_) },
       !ctx.isBot option frag(
         lila.tournament.Spotlight.select(tours, ctx.me, 3) map { views.html.tournament.homepageSpotlight(_) },
-        simuls.find(_.spotlightable) take 2 map { views.html.simul.homepageSpotlight(_) } toList
+        simuls.find(_.spotlightable) take 2 map { views.html.simul.bits.homepageSpotlight(_) } toList
       ),
       ctx.me map { u =>
         div(id := "timeline", dataHref := routes.Timeline.home)(

app/views/simul/allCreated.scala

@@ -1,31 +0,0 @@
-package views
-package html.simul
-
-import lila.api.Context
-import lila.app.templating.Environment._
-import lila.app.ui.ScalatagsTemplate._
-
-import controllers.routes
-
-object allCreated {
-
-  def apply(simuls: List[lila.simul.Simul]) =
-    table(cls := "tournaments")(
-      simuls map { simul =>
-        tr(
-          td(cls := "name")(
-            a(cls := "text", href := routes.Simul.show(simul.id))(
-              simul.perfTypes map { pt =>
-                span(dataIcon := pt.iconChar)
-              },
-              simul.fullName
-            )
-          ),
-          td(userIdLink(simul.hostId.some)),
-          td(cls := "text", dataIcon := "p")(simul.clock.config.show),
-          td(cls := "text", dataIcon := "r")(simul.applicants.size),
-          td(a(href := routes.Simul.show(simul.id), cls := "button", dataIcon := "G"))
-        )
-      }
-    )
-}

app/views/simul/bits.scala

@@ -0,0 +1,102 @@
+package views.html.simul
+
+import play.api.libs.json.Json
+
+import lila.api.Context
+import lila.app.templating.Environment._
+import lila.app.ui.ScalatagsTemplate._
+import lila.common.String.html.safeJsonValue
+
+import controllers.routes
+
+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")(
+          h1(trans.noSimulFound.frag()),
+          br, br,
+          trans.noSimulExplanation.frag(),
+          br, br,
+          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")(
+      img(cls := "img icon", src := staticUrl("images/fire-silhouette.svg")),
+      span(cls := "content")(
+        span(cls := "name")(s.name, " simul"),
+        span(cls := "more")(
+          trans.nbPlayers.plural(s.applicants.size, s.applicants.size.localize),
+          " • ",
+          trans.join()
+        )
+      )
+    )
+
+  def allCreated(simuls: List[lila.simul.Simul]) =
+    table(cls := "tournaments")(
+      simuls map { simul =>
+        tr(
+          td(cls := "name")(
+            a(cls := "text", href := routes.Simul.show(simul.id))(
+              simul.perfTypes map { pt =>
+                span(dataIcon := pt.iconChar)
+              },
+              simul.fullName
+            )
+          ),
+          td(userIdLink(simul.hostId.some)),
+          td(cls := "text", dataIcon := "p")(simul.clock.config.show),
+          td(cls := "text", dataIcon := "r")(simul.applicants.size),
+          td(a(href := routes.Simul.show(simul.id), cls := "button", dataIcon := "G"))
+        )
+      }
+    )
+
+  private[simul] def setup(sim: lila.simul.Simul)(implicit ctx: Context) =
+    span(cls := List("setup" -> true, "rich" -> sim.variantRich))(
+      sim.clock.config.show,
+      " • ",
+      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,
+    trans.join,
+    trans.cancel,
+    trans.joinTheGame,
+    trans.nbPlaying,
+    trans.nbWins,
+    trans.nbDraws,
+    trans.nbLosses,
+    trans.by,
+    trans.signIn
+  )
+}

app/views/simul/form.scala

@@ -0,0 +1,52 @@
+package views.html.simul
+
+import play.api.data.Form
+import play.api.libs.json.Json
+
+import lila.api.Context
+import lila.app.templating.Environment._
+import lila.app.ui.ScalatagsTemplate._
+
+import controllers.routes
+
+object form {
+
+  def apply(form: Form[lila.simul.SimulSetup], config: lila.simul.DataForm)(implicit ctx: Context) = {
+
+    import config._
+
+    bits.layout(
+      title = trans.hostANewSimul.txt(),
+      moreCss = cssTag("form3.css")
+    ) {
+        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)
+              )
+            )
+          )
+        )
+      }
+  }
+}

app/views/simul/form.scala.html

@@ -1,63 +0,0 @@
-@(form: Form[lila.simul.SimulSetup], config: lila.simul.DataForm)(implicit ctx: Context)
-
-@import config._
-
-@simul.layout(
-title = trans.hostANewSimul.txt()) {
-<div id="simul" class="form">
-  <div class="content_box small_box simul_box">
-    <h1>@trans.hostANewSimul()</h1>
-    <form class="plain create content_box_content" action="@routes.Simul.create" method="POST">
-      <p class="help">@trans.whenCreateSimul()</p>
-      @globalError(form)
-      <table>
-        <tr class="help">
-          <th colspan="2">
-            @trans.simulVariantsHint()
-          </th>
-        </tr>
-        <tr>
-          <th><label for="@form("variants").id">@trans.variants()</label></th>
-          <td>
-            @views.html.setup.filter.renderCheckboxes(form, "variants", form.value.map(_.variants.map(_.toString)).getOrElse(Nil), translatedVariantChoicesWithVariants).toHtml
-            @errMsg(form("variants"))
-          </td>
-        </tr>
-        <tr class="help">
-          <th colspan="2">
-            @trans.simulClockHint()
-          </th>
-        </tr>
-        <tr class="time">
-          <th><label>@trans.timeControl()</label></th>
-          <td class="inline">
-            @base.form.select(form("clockTime"), config.clockTimeChoices)
-            +
-            @base.form.select(form("clockIncrement"), config.clockIncrementChoices)
-          </td>
-        </tr>
-        <tr class="help">
-          <th colspan="2">
-            @trans.simulAddExtraTime()
-          </th>
-        </tr>
-        <tr>
-          <th><label for="@form("clockExtra").id">@trans.simulHostExtraTime()</label></th>
-          <td>@base.form.select(form("clockExtra"), config.clockExtraChoices)</td>
-        </tr>
-        <tr>
-          <th><label for="@form("color").id">Host color for each game</label></th>
-          <td>@base.form.select(form("color"), config.colorChoices)</td>
-        </tr>
-        <tr>
-          <th></th>
-          <td>
-            <button type="submit" class="submit button text" data-icon="|">@trans.create()</button>
-            <a href="@routes.Simul.home()">@trans.cancel()</a>
-          </td>
-        </tr>
-      </table>
-    </form>
-  </div>
-</div>
-}

app/views/simul/home.scala

@@ -0,0 +1,42 @@
+package views.html.simul
+
+import play.api.libs.json.Json
+
+import lila.api.Context
+import lila.app.templating.Environment._
+import lila.app.ui.ScalatagsTemplate._
+
+import controllers.routes
+
+object home {
+
+  def apply(
+    opens: List[lila.simul.Simul],
+    starteds: List[lila.simul.Simul],
+    finisheds: List[lila.simul.Simul]
+  )(implicit ctx: Context) = bits.layout(
+    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)
+      )
+    }
+}

app/views/simul/home.scala.html

@@ -1,36 +0,0 @@
-@(opens: List[lila.simul.Simul], starteds: List[lila.simul.Simul], finisheds: List[lila.simul.Simul])(implicit ctx: Context)
-
-@side = {
-<div class="help">
-  @trans.aboutSimul()
-  <a class="more">@trans.more()...</a>
-  <div class="more none">
-    <img src="@staticUrl("images/fischer-simul.jpg")" alt="Simul IRL with Bobby Fischer" />
-    <em>[1964] @trans.aboutSimulImage()</em>
-
-    <p>
-      @trans.aboutSimulRealLife()
-    </p>
-    <p>
-      @trans.aboutSimulRules()
-    </p>
-    <p>
-      @trans.aboutSimulSettings()
-    </p>
-  </div>
-</div>
-}
-
-@title = @{ trans.simultaneousExhibitions.txt() }
-
-@simul.layout(
-title = title,
-side = side.some,
-openGraph = lila.app.ui.OpenGraph(
-title = title,
-url = s"$netBaseUrl${routes.Simul.home}",
-description = trans.aboutSimul.txt()).some) {
-<div id="simul_list" data-href="@routes.Simul.homeReload()">
-  @simul.homeInner(opens, starteds, finisheds)
-</div>
-}

app/views/simul/homeInner.scala

@@ -0,0 +1,104 @@
+package views.html.simul
+
+import play.api.libs.json.Json
+
+import lila.api.Context
+import lila.app.templating.Environment._
+import lila.app.ui.ScalatagsTemplate._
+
+import controllers.routes
+
+object homeInner {
+
+  def apply(
+    createds: List[lila.simul.Simul],
+    starteds: List[lila.simul.Simul],
+    finisheds: List[lila.simul.Simul]
+  )(implicit ctx: Context) =
+    div(cls := "content_box simul_box no_padding")(
+      h1(trans.simultaneousExhibitions.frag()),
+      table(cls := "slist")(
+        thead(
+          tr(
+            th(colspan := 2, cls := "large")(trans.createdSimuls.frag()),
+            th(trans.host.frag()),
+            th(trans.players.frag())
+          )
+        ),
+        tbody(
+          createds.map { sim =>
+            tr(cls := "scheduled")(
+              iconTd(sim),
+              simTd(sim),
+              simHost(sim),
+              td(cls := "text", dataIcon := "r")(sim.applicants.size)
+            )
+          },
+          ctx.isAuth option tr(cls := "create")(
+            td(colspan := "4")(
+              a(href := routes.Simul.form(), cls := "action button text")(trans.hostANewSimul.frag())
+            )
+          )
+        ),
+        starteds.nonEmpty option (frag(
+          thead(
+            tr(
+              th(colspan := 2, cls := "large")(trans.eventInProgress.frag()),
+              th(trans.host.frag()),
+              th(trans.players.frag())
+            )
+          ),
+          starteds.map { sim =>
+            tr(
+              iconTd(sim),
+              simTd(sim),
+              simHost(sim),
+              td(cls := "text", dataIcon := "r")(sim.pairings.size)
+            )
+          }
+        )),
+        thead(
+          tr(
+            th(colspan := 2, cls := "large")(trans.finished.frag()),
+            th(trans.host.frag()),
+            th(trans.players.frag())
+          )
+        ),
+        tbody(
+          finisheds.map { sim =>
+            tr(
+              iconTd(sim),
+              simTd(sim),
+              simHost(sim),
+              td(cls := "text", dataIcon := "r")(sim.pairings.size)
+            )
+          }
+        )
+      )
+    )
+
+  private def iconTd(sim: lila.simul.Simul) =
+    td(cls := List(
+      "variant_icons" -> true,
+      "rich" -> sim.variantRich
+    ))(
+      sim.perfTypes.map { pt =>
+        span(cls := "is-gold", dataIcon := pt.iconChar)
+      }
+    )
+
+  private def simTd(sim: lila.simul.Simul)(implicit ctx: Context) =
+    td(cls := "header")(
+      a(href := routes.Simul.show(sim.id))(
+        span(cls := "name")(sim.fullName),
+        bits.setup(sim)
+      )
+    )
+
+  private def simHost(sim: lila.simul.Simul) =
+    td(cls := "host")(
+      userIdLink(sim.hostId.some, withOnline = false),
+      br,
+      strong(sim.hostRating)
+    )
+}

app/views/simul/homeInner.scala.html

@@ -1,91 +0,0 @@
-@(createds: List[lila.simul.Simul], starteds: List[lila.simul.Simul], finisheds: List[lila.simul.Simul])(implicit ctx: Context)
-
-@iconTd(sim: lila.simul.Simul) = {
-<td class="variant_icons @if(sim.variantRich){rich}">
-  @sim.perfTypes.map { pt =>
-  <span class="is-gold" data-icon="@pt.iconChar"></span>
-  }
-</td>
-}
-
-@simTd(sim: lila.simul.Simul) = {
-<td class="header">
-  <a href="@routes.Simul.show(sim.id)">
-    <span class="name">@sim.fullName</span>
-    @simul.setup(sim)
-  </a>
-</td>
-}
-
-@simHost(sim: lila.simul.Simul) = {
-<td class="host">
-  @userIdLink(sim.hostId.some, withOnline = false)<br />
-  <strong>@sim.hostRating</strong>
-</td>
-}
-
-<div class="content_box simul_box no_padding">
-  <h1>@trans.simultaneousExhibitions()</h1>
-  <table class="slist">
-    <thead>
-      <tr>
-        <th colspan=2 class="large">@trans.createdSimuls()</th>
-        <th>@trans.host()</th>
-        <th>@trans.players()</th>
-      </tr>
-    </thead>
-    <tbody>
-      @createds.map { sim =>
-      <tr class="scheduled">
-        @iconTd(sim)
-        @simTd(sim)
-        @simHost(sim)
-        <td class="text" data-icon="r">@sim.applicants.size</td>
-      </tr>
-      }
-      @if(ctx.isAuth) {
-      <tr class="create">
-        <td colspan="4">
-          <a href="@routes.Simul.form()" class="action button text">@trans.hostANewSimul()</a>
-        </td>
-      </tr>
-      }
-    </tbody>
-    @if(starteds.nonEmpty) {
-    <thead>
-      <tr>
-        <th colspan=2 class="large">@trans.eventInProgress()</th>
-        <th>@trans.host()</th>
-        <th>@trans.players()</th>
-      </tr>
-    </thead>
-    <tbody>
-      @starteds.map { sim =>
-      <tr>
-        @iconTd(sim)
-        @simTd(sim)
-        @simHost(sim)
-        <td class="text" data-icon="r">@sim.pairings.size</td>
-      </tr>
-      }
-    </tbody>
-    }
-    <thead>
-      <tr>
-        <th colspan=2 class="large">@trans.finished()</th>
-        <th>@trans.host()</th>
-        <th>@trans.players()</th>
-      </tr>
-    </thead>
-    <tbody>
-      @finisheds.map { sim =>
-      <tr>
-        @iconTd(sim)
-        @simTd(sim)
-        @simHost(sim)
-        <td class="text" data-icon="r">@sim.pairings.size</td>
-      </tr>
-      }
-    </tbody>
-  </table>
-</div>

app/views/simul/homepageSpotlight.scala.html

@@ -1,9 +0,0 @@
-@(s: lila.simul.Simul)(implicit ctx: Context)
-
-<a href="@routes.Simul.show(s.id)" class="tour_spotlight little id_@s.id">
-  <img class="img icon" src="@staticUrl("images/fire-silhouette.svg")" />
-  <span class="content">
-    <span class="name">@s.name simul</span>
-    <span class="more">@trans.nbPlayers.plural(s.applicants.size, s.applicants.size.localize) • @trans.join()</span>
-  </span>
-</a>

app/views/simul/jsI18n.scala.html

@@ -1,14 +0,0 @@
-@()(implicit ctx: Context)
-@safeJsonHtml(i18nJsObject(List(
-trans.finished,
-trans.withdraw,
-trans.join,
-trans.cancel,
-trans.joinTheGame,
-trans.nbPlaying,
-trans.nbWins,
-trans.nbDraws,
-trans.nbLosses,
-trans.by,
-trans.signIn
-)))

app/views/simul/layout.scala.html

@@ -1,16 +0,0 @@
-@(title: String, moreJs: Html = emptyHtml, moreCss: Html = emptyHtml, side: Option[Html] = None, chat: Option[Html] = None, underchat: Option[Html] = None, chessground: Boolean = true, openGraph: Option[lila.app.ui.OpenGraph] = None)(body: Html)(implicit ctx: Context)
-
-@evenMoreCss = {
-@cssTag("simul.css")
-@moreCss
-}
-
-@base.layout(
-title = title,
-moreJs = moreJs,
-moreCss = evenMoreCss,
-side = side,
-chat = chat,
-underchat = underchat,
-chessground = chessground,
-openGraph = openGraph)(body).toHtml

app/views/simul/notFound.scala.html

@@ -1,13 +0,0 @@
-@()(implicit ctx: Context)
-
-@simul.layout(title = trans.noSimulFound.txt()) {
-<div id="simul">
-  <div class="content_box small_box faq_page">
-    <h1>@trans.noSimulFound()</h1><br /><br />
-    @trans.noSimulExplanation()
-    <br />
-    <br />
-    <a href="@routes.Simul.home()">@trans.returnToSimulHomepage()</a>
-  </div>
-</div>
-}

app/views/simul/setup.scala.html

@@ -1,5 +0,0 @@
-@(sim: lila.simul.Simul)(implicit ctx: Context)
-<span class="setup @if(sim.variantRich){rich}">
-  @sim.clock.config.show •
-  @sim.variants.map(_.name).mkString(", ")
-</span>

app/views/simul/show.scala

@@ -0,0 +1,76 @@
+package views.html.simul
+
+import play.api.libs.json.Json
+
+import lila.api.Context
+import lila.app.templating.Environment._
+import lila.app.ui.ScalatagsTemplate._
+import lila.common.String.html.safeJsonValue
+
+import controllers.routes
+
+object show {
+
+  def apply(
+    sim: lila.simul.Simul,
+    socketVersion: lila.socket.Socket.SocketVersion,
+    data: play.api.libs.json.JsObject,
+    chatOption: Option[lila.chat.UserChat.Mine],
+    stream: Option[lila.streamer.Stream]
+  )(implicit ctx: Context) = bits.layout(
+    title = sim.fullName,
+    side = Some(frag(
+      div(cls := "side_box padded")(
+        div(cls := "game_infos")(
+          div(cls := List(
+            "variant_icons" -> true,
+            "rich" -> sim.variantRich
+          ))(sim.perfTypes.map { pt => span(dataIcon := pt.iconChar) }),
+          span(cls := "clock")(sim.clock.config.show),
+          br,
+          div(cls := "setup")(
+            sim.variants.map(_.name).mkString(", "),
+            " • ",
+            trans.casual()
+          ),
+          trans.simulHostExtraTime(),
+          ": ",
+          pluralize("minute", sim.clock.hostExtraMinutes),
+          br,
+          trans.hostColorX(sim.color match {
+            case Some("white") => trans.white()
+            case Some("black") => trans.black()
+            case _ => trans.randomColor()
+          })
+        ),
+        trans.by(usernameOrId(sim.hostId)),
+        " ",
+        momentFromNow(sim.createdAt)
+      ),
+      stream.map { s =>
+        a(
+          href := routes.Streamer.show(s.streamer.userId),
+          cls := "context-streamer text side_box",
+          dataIcon := ""
+        )(usernameOrId(s.streamer.userId), " is streaming")
+      }
+    )),
+    underchat = Some(div(cls := "watchers hidden")(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")
+    }
+}

app/views/simul/show.scala.html

@@ -1,37 +0,0 @@
-@(sim: lila.simul.Simul, socketVersion: lila.socket.Socket.SocketVersion, data: play.api.libs.json.JsObject, chatOption: Option[lila.chat.UserChat.Mine], stream: Option[lila.streamer.Stream])(implicit ctx: Context)
-
-@underchat = {
-<div class="watchers hidden">
-  <span class="list inline_userlist"></span>
-</div>
-}
-
-@moreJs = {
-@jsAt(s"compiled/lichess.simul${isProd??(".min")}.js")
-@embedJs {
-lichess.simul = {
-data: @safeJsonHtml(data),
-i18n: @jsI18n(),
-socketVersion: @socketVersion.value,
-userId: @jsUserId,
-chat: @jsOrNull(chatOption map { c =>
-chat.json(c.chat, name = trans.chatRoom.txt(), timeout = c.timeout, public = true)
-})
-};
-}
-}
-
-@moreCss = {
-@cssTag("chat.css")
-@if(sim.isCreated) { @cssTag("quote.css") }
-}
-
-@simul.layout(
-title = sim.fullName,
-side = simul.side(sim, stream).some,
-underchat = underchat.some,
-chat = chat.html.some,
-moreJs = moreJs,
-moreCss = moreCss) {
-<div id="simul"></div>
-}

app/views/simul/side.scala.html

@@ -1,26 +0,0 @@
-@(sim: lila.simul.Simul, stream: Option[lila.streamer.Stream])(implicit ctx: Context)
-
-<div class="side_box padded">
-  <div class="game_infos">
-    <div class="variant_icons @if(sim.variantRich){rich}">
-      @sim.perfTypes.map { pt =>
-      <span data-icon="@pt.iconChar"></span>
-      }
-    </div>
-    <span class="clock">@sim.clock.config.show</span><br />
-    <div class="setup">
-      @sim.variants.map(_.name).mkString(", ") • @trans.casual()
-    </div>
-    @trans.simulHostExtraTime(): @sim.clock.hostExtraMinutes @if(sim.clock.hostExtraMinutes == 1) { minute } else { minutes }
-    <br />
-    @trans.hostColorX(sim.color match {
-      case Some("white") => trans.white()
-      case Some("black") => trans.black()
-      case _ => trans.randomColor()
-    })
-  </div>
-  @trans.by(usernameOrId(sim.hostId)), @momentFromNow(sim.createdAt)
-</div>
-@stream.map { s =>
-<a href="@routes.Streamer.show(s.streamer.userId)" class="context-streamer text side_box" data-icon="">@usernameOrId(s.streamer.userId) is streaming</a>
-}

public/stylesheets/simul.css

@@ -2,53 +2,14 @@
   text-align: center;
   display: block;
 }
-#simul form.plain {
-  margin-top: 10px;
+#simul.form .variants {
+  display: flex;
+  flex-flow: row wrap;
 }
-#simul form.plain .help {
-  margin-bottom: 40px;
-  text-align: center;
-}
-#simul form.plain td {
-  padding: 0.6em;
+#simul.form .variants .checkable {
+  flex: 1 1 33%;
   white-space: nowrap;
 }
-#simul form.plain tr td,
-#simul form.plain tr th {
-  padding: 0 0 50px 0;
-}
-#simul form.plain tr.help th {
-  font-style: italic;
-  padding: 0 0 10px 0;
-}
-#simul form.plain label {
-  margin-right: 10px;
-}
-#simul form.plain input {
-  width: 96%;
-  padding: 0.5% 1%;
-}
-#simul form.plain input[type=checkbox] {
-  width: auto;
-}
-#simul form.plain select {
-  padding: 0.5% 1%;
-  text-transform: capitalize;
-  width: 99%;
-}
-#simul form.plain .inline select {
-  width: 46%;
-}
-#simul form.plain input.submit {
-  width: 99%;
-}
-#simul form.plain .error {
-  color: red;
-}
-#simul form.plain button[type=submit] {
-  font-size: 2em;
-  margin-right: 20px;
-}
 #simul .content_box {
   min-height: 400px;
 }