From 12d019172261409e85b2fff00e4f1e9c7db05aa7 Mon Sep 17 00:00:00 2001 From: Christian 'ketura' McCarty Date: Mon, 6 May 2024 01:10:07 -0500 Subject: [PATCH] Added auto-zoom + toggle button to the deckbuilder --- .../src/main/web/css/gemp-001/autozoom.css | 17 ++++++++++ .../src/main/web/css/gemp-001/deckBuild.css | 21 ++++++------ .../src/main/web/css/gemp-001/game.css | 20 +++--------- .../src/main/web/deckBuild.html | 2 ++ .../gemp-lotr-async/src/main/web/game.html | 1 + .../main/web/js/gemp-022/deckBuildingUi.js | 32 +++++++++++++++++++ 6 files changed, 65 insertions(+), 28 deletions(-) create mode 100644 gemp-lotr/gemp-lotr-async/src/main/web/css/gemp-001/autozoom.css diff --git a/gemp-lotr/gemp-lotr-async/src/main/web/css/gemp-001/autozoom.css b/gemp-lotr/gemp-lotr-async/src/main/web/css/gemp-001/autozoom.css new file mode 100644 index 000000000..f17d2deb3 --- /dev/null +++ b/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%; +} + + + + + diff --git a/gemp-lotr/gemp-lotr-async/src/main/web/css/gemp-001/deckBuild.css b/gemp-lotr/gemp-lotr-async/src/main/web/css/gemp-001/deckBuild.css index 03e2aa624..4effe6420 100644 --- a/gemp-lotr/gemp-lotr-async/src/main/web/css/gemp-001/deckBuild.css +++ b/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%; diff --git a/gemp-lotr/gemp-lotr-async/src/main/web/css/gemp-001/game.css b/gemp-lotr/gemp-lotr-async/src/main/web/css/gemp-001/game.css index 677f8407b..a73c36fcc 100644 --- a/gemp-lotr/gemp-lotr-async/src/main/web/css/gemp-001/game.css +++ b/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; } \ No newline at end of file diff --git a/gemp-lotr/gemp-lotr-async/src/main/web/deckBuild.html b/gemp-lotr/gemp-lotr-async/src/main/web/deckBuild.html index 006a32c21..884b1b074 100644 --- a/gemp-lotr/gemp-lotr-async/src/main/web/deckBuild.html +++ b/gemp-lotr/gemp-lotr-async/src/main/web/deckBuild.html @@ -11,6 +11,7 @@ + @@ -44,6 +45,7 @@ + diff --git a/gemp-lotr/gemp-lotr-async/src/main/web/game.html b/gemp-lotr/gemp-lotr-async/src/main/web/game.html index f8a75a71f..749161454 100644 --- a/gemp-lotr/gemp-lotr-async/src/main/web/game.html +++ b/gemp-lotr/gemp-lotr-async/src/main/web/game.html @@ -10,6 +10,7 @@ + diff --git a/gemp-lotr/gemp-lotr-async/src/main/web/js/gemp-022/deckBuildingUi.js b/gemp-lotr/gemp-lotr-async/src/main/web/js/gemp-022/deckBuildingUi.js index 9272835e6..1c58638eb 100644 --- a/gemp-lotr/gemp-lotr-async/src/main/web/js/gemp-022/deckBuildingUi.js +++ b/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();