Merge pull request #28 from Z2h-A6n/master

Multi-row player list when dragged to screen edge
cgloeckner · Jul 9, 2024 · be7b6e9 · be7b6e9
2 parents 896175f + 89cd67b
commit be7b6e9
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 23 deletions.
diff --git a/static/client/layout.css b/static/client/layout.css
@@ -861,22 +861,14 @@ div.rollbox > span > span.maxani {
 
 /* --- Players list ------------------------------------------------- */
 
-div#players {  
-    position: absolute; 
-    left: 50%;
-    bottom: 0px;
-
+div#players {
+    position: absolute;
     height: 56px;
-    transform: translate(-50%, 0%);
-
-    display: block;
-
-    white-space: nowrap;
+    display: table;
 }
 
-div#players > span.player {    
+div#players > span.player {
     display: inline-block;
-    height: 20px;
     padding: 10px;
     margin: 7px;
     font-size: larger;
@@ -885,7 +877,6 @@ div#players > span.player {
     text-align: center;
     color: black;
     min-width: 80px;
-
     cursor: grab;
 }
 

diff --git a/static/client/ui.js b/static/client/ui.js
@@ -2017,9 +2017,9 @@ function onResetPlayers(event) {
         var target = $('#players');
         var pos = [
             parseInt(window.innerWidth * 0.5),
-            parseInt(window.innerHeight - 1.5 * target.height() + 25)
+            parseInt(window.innerHeight - 0.5 * target.height() - 20)
         ];
-        
+
         // apply position
         movePlayersTo(pos);
         localStorage.removeItem('players');
@@ -2154,9 +2154,10 @@ function moveDiceTo(data, sides) {
 }
 
 function movePlayersTo(pos) {
-    var target = $('#players'); 
-    target.css('left', pos[0]);
-    target.css('top',  pos[1]);
+    var target = $('#players');
+    target.css('left', pos[0] - target.width()  / 2);
+    target.css('top',  pos[1] - target.height() / 2);
+    target.css('max-width', pos[0] * 2)
 }
 
 function moveMusicTo(pos) {
@@ -2237,14 +2238,20 @@ function onDragDice(event) {
 function onDragPlayers(event) {
     var p = pickScreenPos(event);
     var target = $('#players');
-
-    // limit position to the screen
     var w = target.width();
     var h = target.height();
-    var x = parseInt(Math.max(w / 2, Math.min(window.innerWidth - w/2, p[0])));
-    var y = parseInt(Math.max(0,     Math.min(window.innerHeight - 1.5 * h + 25,  p[1])));
+
+    // Gets the maximum width of any player box, including the margin.
+    // The '- 3' allows dragging the players slightly closer to the edge of
+    // the screen, which allows the player box width to continue collapsing
+    // after a multi-word player name is word wrapped.
+    var max_p_w = Math.max([target.children()].map(i => i.outerWidth(true))) - 3;
+
+    // limit position of list to be on the screen
+    var x = parseInt(Math.max(max_p_w / 2, Math.min(window.innerWidth  - max_p_w / 2, p[0])));
+    var y = parseInt(Math.max(      h / 2, Math.min(window.innerHeight -       h / 2, p[1])));
     var pos = [x, y];
-    
+
     movePlayersTo(pos);
     savePlayersPos(pos);
 }