Most functionality

app/views/base/layout.scala.html

@@ -118,6 +118,12 @@ openGraph: Map[Symbol, String] = Map.empty)(body: Html)(implicit ctx: Context)
             <a class="d2 button" data-is3d="false">2D</a>
             <a class="d3 button" data-is3d="true">3D</a>
           </div>
+          <div class="zoom_control">
+            <div class="slider ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all">
+              <div class="ui-slider-range ui-widget-header ui-corner-all ui-slider-range-min"></div>
+              <span class="ui-slider-handle ui-state-default ui-corner-all" tabindex="0"></span>
+            </div>
+          </div>
           <div class="is2d">
             <div class="board" data-href="@routes.Pref.set("theme")">
               @lila.pref.Theme.list.map { theme =>

public/javascripts/big.js

@@ -451,6 +451,7 @@ var storage = {
       };
       var showDimensions = function(is3d) {
         $body.removeClass('is2d is3d').addClass(is3d ? 'is3d' : 'is2d');
+        setZoom(getZoom());
       };
       $themepicker.find('.background a').click(function() {
         background = $(this).data('bg');
@@ -478,6 +479,50 @@ var storage = {
       }, function() {
         showDimensions(is3d);
       }).filter('.' + (is3d ? 'd3' : 'd2')).addClass('active');
+
+      var $boardWrap = $(".lichess_game .cg-board-wrap");
+      var $lichessGame = $(".lichess_game");
+      var $underBoard = $(".underboard_content");
+      var $content = $(".content");
+
+      var getZoom = function() {
+        return storage.get('zoom') || 1;
+      };
+      var setZoom = function(v) {
+        storage.set('zoom', v);
+
+        $boardWrap.css("width", 512*getZoom() + 'px');
+        $underBoard.css("margin-left", (getZoom() - 1) * 250 + 'px');
+        if (is3d) {
+          $boardWrap.css("height", 479.08572*getZoom() + 'px');
+          $lichessGame.css("height", 479.08572*getZoom() + 'px');
+        } else {
+          $boardWrap.css("height", 512*getZoom() + 'px');
+          $lichessGame.css("height", 512*getZoom() + 'px');
+        }
+
+        if ($lichessGame.length) {
+          // if on a board with a game
+          $content.css("margin-left", 'calc( 50% - ' + (246.5 + 256*getZoom()) + 'px)');
+        }
+
+      };
+      var manuallySetZoom = $.fp.debounce(function(v) {
+        setZoom(v);
+      }, 10);
+      setZoom(getZoom()); // Instantiate the page's zoom
+      
+      $themepicker.find('.slider').slider({
+        orientation: "horizontal",
+        min: 1,
+        max: 2,
+        range: 'min',
+        step: 0.01,
+        value: getZoom(),
+        slide: function(e, ui) {
+          manuallySetZoom(ui.value);
+        }
+      });
     });
 
     $('.js_email').one('click', function() {

public/stylesheets/common.css

@@ -1308,6 +1308,18 @@ body.is3d #themepicker div.color_demo {
   display: block;
   text-decoration: none;
 }
+#themepicker .zoom_control .slider {
+  margin: auto;
+  width: 200px;
+  height: 10px;
+}
+#themepicker .zoom_control .slider .ui-slider-handle {
+  margin: 0 0 -9px -3px;
+}
+#themepicker .zoom_control .slider .ui-widget-header {
+  width: 10px;
+  bottom: 0;
+}
 #sound_control {
   margin-right: 5px;
   float: right;