-
Couldn't load subscription status.
- Fork 64
feat: add draggable minimap and enhance score display with improved score #11
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: main
Are you sure you want to change the base?
Conversation
|
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Other comments: 0 Blocking, 2 Optional, 0 Nit, 0 FYI
- Optional: static/js/ui.js (28-28) Optional: The mousemove and mouseup event listeners are added to the document but never removed. This could lead to memory leaks or unexpected behavior if the minimap is initialized multiple times or removed from the DOM. Consider adding a cleanup function or using the `{ once: true }` option for the mouseup listener.
-
Optional: templates/game.html (287-289)
Optional: The toggleDarkMode function now checks for any truthy value instead of specifically checking for 'dark'. This could cause issues if data-theme gets set to any other value. Consider using the specific check:
function toggleDarkMode() { document.documentElement.setAttribute('data-theme', document.documentElement.getAttribute('data-theme') === 'dark' ? '' : 'dark'); }
| minimap.addEventListener('mousedown', (e) => { | ||
| isDragging = true; | ||
| initialX = e.clientX - currentX; | ||
| initialY = e.clientY - currentY; | ||
| minimap.style.cursor = 'grabbing'; | ||
| }); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The mousedown event handler uses currentX and currentY before they have proper values. When a user first clicks on the minimap, these variables might be undefined, causing the minimap to jump to an unexpected position.
| minimap.addEventListener('mousedown', (e) => { | |
| isDragging = true; | |
| initialX = e.clientX - currentX; | |
| initialY = e.clientY - currentY; | |
| minimap.style.cursor = 'grabbing'; | |
| }); | |
| minimap.addEventListener('mousedown', (e) => { | |
| isDragging = true; | |
| // Get current position from style or computed style if not set yet | |
| if (currentX === undefined || currentY === undefined) { | |
| const minimapRect = minimap.getBoundingClientRect(); | |
| currentX = minimapRect.left; | |
| currentY = minimapRect.top; | |
| } | |
| initialX = e.clientX - currentX; | |
| initialY = e.clientY - currentY; | |
| minimap.style.cursor = 'grabbing'; | |
| }); |
| <span>Dark Mode</span> | ||
| <input type="checkbox" id="dark-mode-toggle" onKeyPress="handleDarkModeKeyPress(event)"> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The dark mode toggle checkbox is missing the onclick handler. You've added keyboard support with onKeyPress but removed the click functionality. Consider adding the onclick handler back:
| <span>Dark Mode</span> | |
| <input type="checkbox" id="dark-mode-toggle" onKeyPress="handleDarkModeKeyPress(event)"> | |
| <span>Dark Mode</span> | |
| <input type="checkbox" id="dark-mode-toggle" onclick="toggleDarkMode()" onKeyPress="handleDarkModeKeyPress(event)"> |
| localStorage.setItem('darkMode', isDarkMode); | ||
| } | ||
|
|
||
| function initMinimapDrag() { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The minimap dragging implementation only handles mouse events (mousedown, mousemove, mouseup) but doesn't support touch events. This means the feature won't work on mobile devices. Consider adding touch event support (touchstart, touchmove, touchend) for better cross-platform compatibility.
The minimap is now draggable across the entire user interface. This way it doesn't obstruct the view on the bottom left and the player can decide where they want to put it. The score UI seemed outdated so I changed the CSS a little better.