fix: wire connections + hint system with star penalty
- Replace elementFromPoint with bounding rect distance search for port detection. The SVG wire overlay was intercepting pointer events, requiring users to wait for animations before connecting. Now finds the closest port-dot within 18px radius regardless of z-index. - Add hint system: concept text hidden behind "Mostrar Pista" button. Using the hint permanently caps the level at 2 stars max. Reiniciar resets the penalty. Visual feedback in objectives and completion screen. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
27
src/App.jsx
27
src/App.jsx
@@ -59,20 +59,23 @@ export default function App({ onSwitchToGame }) {
|
||||
}, []);
|
||||
|
||||
// Find port-dot element at pointer position (including nearby)
|
||||
const findPortAtPoint = (x, y) => {
|
||||
// First try exact hit
|
||||
const el = document.elementFromPoint(x, y);
|
||||
if (el && el.classList.contains('port-dot') && el.dataset.moduleId) {
|
||||
return el;
|
||||
}
|
||||
// Try a small radius around the point
|
||||
for (const [dx, dy] of [[0,0],[-8,0],[8,0],[0,-8],[0,8],[-6,-6],[6,-6],[-6,6],[6,6]]) {
|
||||
const hit = document.elementFromPoint(x + dx, y + dy);
|
||||
if (hit && hit.classList.contains('port-dot') && hit.dataset.moduleId) {
|
||||
return hit;
|
||||
// Robust port detection — searches all port-dots by bounding rect distance
|
||||
// instead of elementFromPoint (which gets blocked by SVG wire overlay)
|
||||
const findPortAtPoint = (clientX, clientY) => {
|
||||
const portDots = document.querySelectorAll('.port-dot[data-module-id]');
|
||||
let closest = null;
|
||||
let closestDist = 18;
|
||||
for (const dot of portDots) {
|
||||
const rect = dot.getBoundingClientRect();
|
||||
const cx = rect.left + rect.width / 2;
|
||||
const cy = rect.top + rect.height / 2;
|
||||
const dist = Math.sqrt((clientX - cx) ** 2 + (clientY - cy) ** 2);
|
||||
if (dist < closestDist) {
|
||||
closestDist = dist;
|
||||
closest = dot;
|
||||
}
|
||||
}
|
||||
return null;
|
||||
return closest;
|
||||
};
|
||||
|
||||
// Canvas pointer events
|
||||
|
||||
Reference in New Issue
Block a user