diff --git a/public/index.html b/public/index.html
index 289a8cf..c0abb4b 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1398,9 +1398,30 @@
const dxPathsMarkersRef = useRef([]);
const satMarkersRef = useRef([]);
const satTracksRef = useRef([]);
- const [mapStyle, setMapStyle] = useState('dark');
- const [showSatellites, setShowSatellites] = useState(true);
- const [showDXPaths, setShowDXPaths] = useState(true);
+
+ // Load map view settings from localStorage
+ const getStoredMapSettings = () => {
+ try {
+ const stored = localStorage.getItem('openhamclock_mapSettings');
+ return stored ? JSON.parse(stored) : {};
+ } catch (e) { return {}; }
+ };
+ const storedSettings = getStoredMapSettings();
+
+ const [mapStyle, setMapStyle] = useState(storedSettings.mapStyle || 'dark');
+ const [showSatellites, setShowSatellites] = useState(storedSettings.showSatellites !== false);
+ const [showDXPaths, setShowDXPaths] = useState(storedSettings.showDXPaths !== false);
+
+ // Save map view settings to localStorage when they change
+ useEffect(() => {
+ try {
+ localStorage.setItem('openhamclock_mapSettings', JSON.stringify({
+ mapStyle,
+ showSatellites,
+ showDXPaths
+ }));
+ } catch (e) { console.error('Failed to save map settings:', e); }
+ }, [mapStyle, showSatellites, showDXPaths]);
// Initialize map
useEffect(() => {
@@ -1816,18 +1837,30 @@
- {/* Map style selector */}
-
+ {/* Map style dropdown */}
+ setMapStyle(e.target.value)}
+ style={{
+ position: 'absolute',
+ top: '10px',
+ right: '10px',
+ background: 'rgba(0, 0, 0, 0.8)',
+ border: '1px solid #444',
+ color: '#00ffcc',
+ padding: '6px 10px',
+ borderRadius: '4px',
+ fontSize: '11px',
+ fontFamily: 'JetBrains Mono',
+ cursor: 'pointer',
+ zIndex: 1000,
+ outline: 'none'
+ }}
+ >
{Object.entries(MAP_STYLES).map(([key, style]) => (
- setMapStyle(key)}
- >
- {style.name}
-
+ {style.name}
))}
-
+
{/* Satellite toggle */}
- 🛰 {showSatellites ? 'SATS ON' : 'SATS OFF'}
+ 🛰 {showSatellites ? 'SAT' : 'SAT'}
{/* DX Paths toggle */}
@@ -1859,7 +1892,7 @@
style={{
position: 'absolute',
top: '10px',
- left: '155px',
+ left: '118px',
background: showDXPaths ? 'rgba(68, 136, 255, 0.2)' : 'rgba(0, 0, 0, 0.7)',
border: `1px solid ${showDXPaths ? '#4488ff' : '#666'}`,
color: showDXPaths ? '#4488ff' : '#888',
@@ -1874,7 +1907,7 @@
gap: '4px'
}}
>
- 📡 {showDXPaths ? 'DX ON' : 'DX OFF'}
+ 📡 {showDXPaths ? 'DX' : 'DX'}
);
@@ -1883,7 +1916,7 @@
// ============================================
// UI COMPONENTS
// ============================================
- const Header = ({ callsign, uptime, version, onSettingsClick }) => (
+ const Header = ({ callsign, uptime, version, onSettingsClick, onFullscreenToggle, isFullscreen }) => (
{callsign}
-
+
UPTIME: {uptime}
v{version}
âš™ Settings
+
+ {isFullscreen ? 'â›¶' : 'â›¶'} {isFullscreen ? 'Exit' : 'Full'}
+
@@ -2182,7 +2230,7 @@
config, currentTime, utcTime, utcDate, localTime, localDate,
deGrid, dxGrid, deSunTimes, dxSunTimes, dxLocation, onDXChange,
spaceWeather, bandConditions, potaSpots, dxCluster, dxPaths, contests, propagation, mySpots, satellites,
- onSettingsClick
+ onSettingsClick, onFullscreenToggle, isFullscreen
}) => {
const bearing = calculateBearing(config.location.lat, config.location.lon, dxLocation.lat, dxLocation.lon);
const distance = calculateDistance(config.location.lat, config.location.lon, dxLocation.lat, dxLocation.lon);
@@ -2446,21 +2494,36 @@
{/* BOTTOM - Footer */}
- OpenHamClock v3.3.0 • In memory of Elwood Downey WB0OEW
+ OpenHamClock v3.5.1 • In memory of Elwood Downey WB0OEW
Click map to set DX • 73 de {config.callsign}
-
- âš™ Settings
-
+
+
+ âš™ Settings
+
+
+ {isFullscreen ? 'â›¶ Exit' : 'â›¶ Full'}
+
+
);
@@ -2800,6 +2863,33 @@
const [uptime, setUptime] = useState('0d 0h 0m');
const [dxLocation, setDxLocation] = useState(config.defaultDX);
const [showSettings, setShowSettings] = useState(false);
+ const [isFullscreen, setIsFullscreen] = useState(false);
+
+ // Fullscreen toggle handler
+ const handleFullscreenToggle = useCallback(() => {
+ if (!document.fullscreenElement) {
+ document.documentElement.requestFullscreen().then(() => {
+ setIsFullscreen(true);
+ }).catch(err => {
+ console.error('Fullscreen error:', err);
+ });
+ } else {
+ document.exitFullscreen().then(() => {
+ setIsFullscreen(false);
+ }).catch(err => {
+ console.error('Exit fullscreen error:', err);
+ });
+ }
+ }, []);
+
+ // Listen for fullscreen changes (e.g., user presses Escape)
+ useEffect(() => {
+ const handleFullscreenChange = () => {
+ setIsFullscreen(!!document.fullscreenElement);
+ };
+ document.addEventListener('fullscreenchange', handleFullscreenChange);
+ return () => document.removeEventListener('fullscreenchange', handleFullscreenChange);
+ }, []);
// Apply theme on initial load
useEffect(() => {
@@ -2884,6 +2974,8 @@
mySpots={mySpots}
satellites={satellites}
onSettingsClick={() => setShowSettings(true)}
+ onFullscreenToggle={handleFullscreenToggle}
+ isFullscreen={isFullscreen}
/>
{config.callsign}
- v3.3.0
+ v3.5.1
{/* UTC Clock */}
@@ -2987,13 +3079,28 @@
SSN {spaceWeather.data?.sunspotNumber || '--'}
- {/* Settings Button */}
- setShowSettings(true)}
- style={{ background: 'var(--bg-tertiary)', border: '1px solid var(--border-color)', padding: '6px 12px', borderRadius: '4px', color: 'var(--text-secondary)', fontSize: '13px', cursor: 'pointer' }}
- >
- âš™ Settings
-
+ {/* Settings & Fullscreen Buttons */}
+
+ setShowSettings(true)}
+ style={{ background: 'var(--bg-tertiary)', border: '1px solid var(--border-color)', padding: '6px 12px', borderRadius: '4px', color: 'var(--text-secondary)', fontSize: '13px', cursor: 'pointer' }}
+ >
+ âš™ Settings
+
+
+ {isFullscreen ? 'â›¶ Exit' : 'â›¶ Full'}
+
+
{/* LEFT SIDEBAR */}