Name length limit and show room name

client/index.html

@@ -56,7 +56,7 @@ <h1 class="text-center display-1">Paint the Floor</h1>
     </div>
     <div class="menu" id="room">
       <div class="info-box">
-        <h1 class="text-center display-2" id="room-name">Room: lol</h1>
+        <h1 class="text-center display-2" id="room-name"></h1>
         <ol>
           <li id="player-one"></li>
           <li id="player-two"></li>

client/js/main.js

@@ -61,13 +61,17 @@ $(function() {
     var room_input = $('#room-code').val();
     if(!has_joined) {
       if(name_input != '') {
-        if(name_input.length <= 12) {
+        if(name_input.length <= 16) {
           if(room_input != '') {
-            // Tell the server
-            socket.emit('create_room', {
-              player_name: name_input,
-              room_code: room_input
-            });
+            if(room_input.length <= 16) {
+              // Tell the server
+              socket.emit('create_room', {
+                player_name: name_input,
+                room_code: room_input
+              });
+            } else {
+              showError('Please enter a shorter room code.')
+            }
           } else {
             showError('Please enter a room code.');
           }
@@ -92,17 +96,18 @@ $(function() {
   });
 
   // Notification that a room was successfully joined.
-  socket.on('joined_room', function(player) {
+  socket.on('joined_room', function(data) {
     // Remove the join screen
     $('#join').css("display", "none");
     has_joined = true;
 
-    my_id = player.id;
-    my_player = player;
+    my_id = data.player.id;
+    my_player = data.player;
 
     updateReadyButton();
 
     $('#room').css("display", "flex");
+    $('#room-name').html("Room: " + data.room_name);
   });
 
   // Notification that a new player has joined lobby.

server.js

@@ -45,6 +45,7 @@ const COLORS = [
   '#FFEF00',  // yellow
   '#686868'   // gray
 ];
+const STRING_LEN = 16;  // Maximum length of a name.
 const GRID_WIDTH = 75;  // Number of horizontal grid tiles.
 const GRID_HEIGHT = 40; // Number of vertical grid tiles.
 const MAX_PLAYERS = 4;  // Number of players allowed in room.
@@ -364,22 +365,30 @@ io.sockets.on('connection', function(client) {
     var player_name = data.player_name.toString();
     var room_code = data.room_code.toString();
 
-    console.log('Player ' + player_name + ' is connecting to room '
-                + room_code + '.');
-
-    // Connect player to room if possible, otherwise send error.
-    ifJoinRoom(room_code, player_name);
+    if(player_name.length <= STRING_LEN) {
+      console.log('Player ' + player_name + ' is connecting to room '
+                  + room_code + '.');
+
+      // Connect player to room if possible, otherwise send error.
+      ifJoinRoom(room_code, player_name);
+    } else {
+      client.emit('could_not_join_room');
+    }
   });
 
   // Create a new room if possible.
   client.on('create_room', function(data) {
     var player_name = data.player_name.toString();
     var room_code = data.room_code.toString();
 
-    console.log('Creating room. Name: ' + room_code);
-
-    if(createRoom(room_code)) {
-      ifJoinRoom(room_code, player_name);
+    if(room_code.length <= STRING_LEN) {
+      console.log('Creating room. Name: ' + room_code);
+
+      if(createRoom(room_code)) {
+        ifJoinRoom(room_code, player_name);
+      } else {
+        client.emit('could_not_create_room');
+      }
     } else {
       client.emit('could_not_create_room');
     }
@@ -415,7 +424,7 @@ io.sockets.on('connection', function(client) {
       // Add player to room
       joinRoom(room, player);
       // Notify client
-      client.emit('joined_room', player);
+      client.emit('joined_room', {player, room_name});
     } else {
       client.emit('could_not_join_room');
     }