| 445 | } |
| 446 | |
| 447 | function MockMap({ |
| 448 | challenge, |
| 449 | cells = [], |
| 450 | unlocked = new Set(), |
| 451 | mine = new Set(), |
| 452 | currentPosition, |
| 453 | currentCellId, |
| 454 | selectedCenter, |
| 455 | selectedRadiusM, |
| 456 | rotationDeg = 0, |
| 457 | onCenterChange, |
| 458 | onCellClick, |
| 459 | className, |
| 460 | }: MapProps) { |
| 461 | const cellBounds = useMemo(() => bounds(cells), [cells]); |
| 462 | const [mockZoom, setMockZoom] = useState(1); |
| 463 | const visibleCells = cells.slice(0, 800); |
| 464 | const center = selectedCenter || { |
| 465 | lat: challenge?.center_lat || 39.9042, |
| 466 | lng: challenge?.center_lng || 116.4074, |
| 467 | }; |
| 468 | const columns = Math.max(6, Math.ceil(Math.sqrt(Math.max(visibleCells.length, 1)))); |
| 469 | |
| 470 | return ( |
| 471 | <div |
| 472 | className={`mapSurface mockMap ${className || ""}`} |
| 473 | onClick={(event) => { |
| 474 | if (!onCenterChange || challenge) return; |
| 475 | const rect = event.currentTarget.getBoundingClientRect(); |
| 476 | const x = (event.clientX - rect.left) / rect.width - 0.5; |
| 477 | const y = (event.clientY - rect.top) / rect.height - 0.5; |
| 478 | onCenterChange({ |
| 479 | lat: center.lat - y * 0.02, |
| 480 | lng: center.lng + x * 0.02, |
| 481 | }); |
| 482 | }} |
| 483 | > |
| 484 | <MapZoomControls |
| 485 | onZoomIn={() => setMockZoom((value) => Math.min(1.7, Number((value + 0.15).toFixed(2))))} |
| 486 | onZoomOut={() => setMockZoom((value) => Math.max(0.65, Number((value - 0.15).toFixed(2))))} |
| 487 | /> |
| 488 | <div |
| 489 | className="mockGrid" |
| 490 | style={{ |
| 491 | gridTemplateColumns: `repeat(${columns}, minmax(20px, 1fr))`, |
| 492 | transform: `scale(${mockZoom}) rotate(${rotationDeg}deg)`, |
| 493 | }} |
| 494 | > |
| 495 | {visibleCells.length ? ( |
| 496 | visibleCells.map((cell) => { |
| 497 | const mineCell = mine.has(cell.cell_id); |
| 498 | const unlockedCell = unlocked.has(cell.cell_id); |
| 499 | return ( |
| 500 | <button |
| 501 | key={cell.cell_id} |
| 502 | className={`hex ${unlockedCell ? "hexUnlocked" : ""} ${mineCell ? "hexMine" : ""} ${currentCellId === cell.cell_id ? "hexCurrent" : ""}`} |
| 503 | title={cell.cell_id} |
| 504 | onClick={(event) => { |