populate webview with react-map-gl (#5)

* webview displays in gps map with wry, happy 4th, boom boom

* gps-map is webview with html

* Add initial setup for `base-map` package

- Include `.gitignore` for package-specific files and logs.
- Implement a basic interactive Mapbox map with Chakra UI layout.
- Add token storage and retrieval mechanism using `js-cookie`.
- Initialize `bun.lock` with dependencies.

* "Replace static GPS map with dynamically built base-map package integration and update related paths and scripts"

* fix wasm32 builds

---------

Co-authored-by: geoffsee <>

crates/yachtpit/src/main.rs

@@ -8,10 +8,38 @@ use bevy::winit::WinitWindows;
 use bevy::DefaultPlugins;
 use yachtpit::GamePlugin;
 use std::io::Cursor;
-use bevy_webview_wry::WebviewWryPlugin;
 use winit::window::Icon;
 
+#[cfg(not(target_arch = "wasm32"))]
+use bevy_webview_wry::WebviewWryPlugin;
+
 fn main() {
+    #[cfg(target_arch = "wasm32")]
+    App::new()
+        .insert_resource(ClearColor(Color::NONE))
+        .add_plugins(
+            DefaultPlugins
+                .set(WindowPlugin {
+                    primary_window: Some(Window {
+                        // Bind to canvas included in `index.html`
+                        canvas: Some("#yachtpit-canvas".to_owned()),
+                        fit_canvas_to_parent: true,
+                        // Tells wasm not to override default event handling, like F5 and Ctrl+R
+                        prevent_default_event_handling: false,
+                        ..default()
+                    }),
+                    ..default()
+                })
+                .set(AssetPlugin {
+                    meta_check: AssetMetaCheck::Never,
+                    ..default()
+                }),
+        )
+        .add_plugins(GamePlugin)
+        .add_systems(Startup, set_window_icon)
+        .run();
+
+    #[cfg(not(target_arch = "wasm32"))]
     App::new()
         .insert_resource(ClearColor(Color::NONE))
         .add_plugins(
@@ -36,6 +64,7 @@ fn main() {
         .add_systems(Startup, set_window_icon)
         .add_plugins(WebviewWryPlugin::default())
         .run();
+
 }
 // Sets the icon on windows and X11
 fn set_window_icon(

crates/yachtpit/src/ui/gps_map.rs

@@ -4,6 +4,12 @@ use bevy::window::Window;
 use std::collections::HashMap;
 use bevy_webview_wry::prelude::*;
 /// Render layer for GPS map entities to isolate them from other cameras
+
+
+#[cfg(not(target_arch = "wasm32"))]
+use bevy_webview_wry::prelude::*;
+
+/// Render layer for GPS map entities to isolate them from other cameras
 const GPS_MAP_LAYER: usize = 1;
 
 /// Component to mark the GPS map window
@@ -46,10 +52,7 @@ pub struct GpsMapPlugin;
 impl Plugin for GpsMapPlugin {
     fn build(&self, app: &mut App) {
         app.init_resource::<GpsMapState>()
-            .add_systems(Update, (
-                handle_gps_map_window_events,
-                update_map_tiles,
-            ));
+            .add_systems(Update, (handle_gps_map_window_events, update_map_tiles));
     }
 }
 
@@ -132,10 +135,7 @@ fn spawn_placeholder_map(commands: &mut Commands, _asset_server: &Res<AssetServe
 }
 
 /// Function to spawn the GPS map window
-pub fn spawn_gps_map_window(
-    commands: &mut Commands,
-    gps_map_state: &mut ResMut<GpsMapState>,
-) {
+pub fn spawn_gps_map_window(commands: &mut Commands, gps_map_state: &mut ResMut<GpsMapState>) {
     if gps_map_state.window_id.is_some() {
         info!("GPS map window already open");
         return;
@@ -144,21 +144,27 @@ pub fn spawn_gps_map_window(
     info!("Spawning GPS map window");
 
     // Create a new window for the GPS map
-    let window_entity = commands.spawn((
-        Window {
-            title: "GPS Navigation - OpenStreetMap".to_string(),
-            resolution: (800.0, 600.0).into(),
-            position: bevy::window::WindowPosition::Centered(bevy::window::MonitorSelection::Current),
-            ..default()
-        },
-        GpsMapWindow,
-    )).id();
+    let window_entity = commands
+        .spawn((
+            Window {
+                title: "GPS Navigation - OpenStreetMap".to_string(),
+                resolution: (800.0, 600.0).into(),
+                position: bevy::window::WindowPosition::Centered(
+                    bevy::window::MonitorSelection::Current,
+                ),
+                ..default()
+            },
+            GpsMapWindow,
+        ))
+        .id();
 
     // Create a camera for the map window
     commands.spawn((
         Camera2d,
         Camera {
-            target: bevy::render::camera::RenderTarget::Window(bevy::window::WindowRef::Entity(window_entity)),
+            target: bevy::render::camera::RenderTarget::Window(bevy::window::WindowRef::Entity(
+                window_entity,
+            )),
             ..default()
         },
         RenderLayers::layer(GPS_MAP_LAYER),
@@ -167,21 +173,20 @@ pub fn spawn_gps_map_window(
 
     gps_map_state.window_id = Some(window_entity);
 
-    spawn_gps_webview(commands, gps_map_state);
-    
-
 
     info!("GPS map window spawned with entity: {:?}", window_entity);
+
+
+    #[cfg(not(target_arch = "wasm32"))]
+    spawn_gps_webview(commands, gps_map_state);
 }
-fn spawn_gps_webview(
-    commands: &mut Commands,
-    gps_map_state: &mut ResMut<GpsMapState>,
-) {
+
+#[cfg(not(target_arch = "wasm32"))]
+fn spawn_gps_webview(commands: &mut Commands, gps_map_state: &mut ResMut<GpsMapState>) {
     if let Some(win) = gps_map_state.window_id {
-        commands
-            .entity(win)
-            .insert(Webview::Uri(WebviewUri::new(
-                "https://www.openstreetmap.org/",   // or any URL you like
-            )));
+        commands.entity(win).insert(Webview::Uri(WebviewUri::relative_local(
+            // Using the build output of the base-map package
+            "packages/base-map/dist/index.html",
+        )));
     }
 }