implement custom matchbox/ice server settings

src/lib.rs

@@ -91,9 +91,10 @@ pub fn run() {
 
     #[cfg(not(target_arch = "wasm32"))]
     app.insert_resource(MatchboxConfig {
-        signal_server_address: args.signal_server_address,
+        matchbox_server_url: args.matchbox_server_url,
         room: args.room,
         number_of_players: args.number_of_players,
+        ice_server_config: None,
     });
 
     #[cfg(target_arch = "wasm32")]

src/native.rs

@@ -19,9 +19,8 @@ use crate::{
     rename_all_env = "screaming-snake"
 )]
 pub struct Args {
-    #[clap(long, default_value = "wss://match-0-6.helsing.studio")]
-    // #[clap(long, default_value = "ws://127.0.0.1:3536")]
-    pub signal_server_address: String,
+    #[clap(long)]
+    pub matchbox_server_url: Option<String>,
 
     #[clap(long)]
     pub room: Option<String>,

src/resources.rs

@@ -5,7 +5,7 @@ use rand::{rngs::StdRng, seq::IteratorRandom, Rng};
 use crate::{
     components::Position,
     constants::COLORS,
-    types::{Direction, PlayerID, PostFreezeAction},
+    types::{Direction, ICEServerConfig, PlayerID, PostFreezeAction},
 };
 
 #[derive(Resource)]
@@ -181,9 +181,10 @@ impl WorldType {
 
 #[derive(Resource)]
 pub struct MatchboxConfig {
-    pub signal_server_address: String,
-    pub room: Option<String>,
     pub number_of_players: usize,
+    pub matchbox_server_url: Option<String>,
+    pub room: Option<String>,
+    pub ice_server_config: Option<ICEServerConfig>,
 }
 
 #[derive(Resource)]

src/systems.rs

@@ -110,16 +110,26 @@ pub fn start_matchbox_socket(mut commands: Commands, matchbox_config: Res<Matchb
         ),
     };
 
-    let room_url = format!("{}/{}", &matchbox_config.signal_server_address, room_id);
+    let matchbox_server_url = match matchbox_config.matchbox_server_url.clone() {
+        Some(url) => url,
+        None => "wss://match-0-6.helsing.studio".to_string(),
+    };
+
+    let room_url = format!("{}/{}", matchbox_server_url, room_id);
     info!("Connecting to the matchbox server: {room_url:?}");
 
+    let rtc_ice_server_config = match &matchbox_config.ice_server_config {
+        Some(config) => RtcIceServerConfig { urls: vec![config.url.clone()], username: config.username.clone(), credential: config.credential.clone() },
+        None => RtcIceServerConfig {
+            urls: vec![decode("dHVybjpldS10dXJuNy54aXJzeXMuY29tOjM0Nzg/dHJhbnNwb3J0PXVkcA")],
+            username: Some(decode("UENMWW5yLWpYZjRZd1VPRDFBR1pxdHVpQzRZeEZFenlJVi10X09LTmxQUG9qbkN6UG5BeXVHVUdDZ2hQTEVfa0FBQUFBR1ZTU21oaGJHVnJjMkV5T0RBNA")),
+            credential: Some(decode("MjI0ZDdhZmEtODIzZi0xMWVlLWFlODMtMDI0MmFjMTQwMDA0")),
+        },
+    };
+
     commands.insert_resource(MatchboxSocket::from(
         WebRtcSocketBuilder::new(room_url)
-            .ice_server(RtcIceServerConfig {
-                urls: vec![decode("dHVybjpldS10dXJuNy54aXJzeXMuY29tOjM0Nzg/dHJhbnNwb3J0PXVkcA")],
-                username: Some(decode("UENMWW5yLWpYZjRZd1VPRDFBR1pxdHVpQzRZeEZFenlJVi10X09LTmxQUG9qbkN6UG5BeXVHVUdDZ2hQTEVfa0FBQUFBR1ZTU21oaGJHVnJjMkV5T0RBNA")),
-                credential: Some(decode("MjI0ZDdhZmEtODIzZi0xMWVlLWFlODMtMDI0MmFjMTQwMDA0")),
-            })
+            .ice_server(rtc_ice_server_config)
             .add_ggrs_channel()
             .add_reliable_channel()
             .build(),

src/types.rs

@@ -16,6 +16,12 @@ impl Config for GgrsConfig {
     type Address = PeerId;
 }
 
+pub struct ICEServerConfig {
+    pub url: String,
+    pub username: Option<String>,
+    pub credential: Option<String>,
+}
+
 #[derive(Clone, Copy)]
 pub struct RGBColor(pub u8, pub u8, pub u8);
 

src/web.rs

@@ -9,20 +9,38 @@ use wasm_bindgen::prelude::wasm_bindgen;
 use crate::{
     constants::{INPUT_ACTION, INPUT_DOWN, INPUT_LEFT, INPUT_RIGHT, INPUT_UP},
     resources::{GameFreeze, MatchboxConfig},
-    types::{GgrsConfig, PlayerInput},
+    types::{GgrsConfig, ICEServerConfig, PlayerInput},
     AppState,
 };
 
-static START: Lazy<RwLock<Option<(String, usize)>>> = Lazy::new(|| RwLock::new(None));
+static START: Lazy<RwLock<Option<(usize, String, String, String, String)>>> =
+    Lazy::new(|| RwLock::new(None));
 static INPUTS: Lazy<RwLock<VecDeque<u8>>> = Lazy::new(|| RwLock::new(VecDeque::new()));
 
 // functions callable from JavaScript
 #[wasm_bindgen]
 #[allow(dead_code)]
-pub fn start_game(signal_server_address: &str, number_of_players: usize) {
-    info!("start_game: {signal_server_address} {number_of_players}");
+pub fn start_game(
+    number_of_players: usize,
+    matchbox_server_url: &str,
+    ice_server_url: &str,
+    turn_server_username: &str,
+    turn_server_credential: &str,
+) {
+    info!("start_game configs:");
+    info!("player count: {number_of_players}");
+    info!("matchbox server url: {matchbox_server_url}");
+    info!("stun/turn server url: {ice_server_url}");
+    info!("turn server username: {turn_server_username}");
+    info!("turn server credential: {turn_server_credential}");
     let mut start = START.write();
-    *start = Some((signal_server_address.to_string(), number_of_players));
+    *start = Some((
+        number_of_players,
+        matchbox_server_url.to_string(),
+        ice_server_url.to_string(),
+        turn_server_username.to_string(),
+        turn_server_credential.to_string(),
+    ));
 }
 
 #[wasm_bindgen]
@@ -48,11 +66,46 @@ pub fn web_ready_to_start_update(
     mut commands: Commands,
     mut next_state: ResMut<NextState<AppState>>,
 ) {
-    if let Some((signal_server_address, number_of_players)) = START.read().clone() {
+    if let Some((
+        number_of_players,
+        matchbox_server_url,
+        ice_server_url,
+        turn_server_username,
+        turn_server_credential,
+    )) = START.read().clone()
+    {
+        let matchbox_server_url = if !matchbox_server_url.trim().is_empty() {
+            Some(matchbox_server_url)
+        } else {
+            None
+        };
+
+        let ice_server_config = if !ice_server_url.trim().is_empty() {
+            let username = if !turn_server_username.trim().is_empty() {
+                Some(turn_server_username)
+            } else {
+                None
+            };
+            let credential = if !turn_server_credential.trim().is_empty() {
+                Some(turn_server_credential)
+            } else {
+                None
+            };
+
+            Some(ICEServerConfig {
+                url: ice_server_url,
+                username,
+                credential,
+            })
+        } else {
+            None
+        };
+
         commands.insert_resource(MatchboxConfig {
-            signal_server_address,
-            room: None,
             number_of_players,
+            matchbox_server_url,
+            room: None,
+            ice_server_config,
         });
         next_state.set(AppState::Lobby);
     }

web/index.html

@@ -18,12 +18,33 @@
 <body>
     <div id="button-box">
         <form>
-            <label for="urlInput">Matchbox server:</label>
-            <input type="text" id="urlInput" name="url" value="wss://match-0-6.helsing.studio" required>
-            <br><br>
             <label for="numberInput">Number of players:</label>
             <input type="number" id="numberInput" name="number" min="2" max="8" value="2" required>
             <br><br>
+            <label for="customMatchboxServerCheckbox">Custom Matchbox server:</label>
+            <input type="checkbox" id="customMatchboxServerCheckbox" name="customMatchboxServer"
+                onclick="toggleCustomMatchboxServerSettings()">
+            <br><br>
+            <div id="matchboxServerSettings">
+                <label for="matchboxServerURL" id="matchboxServerURLLabel">Matchbox server URL:</label>
+                <input type="text" id="matchboxServerURL" name="matchboxServerURL" value="">
+                <br><br>
+            </div>
+            <label for="customICEServerCheckbox">Custom ICE server:</label>
+            <input type="checkbox" id="customICEServerCheckbox" name="customICEServer"
+                onclick="toggleCustomICEServerSettings()">
+            <br><br>
+            <div id="ICEServerSettings">
+                <label for="iceServerURL">STUN/TURN server URL:</label>
+                <input type="text" id="iceServerURL" name="iceServerURL" value="">
+                <br><br>
+                <label for="iceServerUsername">TURN server username:</label>
+                <input type="text" id="iceServerUsername" name="iceServerUsername" value="">
+                <br><br>
+                <label for="iceServerCredential">TURN server credential:</label>
+                <input type="text" id="iceServerCredential" name="iceServerCredential" value="">
+                <br><br>
+            </div>
             <a id="button-loading" class="btn grey">Loading...</a>
             <a id="button-start" class="btn" onclick="startGame()" hidden>Start game</a>
         </form>

web/index.js

@@ -109,23 +109,76 @@ document.addEventListener('dblclick', function (event) {
     event.preventDefault();
 }, { passive: false });
 
-function startGame() {
-    var signal_server_address = document.getElementById("urlInput").value;
-    var number_of_players = parseInt(document.getElementById("numberInput").value);
+function toggleCustomMatchboxServerSettings() {
+    var checkbox = document.getElementById("customMatchboxServerCheckbox");
+    var settings = document.getElementById("matchboxServerSettings");
 
-    // Validate web address input
-    if (signal_server_address.trim() === "") {
-        alert("Please enter a Matchbox server address.");
-        return;
+    if (checkbox.checked == true) {
+        settings.style.display = "block";
+    } else {
+        settings.style.display = "none";
     }
+}
+window.toggleCustomMatchboxServerSettings = toggleCustomMatchboxServerSettings
+
+function toggleCustomICEServerSettings() {
+    var checkbox = document.getElementById("customICEServerCheckbox");
+    var settings = document.getElementById("ICEServerSettings");
 
-    // Validate number input
+    if (checkbox.checked == true) {
+        settings.style.display = "block";
+    } else {
+        settings.style.display = "none";
+    }
+}
+window.toggleCustomICEServerSettings = toggleCustomICEServerSettings
+
+function startGame() {
+    var number_of_players = parseInt(document.getElementById("numberInput").value);
+    var use_custom_matchbox_server_settings = document.getElementById('customMatchboxServerCheckbox').checked;
+    var matchbox_server_url = "";
+    var use_custom_ice_server_settings = document.getElementById('customICEServerCheckbox').checked;
+    var ice_server_url = "";
+    var turn_server_username = "";
+    var turn_server_credential = "";
+
+    // Validate player count input
     if (number_of_players < 2 || number_of_players > 8) {
         alert("Please enter a player count between 2 and 8.");
         return;
     }
 
-    console.log(signal_server_address, number_of_players);
+    // Validate custom Matchbox server settings
+    if (use_custom_matchbox_server_settings == true) {
+        matchbox_server_url = document.getElementById("matchboxServerURL").value;
+
+        if (matchbox_server_url.trim() === "") {
+            alert("Please enter a Matchbox server URL.");
+            return;
+        }
+    }
+
+    // Validate custom ICE server settings
+    if (use_custom_ice_server_settings == true) {
+        ice_server_url = document.getElementById("iceServerURL").value;
+        turn_server_username = document.getElementById("iceServerUsername").value;
+        turn_server_credential = document.getElementById("iceServerCredential").value;
+
+        if (ice_server_url.trim() === "") {
+            alert("Please enter a STUN/TURN server URL.");
+            return;
+        }
+    }
+
+    console.log("Number of players: " + number_of_players);
+    if (use_custom_matchbox_server_settings) {
+        console.log("Matchbox server URL: " + matchbox_server_url);
+    }
+    if (use_custom_ice_server_settings) {
+        console.log("STUN/TURN server URL: " + ice_server_url);
+        console.log("TURN server username: " + turn_server_username);
+        console.log("TURN server credential: " + turn_server_credential);
+    }
 
     document.getElementById('button-box').remove();
     document.getElementById('game-container').removeAttribute("hidden");
@@ -159,7 +212,7 @@ function startGame() {
     updateCanvasContainerSize();
 
     canvas.focus();
-    start_game(signal_server_address, number_of_players);
+    start_game(number_of_players, matchbox_server_url, ice_server_url, turn_server_username, turn_server_credential);
 }
 window.startGame = startGame
 

web/style.css

@@ -62,18 +62,28 @@ body {
 
 label {
     color: white;
-    font-size: 2rem;
+    font-size: 1.8rem;
     margin-right: 0.8rem;
 }
 
 input {
     font-size: 2rem;
 }
 
+input[type=checkbox] {
+    transform: scale(1.3);
+}
+
+
+#matchboxServerSettings,
+#ICEServerSettings {
+    display: none;
+}
+
 a {
     color: white;
     display: block;
-    font-size: 1.3rem;
+    font-size: 1.8rem;
 }
 
 .btn {
@@ -96,7 +106,8 @@ a {
     padding-left: 15px;
     padding-right: 15px;
     text-transform: uppercase;
-    width: auto;
+    width: 9em;
+    margin: 0 auto;
 }
 
 .btn:focus {
@@ -119,7 +130,8 @@ a {
     padding-left: 15px;
     padding-right: 15px;
     text-transform: uppercase;
-    width: auto;
+    width: 9em;
+    margin: 0 auto;
 }
 
 .btn:hover {
@@ -142,7 +154,8 @@ a {
     padding-left: 15px;
     padding-right: 15px;
     text-transform: uppercase;
-    width: auto;
+    width: 9em;
+    margin: 0 auto;
 }
 
 .btn.grey {