sheep-market

commit

6b9786a31e5dc672f73396804714068619d33e1f

parent

3af60e1a2cdb69770a0c15a5f0983aedfec45d93

Author

Tobias Bengfort <tobias.bengfort@posteo.de>

Date

2023-01-04 16:24

store hover position

Diffstat

1 files changed, 20 insertions, 17 deletions

diff --git a/sheep.js b/sheep.js

@@ -8,6 +8,8 @@ var gridFocus = grid.querySelector('.grid__focus');
    8     8 
    9     9 var columns = 125;
   10    10 var rows = 80;
   -1    11 var hoverCol = 0;
   -1    12 var hoverRow = 0;
   11    13 
   12    14 
   13    15 var parseQuery = function(query) {
@@ -67,24 +69,24 @@ var drawSheep = function(sheep) {
   67    69 	}, 10);
   68    70 };
   69    71 
   70    -1 var setHelperPosition = function(el, row, col) {
   71    -1 	el.style.top = 100 / rows * row + '%';
   72    -1 	el.style.left = 100 / columns * col + '%';
   -1    72 var setHelperPosition = function(el) {
   -1    73 	el.style.top = 100 / rows * hoverRow + '%';
   -1    74 	el.style.left = 100 / columns * hoverCol + '%';
   -1    75 };
   -1    76 
   -1    77 var updateHover = function() {
   -1    78 	var n = rows * hoverCol + hoverRow + 1;
   -1    79 	grid.href = '?sheep=' + n;
   -1    80 	setHelperPosition(gridHover);
   73    81 };
   74    82 
   75    83 grid.addEventListener('mousemove', function(event) {
   76    84 	var rect = grid.getBoundingClientRect();
   77    -1 	var x = (event.clientX - rect.x) / rect.width;
   78    -1 	var y = (event.clientY - rect.y) / rect.height;
   79    -1 
   80    -1 	var row = Math.floor(y * rows);
   81    -1 	row = Math.max(0, Math.min(rows - 1, row));
   82    -1 	var col = Math.floor(x * columns);
   83    -1 	col = Math.max(0, Math.min(columns - 1, col));
   84    -1 	var n = rows * col + row + 1;
   85    -1 
   86    -1 	grid.href = '?sheep=' + n;
   87    -1 	setHelperPosition(gridHover, row, col);
   -1    85 	hoverRow = (event.clientY - rect.y) / rect.height * rows;
   -1    86 	hoverRow = Math.max(0, Math.min(rows - 1, Math.floor(hoverRow)));
   -1    87 	hoverCol = (event.clientX - rect.x) / rect.width * columns;
   -1    88 	hoverCol = Math.max(0, Math.min(columns - 1, Math.floor(hoverCol)));
   -1    89 	updateHover();
   88    90 });
   89    91 
   90    92 var q = parseQuery(location.search);
@@ -95,9 +97,10 @@ if (id) {
   95    97 		.then(parseQuery)
   96    98 		.then(drawSheep);
   97    99 
   98    -1 	var row = (id - 1) % rows;
   99    -1 	var col = Math.floor((id - 1) / rows);
  100    -1 	setHelperPosition(gridFocus, row, col);
   -1   100 	hoverRow = (id - 1) % rows;
   -1   101 	hoverCol = Math.floor((id - 1) / rows);
   -1   102 	setHelperPosition(gridFocus);
   -1   103 	updateHover();
  101   104 }
  102   105 
  103   106 document.querySelector('[href="#more"]').addEventListener('click', function(event) {