diff --git a/public/js/scripts.js b/public/js/scripts.js index ff1d6512..24be1afb 100644 --- a/public/js/scripts.js +++ b/public/js/scripts.js @@ -1041,8 +1041,7 @@ function createMap() { .attr('name', function(d) { return sanitizeName(d.properties.name) }) .on('click', function(d) { var el = d3.event.target || d3.event.toElement - - onNeighborhoodClick(el) + onNeighborhoodClick(el, d3.event) }) .on('mousedown', function(d) { setTouchActive(false) @@ -1225,11 +1224,43 @@ function updateGuessedAndInactiveStates() { } } -function onNeighborhoodClick(el) { +function onNeighborhoodClick(el, ev) { if (!mapClickable || el.getAttribute('inactive')) { return } + if (ev && el.classList.contains('guessed')) { + const expectedEl = getHighlightableNeighborhoodEl(neighborhoodToBeGuessedNext) + const { clientX, clientY } = ev + const maxDist = 10 + const expectedRect = expectedEl ? expectedEl.getBoundingClientRect() : {} + const leftDist = clientX - expectedRect.left + const rightDist = clientX - expectedRect.right + const topDist = clientY - expectedRect.top + const bottomDist = clientY - expectedRect.bottom + const betweenTopBottom = Math.sign(topDist) !== Math.sign(bottomDist) + const betweenLeftRight = Math.sign(leftDist) !== Math.sign(rightDist) + let isCloseClick = false + if (Math.abs(leftDist) < maxDist && betweenTopBottom) { + isCloseClick = true + } + else if (Math.abs(rightDist) < maxDist && betweenTopBottom) { + isCloseClick = true + } + else if (Math.abs(topDist) < maxDist && betweenLeftRight) { + isCloseClick = true + } + else if (Math.abs(bottomDist) < maxDist && betweenLeftRight) { + isCloseClick = true + } + else if (betweenTopBottom && betweenLeftRight && [leftDist, rightDist, topDist, bottomDist].find(dist => Math.abs(dist) < maxDist * 3)) { + isCloseClick = true + } + if (isCloseClick) { + return + } + } + setMapClickable(false) if (el.getAttribute('composited')) { @@ -1462,7 +1493,7 @@ function gameOver() { stopTimer() setMapClickable(false) - var els = document.querySelectorAll('#map .guessed') + var els = document.querySelectorAll('#map .guessed:not(.guessed-animation)') // TODO constants var timer = 300