Skip to content

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.

Sign up for GitHub

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

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feat: add draggable minimap and enhance score display with improved score #11

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 5 additions & 1 deletion static/js/renderer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -106,7 +106,11 @@ export function drawGame() {
});

// Update score display
scoreElement.textContent = `Score: ${Math.floor(gameState.playerCells.reduce((sum, cell) => sum + cell.score, 0))}`;
const totalScore = Math.floor(gameState.playerCells.reduce((sum, cell) => sum + cell.score, 0));
const scoreValueElement = scoreElement.querySelector('.value');
if (scoreValueElement) {
scoreValueElement.textContent = totalScore.toLocaleString();
}
}

export function drawMinimap() {
Expand Down
49 changes: 49 additions & 0 deletions static/js/ui.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,52 @@ function saveDarkMode(isDarkMode) {
localStorage.setItem('darkMode', isDarkMode);
}

function initMinimapDrag() {
Copy link

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.

const minimap = document.getElementById('minimap');
let isDragging = false;
let currentX;
let currentY;
let initialX;
let initialY;

minimap.addEventListener('mousedown', (e) => {
isDragging = true;
initialX = e.clientX - currentX;
initialY = e.clientY - currentY;
minimap.style.cursor = 'grabbing';
});
Comment on lines +21 to +26
Copy link

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.

Suggested change
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';
});


document.addEventListener('mousemove', (e) => {
if (!isDragging) return;

e.preventDefault();
currentX = e.clientX - initialX;
currentY = e.clientY - initialY;

// Keep minimap within viewport bounds
const minimapRect = minimap.getBoundingClientRect();
const viewportWidth = window.innerWidth;
const viewportHeight = window.innerHeight;

currentX = Math.max(0, Math.min(currentX, viewportWidth - minimapRect.width));
currentY = Math.max(0, Math.min(currentY, viewportHeight - minimapRect.height));

minimap.style.left = `${currentX}px`;
minimap.style.bottom = `${viewportHeight - currentY - minimapRect.height}px`;
});

document.addEventListener('mouseup', () => {
isDragging = false;
minimap.style.cursor = 'grab';
});

// Initialize position and cursor
const minimapRect = minimap.getBoundingClientRect();
currentX = minimapRect.left;
currentY = minimapRect.top;
minimap.style.cursor = 'grab';
}

export function initUI() {
const settingsIcon = document.getElementById('settings-icon');
const settingsPanel = document.getElementById('settings-panel');
Expand All @@ -18,6 +64,9 @@ export function initUI() {
// Load dark mode preference
loadDarkMode();

// Initialize minimap dragging
initMinimapDrag();

// Toggle settings panel
settingsIcon.addEventListener('click', (e) => {
e.stopPropagation(); // Prevent click from propagating to document
Expand Down
65 changes: 49 additions & 16 deletions templates/game.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<title>Windsurf vs All</title>
<style>
Expand All @@ -25,16 +25,36 @@
}
#score {
position: absolute;
top: 10px;
left: 10px;
font-family: Arial, sans-serif;
font-size: 20px;
color: #333;
text-shadow: 0 0 3px rgba(255, 255, 255, 0.5);
top: 20px;
left: 20px;
font-family: 'Arial', sans-serif;
background: linear-gradient(135deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.6));
padding: 12px 20px;
border-radius: 15px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(5px);
border: 1px solid rgba(255, 255, 255, 0.1);
transition: all 0.3s ease;
}
#score .label {
font-size: 14px;
color: rgba(255, 255, 255, 0.7);
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 4px;
}
#score .value {
font-size: 24px;
font-weight: bold;
color: #fff;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
#score:hover {
transform: translateY(-2px);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}
:root[data-theme="dark"] #score {
color: #fff;
text-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
}
#leaderboard {
position: absolute;
Expand Down Expand Up @@ -206,7 +226,10 @@
</head>
<body>
<canvas id="gameCanvas"></canvas>
<div id="score">Score: 0</div>
<div id="score">
<div class="label">Score</div>
<div class="value">0</div>
</div>
<div id="leaderboard">
<h3>Leaderboard</h3>
<div id="leaderboard-content"></div>
Expand Down Expand Up @@ -236,9 +259,9 @@ <h3>Actions</h3>
<div class="control-group">
<h3>Display</h3>
<div class="control-item">
<span>Dark Mode</span>
<label class="toggle-switch">
<input type="checkbox" id="dark-mode-toggle" onclick="toggleDarkMode()">
<label class="toggle-switch" for="dark-mode-toggle">
<span>Dark Mode</span>
<input type="checkbox" id="dark-mode-toggle" onKeyPress="handleDarkModeKeyPress(event)">
Comment on lines +263 to +264
Copy link

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:

Suggested change
<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)">

<span class="toggle-slider"></span>
</label>
</div>
Expand All @@ -252,9 +275,19 @@ <h3>General</h3>
</div>
</div>
<script>
function toggleDarkMode() {
document.documentElement.setAttribute('data-theme', document.documentElement.getAttribute('data-theme') === 'dark' ? '' : 'dark');
}
function handleDarkModeKeyPress(event) {
if (event.key === 'Enter' || event.key === ' ') {
event.preventDefault();
const checkbox = document.getElementById('dark-mode-toggle');
checkbox.checked = !checkbox.checked;
document.documentElement.setAttribute('data-theme', checkbox.checked ? 'dark' : '');
}
}

function toggleDarkMode() {
document.documentElement.setAttribute('data-theme', document.documentElement.getAttribute('data-theme') ? '' : 'dark');
}
toggleDarkMode();
</script>
<script type="module" src="{{ url_for('static', filename='js/game.js') }}"></script>
</body>
Expand Down