dasher reads zoom from DOM - compat with board resize handle

app/controllers/Dasher.scala

@@ -70,8 +70,7 @@ object Dasher extends LilaController {
               "image" -> ctx.pref.bgImgOrDefault
             ),
             "board" -> Json.obj(
-              "is3d" -> ctx.pref.is3d,
-              "zoom" -> ctx.zoom
+              "is3d" -> ctx.pref.is3d
             ),
             "theme" -> Json.obj(
               "d2" -> Json.obj(

ui/dasher/src/board.ts

@@ -7,23 +7,23 @@ export interface BoardCtrl {
   data: BoardData
   trans: Trans
   setIs3d(v: boolean): void;
+  readZoom(): number;
   setZoom(v: number): void;
   close(): void;
 }
 
 export interface BoardData {
   is3d: boolean
-  zoom: number
 }
 
 export type PublishZoom = (v: number) => void;
 
 export function ctrl(data: BoardData, trans: Trans, redraw: Redraw, close: Close): BoardCtrl {
 
-  data.zoom = data.zoom || 180;
+  const readZoom = () => parseInt(getComputedStyle(document.body).getPropertyValue('--zoom')) + 100;
 
   const saveZoom = window.lichess.debounce(() => {
-    $.ajax({ method: 'post', url: '/pref/zoom?v=' + data.zoom });
+    $.ajax({ method: 'post', url: '/pref/zoom?v=' + readZoom() });
   }, 1000);
 
   return {
@@ -34,12 +34,12 @@ export function ctrl(data: BoardData, trans: Trans, redraw: Redraw, close: Close
       $.post('/pref/is3d', { is3d: v }, window.lichess.reload);
       redraw();
     },
+    readZoom,
     setZoom(v: number) {
-      data.zoom = v;
       document.body.setAttribute('style', '--zoom:' + (v - 100));
       window.lichess.dispatchEvent(window, 'resize');
-      saveZoom();
       redraw();
+      saveZoom();
     },
     close
   };
@@ -65,7 +65,7 @@ export function view(ctrl: BoardCtrl): VNode {
       h('p', [
         ctrl.trans.noarg('boardSize'),
         ': ',
-        (ctrl.data.zoom - 100),
+        (ctrl.readZoom() - 100),
         '%'
       ]),
       h('div.slider', {
@@ -83,7 +83,7 @@ function makeSlider(ctrl: BoardCtrl, el: HTMLElement) {
       max: 200,
       range: 'min',
       step: 1,
-      value: ctrl.data.zoom,
+      value: ctrl.readZoom(),
       slide: (_: any, ui: any) => ctrl.setZoom(ui.value)
     });
   });