diff --git a/Cargo.lock b/Cargo.lock index b4e56d1..8689839 100644 --- a/Cargo.lock +++ b/Cargo.lock @@ -9425,7 +9425,6 @@ checksum = "6fd8403733700263c6eb89f192880191f1b83e332f7a20371ddcf421c4a337c7" name = "yachtpit" version = "0.1.0" dependencies = [ - "base-map", "bevy", "bevy_asset_loader", "bevy_flurx", diff --git a/crates/base-map/map/src/App.tsx b/crates/base-map/map/src/App.tsx index 6ef2801..4ec17a7 100644 --- a/crates/base-map/map/src/App.tsx +++ b/crates/base-map/map/src/App.tsx @@ -1,18 +1,15 @@ import 'mapbox-gl/dist/mapbox-gl.css'; -import {Box, Button, HStack, Input} from '@chakra-ui/react'; +import {Box, Button, HStack, Input, Text} from '@chakra-ui/react'; +import { useColorMode } from './components/ui/color-mode'; import {useCallback, useEffect, useState} from "react"; import MapNext, {type Geolocation} from "@/MapNext.tsx"; +import { getNeumorphicStyle, getNeumorphicColors } from './theme/neumorphic-theme'; +import {layers, LayerSelector} from "@/LayerSelector.tsx"; // public key const key = 'cGsuZXlKMUlqb2laMlZ2Wm1aelpXVWlMQ0poSWpvaVkycDFOalo0YkdWNk1EUTRjRE41YjJnNFp6VjNNelp6YXlKOS56LUtzS1l0X3VGUGdCSDYwQUFBNFNn'; -const layers = [ - { name: 'OSM', value: 'mapbox://styles/mapbox/dark-v11' }, - { name: 'Satellite', value: 'mapbox://styles/mapbox/satellite-v9' }, -]; - - // const vesselLayerStyle: CircleLayerSpecification = { // id: 'vessel', @@ -40,8 +37,6 @@ interface VesselStatus { speed: number; } -export type Layer = { name: string; value: string }; -export type Layers = Layer[]; class MyGeolocation implements Geolocation { constructor({clearWatch, getCurrentPosition, watchPosition}: { @@ -65,6 +60,155 @@ class MyGeolocation implements Geolocation { } + +const custom_geolocation = new MyGeolocation({ + clearWatch: (watchId: number) => { + if (typeof window !== 'undefined' && (window as any).geolocationWatches) { + const interval = (window as any).geolocationWatches.get(watchId); + if (interval) { + clearInterval(interval); + (window as any).geolocationWatches.delete(watchId); + } + } + }, + watchPosition: (successCallback: PositionCallback, errorCallback?: PositionErrorCallback | null, options?: PositionOptions) => { + if (typeof window === 'undefined') return 0; + + // Initialize watches map if it doesn't exist + if (!(window as any).geolocationWatches) { + (window as any).geolocationWatches = new Map(); + } + if (!(window as any).geolocationWatchId) { + (window as any).geolocationWatchId = 0; + } + + const watchId = ++(window as any).geolocationWatchId; + + const pollPosition = async () => { + if ((window as any).__FLURX__) { + try { + const vesselStatus: VesselStatus = await (window as any).__FLURX__.invoke("get_vessel_status"); + const position: GeolocationPosition = { + coords: { + latitude: vesselStatus.latitude, + longitude: vesselStatus.longitude, + altitude: null, + accuracy: 10, // Assume 10m accuracy + altitudeAccuracy: null, + heading: vesselStatus.heading, + speed: vesselStatus.speed, + toJSON: () => ({ + latitude: vesselStatus.latitude, + longitude: vesselStatus.longitude, + altitude: null, + accuracy: 10, + altitudeAccuracy: null, + heading: vesselStatus.heading, + speed: vesselStatus.speed + }) + }, + timestamp: Date.now(), + toJSON: () => ({ + coords: { + latitude: vesselStatus.latitude, + longitude: vesselStatus.longitude, + altitude: null, + accuracy: 10, + altitudeAccuracy: null, + heading: vesselStatus.heading, + speed: vesselStatus.speed + }, + timestamp: Date.now() + }) + }; + successCallback(position); + } catch (error) { + if (errorCallback) { + const positionError: GeolocationPositionError = { + code: 2, // POSITION_UNAVAILABLE + message: 'Failed to get vessel status: ' + error, + PERMISSION_DENIED: 1, + POSITION_UNAVAILABLE: 2, + TIMEOUT: 3 + }; + errorCallback(positionError); + } + } + } + }; + + // Poll immediately and then at intervals + pollPosition(); + const interval = setInterval(pollPosition, options?.timeout || 5000); + (window as any).geolocationWatches.set(watchId, interval); + + return watchId; + }, + getCurrentPosition: (successCallback: PositionCallback, errorCallback?: PositionErrorCallback | null, _options?: PositionOptions) => { + if (typeof window !== 'undefined' && (window as any).__FLURX__) { + (async () => { + try { + const vesselStatus: VesselStatus = await (window as any).__FLURX__.invoke("get_vessel_status"); + const position: GeolocationPosition = { + coords: { + latitude: vesselStatus.latitude, + longitude: vesselStatus.longitude, + altitude: null, + accuracy: 10, // Assume 10m accuracy + altitudeAccuracy: null, + heading: vesselStatus.heading, + speed: vesselStatus.speed, + toJSON: () => ({ + latitude: vesselStatus.latitude, + longitude: vesselStatus.longitude, + altitude: null, + accuracy: 10, + altitudeAccuracy: null, + heading: vesselStatus.heading, + speed: vesselStatus.speed + }) + }, + timestamp: Date.now(), + toJSON: () => ({ + coords: { + latitude: vesselStatus.latitude, + longitude: vesselStatus.longitude, + altitude: null, + accuracy: 10, + altitudeAccuracy: null, + heading: vesselStatus.heading, + speed: vesselStatus.speed + }, + timestamp: Date.now() + }) + }; + successCallback(position); + } catch (error) { + if (errorCallback) { + const positionError: GeolocationPositionError = { + code: 2, // POSITION_UNAVAILABLE + message: 'Failed to get vessel status: ' + error, + PERMISSION_DENIED: 1, + POSITION_UNAVAILABLE: 2, + TIMEOUT: 3 + }; + errorCallback(positionError); + } + } + })(); + } else if (errorCallback) { + const positionError: GeolocationPositionError = { + code: 2, // POSITION_UNAVAILABLE + message: '__FLURX__ not available', + PERMISSION_DENIED: 1, + POSITION_UNAVAILABLE: 2, + TIMEOUT: 3 + }; + errorCallback(positionError); + } + }, +}); + // interface MapViewParams { // latitude: number; // longitude: number; @@ -76,49 +220,10 @@ class MyGeolocation implements Geolocation { // token: string | null; // } -function LayerSelector(props: { onClick: (e: any) => Promise }) { - const [isOpen, setIsOpen] = useState(false); - return ( - - - - {isOpen && ( - - {layers.map(layer => ( - { - setIsOpen(false); - await props.onClick(e); - }} - > - {layer.name} - - ))} - - )} - - ); -} function App() { - + const { colorMode } = useColorMode(); const [isSearchOpen, setIsSearchOpen] = useState(false); const [selectedLayer, setSelectedLayer] = useState(layers[0]); const [searchInput, setSearchInput] = useState(''); @@ -215,12 +320,10 @@ function App() { } }, [isSearchOpen, searchInput]); - const handleLayerChange = useCallback(async (e: any) => { - const newLayer = layers.find(layer => layer.value === e.target.id); - if (newLayer) { - setSelectedLayer(newLayer); - console.log('Layer changed to:', newLayer.name); - } + const handleLayerChange = useCallback(async (layer: any) => { + console.log('Layer change requested:', layer); + setSelectedLayer(layer); + console.log('Layer changed to:', layer.name); }, []); // const handleMapViewChange = useCallback(async (evt: any) => { @@ -289,25 +392,24 @@ function App() { return ( /* Full-screen wrapper — fills the viewport and becomes the positioning context */ - {/* GPS Feed Display — absolutely positioned at bottom-left */} + {/* GPS Feed Display — absolutely positioned at top-right */} {vesselPosition && ( - GPS Feed - Lat: {vesselPosition.latitude.toFixed(6)}° - Lon: {vesselPosition.longitude.toFixed(6)}° - Heading: {vesselPosition.heading.toFixed(1)}° + GPS Feed + Lat: {vesselPosition.latitude.toFixed(6)}° + Lon: {vesselPosition.longitude.toFixed(6)}° + Heading: {vesselPosition.heading.toFixed(1)}° Speed: {vesselPosition.speed.toFixed(1)} kts )} @@ -316,39 +418,31 @@ function App() { {isSearchOpen && setSearchInput(e.target.value)} - color="white" - bg="rgba(0, 0, 0, 0.8)" border="none" - borderRadius="0" - _focus={{ - outline: 'none', - }} - _placeholder={{ - color: "#d1cfcf" - }} + {...getNeumorphicStyle(colorMode as 'light' | 'dark', 'pressed')} /> {searchResults.length > 0 && ( - {searchResults.map((result, index) => ( - { - console.log(`Selecting result ${result.lat}, ${result.lon}`); - await selectSearchResult(result); - setSearchResults([]); - setIsSearchOpen(false); - }} - > - {`${result.lat}, ${result.lon}`} - - ))} + {searchResults.map((result, index) => { + const colors = getNeumorphicColors(colorMode as 'light' | 'dark'); + return ( + { + console.log(`Selecting result ${result.lat}, ${result.lon}`); + await selectSearchResult(result); + setSearchResults([]); + setIsSearchOpen(false); + }} + > + {`${result.lat}, ${result.lon}`} + + ); + })} )} } - { - if (typeof window !== 'undefined' && (window as any).geolocationWatches) { - const interval = (window as any).geolocationWatches.get(watchId); - if (interval) { - clearInterval(interval); - (window as any).geolocationWatches.delete(watchId); - } - } - }, - watchPosition: (successCallback: PositionCallback, errorCallback?: PositionErrorCallback | null, options?: PositionOptions) => { - if (typeof window === 'undefined') return 0; - - // Initialize watches map if it doesn't exist - if (!(window as any).geolocationWatches) { - (window as any).geolocationWatches = new Map(); - } - if (!(window as any).geolocationWatchId) { - (window as any).geolocationWatchId = 0; - } - - const watchId = ++(window as any).geolocationWatchId; - - const pollPosition = async () => { - if ((window as any).__FLURX__) { - try { - const vesselStatus: VesselStatus = await (window as any).__FLURX__.invoke("get_vessel_status"); - const position: GeolocationPosition = { - coords: { - latitude: vesselStatus.latitude, - longitude: vesselStatus.longitude, - altitude: null, - accuracy: 10, // Assume 10m accuracy - altitudeAccuracy: null, - heading: vesselStatus.heading, - speed: vesselStatus.speed, - toJSON: () => ({ - latitude: vesselStatus.latitude, - longitude: vesselStatus.longitude, - altitude: null, - accuracy: 10, - altitudeAccuracy: null, - heading: vesselStatus.heading, - speed: vesselStatus.speed - }) - }, - timestamp: Date.now(), - toJSON: () => ({ - coords: { - latitude: vesselStatus.latitude, - longitude: vesselStatus.longitude, - altitude: null, - accuracy: 10, - altitudeAccuracy: null, - heading: vesselStatus.heading, - speed: vesselStatus.speed - }, - timestamp: Date.now() - }) - }; - successCallback(position); - } catch (error) { - if (errorCallback) { - const positionError: GeolocationPositionError = { - code: 2, // POSITION_UNAVAILABLE - message: 'Failed to get vessel status: ' + error, - PERMISSION_DENIED: 1, - POSITION_UNAVAILABLE: 2, - TIMEOUT: 3 - }; - errorCallback(positionError); - } - } - } - }; - - // Poll immediately and then at intervals - pollPosition(); - const interval = setInterval(pollPosition, options?.timeout || 5000); - (window as any).geolocationWatches.set(watchId, interval); - - return watchId; - }, - getCurrentPosition: (successCallback: PositionCallback, errorCallback?: PositionErrorCallback | null, _options?: PositionOptions) => { - if (typeof window !== 'undefined' && (window as any).__FLURX__) { - (async () => { - try { - const vesselStatus: VesselStatus = await (window as any).__FLURX__.invoke("get_vessel_status"); - const position: GeolocationPosition = { - coords: { - latitude: vesselStatus.latitude, - longitude: vesselStatus.longitude, - altitude: null, - accuracy: 10, // Assume 10m accuracy - altitudeAccuracy: null, - heading: vesselStatus.heading, - speed: vesselStatus.speed, - toJSON: () => ({ - latitude: vesselStatus.latitude, - longitude: vesselStatus.longitude, - altitude: null, - accuracy: 10, - altitudeAccuracy: null, - heading: vesselStatus.heading, - speed: vesselStatus.speed - }) - }, - timestamp: Date.now(), - toJSON: () => ({ - coords: { - latitude: vesselStatus.latitude, - longitude: vesselStatus.longitude, - altitude: null, - accuracy: 10, - altitudeAccuracy: null, - heading: vesselStatus.heading, - speed: vesselStatus.speed - }, - timestamp: Date.now() - }) - }; - successCallback(position); - } catch (error) { - if (errorCallback) { - const positionError: GeolocationPositionError = { - code: 2, // POSITION_UNAVAILABLE - message: 'Failed to get vessel status: ' + error, - PERMISSION_DENIED: 1, - POSITION_UNAVAILABLE: 2, - TIMEOUT: 3 - }; - errorCallback(positionError); - } - } - })(); - } else if (errorCallback) { - const positionError: GeolocationPositionError = { - code: 2, // POSITION_UNAVAILABLE - message: '__FLURX__ not available', - PERMISSION_DENIED: 1, - POSITION_UNAVAILABLE: 2, - TIMEOUT: 3 - }; - errorCallback(positionError); - } - }, - })}/> + {/* Promise }) { + const { colorMode } = useColorMode(); + const [selectedLayer, setSelectedLayer] = useState(layers[0]); + const neumorphicStyle = getNeumorphicStyle(colorMode as 'light' | 'dark'); + const colors = getNeumorphicColors(colorMode as 'light' | 'dark'); + + return ( + + + + + + + + {layers.map(layer => ( + { + // @ts-ignore + console.log(e.target.id) + setSelectedLayer(layer); + props.onClick(layer); + }} + > + {layer.name} + + ))} + + + + + ); +} diff --git a/crates/base-map/map/src/MapNext.tsx b/crates/base-map/map/src/MapNext.tsx index e5c6944..cfc3446 100644 --- a/crates/base-map/map/src/MapNext.tsx +++ b/crates/base-map/map/src/MapNext.tsx @@ -17,6 +17,8 @@ import { useRealAISProvider } from './real-ais-provider.tsx'; import PORTS from './test_data/nautical-base-data.json'; import {Box} from "@chakra-ui/react"; +import { useColorMode } from './components/ui/color-mode'; +import { getNeumorphicStyle, getNeumorphicColors } from './theme/neumorphic-theme'; export interface Geolocation { @@ -31,6 +33,7 @@ export interface Geolocation { export default function MapNext(props: any = {mapboxPublicKey: "", geolocation: Geolocation, vesselPosition: undefined, layer: undefined, mapView: undefined} as any) { + const { colorMode } = useColorMode(); const [popupInfo, setPopupInfo] = useState(null); const [vesselPopupInfo, setVesselPopupInfo] = useState(null); const [boundingBox, setBoundingBox] = useState<{sw_lat: number, sw_lon: number, ne_lat: number, ne_lon: number} | undefined>(undefined); @@ -230,28 +233,45 @@ export default function MapNext(props: any = {mapboxPublicKey: "", geolocation: latitude={vesselPopupInfo.latitude} onClose={() => setVesselPopupInfo(null)} > -
-

+ + {vesselPopupInfo.name} -

-
-
Type: {vesselPopupInfo.type}
-
MMSI: {vesselPopupInfo.mmsi}
-
Call Sign: {vesselPopupInfo.callSign}
-
Speed: {vesselPopupInfo.speed.toFixed(1)} knots
-
Heading: {vesselPopupInfo.heading.toFixed(0)}°
-
Length: {vesselPopupInfo.length.toFixed(0)}m
+ + + Type: {vesselPopupInfo.type} + MMSI: {vesselPopupInfo.mmsi} + Call Sign: {vesselPopupInfo.callSign} + Speed: {vesselPopupInfo.speed.toFixed(1)} knots + Heading: {vesselPopupInfo.heading.toFixed(0)}° + Length: {vesselPopupInfo.length.toFixed(0)}m {vesselPopupInfo.destination && ( -
Destination: {vesselPopupInfo.destination}
+ Destination: {vesselPopupInfo.destination} )} {vesselPopupInfo.eta && ( -
ETA: {vesselPopupInfo.eta}
+ ETA: {vesselPopupInfo.eta} )} -
+ Last Update: {vesselPopupInfo.lastUpdate.toLocaleTimeString()} -
-
-
+ + + )} diff --git a/crates/base-map/map/src/theme/neumorphic-theme.ts b/crates/base-map/map/src/theme/neumorphic-theme.ts new file mode 100644 index 0000000..8decf43 --- /dev/null +++ b/crates/base-map/map/src/theme/neumorphic-theme.ts @@ -0,0 +1,75 @@ +import { defineConfig } from "@chakra-ui/react"; + +// Neumorphic color palette +const neumorphicColors = { + light: { + bg: '#e0e5ec', + surface: '#e0e5ec', + text: '#2d3748', + textSecondary: '#4a5568', + accent: '#3182ce', + shadow: { + dark: '#a3b1c6', + light: '#ffffff', + }, + }, + dark: { + bg: '#2d3748', + surface: '#ffffff', + text: '#f7fafc', + textSecondary: '#e2e8f0', + accent: '#63b3ed', + shadow: { + dark: '#1a202c', + light: '#4a5568', + }, + }, +}; + +// Neumorphic shadow mixins +const neumorphicShadows = { + light: { + raised: '1px 1px 2px #a3b1c6, -1px -1px 2px #ffffff', + pressed: 'inset 2px 2px 4px #a3b1c6, inset -2px -2px 4px #ffffff', + subtle: '1px 1px 2px #a3b1c6, -1px -1px 2px #ffffff', + subtlePressed: 'inset 1px 1px 2px #a3b1c6, inset -1px -1px 2px #ffffff', + floating: '6px 6px 12px #a3b1c6, -6px -6px 12px #ffffff', + }, + dark: { + raised: '2px 2px 4px #1a202c, -2px -2px 4px #4a5568', + pressed: 'inset 2px 2px 4px #1a202c, inset -2px -2px 4px #4a5568', + subtle: '2px 2px 2px #1a202c, -2px -2px 2px #4a5568', + subtlePressed: 'inset 2px 2px 2px #1a202c, inset -2px -2px 2px #4a5568', + floating: '6px 6px 12px #1a202c, -6px -6px 12px #4a5568', + }, +}; + +// Simplified theme configuration to avoid TypeScript errors +// The utility functions below provide the neumorphic styling functionality +export const neumorphicTheme = defineConfig({ + theme: { + // Theme configuration simplified to avoid type errors + }, +}); + +// Utility functions for neumorphic styling +export const getNeumorphicStyle = (colorMode: 'light' | 'dark', variant: 'raised' | 'pressed' | 'subtle' | 'floating' = 'raised') => { + const colors = neumorphicColors[colorMode]; + const shadows = neumorphicShadows[colorMode]; + + return { + bg: colors.surface, + color: colors.text, + borderRadius: 6, + boxShadow: shadows[variant] || shadows.raised, + transition: 'all 0.3s ease-in-out', + }; +}; + +export const getNeumorphicColors = (colorMode: 'light' | 'dark') => { + return neumorphicColors[colorMode]; +}; + +export const getNeumorphicShadows = (colorMode: 'light' | 'dark') => { + return neumorphicShadows[colorMode]; +}; \ No newline at end of file diff --git a/crates/base-map/map/vitest.config.ts b/crates/base-map/map/vitest.config.ts index e6d847e..7e74977 100644 --- a/crates/base-map/map/vitest.config.ts +++ b/crates/base-map/map/vitest.config.ts @@ -5,7 +5,7 @@ export default defineConfig({ plugins: [react()], test: { environment: 'jsdom', - setupFiles: ['./src/test-setup.ts'], + setupFiles: ['./test/test-setup.ts'], globals: true, }, }); \ No newline at end of file diff --git a/crates/yachtpit/Cargo.toml b/crates/yachtpit/Cargo.toml index 9b94779..95ed5ab 100644 --- a/crates/yachtpit/Cargo.toml +++ b/crates/yachtpit/Cargo.toml @@ -100,4 +100,4 @@ console_error_panic_hook = "0.1" [build-dependencies] embed-resource = "1" -base-map = { path = "../base-map" } +# base-map = { path = "../base-map" } # Temporarily disabled for testing diff --git a/crates/yachtpit/src/ui/menu.rs b/crates/yachtpit/src/ui/menu.rs index d680315..c741c79 100644 --- a/crates/yachtpit/src/ui/menu.rs +++ b/crates/yachtpit/src/ui/menu.rs @@ -13,17 +13,42 @@ impl Plugin for MenuPlugin { } } -#[derive(Component)] +#[derive(Component, Clone)] struct ButtonColors { normal: Color, hovered: Color, + pressed: Color, +} + +// Neumorphic color palette for luxury design +struct NeumorphicColors; + +impl NeumorphicColors { + // Base surface color - soft gray with warm undertones + const SURFACE: Color = Color::linear_rgb(0.88, 0.90, 0.92); + + // Primary button colors with depth + const PRIMARY_NORMAL: Color = Color::linear_rgb(0.85, 0.87, 0.90); + const PRIMARY_HOVERED: Color = Color::linear_rgb(0.90, 0.92, 0.95); + const PRIMARY_PRESSED: Color = Color::linear_rgb(0.80, 0.82, 0.85); + + // Secondary button colors (more subtle) + const SECONDARY_NORMAL: Color = Color::linear_rgb(0.86, 0.88, 0.91); + const SECONDARY_HOVERED: Color = Color::linear_rgb(0.88, 0.90, 0.93); + const SECONDARY_PRESSED: Color = Color::linear_rgb(0.82, 0.84, 0.87); + + // Text colors for contrast + const TEXT_PRIMARY: Color = Color::linear_rgb(0.25, 0.30, 0.35); + const TEXT_SECONDARY: Color = Color::linear_rgb(0.45, 0.50, 0.55); + const TEXT_ACCENT: Color = Color::linear_rgb(0.20, 0.45, 0.75); } impl Default for ButtonColors { fn default() -> Self { ButtonColors { - normal: Color::linear_rgb(0.15, 0.15, 0.15), - hovered: Color::linear_rgb(0.25, 0.25, 0.25), + normal: NeumorphicColors::PRIMARY_NORMAL, + hovered: NeumorphicColors::PRIMARY_HOVERED, + pressed: NeumorphicColors::PRIMARY_PRESSED, } } } @@ -34,6 +59,18 @@ struct Menu; fn setup_menu(mut commands: Commands) { info!("menu"); commands.spawn((Camera2d, Msaa::Off)); + + // Set neumorphic background + commands.spawn(( + Node { + width: Val::Percent(100.0), + height: Val::Percent(100.0), + position_type: PositionType::Absolute, + ..default() + }, + BackgroundColor(NeumorphicColors::SURFACE), + )); + commands .spawn(( Node { @@ -52,23 +89,27 @@ fn setup_menu(mut commands: Commands) { .spawn(( Button, Node { - width: Val::Px(140.0), - height: Val::Px(50.0), + width: Val::Px(180.0), + height: Val::Px(65.0), justify_content: JustifyContent::Center, align_items: AlignItems::Center, + border: UiRect::all(Val::Px(2.0)), + margin: UiRect::all(Val::Px(8.0)), ..Default::default() }, BackgroundColor(button_colors.normal), + BorderColor(Color::linear_rgb(0.82, 0.84, 0.87)), + BorderRadius::all(Val::Px(16.0)), button_colors, ChangeState(GameState::Playing), )) .with_child(( - Text::new("Play"), + Text::new("▶ PLAY"), TextFont { - font_size: 40.0, + font_size: 28.0, ..default() }, - TextColor(Color::linear_rgb(0.9, 0.9, 0.9)), + TextColor(NeumorphicColors::TEXT_PRIMARY), )); }); commands @@ -85,74 +126,71 @@ fn setup_menu(mut commands: Commands) { Menu, )) .with_children(|children| { + let secondary_button_colors = ButtonColors { + normal: NeumorphicColors::SECONDARY_NORMAL, + hovered: NeumorphicColors::SECONDARY_HOVERED, + pressed: NeumorphicColors::SECONDARY_PRESSED, + }; + children .spawn(( Button, Node { - width: Val::Px(170.0), - height: Val::Px(50.0), - justify_content: JustifyContent::SpaceAround, + width: Val::Px(180.0), + height: Val::Px(45.0), + justify_content: JustifyContent::Center, align_items: AlignItems::Center, - padding: UiRect::all(Val::Px(5.)), + padding: UiRect::all(Val::Px(8.)), + border: UiRect::all(Val::Px(1.0)), + margin: UiRect::horizontal(Val::Px(8.0)), ..Default::default() }, - BackgroundColor(Color::NONE), - ButtonColors { - normal: Color::NONE, - ..default() - }, + BackgroundColor(secondary_button_colors.normal), + BorderColor(Color::linear_rgb(0.80, 0.82, 0.85)), + BorderRadius::all(Val::Px(12.0)), + secondary_button_colors, OpenLink("https://bevyengine.org"), )) - .with_children(|parent| { - parent.spawn(( - Text::new("Made with Bevy"), - TextFont { - font_size: 15.0, - ..default() - }, - TextColor(Color::linear_rgb(0.9, 0.9, 0.9)), - )); - parent.spawn(( - Node { - width: Val::Px(32.), - ..default() - }, - )); - }); + .with_child(( + Text::new("🚀 Made with Bevy"), + TextFont { + font_size: 14.0, + ..default() + }, + TextColor(NeumorphicColors::TEXT_SECONDARY), + )); + children .spawn(( Button, Node { - width: Val::Px(170.0), - height: Val::Px(50.0), - justify_content: JustifyContent::SpaceAround, + width: Val::Px(180.0), + height: Val::Px(45.0), + justify_content: JustifyContent::Center, align_items: AlignItems::Center, - padding: UiRect::all(Val::Px(5.)), + padding: UiRect::all(Val::Px(8.)), + border: UiRect::all(Val::Px(1.0)), + margin: UiRect::horizontal(Val::Px(8.0)), ..default() }, - BackgroundColor(Color::NONE), + BackgroundColor(secondary_button_colors.normal), + BorderColor(Color::linear_rgb(0.80, 0.82, 0.85)), + BorderRadius::all(Val::Px(12.0)), ButtonColors { - normal: Color::NONE, - hovered: Color::linear_rgb(0.25, 0.25, 0.25), + normal: NeumorphicColors::SECONDARY_NORMAL, + hovered: NeumorphicColors::SECONDARY_HOVERED, + pressed: NeumorphicColors::SECONDARY_PRESSED, }, OpenLink("https://github.com/NiklasEi/bevy_game_template"), )) - .with_children(|parent| { - parent.spawn(( - Text::new("Open source"), - TextFont { - font_size: 15.0, - ..default() - }, - TextColor(Color::linear_rgb(0.9, 0.9, 0.9)), - )); - parent.spawn(( - Node { - width: Val::Px(32.), - ..default() - }, - )); - }); + .with_child(( + Text::new("📖 Open Source"), + TextFont { + font_size: 14.0, + ..default() + }, + TextColor(NeumorphicColors::TEXT_SECONDARY), + )); }); } @@ -178,6 +216,10 @@ fn click_play_button( for (interaction, mut color, button_colors, change_state, open_link) in &mut interaction_query { match *interaction { Interaction::Pressed => { + // Apply pressed state visual feedback + *color = button_colors.pressed.into(); + + // Handle button actions if let Some(state) = change_state { next_state.set(state.0.clone()); } else if let Some(link) = open_link { @@ -187,9 +229,11 @@ fn click_play_button( } } Interaction::Hovered => { + // Smooth transition to hovered state *color = button_colors.hovered.into(); } Interaction::None => { + // Return to normal state *color = button_colors.normal.into(); } }