dasher WIP

app/controllers/Dasher.scala

@@ -16,7 +16,8 @@ object Dasher extends LilaController {
     Env.i18n.keys.preferences,
     Env.i18n.keys.logOut,
     Env.i18n.keys.networkLagBetweenYouAndLichess,
-    Env.i18n.keys.timeToProcessAMoveOnLichessServer
+    Env.i18n.keys.timeToProcessAMoveOnLichessServer,
+    Env.i18n.keys.sound
   ), Env.i18n.pool lang ctx.req)
 
   def get = Open { implicit ctx =>
@@ -32,6 +33,12 @@ object Dasher extends LilaController {
               "current" -> Env.i18n.pool.lang(ctx.req).language.toString,
               "accepted" -> (ctx.req.acceptLanguages.map(_.language.toString)(breakOut): List[String]).distinct
             ),
+            "sound" -> Json.obj(
+              "current" -> ctx.currentSoundSet.key,
+              "list" -> lila.pref.SoundSet.list.map { set =>
+                s"${set.key} ${set.name}"
+              }
+            ),
             "kid" -> me.kid,
             "coach" -> isGranted(_.Coach),
             "prefs" -> prefs,

app/views/base/layout.scala.html

@@ -89,7 +89,7 @@ asyncJs: Boolean = false)(body: Html)(implicit ctx: Context)
       @ctx.me.map { me =>
       <div class="auth">
         <a id="user_tag" class="toggle toggle_auth link">@me.username</a>
-        <div id="dasher_app" class="links dropdown" data-playing=@playing>
+        <div id="dasher_app" class="links dropdown" data-playing="@playing">
           <div class="initiating">@base.spinner()</div>
         </div>
       </div>

modules/i18n/messages/messages

@@ -360,7 +360,6 @@ privacy=Privacy
 letOtherPlayersFollowYou=Let other players follow you
 letOtherPlayersChallengeYou=Let other players challenge you
 sound=Sound
-soundControlInTheTopBarOfEveryPage=The sound control is in the top bar of every page, on the right side.
 yourPreferencesHaveBeenSaved=Your preferences have been saved.
 none=None
 fast=Fast

public/stylesheets/common.css

@@ -901,34 +901,6 @@ span.progress > .positive {
 span.progress > .negative {
   color: #ac524f;
 }
-#sound_control {
-  position: relative;
-}
-#sound_control .dropdown {
-  width: 120px;
-  padding: 10px;
-}
-#sound_control .slider {
-  float: right;
-  width: 10px;
-  height: 168px;
-}
-#sound_control .slider .ui-slider-handle {
-  margin: 0 0 -9px -3px;
-}
-#sound_control .slider .ui-widget-header {
-  width: 10px;
-  bottom: 0;
-}
-#sound_control .selector div {
-  margin: 5px 0;
-}
-#sound_control .selector label {
-  cursor: pointer;
-}
-#sound_control .selector input {
-  vertical-align: middle;
-}
 #sound_state span.on,
 #sound_state.sound_state_on span.off {
   display: none;

public/stylesheets/dasherApp.css

@@ -18,7 +18,8 @@
   white-space: nowrap;
 }
 #dasher_app .links a:hover,
-#dasher_app .subs a:hover {
+#dasher_app .subs a:hover,
+#dasher_app .sound .selector a:hover {
   background: #F0F0F0;
   color: #444;
 }
@@ -62,7 +63,7 @@
 
 #dasher_app .head {
   display: block;
-  padding: 10px;
+  padding: 15px 10px;
   background: #F0F0F0;
   color: #444;
 }
@@ -95,3 +96,39 @@
   background: #3893E8;
   color: #fff;
 }
+/* #dasher_app .sound { */
+/*   display: flex; */
+/* } */
+#dasher_app .sound .slider {
+  float: right;
+  width: 10px;
+  height: 168px;
+  /* background: red; */
+}
+#dasher_app .sound .slider .ui-slider-handle {
+  margin: 0 0 -9px -3px;
+}
+#dasher_app .sound .slider .ui-widget-header {
+  width: 10px;
+  bottom: 0;
+}
+#dasher_app .sound .selector {
+  margin: 5px 0;
+}
+#dasher_app .sound .selector a {
+  display: flex;
+  align-items: stretch;
+}
+#dasher_app .sound .selector i {
+  justify-content: center;
+  align-items: center;
+  padding: 5px 0 5px 5px;
+  opacity: 0;
+}
+#dasher_app .sound .selector span {
+  padding: 5px;
+}
+#dasher_app .sound .selector .active i {
+  opacity: 1;
+  color: #3893E8;
+}

ui/dasher/src/dasher.ts

@@ -1,5 +1,6 @@
 import { PingCtrl, ctrl as pingCtrl } from './ping'
 import { LangsCtrl, ctrl as langsCtrl } from './langs'
+import { SoundCtrl, ctrl as soundCtrl } from './sound'
 import { Redraw, Prop, prop } from './util'
 import { get } from './xhr'
 
@@ -9,13 +10,17 @@ export interface DasherData {
     current: string
     accepted: string[]
   }
+  sound: {
+    current: string
+    list: string[]
+  }
   kid: boolean
   coach: boolean
   prefs: any
   i18n: any
 }
 
-export type Mode = 'links' | 'langs'
+export type Mode = 'links' | 'langs' | 'sound'
 
 export interface DasherCtrl {
   mode: Prop<Mode>
@@ -24,6 +29,7 @@ export interface DasherCtrl {
   trans: Trans
   ping: PingCtrl
   langs: LangsCtrl
+  sound: SoundCtrl
   opts: DasherOpts
 }
 
@@ -45,6 +51,7 @@ export function makeCtrl(opts: DasherOpts, data: DasherData, redraw: Redraw): Da
 
   const ping = pingCtrl(trans, redraw);
   const langs = langsCtrl(data.lang, redraw, close);
+  const sound = soundCtrl(data.sound.current, data.sound.list, trans, redraw, close);
 
   return {
     mode,
@@ -53,6 +60,7 @@ export function makeCtrl(opts: DasherOpts, data: DasherData, redraw: Redraw): Da
     trans,
     ping,
     langs,
+    sound,
     opts,
   };
 };

ui/dasher/src/links.ts

@@ -29,15 +29,20 @@ export default function(ctrl: DasherCtrl): VNode {
     linkCfg('/coach/edit', ':'),
     'Coach manager');
 
+  const logout = h(
+    'a.text',
+    linkCfg('/logout', 'w'),
+    trans.noarg('logOut'));
+
   const langs = h(
     'a.sub',
     modeCfg(ctrl, 'langs'),
     'Language')
 
-  const logout = h(
-    'a.text',
-    linkCfg('/logout', 'w'),
-    trans.noarg('logOut'));
+  const sound = h(
+    'a.sub',
+    modeCfg(ctrl, 'sound'),
+    trans.noarg('sound'))
 
   return h('div', [
     h('div.links', [
@@ -48,7 +53,8 @@ export default function(ctrl: DasherCtrl): VNode {
       logout
     ]),
     h('div.subs', [
-      langs
+      langs,
+      sound
     ]),
     pingView(ctrl.ping)
   ]);

ui/dasher/src/sound.ts

@@ -0,0 +1,66 @@
+import { h } from 'snabbdom'
+import { VNode } from 'snabbdom/vnode'
+
+import { Redraw, Close, bind } from './util'
+
+type Key = string;
+type Name = string;
+
+export type Sound = string[];
+
+export interface SoundData {
+  current: Key
+  list: Sound[]
+}
+
+export interface SoundCtrl {
+  current: () => Key
+  dict: Sound[]
+  set(k: Key): void
+  trans: Trans
+  close: Close
+}
+
+export function ctrl(current: Key, raw: string[], trans: Trans, redraw: Redraw, close: Close): SoundCtrl {
+
+  const dict: Sound[] = raw.map(s => s.split(' '));
+
+  return {
+    current: () => current,
+    dict,
+    set(k: Key) {
+      current = k;
+      redraw();
+    },
+    trans,
+    close
+  };
+}
+
+export function view(ctrl: SoundCtrl): VNode {
+
+  return h('div.sub.sound', [
+    h('a.head.text', {
+      attrs: { 'data-icon': 'I' },
+      hook: bind('click', ctrl.close)
+    }, ctrl.trans('sound')),
+    h('div.content', [
+      h('div.slider'),
+      h('div.selector', {
+        attrs: { method: 'post', action: '/pref/soundSet' }
+      }, ctrl.dict.map(soundView(ctrl, ctrl.current())))
+    ])
+  ]);
+}
+
+function soundView(ctrl: SoundCtrl, current: Key) {
+  return (s: Sound) => h('a', {
+    hook: bind('click', () => ctrl.set(s[0])),
+    class: { active: current === s[0] }
+  }, [
+    h('i', {
+      attrs: { 'data-icon': 'E' }
+    }),
+    h('span', s[1])
+  ]);
+}

ui/dasher/src/view.ts

@@ -4,6 +4,7 @@ import { VNode } from 'snabbdom/vnode'
 import { DasherCtrl } from './dasher'
 import links from './links'
 import { view as langsView } from './langs'
+import { view as soundView } from './sound'
 import { spinner } from './util'
 
 export function loading(): VNode {
@@ -16,6 +17,9 @@ export function loaded(ctrl: DasherCtrl): VNode {
     case 'langs':
       content = langsView(ctrl.langs);
       break;
+    case 'sound':
+      content = soundView(ctrl.sound);
+      break;
     default:
       content = links(ctrl);
   }

ui/site/src/main.js

@@ -377,7 +377,7 @@ lichess.topMenuIntent = function() {
         $toggle.one('mouseover click', function() {
           load();
         });
-        setTimeout(function() { $toggle.click(); }, 100);
+        // setTimeout(function() { $toggle.click(); }, 100);
         var load = function(data) {
           if (booted) return;
           booted = true;