Merge pull request #22 from badgerloop-software/copilot/add-weather-overlay-fsgp-tab-again

feat(strategy): FSGP/ASC tabs with Meteoblue weather overlay map

Author: sbasu107

.env.example

@@ -34,3 +34,8 @@ EXPO_PUBLIC_INFLUX_BUCKET=sc2-telemetry
 
 # ── Mapbox (optional — for map features) ─────────────────────────────────────
 MAPBOX_ACCESS_TOKEN=pk.your_mapbox_token_here
+
+# ── Meteoblue (weather overlay for Strategy map) ──────────────────────────────
+# Sign up at https://www.meteoblue.com/en/weather-api to get an API key.
+# Required for weather tile overlays (clouds, precipitation, wind, solar) on the Strategy screen.
+METEOBLUE_API_KEY=your_meteoblue_api_key_here

app.config.js

@@ -23,6 +23,7 @@ module.exports = ({ config }) => {
       // Preserve any existing extra values
       ...(config.extra || {}),
       MAPBOX_ACCESS_TOKEN: process.env.MAPBOX_ACCESS_TOKEN || null,
+      METEOBLUE_API_KEY: process.env.METEOBLUE_API_KEY || null,
     },
   };
 };

src/components/WeatherForecastUI.js

@@ -0,0 +1,292 @@
+import React, { useState, useEffect } from 'react';
+import { View, Text, StyleSheet, ScrollView, ActivityIndicator } from 'react-native';
+import { Ionicons } from '@expo/vector-icons';
+import { useTheme } from '../theme/ThemeProvider';
+
+// Get weather icon based on WMO weather code
+const getWeatherIcon = (weatherCode) => {
+  const iconMap = {
+    0: 'sunny', // Clear sky
+    1: 'partly-sunny', // Mainly clear
+    2: 'partly-sunny', // Partly cloudy
+    3: 'cloudy', // Overcast
+    45: 'cloudy', // Fog
+    48: 'cloudy', // Fog
+    51: 'rainy', // Drizzle
+    53: 'rainy', // Drizzle
+    55: 'rainy', // Dense drizzle
+    61: 'rainy', // Rain
+    63: 'rainy', // Rain
+    65: 'rainy', // Heavy rain
+    71: 'snow', // Snow
+    73: 'snow', // Snow
+    75: 'snow', // Heavy snow
+    95: 'thunderstorm', // Thunderstorm
+  };
+  return iconMap[weatherCode] || 'cloudy';
+};
+
+const getDayName = (dateStr) => {
+  const date = new Date(dateStr);
+  const today = new Date();
+  if (date.getUTCDay() === today.getDay() && date.getUTCDate() === today.getDate()) {
+    return 'Today';
+  }
+  return date.toLocaleDateString('en-US', { weekday: 'short', timeZone: 'UTC' });
+};
+
+const formatTime = (timeStr) => {
+  const date = new Date(timeStr);
+  let hours = date.getHours();
+  const ampm = hours >= 12 ? 'PM' : 'AM';
+  hours = hours % 12;
+  hours = hours ? hours : 12; // the hour '0' should be '12'
+  return `${hours} ${ampm}`;
+};
+
+export default function WeatherForecastUI({ latitude, longitude, useImperialUnits = true }) {
+  const { theme } = useTheme();
+  const [data, setData] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    if (!latitude || !longitude) return;
+
+    const fetchForecast = async () => {
+      setLoading(true);
+      setError(null);
+      try {
+        const tempUnits = useImperialUnits ? 'fahrenheit' : 'celsius';
+        // Open-Meteo free API for hourly (24h) and daily (7 days)
+        const url = `https://api.open-meteo.com/v1/forecast?latitude=${latitude}&longitude=${longitude}&hourly=temperature_2m,weathercode&daily=weathercode,temperature_2m_max,temperature_2m_min&timezone=auto&temperature_unit=${tempUnits}`;
+        const res = await fetch(url);
+        if (!res.ok) throw new Error('Failed to fetch forecast');
+        const json = await res.json();
+        setData(json);
+      } catch (err) {
+        setError('Forecast unavailable');
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchForecast();
+  }, [latitude, longitude, useImperialUnits]);
+
+  if (loading) {
+    return (
+      <View style={[styles.loadingContainer, { backgroundColor: theme.colors.card }]}>
+        <ActivityIndicator color={theme.colors.primary} />
+      </View>
+    );
+  }
+
+  if (error || !data) {
+    return (
+      <View style={[styles.errorContainer, { backgroundColor: theme.colors.card }]}>
+        <Text style={[styles.errorText, { color: theme.colors.muted }]}>{error || 'Weather forecast unavailable'}</Text>
+      </View>
+    );
+  }
+
+  // Parse Hourly (Next 24 hours)
+  const now = new Date();
+  const currentHourUTCStr = now.toISOString().slice(0, 13) + ':00'; // Match open-meteo basic ISO pattern to find index natively
+  let startIndex = 0;
+  for (let i = 0; i < data.hourly.time.length; i++) {
+    if (new Date(data.hourly.time[i]).getTime() >= now.getTime()) {
+      startIndex = i;
+      break;
+    }
+  }
+  // Take next 24 hours
+  const hourlyData = data.hourly.time.slice(startIndex, startIndex + 24).map((time, i) => ({
+    time,
+    temp: Math.round(data.hourly.temperature_2m[startIndex + i]),
+    weathercode: data.hourly.weathercode[startIndex + i]
+  }));
+
+  // Parse Daily (7 Days)
+  const dailyData = data.daily.time.map((time, i) => ({
+    time,
+    min: Math.round(data.daily.temperature_2m_min[i]),
+    max: Math.round(data.daily.temperature_2m_max[i]),
+    weathercode: data.daily.weathercode[i]
+  }));
+
+  // Overall min/max for the week bar scaling
+  const absoluteMin = Math.min(...dailyData.map(d => d.min));
+  const absoluteMax = Math.max(...dailyData.map(d => d.max));
+  const rangeTotal = absoluteMax - absoluteMin || 1;
+
+  const tempSym = useImperialUnits ? '°F' : '°C';
+
+  return (
+    <View style={styles.container}>
+      {/* 24-Hour Forecast Scroll */}
+      <View style={[styles.box, { backgroundColor: theme.colors.card }]}>
+        <View style={styles.boxHeader}>
+          <Ionicons name="time-outline" size={14} color={theme.colors.muted} />
+          <Text style={[styles.boxTitle, { color: theme.colors.muted }]}>24-HOUR FORECAST</Text>
+        </View>
+        <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={styles.hourlyScroll}>
+          {hourlyData.map((hour, i) => (
+            <View key={i} style={styles.hourlyItem}>
+              <Text style={[styles.hourlyTime, { color: theme.colors.text }]}>
+                {i === 0 ? 'Now' : formatTime(hour.time)}
+              </Text>
+              <Ionicons name={getWeatherIcon(hour.weathercode)} size={22} color={theme.colors.primary} style={styles.hourlyIcon} />
+              <Text style={[styles.hourlyTemp, { color: theme.colors.text }]}>{hour.temp}°</Text>
+            </View>
+          ))}
+        </ScrollView>
+      </View>
+
+      {/* 7-Day Forecast Box */}
+      <View style={[styles.box, { backgroundColor: theme.colors.card }]}>
+        <View style={styles.boxHeader}>
+          <Ionicons name="calendar-outline" size={14} color={theme.colors.muted} />
+          <Text style={[styles.boxTitle, { color: theme.colors.muted }]}>7-DAY FORECAST</Text>
+        </View>
+        <View style={styles.dailyList}>
+          {dailyData.map((day, i) => {
+            const leftOffset = ((day.min - absoluteMin) / rangeTotal) * 100;
+            const barWidth = ((day.max - day.min) / rangeTotal) * 100;
+            
+            return (
+              <View key={i} style={styles.dailyRow}>
+                <Text style={[styles.dailyDayName, { color: theme.colors.text }]}>{getDayName(day.time)}</Text>
+                <View style={styles.dailyIconBox}>
+                  <Ionicons name={getWeatherIcon(day.weathercode)} size={20} color={theme.colors.primary} />
+                </View>
+                <Text style={[styles.dailyMin, { color: theme.colors.muted }]}>{day.min}°</Text>
+                
+                {/* Visual Temperature Distribution Bar */}
+                <View style={[styles.dailyBarWrapper, { backgroundColor: 'rgba(156, 163, 175, 0.2)' }]}>
+                  <View 
+                    style={[
+                      styles.dailyBar, 
+                      { 
+                        left: `${leftOffset}%`, 
+                        width: `${barWidth}%`,
+                        backgroundColor: theme.colors.primary
+                      }
+                    ]} 
+                  />
+                </View>
+
+                <Text style={[styles.dailyMax, { color: theme.colors.text }]}>{day.max}°</Text>
+              </View>
+            );
+          })}
+        </View>
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    paddingHorizontal: 20,
+    marginBottom: 16,
+    gap: 12,
+  },
+  loadingContainer: {
+    height: 120,
+    marginHorizontal: 20,
+    marginBottom: 16,
+    borderRadius: 14,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  errorContainer: {
+    height: 80,
+    marginHorizontal: 20,
+    marginBottom: 16,
+    borderRadius: 14,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  errorText: {
+    fontSize: 13,
+  },
+  box: {
+    borderRadius: 14,
+    overflow: 'hidden',
+    padding: 14,
+  },
+  boxHeader: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginBottom: 12,
+    gap: 6,
+  },
+  boxTitle: {
+    fontSize: 11,
+    fontWeight: '700',
+    letterSpacing: 0.5,
+  },
+  hourlyScroll: {
+    paddingBottom: 4,
+  },
+  hourlyItem: {
+    alignItems: 'center',
+    marginRight: 22,
+  },
+  hourlyTime: {
+    fontSize: 13,
+    fontWeight: '500',
+    marginBottom: 8,
+  },
+  hourlyIcon: {
+    marginBottom: 8,
+  },
+  hourlyTemp: {
+    fontSize: 15,
+    fontWeight: '600',
+  },
+  dailyList: {
+    gap: 12,
+  },
+  dailyRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  dailyDayName: {
+    width: 48,
+    fontSize: 14,
+    fontWeight: '600',
+  },
+  dailyIconBox: {
+    width: 32,
+    alignItems: 'center',
+  },
+  dailyMin: {
+    width: 32,
+    textAlign: 'right',
+    fontSize: 14,
+    fontWeight: '500',
+    marginRight: 8,
+  },
+  dailyBarWrapper: {
+    flex: 1,
+    height: 6,
+    borderRadius: 3,
+    marginHorizontal: 4,
+    overflow: 'hidden',
+    position: 'relative',
+  },
+  dailyBar: {
+    position: 'absolute',
+    height: '100%',
+    borderRadius: 3,
+  },
+  dailyMax: {
+    width: 32,
+    textAlign: 'right',
+    fontSize: 14,
+    fontWeight: '600',
+    marginLeft: 8,
+  },
+});