Merge pull request #9303 from sharadsw/zen-storm

Add zen mode to storm

app/views/storm.scala

@@ -31,6 +31,7 @@ object storm {
       ),
       title = "Puzzle Storm",
       zoomable = true,
+      playing = true,
       chessground = false
     ) {
       main(

ui/puz/css/_side.scss

@@ -12,6 +12,10 @@ $mq-col2: $mq-col2-uniboard;
 
   @include breakpoint($mq-col2) {
     padding: 3vh 2vw;
+
+    .playing.zen & {
+      justify-content: space-evenly;
+    }
   }
 
   &__top {

ui/storm/css/_storm.scss

@@ -3,10 +3,12 @@ $mq-col2: $mq-col2-uniboard;
 @import 'play';
 @import 'end';
 @import 'high';
+@import 'zen';
 
 .storm {
   &-play-scores {
     @extend %flex-between;
+    @extend %zen;
 
     color: $c-font-page;
     margin: 2vh 2vw;
@@ -24,6 +26,8 @@ $mq-col2: $mq-col2-uniboard;
     @include breakpoint($mq-not-xx-small) {
       display: none;
     }
+
+    @extend %zen;
   }
 
   &--reload {
@@ -46,5 +50,7 @@ $mq-col2: $mq-col2-uniboard;
     margin-top: 2vh;
     text-align: center;
     font-size: 0.8em;
+
+    @extend %zen;
   }
 }

ui/storm/css/_zen.scss

@@ -0,0 +1,13 @@
+%zen {
+  body.playing.zen & {
+    display: none;
+  }
+}
+
+#friend_box,
+.puz-side__solved__text,
+.puz-side__table,
+.site-title-nav,
+.site-buttons {
+  @extend %zen;
+}

ui/storm/css/build/_storm.scss

@@ -2,6 +2,8 @@
 @import '../../../common/css/layout/uniboard';
 @import '../../../common/css/component/board-resize';
 @import '../../../common/css/component/bar-glider';
+@import '../../../common/css/component/zen-toggle';
+@import '../../../common/css/component/fbt';
 @import '../../../common/css/vendor/chessground/_coords';
 @import '../../../chess/css/promotion';
 @import '../../../puz/css/puz';

ui/storm/src/ctrl.ts

@@ -62,6 +62,14 @@ export default class StormCtrl {
         this.redraw();
       }
     }, config.timeToStart + 1000);
+    lichess.pubsub.on('zen', () => {
+      if (!this.run.endAt) {
+        const zen = $('body').toggleClass('zen').hasClass('zen');
+        window.dispatchEvent(new Event('resize'));
+        xhr.setZen(zen);
+      }
+    });
+    $('#zentog').on('click', this.toggleZen);
   }
 
   end = (): void => {
@@ -74,6 +82,7 @@ export default class StormCtrl {
       this.vm.response = res;
       this.redraw();
     });
+    $('body').toggleClass('playing'); // end zen
     this.redrawSlow();
   };
 
@@ -203,8 +212,11 @@ export default class StormCtrl {
     });
   };
 
+  private toggleZen = () => lichess.pubsub.emit('zen');
+
   private hotkeys = () =>
     window.Mousetrap.bind('space', () => location.reload())
       .bind('return', this.end)
-      .bind('f', this.flip);
+      .bind('f', this.flip)
+      .bind('z', this.toggleZen);
 }

ui/storm/src/xhr.ts

@@ -1,4 +1,5 @@
 import * as xhr from 'common/xhr';
+import throttle from 'common/throttle';
 import { RunResponse, StormRecap } from './interfaces';
 
 export function record(run: StormRecap, notAnExploit: string): Promise<RunResponse> {
@@ -11,3 +12,10 @@ export function record(run: StormRecap, notAnExploit: string): Promise<RunRespon
     }),
   });
 }
+
+export const setZen = throttle(1000, zen =>
+  xhr.text('/pref/zen', {
+    method: 'post',
+    body: xhr.form({ zen: zen ? 1 : 0 }),
+  })
+);