feat: minimal HUD with one floating menu and objective chip
Phase 4 of turning the game into the company landing page. - Only the menu button, a compact objective chip and the touch controls stay on screen; speed shows only while driving. - The objective chip shows the next goal in one line, its distance and an arrow that turns towards it (replaces the compass strip); tapping it opens the mission list. - One floating menu holds map, missions, status, products, real-world, camera, stable mode, sound, graphics, minimap, fullscreen, help, restart and back to the start screen. It closes on a second tap, a tap outside, Escape, or after an action. - Missions, status and help open as sheets; street label, rank bar, status panel, toolbar and compass are gone. The minimap is optional and off by default. - Share the icon set and sheet dialog between start screen and HUD. - Layout checked for phone portrait, landscape and safe areas. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,52 @@
|
||||
// Simple line icons (24 × 24, stroke drawn in currentColor) shared by the start screen and HUD.
|
||||
const PATHS = {
|
||||
pin: 'M12 21s-7-6.2-7-11.5A7 7 0 0 1 19 9.5C19 14.8 12 21 12 21zm0-9a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z',
|
||||
play: 'M7 5l12 7-12 7z',
|
||||
building: 'M4 21V8l8-4 8 4v13M9 21v-6h6v6M8 10h.01M12 10h.01M16 10h.01',
|
||||
grid: 'M4 4h7v7H4zM13 4h7v7h-7zM4 13h7v7H4zM13 13h7v7h-7z',
|
||||
phone:
|
||||
'M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2z',
|
||||
map: 'M9 4l6 2 5-2v16l-5 2-6-2-5 2V6zM9 4v16M15 6v16',
|
||||
help: 'M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18zM9.5 9a2.5 2.5 0 1 1 3.5 2.3c-.6.3-1 .9-1 1.6V14M12 17h.01',
|
||||
briefcase: 'M4 8h16v11H4zM9 8V5h6v3M4 13h16',
|
||||
image: 'M4 5h16v14H4zM4 16l5-5 4 4 3-3 4 4M15 9h.01',
|
||||
share:
|
||||
'M18 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM6 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM18 22a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM8.6 13.5l6.8 4M15.4 6.5l-6.8 4',
|
||||
close: 'M6 6l12 12M18 6L6 18',
|
||||
download: 'M12 4v11M7 10l5 5 5-5M5 20h14',
|
||||
menu: 'M4 7h16M4 12h16M4 17h16',
|
||||
list: 'M9 6h11M9 12h11M9 18h11M4.5 6h.01M4.5 12h.01M4.5 18h.01',
|
||||
chart: 'M5 20V10M12 20V4M19 20v-7',
|
||||
camera: 'M4 8h3l2-3h6l2 3h3v11H4zM12 17a4 4 0 1 0 0-8 4 4 0 0 0 0 8z',
|
||||
target: 'M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18zM12 16a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM12 12h.01',
|
||||
sound: 'M4 9h4l5-4v14l-5-4H4zM16 9a4 4 0 0 1 0 6M18.5 6.5a8 8 0 0 1 0 11',
|
||||
sliders: 'M4 7h10M18 7h2M4 17h4M12 17h8M16 4v6M10 14v6',
|
||||
compass: 'M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18zM15.5 8.5l-2 5-5 2 2-5z',
|
||||
expand: 'M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5',
|
||||
refresh: 'M20 11a8 8 0 1 0-2.3 5.7M20 5v6h-6',
|
||||
home: 'M4 11l8-7 8 7M6 9.5V20h12V9.5',
|
||||
arrow: 'M12 4l6 8h-4v8h-4v-8H6z',
|
||||
};
|
||||
|
||||
/** @typedef {{name: keyof typeof PATHS, className?: string}} IconProps */
|
||||
/**
|
||||
* Draws one icon; decorative, so hidden from screen readers.
|
||||
* @param {IconProps} props - Icon name and classes.
|
||||
* @returns {import('react').ReactElement} SVG icon.
|
||||
*/
|
||||
export function Icon({ name, className = 'h-6 w-6' }) {
|
||||
return (
|
||||
<svg
|
||||
className={className}
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.8"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path d={PATHS[name]} />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user