HamedandClaude Opus 5.5
5a4dffc9a3
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>
53 lines
2.2 KiB
React
53 lines
2.2 KiB
React
// 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>
|
||
);
|
||
}
|