dark board theme WIP

pull/7462/head
Thibault Duplessis 2020-10-13 18:15:38 +02:00
parent 76f8ab418d
commit 71e57c16eb
9 changed files with 67 additions and 28 deletions

View File

@ -221,7 +221,7 @@ object layout {
rel := "alternate",
st.title := trans.blog.txt()
),
ctx.transpBgImg map { img =>
ctx.currentBg == "transp" option ctx.pref.bgImgOrDefault map { img =>
raw(
s"""<style id="bg-data">body.transp::before{background-image:url('$img');}</style>"""
)
@ -233,6 +233,7 @@ object layout {
st.body(
cls := List(
s"${ctx.currentBg} ${ctx.currentTheme.cssClass} ${ctx.currentTheme3d.cssClass} ${ctx.currentPieceSet3d.toString} coords-${ctx.pref.coordsClass}" -> true,
"dark-board" -> (ctx.pref.bg == lila.pref.Pref.Bg.DARKBOARD),
"piece-letter" -> ctx.pref.pieceNotationIsLetter,
"zen" -> ctx.pref.isZen,
"blind-mode" -> ctx.blind,

View File

@ -0,0 +1,4 @@
db.pref.find({dark:{$exists:1}}, {dark:1,transp:1}).forEach(p => {
const bg = p.dark ? (p.transp ? 400 : 300) : 100;
db.pref.update({_id: p._id}, {$set:{bg: bg},$unset:{dark:1,transp:1}});
});

View File

@ -1,7 +1,7 @@
package lila.api
import play.api.mvc.RequestHeader
import play.api.i18n.Lang
import play.api.mvc.RequestHeader
import lila.common.{ HTTPRequest, Nonce }
import lila.pref.Pref
@ -64,9 +64,10 @@ sealed trait Context extends lila.user.UserContextWrapper {
def currentSoundSet = lila.pref.SoundSet(pref.soundSet)
lazy val currentBg = if (pref.transp) "transp" else if (pref.dark) "dark" else "light"
def transpBgImg = currentBg == "transp" option pref.bgImgOrDefault
lazy val currentBg =
if (pref.bg == Pref.Bg.TRANSPARENT) "transp"
else if (pref.bg == Pref.Bg.LIGHT) "light"
else "dark"
lazy val mobileApiVersion = Mobile.Api requestVersion req

View File

@ -6,8 +6,8 @@ object JsonView {
implicit val prefJsonWriter = OWrites[Pref] { p =>
Json.obj(
"dark" -> p.dark,
"transp" -> p.transp,
"dark" -> (p.bg != Pref.Bg.LIGHT),
"transp" -> (p.bg == Pref.Bg.TRANSPARENT),
"bgImg" -> p.bgImgOrDefault,
"is3d" -> p.is3d,
"theme" -> p.theme,

View File

@ -2,8 +2,7 @@ package lila.pref
case class Pref(
_id: String, // user id
dark: Boolean,
transp: Boolean,
bg: Int,
bgImg: Option[String],
is3d: Boolean,
theme: String,
@ -52,7 +51,7 @@ case class Pref(
def realTheme3d = Theme3d(theme3d)
def realPieceSet3d = PieceSet3d(pieceSet3d)
def themeColor = if (transp || dark) "#2e2a24" else "#dbd7d1"
def themeColor = if (bg == Bg.LIGHT) "#dbd7d1" else "#2e2a24"
def realSoundSet = SoundSet(soundSet)
@ -63,9 +62,7 @@ case class Pref(
def set(name: String, value: String): Option[Pref] =
name match {
case "bg" =>
if (value == "transp") copy(dark = true, transp = true).some
else copy(dark = value == "dark", transp = false).some
case "bg" => value.toIntOption.map { bg => copy(bg = bg) }
case "bgImg" => copy(bgImg = value.some).some
case "theme" =>
Theme.allByName get value map { t =>
@ -135,6 +132,27 @@ object Pref {
val verify = (v: Int) => v == 0 || v == 1
}
object Bg {
val LIGHT = 100
val DARK = 200
val DARKBOARD = 300
val TRANSPARENT = 400
val choices = Seq(
LIGHT -> "Light",
DARK -> "Dark",
DARKBOARD -> "Dark Board",
TRANSPARENT -> "Transparent"
)
val fromString = Map(
"light" -> LIGHT,
"dark" -> LIGHT,
"darkBoard" -> DARKBOARD,
"transp" -> TRANSPARENT
)
}
object Tag {
val verifyTitle = "verifyTitle"
}
@ -383,8 +401,7 @@ object Pref {
lazy val default = Pref(
_id = "",
dark = false,
transp = false,
bg = Bg.LIGHT,
bgImg = none,
is3d = false,
theme = Theme.default.name,

View File

@ -12,8 +12,7 @@ private object PrefHandlers {
def reads(r: BSON.Reader): Pref =
Pref(
_id = r str "_id",
dark = r.getD("dark", Pref.default.dark),
transp = r.getD("transp", Pref.default.transp),
bg = r.getD("bg", Pref.default.bg),
bgImg = r.strO("bgImg"),
is3d = r.getD("is3d", Pref.default.is3d),
theme = r.getD("theme", Pref.default.theme),
@ -56,8 +55,7 @@ private object PrefHandlers {
def writes(w: BSON.Writer, o: Pref) =
$doc(
"_id" -> o._id,
"dark" -> o.dark,
"transp" -> o.transp,
"bg" -> o.bg,
"bgImg" -> o.bgImg,
"is3d" -> o.is3d,
"theme" -> o.theme,

View File

@ -7,11 +7,8 @@ object RequestPref {
import Pref.default
def queryParamOverride(req: RequestHeader)(pref: Pref): Pref =
queryParam(req, "bg").fold(pref) { bg =>
pref.copy(
dark = bg != "light",
transp = bg == "transp"
)
queryParam(req, "bg").flatMap(Pref.Bg.fromString.get).fold(pref) { bg =>
pref.copy(bg = bg)
}
def fromRequest(req: RequestHeader): Pref = {
@ -19,11 +16,8 @@ object RequestPref {
def paramOrSession(name: String): Option[String] =
queryParam(req, name) orElse req.session.get(name)
val bg = paramOrSession("bg") | "light"
default.copy(
dark = bg != "light",
transp = bg == "transp",
bg = paramOrSession("bg").flatMap(Pref.Bg.fromString.get) | default.bg,
theme = paramOrSession("theme") | default.theme,
theme3d = req.session.data.getOrElse("theme3d", default.theme3d),
pieceSet = req.session.data.getOrElse("pieceSet", default.pieceSet),

View File

@ -1,4 +1,5 @@
@import "board-2d";
@import "dark-board";
cg-board {
@extend %box-shadow, %abs-100;

View File

@ -0,0 +1,23 @@
@if $theme-dark {
body.dark-board {
--dark-factor: 0.4;
cg-board {
background-color: rgba(0, 0, 0, var(--dark-factor));
background-blend-mode: darken;
}
&.coords-in coord {
color: #fff !important;
opacity: calc(1 - var(--dark-factor));
}
cg-board square {
opacity: calc(1 - var(--dark-factor));
}
cg-board piece {
filter: brightness(calc(1 - 0.6 * var(--dark-factor)));
}
}
}