Add flip board for puzzle storm

ui/puz/src/run.ts

@@ -1,15 +1,16 @@
 import { Run } from './interfaces';
 import { Config as CgConfig } from 'chessground/config';
+import { opposite } from 'chessground/util';
 import { uciToLastMove } from './util';
 import { makeFen } from 'chessops/fen';
 import { chessgroundDests } from 'chessops/compat';
 
-export const makeCgOpts = (run: Run, canMove: boolean): CgConfig => {
+export const makeCgOpts = (run: Run, canMove: boolean, flipped?: boolean): CgConfig => {
   const cur = run.current;
   const pos = cur.position();
   return {
     fen: makeFen(pos.toSetup()),
-    orientation: run.pov,
+    orientation: flipped ? opposite(run.pov) : run.pov,
     turnColor: pos.turn,
     movable: {
       color: run.pov,

ui/storm/src/ctrl.ts

@@ -23,6 +23,7 @@ export default class StormCtrl {
   trans: Trans;
   promotion: Promotion;
   ground = prop<CgApi | false>(false) as Prop<CgApi | false>;
+  flipped = false;
 
   constructor(opts: StormOpts, redraw: (data: StormData) => void) {
     this.data = opts.data;
@@ -47,7 +48,11 @@ export default class StormCtrl {
       filterFailed: false,
       filterSlow: false,
     };
-    this.promotion = makePromotion(this.withGround, () => makeCgOpts(this.run, !this.run.endAt), this.redraw);
+    this.promotion = makePromotion(
+      this.withGround,
+      () => makeCgOpts(this.run, !this.run.endAt, this.flipped),
+      this.redraw
+    );
     this.checkDupTab();
     setTimeout(this.hotkeys, 1000);
     if (this.data.key) setTimeout(() => sign(this.data.key!).then(this.vm.signed), 1000 * 40);
@@ -130,7 +135,7 @@ export default class StormCtrl {
       this.redrawQuick();
       this.redrawSlow();
     }
-    this.withGround(g => g.set(makeCgOpts(this.run, !this.run.endAt)));
+    this.withGround(g => g.set(makeCgOpts(this.run, !this.run.endAt, this.flipped)));
     lichess.pubsub.emit('ply', this.run.moves);
   };
 
@@ -181,6 +186,12 @@ export default class StormCtrl {
     this.redraw();
   };
 
+  flip = () => {
+    this.flipped = !this.flipped;
+    this.withGround(g => g.toggleOrientation());
+    this.redraw();
+  };
+
   private checkDupTab = () => {
     const dupTabMsg = lichess.storage.make('storm.tab');
     dupTabMsg.fire(this.data.puzzles[0].id);

ui/storm/src/view/main.ts

@@ -63,10 +63,17 @@ const renderSolved = (ctrl: StormCtrl): VNode =>
 
 const renderControls = (ctrl: StormCtrl): VNode =>
   h('div.puz-side__control', [
+    h('a.puz-side__control__end.button.button-empty', {
+      attrs: {
+        'data-icon': 'B',
+        title: ctrl.trans.noarg('flipBoard'),
+      },
+      hook: onInsert(el => el.addEventListener('click', ctrl.flip)),
+    }),
     h('a.puz-side__control__reload.button.button-empty', {
       attrs: {
         href: '/storm',
-        'data-icon': 'B',
+        'data-icon': 'P',
         title: ctrl.trans('newRun'),
       },
     }),