-
+
+
+
+
+
diff --git a/game/js/game.js b/game/js/game.js
index d92e0f8..590feab 100644
--- a/game/js/game.js
+++ b/game/js/game.js
@@ -579,6 +579,12 @@ window.GameEngine = class GameEngine {
document.getElementById('victory-modal').classList.remove('hidden');
}
+ triggerHaptic(ms = 15) {
+ if (typeof navigator !== 'undefined' && navigator.vibrate) {
+ try { navigator.vibrate(ms); } catch (_) {}
+ }
+ }
+
getEventPos(e) {
const rect = this.canvas.getBoundingClientRect();
let clientX, clientY;
@@ -603,15 +609,17 @@ window.GameEngine = class GameEngine {
checkTouchCollect(pos) {
for (let i = this.economy.suns.length - 1; i >= 0; i--) {
const s = this.economy.suns[i];
- if (!s.collecting && Math.hypot(pos.x - s.x, pos.y - s.y) <= s.radius + 24) {
+ if (!s.collecting && Math.hypot(pos.x - s.x, pos.y - s.y) <= s.radius + 28) {
s.collecting = true;
+ this.triggerHaptic(12);
if (window.PvZAudio) window.PvZAudio.playSun();
}
}
for (let i = this.economy.coins.length - 1; i >= 0; i--) {
const c = this.economy.coins[i];
- if (!c.collecting && Math.hypot(pos.x - c.x, pos.y - c.y) <= c.radius + 24) {
+ if (!c.collecting && Math.hypot(pos.x - c.x, pos.y - c.y) <= c.radius + 28) {
c.collecting = true;
+ this.triggerHaptic(15);
if (window.PvZAudio) window.PvZAudio.playCoin();
}
}
@@ -632,28 +640,37 @@ window.GameEngine = class GameEngine {
const pos = this.getEventPos(e);
const econResult = this.economy.handleClick(pos.x, pos.y);
- if (econResult.handled) return;
+ if (econResult.handled) {
+ this.triggerHaptic(15);
+ return;
+ }
const cell = this.grid.getCellFromCoords(pos.x, pos.y);
if (cell) {
this.handleCellClick(cell.col, cell.row);
+ this.triggerHaptic(25);
}
});
- // Mobile touch
+ // Mobile touch with Drag & Drop and continuous swipe-collect
this.canvas.addEventListener('touchstart', (e) => {
if (!this.isRunning) return;
- e.preventDefault();
const pos = this.getEventPos(e);
this.checkTouchCollect(pos);
const econResult = this.economy.handleClick(pos.x, pos.y);
- if (econResult.handled) return;
+ if (econResult.handled) {
+ this.triggerHaptic(15);
+ this.dragCard = this.economy.selectedCard;
+ return;
+ }
const cell = this.grid.getCellFromCoords(pos.x, pos.y);
if (cell) {
+ this.hoverCell = cell;
this.handleCellClick(cell.col, cell.row);
+ this.triggerHaptic(25);
}
}, { passive: false });
@@ -665,12 +682,66 @@ window.GameEngine = class GameEngine {
this.hoverCell = this.grid.getCellFromCoords(pos.x, pos.y);
}, { passive: false });
- this.canvas.addEventListener('touchend', () => {
+ this.canvas.addEventListener('touchend', (e) => {
+ if (!this.isRunning) return;
+ const pos = this.getEventPos(e);
+ if (this.dragCard) {
+ const cell = this.grid.getCellFromCoords(pos.x, pos.y);
+ if (cell && this.economy.selectedCard === this.dragCard) {
+ this.handleCellClick(cell.col, cell.row);
+ this.triggerHaptic(30);
+ }
+ this.dragCard = null;
+ }
this.hoverCell = null;
});
}
bindUI() {
+ // Mobile Drawer Handlers
+ const mobileDrawer = document.getElementById('mobile-drawer');
+ const drawerBackdrop = document.getElementById('drawer-backdrop');
+ const btnDrawerOpen = document.getElementById('btn-mobile-drawer');
+ const btnDrawerClose = document.getElementById('btn-drawer-close');
+
+ const openDrawer = () => {
+ if (mobileDrawer) mobileDrawer.classList.remove('hidden');
+ if (drawerBackdrop) drawerBackdrop.classList.remove('hidden');
+ this.triggerHaptic(10);
+ };
+
+ const closeDrawer = () => {
+ if (mobileDrawer) mobileDrawer.classList.add('hidden');
+ if (drawerBackdrop) drawerBackdrop.classList.add('hidden');
+ };
+
+ if (btnDrawerOpen) btnDrawerOpen.addEventListener('click', openDrawer);
+ if (btnDrawerClose) btnDrawerClose.addEventListener('click', closeDrawer);
+ if (drawerBackdrop) drawerBackdrop.addEventListener('click', closeDrawer);
+
+ // Mobile Drawer Items delegation to corresponding modal open triggers
+ const drawerActions = [
+ { id: 'btn-drawer-campaign', target: 'btn-campaign-open' },
+ { id: 'btn-drawer-workshop', target: 'btn-workshop' },
+ { id: 'btn-drawer-zengarden', target: 'btn-zengarden' },
+ { id: 'btn-drawer-almanac', target: 'btn-almanac' },
+ { id: 'btn-drawer-achievements', target: 'btn-achievements' },
+ { id: 'btn-drawer-tree', target: 'btn-tree' },
+ { id: 'btn-drawer-leaderboard', target: 'btn-leaderboard' },
+ { id: 'btn-drawer-bugreport', target: 'btn-bugreport' }
+ ];
+
+ drawerActions.forEach(action => {
+ const btn = document.getElementById(action.id);
+ if (btn) {
+ btn.addEventListener('click', () => {
+ closeDrawer();
+ const targetBtn = document.getElementById(action.target);
+ if (targetBtn) targetBtn.click();
+ });
+ }
+ });
+
// Menu Button (Top Nav)
const btnMenu = document.getElementById('btn-menu');
if (btnMenu) {
diff --git a/scripts/test_game.py b/scripts/test_game.py
index 86b5c08..6ef5420 100644
--- a/scripts/test_game.py
+++ b/scripts/test_game.py
@@ -611,13 +611,24 @@ def test_feedback_and_layout_system():
bug_reports_md_path = os.path.join(BASE_DIR, "BUG_REPORTS.md")
feedback_srv_path = os.path.join(BASE_DIR, "scripts/feedback_server.py")
- # 1. UI Layout rules
+ # 1. UI Layout & Mobile Responsive rules
+ html_path = os.path.join(GAME_DIR, "index.html")
+ with open(html_path, "r", encoding="utf-8") as f:
+ html_code = f.read()
+
layout_checks = [
- ("Top nav bar flex-wrap enabled for zero overflow", "flex-wrap: wrap" in css_code),
+ ("Top nav bar flex structure present", "top-nav-bar" in css_code),
("Responsive start-card class implemented", ".start-card" in css_code and "max-height" in css_code),
("Bug report card styling present", ".bugreport-card" in css_code and ".bugreport-feed" in css_code),
("Bug status badges and cards styling present", ".bug-card" in css_code and ".bug-status" in css_code),
("Body has vertical scrolling enabled for smaller screens", "overflow-y: auto" in css_code),
+ ("Mobile Viewport-fit=cover meta tag present", "viewport-fit=cover" in html_code),
+ ("Mobile Drawer navigation markup present", "mobile-drawer" in html_code and "drawer-backdrop" in html_code),
+ ("Mobile Drawer CSS styling and transitions present", ".mobile-drawer" in css_code and ".drawer-backdrop" in css_code),
+ ("Responsive Media Queries @media screen and (max-width: 768px)", "@media screen and (max-width: 768px)" in css_code),
+ ("Mobile Landscape optimization media query present", "orientation: landscape" in css_code),
+ ("GameEngine triggerHaptic Vibration API implemented", "triggerHaptic" in game_code),
+ ("Mobile Touch Drag & Drop card planting supported", "dragCard" in game_code),
]
for name, cond in layout_checks:
record(name, "PASS" if cond else "FAIL")