deepcrayon
/
lila
1
0
Fork 0
Code Releases Activity

dasher theme selector

dasher
Thibault Duplessis 2017-05-04 14:32:10 +02:00
parent ce8b98b13b
commit dd494627ce
18 changed files with 261 additions and 133 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/controllers/Dasher.scala
View File

@ -38,6 +38,10 @@ object Dasher extends LilaController {
s"${set.key} ${set.name}"
}
),
"background" -> Json.obj(
"current" -> ctx.currentBg,
"image" -> ctx.bgImg
),
"kid" -> me.kid,
"coach" -> isGranted(_.Coach),
"prefs" -> prefs,

1
app/views/base/layout.scala.html
View File

@ -71,7 +71,6 @@ asyncJs: Boolean = false)(body: Html)(implicit ctx: Context)
data-user="@ctx.userId"
data-piece-set="@ctx.currentPieceSet"
data-sound-set="@ctx.currentSoundSet"
data-bg="@ctx.currentBg"
data-asset-url="@assetBaseUrl"
data-asset-version="@ctx.pageData.assetVersion"
@ctx.zoom.map { zoom => data-zoom="@zoom" }>

BIN
public/font73/fonts/lichess.woff
View File

Binary file not shown.

BIN
public/font73/fonts/lichess.eot → public/font74/fonts/lichess.eot
View File

Binary file not shown.

4
public/font73/fonts/lichess.svg → public/font74/fonts/lichess.svg
View File

@ -64,14 +64,10 @@
<glyph glyph-name="ionicons" unicode="&#51;" d="M120 176c31 0 56-25 56-56 0-31-25-56-56-56-31 0-56 25-56 56 0 31 25 56 56 56z m-56 144c140 0 256-116 256-256l-80 0c0 48-14 94-48 128-34 34-80 48-128 48z m0 128c212 0 384-172 384-384l-80 0c0 171-133 304-304 304z"/>
<glyph glyph-name="fontawesome-webfont-42" unicode="&#48;" d="M201 101c0-1 0-3 0-6 1-3 1-6 1-8-1-2-1-4-1-6-1-3-2-5-3-6-2-1-4-2-6-2l-91 0c-23 0-42 8-59 24-16 16-24 36-24 58l0 202c0 22 8 42 24 58 17 16 36 24 59 24l91 0c2 0 5-1 6-3 2-2 3-4 3-6 0-1 0-3 0-6 1-3 1-6 1-8-1-2-1-4-1-6-1-3-2-5-3-6-2-1-4-2-6-2l-91 0c-13 0-24-4-33-13-9-9-13-20-13-32l0-202c0-12 4-23 13-32 9-9 20-13 33-13l89 0c0 0 1 0 3-1 2 0 3 0 3 0 0-1 1-1 3-2 1-1 2-2 2-3-1-1 0-2 0-3z m265 155c0-5-2-9-5-13l-156-155c-3-4-7-6-12-6-5 0-10 2-13 6-4 3-6 8-6 13l0 82-128 0c-5 0-9 2-13 5-3 4-5 8-5 13l0 110c0 5 2 9 5 13 4 3 8 5 13 5l128 0 0 82c0 5 2 10 6 13 3 4 8 6 13 6 5 0 9-2 12-6l156-155c3-4 5-8 5-13z"/>
<glyph glyph-name="television-tv" unicode="&#49;" d="M480 384l-177 0 70 70c6 6 6 16 0 22-7 7-17 7-23 0l-92-92-19 0-93 92c-6 7-16 7-22 0-6-6-6-16 0-22l70-70-162 0c-18 0-32-14-32-32l0-288c0-18 14-32 32-32l448 0c18 0 32 14 32 32l0 288c0 18-14 32-32 32m-128-288l-288 0 0 224 288 0z m96 96l-32 0 0 32 32 0z m0 64l-32 0 0 32 32 0z"/>
<glyph glyph-name="moon" unicode="&#52;" d="M232 382c-14-4-19-5-30-11-28-14-50-39-59-68-8-24-7-57 1-78 1-2-2-4-8-5-10-2-22-11-33-24l-5-6-9 0c-11 0-24-2-35-7-13-5-24-17-31-32-7-13-7-20-2-25l3-4 293 0 4 3c3 3 4 7 4 14l1 4 67 0c71 0 73 0 77 7 4 7 1 14-12 27-13 12-27 18-44 19-7 0-8 1-13 5-9 8-15 11-26 14-5 1-10 3-10 3-1 0 0 1 2 9 5 15 6 22 6 37 0 27-5 46-19 67-17 25-42 43-72 50-2 0-5 1-6 1-2 1-10 1-19 1-11 1-18 0-25-1z m43-13c37-7 67-32 80-68 4-13 5-19 5-38 0-16-1-24-7-38-4-8-4-8-10-10-9-2-16-6-24-12-6-5-7-6-11-5-12 2-27 0-40-7-8-3-8-3-22 4-11 5-25 8-35 8-6-1-7-1-13 5-8 8-19 13-31 15l-9 2-4 11c-9 29-3 62 14 88 14 22 40 40 64 45 4 0 8 1 9 1 5 2 26 1 34-1z m-101-161c7-3 16-9 21-15l5-6 6 2c11 3 20 1 36-6 6-3 11-6 12-9 1-1 3-3 3-4 0 0 3 2 6 4 10 7 25 4 38-9 8-8 10-12 11-23l0-8-282 0 1 5c4 11 12 21 21 28 13 9 34 13 48 8 5-1 5-1 9 7 9 14 24 25 38 28 8 1 20 1 27-2z m206-8c5-3 11-7 15-11l6-6 12-1c10 0 14 0 19-3 8-3 17-10 25-19l3-4-68 0-69 0-5 8c-5 7-18 20-21 20-2 0-2 1 0 1 1 1 11 0 18-2 3-1 4-1 6 2 3 6 11 12 17 15 4 2 6 3 6 3 0-1 1 0 2 0 2 1 8 1 14 1 9 0 12 0 20-4z"/>
<glyph glyph-name="sun" unicode="&#53;" d="M251 500c-2-3-2-5-2-40 0-38 0-38 3-40 4-3 7-3 9 0 2 2 3 7 3 40 0 35 0 38-3 40-3 3-6 3-10 0z m-118-31c-1-1-1-4-1-5 0-3 15-32 23-44 1-2 4-6 6-10 5-10 10-15 14-14 9 3 8 7-12 41-10 17-18 31-19 32-2 3-9 2-11 0z m238 1c-2-1-6-8-12-17-5-8-9-15-9-15 0-1-10-18-12-22-7-10-8-16-2-20 4-3 8 0 13 8 2 4 10 19 18 32 15 27 16 31 10 33-1 1-4 1-6 1z m-137-85c-26-5-48-16-68-35-56-56-47-151 20-195 21-14 41-20 67-21 13-1 19 0 29 2 35 8 61 25 80 54 21 32 26 70 16 107-3 10-12 29-15 33-1 1-3 4-5 6-8 11-22 24-36 33-23 15-60 22-88 16z m41-13c66-11 109-80 89-145-10-33-38-62-71-74-12-4-16-5-33-5-49-3-93 27-110 75-6 13-6 20-6 40 0 17 2 28 9 43 14 32 44 57 76 64 6 1 11 3 12 3 4 1 27 0 34-1z m-227 12c-3-2-4-5-2-9 1-3 36-24 58-36 8-4 12-4 15 1 3 5 0 8-18 19-10 5-18 10-19 10-1 1-3 2-5 3-4 3-20 12-23 13-2 0-4 0-6-1z m402-4c-4-2-8-5-9-5-9-4-46-27-48-30-2-4-1-8 3-10 4-1 7 0 45 22 27 16 31 20 23 26-3 3-5 2-14-3z m-435-115c-3-3-3-7 0-10 2-2 7-2 39-2 32 0 38 0 40 2 4 2 4 7 1 10-2 3-7 3-40 3-35 0-38 0-40-3z m401 1c-1-1-3-4-3-6 0-7 3-7 44-7 20 0 37 0 38 1 3 2 4 8 1 11-2 3-4 3-39 3-32 0-38 0-41-2z m-20-82c-4-2-6-8-3-11 3-3 57-35 64-37 7-3 13 5 8 11-1 1-12 9-26 16-14 8-26 15-28 16-6 4-12 6-15 5z m-295-6c-5-3-12-6-14-8-3-1-12-7-21-12-9-5-17-10-18-11-3-2-4-9-1-11 5-4 4-4 61 29 11 6 14 10 11 15-3 5-7 5-18-2z m234-56c-2-1-3-3-3-5 0-2 7-15 15-29 8-14 16-28 17-31 4-7 8-9 13-8 3 2 4 4 4 9 0 2-27 49-34 60-4 6-8 8-12 4z m-166 0c-1-1-8-11-14-23-7-11-14-23-15-26-3-4-5-9-7-12-3-6-3-6 0-10 1-2 3-3 6-3 4 1 5 2 20 28 23 40 24 41 18 46-2 2-4 2-8 0z m82-23c-2-2-2-7-2-40 0-38 0-38 3-40 4-3 7-3 9 0 2 2 3 7 3 40 0 31-1 37-3 40-2 3-7 4-10 0z"/>
<glyph glyph-name="ink-pen" unicode="&#54;" d="M121 264l-85-68 35-7 75 63c145 2 233 58 233 58l-51 44c0 0 90 7 113-4 21 11 59 47 71 156-263 38-329-107-391-242m38 15l-2 1c25 26 169 173 320 205-83-29-278-176-318-206m31-148l-32 0c0 18-15 32-32 32l-32 0c-18 0-32-14-32-32l-32 0c-18 0-32-14-32-32l0-64c0-17 14-32 32-32l160 0c17 0 32 15 32 32l0 64c0 18-15 32-32 32"/>
<glyph glyph-name="chart-line" unicode="&#57;" d="M17 222c-14 4-20 13-16 29 3 14 12 20 27 16 0 0 50-12 50-12 0 0-26-41-26-41 0 0-35 8-35 8m455-6c4 4 10 6 16 6 7-1 12-3 16-8 11-11 11-22-1-33 0 0-128-115-128-115-5-4-10-6-16-6-5 0-9 2-14 5 0 0-146 112-146 112 0 0-28 8-28 8 0 0 26 40 26 40 0 0 18-4 18-4 4-1 7-2 8-4 0 0 135-104 135-104 0 0 114 103 114 103m-251 112c0 0-178-280-178-280-4-8-11-12-20-12-4 0-8 2-12 5-5 3-9 8-10 14-1 7 0 12 3 17 0 0 191 300 191 300 3 6 7 9 14 11 6 2 12 1 19-3 0 0 125-80 125-80 0 0 115 166 115 166 4 6 9 9 15 10 6 1 12-1 17-5 13-8 15-18 6-31 0 0-128-185-128-185-9-12-19-14-32-6 0 0-125 79-125 79"/>
<glyph glyph-name="link" unicode="&#34;" d="M202 136c5 5 10 7 17 7 7 0 13-2 19-7 10-11 10-23 0-36 0 0-22-20-22-20-19-19-42-29-68-29-26 0-49 10-68 29-19 19-29 42-29 67 0 27 10 50 29 69 0 0 76 76 76 76 24 23 48 36 73 39 26 3 47-4 66-22 5-5 8-11 8-18 0-7-3-13-8-19-12-11-24-11-36 0-17 17-40 11-68-17 0 0-75-75-75-75-9-9-14-20-14-33 0-13 5-23 14-31 9-9 19-14 32-14 13 0 23 5 32 14 0 0 22 20 22 20m230 294c19-19 29-42 29-68 0-26-10-49-29-68 0 0-81-81-81-81-25-25-51-37-77-37-21 0-40 9-57 26-5 5-7 10-7 17 0 7 2 13 7 19 5 4 11 7 18 7 7 0 13-3 18-7 17-17 38-13 62 12 0 0 81 80 81 80 10 9 15 20 15 32 0 13-5 24-15 32-8 9-17 14-28 16-11 2-22-2-31-11 0 0-26-25-26-25-5-5-11-7-18-7-7 0-13 2-18 7-11 11-11 23 0 36 0 0 26 25 26 25 18 19 40 27 65 26 25-1 47-11 66-31"/>
<glyph glyph-name="ionicons-1" unicode="&#55;" d="M160 256c0 64 32 96 96 96 64 0 96-32 96-96 0-64-32-96-96-96-64 0-96 32-96 96z m352 16l0-32-65 0c-4-47-22-87-55-120-33-33-73-51-120-55l0-65-32 0 0 65c-47 4-87 22-120 55-33 33-51 73-55 120l-65 0 0 32 65 0c1 13 3 26 7 39 4 13 9 24 15 35 6 11 13 22 21 32 8 10 16 18 26 26 10 8 21 15 32 21 11 6 22 11 35 15 13 4 26 6 39 7l0 65 32 0 0-65c47-4 87-22 120-55 33-33 51-73 55-120z m-256-159c39 0 73 14 101 42 28 28 42 62 42 101 0 39-14 73-42 101-28 28-62 42-101 42-39 0-73-14-101-42-28-28-42-62-42-101 0-39 14-73 42-101 28-28 62-42 101-42z"/>
<glyph glyph-name="unmute" unicode="&#35;" d="M96 320l-64 0 0-128 64 0 128-96 32 0 0 320-32 0z m205-19c-6 7-16 7-22 0-7-6-7-16 0-22 12-13 12-33 0-46-7-6-7-16 0-22 6-7 16-7 22 0 25 25 25 65 0 90z m46 46c-7 6-17 6-23 0-6-7-6-17 0-23 37-38 37-98 0-136-6-6-6-16 0-23 6-6 16-6 23 0 49 50 49 132 0 182z m45 45c-6 6-17 6-23 0-6-6-6-17 0-23 63-62 63-164 0-226-6-6-6-17 0-23 6-6 17-6 23 0 75 75 75 197 0 272z"/>
<glyph glyph-name="mute" unicode="&#36;" d="M96 320l-64 0 0-128 64 0 128-96 32 0 0 320-32 0z m368-16l-32 32-48-48-48 48-31-32 47-48-48-48 32-32 48 48 48-48 32 32-48 48z"/>
<glyph glyph-name="gear" unicode="&#37;" d="M256 337c-45 0-81-36-81-81 0-45 36-81 81-81 45 0 81 36 81 81 0 45-36 81-81 81z m162-128l-14-35 26-51 3-7-36-36-59 28-35-14-18-55-2-7-51 0-22 62-36 14-51-26-7-3-36 36 28 59-14 35-55 18-7 2 0 51 62 22 14 36-26 51-3 7 36 36 59-28 35 14 18 55 2 7 51 0 22-62 36-14 51 26 7 3 36-36-28-59 14-35 55-18 7-2 0-51z"/>
<glyph glyph-name="repo" unicode="&#38;" d="M224 384l-32 0 0-32 32 0z m0 64l-32 0 0-32 32 0z m192 64c-16 0-304 0-320 0-16 0-32-16-32-32 0-16 0-368 0-384 0-16 16-32 32-32 16 0 64 0 64 0l0-64 48 48 48-48 0 64c0 0 144 0 160 0 16 0 32 16 32 32 0 16 0 368 0 384 0 16-16 32-32 32z m0-400c0-8-7-16-16-16-8 0-144 0-144 0l0 32-96 0 0-32c0 0-39 0-48 0-8 0-16 8-16 16 0 7 0 48 0 48l320 0c0 0 0-40 0-48z m0 80l-256 0 0 288 257 0z m-192 64l-32 0 0-32 32 0z m0 64l-32 0 0-32 32 0z"/>
<glyph glyph-name="tag" unicode="&#111;" d="M224 480l-128 0-64-64 0-128 256-256 192 192z m-160-176l0 96 48 48 96 0 224-224-144-144z m192 48l-96-96 128-128 96 96z m-48-96l48 48 80-80-48-48z m-16 112c0 26-21 48-48 48-26 0-48-22-48-48 0-27 22-48 48-48 27 0 48 21 48 48z m-48-16c-9 0-16 7-16 16 0 9 7 16 16 16 9 0 16-7 16-16 0-9-7-16-16-16z"/>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 68 KiB

After

Width:  |  Height:  |  Size: 65 KiB

BIN
public/font73/fonts/lichess.ttf → public/font74/fonts/lichess.ttf
View File

Binary file not shown.

BIN
public/font74/fonts/lichess.woff 100644
View File

Binary file not shown.

32
public/font73/icons-reference.html → public/font74/icons-reference.html
View File

@ -243,14 +243,6 @@
<div class="icon icon-television-tv"></div>
<input type="text" readonly="readonly" value="television-tv">
</li>
<li>
<div class="icon icon-moon"></div>
<input type="text" readonly="readonly" value="moon">
</li>
<li>
<div class="icon icon-sun"></div>
<input type="text" readonly="readonly" value="sun">
</li>
<li>
<div class="icon icon-ink-pen"></div>
<input type="text" readonly="readonly" value="ink-pen">
@ -267,14 +259,6 @@
<div class="icon icon-ionicons-1"></div>
<input type="text" readonly="readonly" value="ionicons-1">
</li>
<li>
<div class="icon icon-unmute"></div>
<input type="text" readonly="readonly" value="unmute">
</li>
<li>
<div class="icon icon-mute"></div>
<input type="text" readonly="readonly" value="mute">
</li>
<li>
<div class="icon icon-gear"></div>
<input type="text" readonly="readonly" value="gear">
@ -706,14 +690,6 @@
<div data-icon="1" class="icon"></div>
<input type="text" readonly="readonly" value="1">
</li>
<li>
<div data-icon="4" class="icon"></div>
<input type="text" readonly="readonly" value="4">
</li>
<li>
<div data-icon="5" class="icon"></div>
<input type="text" readonly="readonly" value="5">
</li>
<li>
<div data-icon="6" class="icon"></div>
<input type="text" readonly="readonly" value="6">
@ -730,14 +706,6 @@
<div data-icon="7" class="icon"></div>
<input type="text" readonly="readonly" value="7">
</li>
<li>
<div data-icon="#" class="icon"></div>
<input type="text" readonly="readonly" value="#">
</li>
<li>
<div data-icon="$" class="icon"></div>
<input type="text" readonly="readonly" value="$">
</li>
<li>
<div data-icon="%" class="icon"></div>
<input type="text" readonly="readonly" value="%">

12
public/font73/styles.css → public/font74/styles.css
View File

@ -209,12 +209,6 @@
.icon-television-tv:before {
content: "\31";
}
.icon-moon:before {
content: "\34";
}
.icon-sun:before {
content: "\35";
}
.icon-ink-pen:before {
content: "\36";
}
@ -227,12 +221,6 @@
.icon-ionicons-1:before {
content: "\37";
}
.icon-unmute:before {
content: "\23";
}
.icon-mute:before {
content: "\24";
}
.icon-gear:before {
content: "\25";
}

7
public/stylesheets/common.css
View File

@ -53,8 +53,8 @@ time {
}
@font-face {
font-family: "lichess";
src: url("../font73/fonts/lichess.eot");
src: url("../font73/fonts/lichess.eot?#iefix") format("embedded-opentype"), url("../font73/fonts/lichess.woff") format("woff"), url("../font73/fonts/lichess.ttf") format("truetype");
src: url("../font74/fonts/lichess.eot");
src: url("../font74/fonts/lichess.eot?#iefix") format("embedded-opentype"), url("../font74/fonts/lichess.woff") format("woff"), url("../font74/fonts/lichess.ttf") format("truetype");
font-weight: normal;
font-style: normal;
}
@ -901,9 +901,6 @@ span.progress > .positive {
span.progress > .negative {
color: #ac524f;
}
#sound_state.unavailable {
display: none;
}
#friend_box {
position: fixed;
bottom: 0;

86
public/stylesheets/dasherApp.css
View File

@ -19,8 +19,7 @@
}
#dasher_app .links a:hover,
#dasher_app .subs a:hover,
#dasher_app .langs form > *:hover,
#dasher_app .sound .selector a:hover {
#dasher_app .langs form > *:hover {
background: #F0F0F0;
color: #444;
}
@ -93,38 +92,44 @@
color: #fff!important;
border-left: none;
}
#dasher_app .selector {
flex: 1 1 100%;
margin: 5px 0;
}
#dasher_app .selector a {
display: block;
padding: 6px 0 6px 8px;
}
#dasher_app .selector a:hover {
background: #F0F0F0;
color: #444;
}
#dasher_app .selector a.active {
background: #3893E8!important;
color: #fff!important;
}
#dasher_app .selector a::before {
margin-right: 8px;
font-size: 1.6em;
justify-content: center;
align-items: center;
opacity: 0;
}
#dasher_app .selector a:hover::before {
opacity: 1;
color: #fff;
}
#dasher_app .selector a.active::before {
opacity: 1;
color: #fff!important;
}
#dasher_app .sound .content {
display: flex;
flex-flow: row;
}
#dasher_app .sound .selector {
flex: 1 1 100%;
margin: 5px 0;
}
#dasher_app .sound .selector a {
display: flex;
align-items: stretch;
border-radius: 3px 0 0 3px;
}
#dasher_app .sound .selector .active {
background: #3893E8!important;
color: #fff!important;
}
#dasher_app .sound .selector i {
margin-top: -2px;
font-size: 1.2em;
justify-content: center;
align-items: center;
padding: 6px 0 6px 6px;
opacity: 0;
}
#dasher_app .sound .selector .active i {
opacity: 1;
color: #fff;
}
#dasher_app .sound .selector span {
padding: 6px;
}
#dasher_app .sound.silent .slider {
opacity: 0.2;
}
@ -142,3 +147,30 @@
bottom: 0;
background: #3893E8!important;
}
#dasher_app .background .image p {
font-size: 0.9em;
padding: 5px;
}
#dasher_app .background input {
padding: 5px;
border: 1px solid #444;
box-sizing: border-box;
width: 100%;
}
body.dark #dasher_app .subs,
body.dark #dasher_app .status {
border-color: #3d3d3d;
}
body.dark #dasher_app .head,
body.dark #dasher_app .links a:hover,
body.dark #dasher_app .subs a:hover,
body.dark #dasher_app .langs form > *:hover,
body.dark #dasher_app .selector a:hover {
background: #3e3e3e;
color: #b0b0b0;
}
body.dark #dasher_app .selector a:hover::before {
color: #555;
}

128
ui/dasher/src/background.ts 100644
View File

@ -0,0 +1,128 @@
import { h } from 'snabbdom'
import { VNode } from 'snabbdom/vnode'
import { Redraw, Close, bind } from './util'
export interface BackgroundCtrl {
list: Background[]
set(k: string): void
get(): string
getImage(): string
setImage(i: string): void
trans: Trans
close: Close
}
export interface BackgroundData {
current: string
image: string
}
interface Background {
key: string
name: string
}
export function ctrl(data: BackgroundData, trans: Trans, redraw: Redraw, close: Close): BackgroundCtrl {
const list: Background[] = [
{ key: 'light', name: 'Light' },
{ key: 'dark', name: 'Dark' },
{ key: 'transp', name: 'Transparent' }
];
return {
list: list,
get: () => data.current,
set(c: string) {
data.current = c;
$.post('/pref/bg', { bg: c }, reloadAllTheThings);
applyBackground(data, list);
redraw();
},
getImage: () => data.image,
setImage(i: string) {
data.image = i;
$.post('/pref/bgImg', { bgImg: i }, reloadAllTheThings);
applyBackground(data, list);
redraw();
},
trans,
close
};
}
export function view(ctrl: BackgroundCtrl): VNode {
const cur = ctrl.get();
return h('div.sub.background', {
class: { [cur]: true }
}, [
h('a.head.text', {
attrs: { 'data-icon': 'I' },
hook: bind('click', ctrl.close)
}, 'Background'),
h('div.selector', ctrl.list.map(bg => {
return h('a.text.' + bg.key, {
class: { active: cur === bg.key },
attrs: { 'data-icon': 'E' },
hook: bind('click', () => ctrl.set(bg.key))
}, bg.name);
})),
cur === 'transp' ? imageInput(ctrl) : null
])
}
function imageInput(ctrl: BackgroundCtrl) {
return h('div.image', [
h('p', 'To change the background,'),
h('p', 'Paste an image URL:'),
h('input', {
attrs: {
type: 'text',
value: ctrl.getImage()
},
hook: {
insert: vnode => {
$(vnode.elm as HTMLElement).on('change keyup paste', window.lichess.fp.debounce(function(this: HTMLElement) {
ctrl.setImage($(this).val());
}, 200));
}
}
})
]);
}
function applyBackground(data: BackgroundData, list: Background[]) {
const key = data.current;
$('body').removeClass(list.map(b => b.key).join(' ')).addClass(key === 'transp' ? 'transp dark' : key);
if ((key === 'dark' || key === 'transp') && !$('link[href*="dark.css"]').length) {
$('link[href*="common.css"]').clone().each(function(this: HTMLElement) {
$(this).attr('href', $(this).attr('href').replace(/common\.css/, 'dark.css')).appendTo('head');
});
}
if (key === 'transp' && !$('link[href*="transp.css"]').length) {
$('link[href*="common.css"]').clone().each(function(this: HTMLElement) {
$(this).attr('href', $(this).attr('href').replace(/common\.css/, 'transp.css')).appendTo('head');
});
}
if (key === 'transp') {
const bgData = document.getElementById('bg-data');
bgData ? bgData.innerHTML = 'body.transp::before{background-image:url(' + data.image + ');}' :
$('head').append('<style id="bg-data">body.transp::before{background-image:url(' + data.image + ');}</style>');
}
}
function reloadAllTheThings() {
if (window.Highcharts) window.lichess.reload();
window.lichess.reloadOtherTabs();
}

86
ui/dasher/src/dasher.ts
View File

@ -1,6 +1,7 @@
import { PingCtrl, ctrl as pingCtrl } from './ping'
import { LangsCtrl, ctrl as langsCtrl } from './langs'
import { SoundCtrl, ctrl as soundCtrl } from './sound'
import { BackgroundCtrl, BackgroundData, ctrl as backgroundCtrl } from './background'
import { Redraw, Prop, prop } from './util'
import { get } from './xhr'
@ -13,53 +14,60 @@ export interface DasherData {
sound: {
list: string[]
}
background: BackgroundData
kid: boolean
coach: boolean
prefs: any
i18n: any
}
export type Mode = 'links' | 'langs' | 'sound'
export type Mode = 'links' | 'langs' | 'sound' | 'background'
export interface DasherCtrl {
mode: Prop<Mode>
setMode: (m: Mode) => void
data: DasherData
trans: Trans
ping: PingCtrl
langs: LangsCtrl
sound: SoundCtrl
opts: DasherOpts
}
export interface DasherOpts {
playing: boolean
}
export function makeCtrl(opts: DasherOpts, data: DasherData, redraw: Redraw): DasherCtrl {
const trans = window.lichess.trans(data.i18n);
let mode: Prop<Mode> = prop('links' as Mode);
function setMode(m: Mode) {
mode(m);
redraw();
export interface DasherCtrl {
mode: Prop<Mode>
setMode: (m: Mode) => void
data: DasherData
trans: Trans
ping: PingCtrl
subs: {
langs: LangsCtrl
sound: SoundCtrl
background: BackgroundCtrl
}
opts: DasherOpts
}
function close() { setMode('links'); }
const ping = pingCtrl(trans, redraw);
const langs = langsCtrl(data.lang, redraw, close);
const sound = soundCtrl(data.sound.list, trans, redraw, close);
export interface DasherOpts {
playing: boolean
}
return {
mode,
setMode,
data,
trans,
ping,
langs,
sound,
opts,
export function makeCtrl(opts: DasherOpts, data: DasherData, redraw: Redraw): DasherCtrl {
const trans = window.lichess.trans(data.i18n);
let mode: Prop<Mode> = prop('links' as Mode);
function setMode(m: Mode) {
mode(m);
redraw();
}
function close() { setMode('links'); }
const ping = pingCtrl(trans, redraw);
const subs = {
langs: langsCtrl(data.lang, redraw, close),
sound: soundCtrl(data.sound.list, trans, redraw, close),
background: backgroundCtrl(data.background, trans, redraw, close)
};
return {
mode,
setMode,
data,
trans,
ping,
subs,
opts
};
};
};

8
ui/dasher/src/links.ts
View File

@ -44,6 +44,11 @@ export default function(ctrl: DasherCtrl): VNode {
modeCfg(ctrl, 'sound'),
trans.noarg('sound'))
const background = h(
'a.sub',
modeCfg(ctrl, 'background'),
'Background')
return h('div', [
h('div.links', [
profile,
@ -54,7 +59,8 @@ export default function(ctrl: DasherCtrl): VNode {
]),
h('div.subs', [
langs,
sound
sound,
background
]),
pingView(ctrl.ping)
]);

10
ui/dasher/src/sound.ts
View File

@ -80,11 +80,9 @@ function makeSlider(ctrl: SoundCtrl, vnode: VNode) {
}
function soundView(ctrl: SoundCtrl, current: Key) {
return (s: Sound) => h('a', {
return (s: Sound) => h('a.text', {
hook: bind('click', () => ctrl.set(s[0])),
class: { active: current === s[0] }
}, [
h('i', { attrs: { 'data-icon': 'E' } }),
h('span', s[1])
]);
class: { active: current === s[0] },
attrs: { 'data-icon': 'E' }
}, s[1]);
}

8
ui/dasher/src/view.ts
View File

@ -5,6 +5,7 @@ import { DasherCtrl } from './dasher'
import links from './links'
import { view as langsView } from './langs'
import { view as soundView } from './sound'
import { view as backgroundView } from './background'
import { spinner } from './util'
export function loading(): VNode {
@ -15,10 +16,13 @@ export function loaded(ctrl: DasherCtrl): VNode {
let content: VNode | undefined;
switch(ctrl.mode()) {
case 'langs':
content = langsView(ctrl.langs);
content = langsView(ctrl.subs.langs);
break;
case 'sound':
content = soundView(ctrl.sound);
content = soundView(ctrl.subs.sound);
break;
case 'background':
content = backgroundView(ctrl.subs.background);
break;
default:
content = links(ctrl);

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

@ -374,10 +374,8 @@ lichess.topMenuIntent = function() {
lichess.dasherApp = (function() {
var instance, booted;
var $toggle = $('#user_tag');
$toggle.one('mouseover click', function() {
load();
});
var load = function(data) {
$toggle.one('mouseover click', function() { load(); });
var load = function() {
if (booted) return;
booted = true;
var isDev = $('body').data('dev');
@ -389,6 +387,7 @@ lichess.topMenuIntent = function() {
});
});
};
if ($('body').data('dev')) setTimeout(function() { $toggle.click(); }, 100);
})();
lichess.challengeApp = (function() {

1
ui/types/lichess.d.ts vendored
View File

@ -53,6 +53,7 @@ interface Window {
moment: any
Mousetrap: any
Chessground: any
Highcharts: any
}
interface Paginator<T> {