implement private room codes

aleksa2808 · Dec 11, 2023 · a7a8db8 · a7a8db8
1 parent 130deb4
commit a7a8db8
Show file tree

Hide file tree

Showing 9 changed files with 73 additions and 48 deletions.
diff --git a/README.md b/README.md
@@ -1,20 +1,14 @@
 # ascii-bomb-ecs-mp
 
-Multiplayer demo of the [ascii-bomb-ecs](https://github.com/aleksa2808/ascii-bomb-ecs) game. Available as a [web build](https://aleksa2808.github.io/ascii-bomb-ecs-mp/).
+Multiplayer experiment of the [ascii-bomb-ecs](https://github.com/aleksa2808/ascii-bomb-ecs) game that uses peer-to-peer rollback networking. Available natively or as a [web build](https://aleksa2808.github.io/ascii-bomb-ecs-mp/).
 
-## Build
+## Configuration
 
-For both modes a [matchbox server](https://github.com/johanhelsing/matchbox/tree/main/matchbox_server) is needed. It can be run locally or used from `wss://match-0-6.helsing.studio` (thanks to [johanhelsing](https://github.com/johanhelsing)).
+A [matchbox server](https://github.com/johanhelsing/matchbox/tree/main/matchbox_server) is needed to connect players. Without any configuration the one at `wss://match-0-6.helsing.studio` is used (thanks to [johanhelsing](https://github.com/johanhelsing)).
 
-### Native
+Additionally, if a direct connection cannot be made between clients, a TURN relay server is used through which all communication happens. The default TURN server is hosted in Frankfurt and has limited bandwidth, which can translate to high ping times for clients that are far away or unavailability if the monthly bandwidth is depleted.
 
-From the root folder run:
-
-```bash
-cargo run --release -- [--signal-server-address <SIGNAL_SERVER_ADDRESS>] [-n <NUMBER_OF_PLAYERS>]
-```
-
-### Web
+## Web build
 
 From the root folder run:
 

diff --git a/src/lib.rs b/src/lib.rs
@@ -93,7 +93,7 @@ pub fn run() {
     #[cfg(not(target_arch = "wasm32"))]
     app.insert_resource(MatchboxConfig {
         matchbox_server_url: args.matchbox_server_url,
-        room: args.room,
+        room_id: args.room_id,
         number_of_players: args.number_of_players,
         ice_server_config: None,
     });

diff --git a/src/native.rs b/src/native.rs
@@ -22,8 +22,8 @@ pub struct Args {
     #[clap(long)]
     pub matchbox_server_url: Option<String>,
 
-    #[clap(long)]
-    pub room: Option<String>,
+    #[clap(long, default_value = "quick_join")]
+    pub room_id: String,
 
     #[clap(long, short, default_value = "2")]
     pub number_of_players: usize,

diff --git a/src/resources.rs b/src/resources.rs
@@ -185,8 +185,8 @@ impl WorldType {
 #[derive(Resource)]
 pub struct MatchboxConfig {
     pub number_of_players: usize,
+    pub room_id: String,
     pub matchbox_server_url: Option<String>,
-    pub room: Option<String>,
     pub ice_server_config: Option<ICEServerConfig>,
 }
 

diff --git a/src/systems.rs b/src/systems.rs
@@ -137,20 +137,15 @@ pub fn setup_lobby(
 }
 
 pub fn start_matchbox_socket(mut commands: Commands, matchbox_config: Res<MatchboxConfig>) {
-    let room_id = match &matchbox_config.room {
-        Some(id) => id.clone(),
-        None => format!(
-            "ascii_bomb_ecs_mp?next={}",
-            &matchbox_config.number_of_players
-        ),
-    };
-
     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);
+    let room_url = format!(
+        "{}/ascii_bomb_ecs_mp_{}?next={}",
+        matchbox_server_url, matchbox_config.room_id, matchbox_config.number_of_players
+    );
     info!("Connecting to the matchbox server: {room_url:?}");
 
     let rtc_ice_server_config = match &matchbox_config.ice_server_config {

diff --git a/src/web.rs b/src/web.rs
@@ -13,7 +13,7 @@ use crate::{
     AppState,
 };
 
-static START: Lazy<RwLock<Option<(usize, String, String, String, String)>>> =
+static START: Lazy<RwLock<Option<(usize, String, String, String, String, String)>>> =
     Lazy::new(|| RwLock::new(None));
 static INPUTS: Lazy<RwLock<VecDeque<u8>>> = Lazy::new(|| RwLock::new(VecDeque::new()));
 
@@ -22,20 +22,23 @@ static INPUTS: Lazy<RwLock<VecDeque<u8>>> = Lazy::new(|| RwLock::new(VecDeque::n
 #[allow(dead_code)]
 pub fn start_game(
     number_of_players: usize,
+    room_id: &str,
     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!("room id: {room_id}");
     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((
         number_of_players,
+        room_id.to_string(),
         matchbox_server_url.to_string(),
         ice_server_url.to_string(),
         turn_server_username.to_string(),
@@ -68,6 +71,7 @@ pub fn web_ready_to_start_update(
 ) {
     if let Some((
         number_of_players,
+        room_id,
         matchbox_server_url,
         ice_server_url,
         turn_server_username,
@@ -103,8 +107,8 @@ pub fn web_ready_to_start_update(
 
         commands.insert_resource(MatchboxConfig {
             number_of_players,
+            room_id,
             matchbox_server_url,
-            room: None,
             ice_server_config,
         });
         next_state.set(AppState::Lobby);

diff --git a/web/index.html b/web/index.html
@@ -19,32 +19,40 @@
     <div id="button-box">
         <form>
             <label for="numberInput">Number of players:</label>
-            <input type="number" id="numberInput" name="number" min="2" max="8" value="2" required>
+            <input type="number" id="numberInput" name="number" min="2" max="8" value="2" inputmode="numeric" required>
             <br><br>
-            <label for="customMatchboxServerCheckbox">Custom Matchbox server:</label>
-            <input type="checkbox" id="customMatchboxServerCheckbox" name="customMatchboxServer"
-                onclick="toggleCustomMatchboxServerSettings()">
+            <label for="roomID">4-digit room ID:</label>
+            <input type="text" id="roomID" name="roomID" placeholder="optional" maxlength="4" size="6"
+                inputmode="numeric">
             <br><br>
-            <div id="matchboxServerSettings">
-                <label for="matchboxServerURL" id="matchboxServerURLLabel">Matchbox server URL:</label>
-                <input type="text" id="matchboxServerURL" name="matchboxServerURL" value="">
+            <!-- custom settings hidden for now, but are usable -->
+            <div id=" customServerSettings" hidden>
+                <label for="customMatchboxServerCheckbox">Custom Matchbox server:</label>
+                <input type="checkbox" id="customMatchboxServerCheckbox" name="customMatchboxServer"
+                    onclick="toggleCustomMatchboxServerSettings()">
                 <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="">
+                <div id="matchboxServerSettings">
+                    <label for="matchboxServerURL">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>
             </div>
+            <br>
             <a id="button-loading" class="btn grey">Loading...</a>
             <a id="button-start" class="btn" onclick="startGame()" hidden>Start game</a>
         </form>

diff --git a/web/index.js b/web/index.js
@@ -109,6 +109,18 @@ document.addEventListener('dblclick', function (event) {
     event.preventDefault();
 }, { passive: false });
 
+window.onload = () => {
+    // prevent non-number room ID input
+    var roomIdInput = document.getElementById('roomID');
+    roomIdInput.addEventListener('keypress', function (event) {
+        const isNumber = isFinite(event.key);
+        if (!isNumber) {
+            event.preventDefault();
+            return false;
+        }
+    });
+}
+
 function toggleCustomMatchboxServerSettings() {
     var checkbox = document.getElementById("customMatchboxServerCheckbox");
     var settings = document.getElementById("matchboxServerSettings");
@@ -135,6 +147,7 @@ window.toggleCustomICEServerSettings = toggleCustomICEServerSettings
 
 function startGame() {
     var number_of_players = parseInt(document.getElementById("numberInput").value);
+    var room_id = document.getElementById("roomID").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;
@@ -148,6 +161,15 @@ function startGame() {
         return;
     }
 
+    if (room_id.trim() !== "") {
+        if (!/^([0-9]{4})$/.test(room_id)) {
+            alert("Invalid room ID.");
+            return;
+        }
+    } else {
+        room_id = "quick_join";
+    }
+
     // Validate custom Matchbox server settings
     if (use_custom_matchbox_server_settings == true) {
         matchbox_server_url = document.getElementById("matchboxServerURL").value;
@@ -171,6 +193,7 @@ function startGame() {
     }
 
     console.log("Number of players: " + number_of_players);
+    console.log("Room ID: " + room_id);
     if (use_custom_matchbox_server_settings) {
         console.log("Matchbox server URL: " + matchbox_server_url);
     }
@@ -212,7 +235,7 @@ function startGame() {
     updateCanvasContainerSize();
 
     canvas.focus();
-    start_game(number_of_players, matchbox_server_url, ice_server_url, turn_server_username, turn_server_credential);
+    start_game(number_of_players, room_id, matchbox_server_url, ice_server_url, turn_server_username, turn_server_credential);
 }
 window.startGame = startGame
 

diff --git a/web/style.css b/web/style.css
@@ -68,6 +68,7 @@ label {
 
 input {
     font-size: 2rem;
+    vertical-align: center;
 }
 
 input[type=checkbox] {