Added auto-zoom + toggle button to the deckbuilder

gemp-lotr/gemp-lotr-async/src/main/web/css/gemp-001/autozoom.css

@@ -0,0 +1,17 @@
+
+.previewImage {
+    position: absolute;
+    z-index: 1099;
+    pointer-events: none;
+    
+}
+
+.previewImage, .previewImage img,
+.card, .card img  {
+    border-radius: 5%;
+}
+
+
+
+
+

gemp-lotr/gemp-lotr-async/src/main/web/css/gemp-001/deckBuild.css

@@ -105,18 +105,6 @@ button.navigation-butt {
     padding: 0;
 }
 
-button.navigation-butt {
-    padding: 0.5em;
-}
-
-.navigation-butt.ui-button-icon-only > .ui-button-text{
-    padding: 0;
-}
-
-.navigation-butt.ui-button-icon-only {
-    width:  25px;
-}
-
 .ui-button-icon-only .ui-button-icon-primary.ui-icon {
     margin:  auto auto auto -4px;
 }
@@ -125,6 +113,10 @@ button.navigation-butt {
     padding: 0;
 }
 
+#collectionSelect {
+    order:  99;
+}
+
 #collectionSelect {
     order:  100;
 }
@@ -142,6 +134,11 @@ button.navigation-butt {
     display: flex;
 }
 
+#auto-zoom-toggle {
+    width: 27px;
+    height: 23px;
+}
+
 
 .card-group {
     width: 100%;   

gemp-lotr/gemp-lotr-async/src/main/web/css/gemp-001/game.css

@@ -440,22 +440,14 @@ body {
     transform:translateY(30%);
 }
 
-.previewImage {
-    position: absolute;
-    z-index: 1099;
-    pointer-events: none;
-    
-}
-
-.previewImage, .previewImage img,
-.card, .card img  {
-    border-radius: 5%;
-}
-
 #auto-zoom-li {
     float: right;
 }
 
+ul.ui-tabs-nav {
+    height: 14px;
+}
+
 #auto-zoom-toggle {
     width: 25px;
     height: 20px;
@@ -467,8 +459,4 @@ body {
 .ui-button-icon-primary.ui-icon.ui-icon-search,
 .ui-button-icon-primary.ui-icon.ui-icon-circle-close {
     margin-left:4px;
-}
-
-ul.ui-tabs-nav {
-    height: 14px;
 }

gemp-lotr/gemp-lotr-async/src/main/web/deckBuild.html

@@ -11,6 +11,7 @@
 	<link rel="manifest" href="images/icons/site.webmanifest">
 
 	<link rel="stylesheet" type="text/css" href="css/gemp-001/deckBuild.css">
+	<link rel="stylesheet" type="text/css" href="css/gemp-001/autozoom.css">
 
 	<link rel="stylesheet" type="text/css" href="css/dark-hive/jquery-ui-1.8.16.custom.css">
 	<link rel="stylesheet" type="text/css" href="css/jquery.contextMenu.css">
@@ -44,6 +45,7 @@
 	<script type="text/javascript" src="js/gemp-022/statsUi.js"></script>
 	<script type="text/javascript" src="js/gemp-022/playerStatsUi.js"></script>
 	<script type="text/javascript" src="js/gemp-022/gameHistoryUi.js"></script>
+	<script type="text/javascript" src="js/gemp-022/AutoZoomHandler.js"></script>
 	<script type="text/javascript" src="js/gemp-022/deckBuildingUi.js"></script>
 	<script type="text/javascript" src="js/gemp-022/gameUi.js"></script>
 	<script type="text/javascript" src="js/gemp-022/gameAnimations.js"></script>

gemp-lotr/gemp-lotr-async/src/main/web/game.html

@@ -10,6 +10,7 @@
     <link rel="manifest" href="images/icons/site.webmanifest">
 
     <link rel="stylesheet" type="text/css" href="css/gemp-001/game.css">
+    <link rel="stylesheet" type="text/css" href="css/gemp-001/autozoom.css">
 
     <link rel="stylesheet" type="text/css" href="css/dark-hive/jquery-ui-1.8.16.custom.css">
     <link rel="stylesheet" type="text/css" href="css/jquery.contextMenu.css">

gemp-lotr/gemp-lotr-async/src/main/web/js/gemp-022/deckBuildingUi.js

@@ -56,6 +56,8 @@ var GempLotrDeckBuildingUI = Class.extend({
     collectionType:null,
 
     specialSelection:false,
+    
+    autoZoom: null,
 
     init:function () {
         var that = this;
@@ -102,6 +104,8 @@ var GempLotrDeckBuildingUI = Class.extend({
                         that.setMapVisibility(false);
                     }
                 });
+        
+        this.autoZoom = new AutoZoom("autoZoomInDeckbuilder");
 
         var collectionSelect = $("#collectionSelect");
 
@@ -120,6 +124,10 @@ var GempLotrDeckBuildingUI = Class.extend({
         var deckListBut = $("#deckListBut").button();
         
         var notesBut = $("#notesBut").button();
+        
+        if(this.autoZoom.autoZoomToggle != null) {
+            this.autoZoom.autoZoomToggle.appendTo(this.manageDecksDiv);
+        }
 
         this.deckNameSpan = ("#editingDeck");
 
@@ -261,14 +269,38 @@ var GempLotrDeckBuildingUI = Class.extend({
                 }
                 return true;
             });
+        $('body').unbind('mouseover');
+        $("body").mouseover(
+            function (event) {
+                return that.autoZoom.handleMouseOver(event, 
+                   that.dragCardId != null, that.infoDialog.dialog("isOpen"));
+            });
+
         $("body").mousedown(
                 function (event) {
+                    that.autoZoom.handleMouseDown(event);
+                    
                     return that.dragStartCardFunction(event);
                 });
         $("body").mouseup(
                 function (event) {
                     return that.dragStopCardFunction(event);
                 });
+        
+        //If we ever add double-sided cards, this will be needed for
+        // the card hover.
+        
+        $('body').unbind('keydown');
+        $("body").keydown(
+            function (event) {
+                return that.autoZoom.handleKeyDown(event);
+            });
+
+        $('body').unbind('keyup');
+        $("body").keyup(
+            function (event) {
+                return that.autoZoom.handleKeyUp(event);
+            });
 
         var width = $(window).width();
         var height = $(window).height();