dasher piece selector

app/controllers/Dasher.scala

@@ -57,8 +57,14 @@ object Dasher extends LilaController {
               )
             ),
             "piece" -> Json.obj(
-              "d2" -> ctx.currentPieceSet.name,
-              "d3" -> ctx.currentPieceSet3d.name
+              "d2" -> Json.obj(
+                "current" -> ctx.currentPieceSet.name,
+                "list" -> lila.pref.PieceSet.list.map(_.name)
+              ),
+              "d3" -> Json.obj(
+                "current" -> ctx.currentPieceSet3d.name,
+                "list" -> lila.pref.PieceSet3d.list.map(_.name)
+              )
             ),
             "kid" -> me.kid,
             "coach" -> isGranted(_.Coach),

public/stylesheets/board-3d.css

@@ -123,7 +123,7 @@
   background-image: url(../images/staunton/piece/Basic/White-Bishop-Flipped.png);
 }
 .Basic .is3d .knight.white,
-#top .is3d piece.Basic {
+#dasher_app .d3 piece.Basic {
   background-image: url(../images/staunton/piece/Basic/White-Knight.png);
 }
 .Basic .is3d .cg-512 .orientation-black .knight.white {
@@ -172,7 +172,7 @@
   background-image: url(../images/staunton/piece/Glass/White-Bishop-Flipped.png);
 }
 .Glass .is3d .knight.white,
-#top .is3d piece.Glass {
+#dasher_app .d3 piece.Glass {
   background-image: url(../images/staunton/piece/Glass/White-Knight.png);
 }
 .Glass .is3d .cg-512 .orientation-black .knight.white {
@@ -221,7 +221,7 @@
   background-image: url(../images/staunton/piece/Wood/White-Bishop-Flipped.png);
 }
 .Wood .is3d .knight.white,
-#top .is3d piece.Wood {
+#dasher_app .d3 piece.Wood {
   background-image: url(../images/staunton/piece/Wood/White-Knight.png);
 }
 .Wood .is3d .cg-512 .orientation-black .knight.white {
@@ -270,7 +270,7 @@
   background-image: url(../images/staunton/piece/Metal/White-Bishop-Flipped.png);
 }
 .Metal .is3d .knight.white,
-#top .is3d piece.Metal {
+#dasher_app .d3 piece.Metal {
   background-image: url(../images/staunton/piece/Metal/White-Knight.png);
 }
 .Metal .is3d .cg-512 .orientation-black .knight.white {
@@ -319,7 +319,7 @@
   background-image: url(../images/staunton/piece/RedVBlue/White-Bishop-Flipped.png);
 }
 .RedVBlue .is3d .knight.white,
-#top .is3d piece.RedVBlue {
+#dasher_app .d3 piece.RedVBlue {
   background-image: url(../images/staunton/piece/RedVBlue/White-Knight.png);
 }
 .RedVBlue .is3d .cg-512 .orientation-black .knight.white {
@@ -368,7 +368,7 @@
   background-image: url(../images/staunton/piece/Trimmed/White-Bishop-Flipped.png);
 }
 .Trimmed .is3d .knight.white,
-#top .is3d piece.Trimmed {
+#dasher_app .d3 piece.Trimmed {
   background-image: url(../images/staunton/piece/Trimmed/White-Knight.png);
 }
 .Trimmed .is3d .cg-512 .orientation-black .knight.white {
@@ -417,7 +417,7 @@
   background-image: url(../images/staunton/piece/Experimental/White-Bishop-Flipped.png);
 }
 .Experimental .is3d .knight.white,
-#top .is3d piece.Experimental {
+#dasher_app .d3 piece.Experimental {
   background-image: url(../images/staunton/piece/Experimental/White-Knight.png);
 }
 .Experimental .is3d .cg-512 .orientation-black .knight.white {
@@ -466,7 +466,7 @@
   background-image: url(../images/staunton/piece/ModernJade/White-Bishop-Flipped.png);
 }
 .ModernJade .is3d .knight.white,
-#top .is3d piece.ModernJade {
+#dasher_app .d3 piece.ModernJade {
   background-image: url(../images/staunton/piece/ModernJade/White-Knight.png);
 }
 .ModernJade .is3d .cg-512 .orientation-black .knight.white {
@@ -515,7 +515,7 @@
   background-image: url(../images/staunton/piece/ModernWood/White-Bishop-Flipped.png);
 }
 .ModernWood .is3d .knight.white,
-#top .is3d piece.ModernWood {
+#dasher_app .d3 piece.ModernWood {
   background-image: url(../images/staunton/piece/ModernWood/White-Knight.png);
 }
 .ModernWood .is3d .cg-512 .orientation-black .knight.white {
@@ -563,7 +563,7 @@
 .Staunton .is3d .knight.white {
   background-image: url(../images/staunton/piece/Staunton/White-Knight.png);
 }
-#top .is3d piece.Staunton {
+#dasher_app .d3 piece.Staunton {
   background-image: url(../images/staunton/piece/Staunton/White-Knight-Preview.png);
 }
 .Staunton .is3d .rook.white {

public/stylesheets/dasherApp.css

@@ -201,6 +201,32 @@
   background: #3893E8;
 }
 
+#dasher_app .piece .list {
+  padding: 5px 0;
+  display: flex;
+  flex-flow: row wrap;
+  background: url(../images/board/darksquares.jpg);
+  box-shadow: inset 0 0 20px 3px #777;
+}
+#dasher_app .piece .no-square {
+  width: 75px;
+  height: 75px;
+  position: relative;
+}
+#dasher_app .piece .no-square:hover {
+  background: rgba(250, 250, 250, 0.15);
+}
+#dasher_app .piece piece {
+  width: 100%;
+  height: 100%;
+}
+#dasher_app .piece.d3 piece {
+  left: 0;
+  top: 0;
+  background-size: cover;
+  background-position: 0 67%;
+}
+
 #dasher_app .theme.d2 .blue {
   background-image: url(../images/board/svg/blue.svg);
   background-size: 256px;
@@ -314,6 +340,43 @@
   background-image: url(../images/board/3d/woodi.thumbnail.png);
 }
 
+#dasher_app piece.cburnett {
+  background-image: url(../piece-src/cburnett/wN.svg);
+}
+#dasher_app piece.merida {
+  background-image: url(../piece/merida/wN.svg);
+}
+#dasher_app piece.chess7 {
+  background-image: url(../piece/chess7/wN.svg);
+}
+#dasher_app piece.spatial {
+  background-image: url(../piece/spatial/wN.svg);
+}
+#dasher_app piece.alpha {
+  background-image: url(../piece/alpha/wN.svg);
+}
+#dasher_app piece.pirouetti {
+  background-image: url(../piece-src/pirouetti/wN.svg);
+}
+#dasher_app piece.reillycraig {
+  background-image: url(../piece/reillycraig/wN.svg);
+}
+#dasher_app piece.fantasy {
+  background-image: url(../piece/fantasy/wN.svg);
+}
+#dasher_app piece.shapes {
+  background-image: url(../piece/shapes/wN.svg);
+}
+#dasher_app piece.letter {
+  background-image: url(../piece/letter/wN.svg);
+}
+#dasher_app piece.chessnut {
+  background-image: url(../piece/chessnut/wN.svg);
+}
+#dasher_app piece.companion {
+  background-image: url(../piece/companion/wN.svg);
+}
+
 body.dark #dasher_app .subs,
 body.dark #dasher_app .status {
   border-color: #3d3d3d;

public/stylesheets/themepicker.css

@@ -129,42 +129,3 @@ body.transp #themepicker input.background_image {
   box-sizing: border-box;
   margin-bottom: 10px;
 }
-
-#top piece.cburnett {
-  background-image: url(../piece-src/cburnett/wN.svg);
-}
-#top piece.merida {
-  background-image: url(../piece/merida/wN.svg);
-}
-#top piece.chess7 {
-  background-image: url(../piece/chess7/wN.svg);
-}
-#top piece.spatial {
-  background-image: url(../piece/spatial/wN.svg);
-}
-#top piece.alpha {
-  background-image: url(../piece/alpha/wN.svg);
-}
-#top piece.pirouetti {
-  background-image: url(../piece-src/pirouetti/wN.svg);
-}
-#top piece.reillycraig {
-  background-image: url(../piece/reillycraig/wN.svg);
-}
-#top piece.fantasy {
-  background-image: url(../piece/fantasy/wN.svg);
-}
-#top piece.shapes {
-  background-image: url(../piece/shapes/wN.svg);
-}
-#top piece.letter {
-  background-image: url(../piece/letter/wN.svg);
-}
-#top piece.chessnut {
-  background-image: url(../piece/chessnut/wN.svg);
-}
-#top piece.companion {
-  background-image: url(../piece/companion/wN.svg);
-}
-
-

ui/dasher/src/dasher.ts

@@ -4,6 +4,7 @@ import { SoundCtrl, ctrl as soundCtrl } from './sound'
 import { BackgroundCtrl, BackgroundData, ctrl as backgroundCtrl } from './background'
 import { BoardCtrl, BoardData, ctrl as boardCtrl } from './board'
 import { ThemeCtrl, ThemeData, ctrl as themeCtrl } from './theme'
+import { PieceCtrl, PieceData, ctrl as pieceCtrl } from './piece'
 import { Redraw, Prop, prop } from './util'
 import { get } from './xhr'
 
@@ -19,13 +20,14 @@ export interface DasherData {
   background: BackgroundData
   board: BoardData
   theme: ThemeData
+  piece: PieceData
   kid: boolean
   coach: boolean
   prefs: any
   i18n: any
 }
 
-export type Mode = 'links' | 'langs' | 'sound' | 'background' | 'board' | 'theme'
+export type Mode = 'links' | 'langs' | 'sound' | 'background' | 'board' | 'theme' | 'piece'
 
   export interface DasherCtrl {
     mode: Prop<Mode>
@@ -38,7 +40,8 @@ export type Mode = 'links' | 'langs' | 'sound' | 'background' | 'board' | 'theme
       sound: SoundCtrl
       background: BackgroundCtrl,
       board: BoardCtrl,
-      theme: ThemeCtrl
+      theme: ThemeCtrl,
+      piece: PieceCtrl
     }
     opts: DasherOpts
   }
@@ -51,7 +54,7 @@ export type Mode = 'links' | 'langs' | 'sound' | 'background' | 'board' | 'theme
 
     const trans = window.lichess.trans(data.i18n);
 
-    let mode: Prop<Mode> = prop('theme' as Mode);
+    let mode: Prop<Mode> = prop('piece' as Mode);
 
     function setMode(m: Mode) {
       mode(m);
@@ -66,7 +69,8 @@ export type Mode = 'links' | 'langs' | 'sound' | 'background' | 'board' | 'theme
       sound: soundCtrl(data.sound.list, trans, redraw, close),
       background: backgroundCtrl(data.background, redraw, close),
       board: boardCtrl(data.board, redraw, close),
-      theme: themeCtrl(data.theme, () => data.board.is3d ? 'd3' : 'd2', redraw, close)
+      theme: themeCtrl(data.theme, () => data.board.is3d ? 'd3' : 'd2', redraw, close),
+      piece: pieceCtrl(data.piece, () => data.board.is3d ? 'd3' : 'd2', redraw, close)
     };
 
     return {

ui/dasher/src/links.ts

@@ -59,6 +59,11 @@ export default function(ctrl: DasherCtrl): VNode {
     modeCfg(ctrl, 'theme'),
     'Board theme')
 
+  const piece = h(
+    'a.sub',
+    modeCfg(ctrl, 'piece'),
+    'Piece set')
+
   return h('div', [
     h('div.links', [
       profile,
@@ -72,7 +77,8 @@ export default function(ctrl: DasherCtrl): VNode {
       sound,
       background,
       board,
-      theme
+      theme,
+      piece
     ]),
     pingView(ctrl.ping)
   ]);

ui/dasher/src/piece.ts

@@ -0,0 +1,70 @@
+import { h } from 'snabbdom'
+import { VNode } from 'snabbdom/vnode'
+
+import { Redraw, Close, bind, header } from './util'
+
+type Piece = string;
+
+interface PieceDimData {
+  current: Piece
+  list: Piece[]
+}
+
+export interface PieceData {
+  d2: PieceDimData
+  d3: PieceDimData
+}
+
+export interface PieceCtrl {
+  dimension: () => keyof PieceData
+  data: () => PieceDimData
+  set(t: Piece): void
+  close: Close
+}
+
+export function ctrl(data: PieceData, dimension: () => keyof PieceData, redraw: Redraw, close: Close): PieceCtrl {
+
+  function dimensionData() {
+    return data[dimension()];
+  }
+
+  return {
+    dimension,
+    data: dimensionData,
+    set(t: Piece) {
+      const d = dimensionData();
+      d.current = t;
+      applyPiece(t, d.list);
+      $.post('/pref/theme' + (dimension() === 'd3' ? '3d' : ''), {
+        theme: t
+      }, window.lichess.reloadOtherTabs);
+      redraw();
+    },
+    close
+  };
+}
+
+export function view(ctrl: PieceCtrl): VNode {
+
+  const d = ctrl.data();
+
+  return h('div.sub.piece.' + ctrl.dimension(), [
+    header('Piece set', ctrl.close),
+    h('div.list', {
+      attrs: { method: 'post', action: '/pref/soundSet' }
+    }, d.list.map(pieceView(d.current, ctrl.set)))
+  ]);
+}
+
+function pieceView(current: Piece, set: (t: Piece) => void) {
+  return (t: Piece) => h('a.no-square', {
+    hook: bind('click', () => set(t)),
+    class: { active: current === t }
+  }, [
+    h('piece.' + t)
+  ]);
+}
+
+function applyPiece(t: Piece, list: Piece[]) {
+  $('body').removeClass(list.join(' ')).addClass(t);
+}

ui/dasher/src/view.ts

@@ -8,6 +8,7 @@ import { view as soundView } from './sound'
 import { view as backgroundView } from './background'
 import { view as boardView } from './board'
 import { view as themeView } from './theme'
+import { view as pieceView } from './piece'
 import { spinner } from './util'
 
 export function loading(): VNode {
@@ -32,6 +33,9 @@ export function loaded(ctrl: DasherCtrl): VNode {
     case 'theme':
       content = themeView(ctrl.subs.theme);
       break;
+    case 'piece':
+      content = pieceView(ctrl.subs.piece);
+      break;
     default:
       content = links(ctrl);
   }