Untitled

<!DOCTYPE html>
<html>
<head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" type="text/javascript"></script>
  <link rel="stylesheet" href="client.css">
</head>
<body>
  <div class="container">
    <div id = "sidebar"> <!-- sidebar for list of usernames for private chat -->
      <p>test hello</p>
    </div> <!-- end username sidebar -->
    <div id = "createroom">
      <label>Create Room <input type = "text" id = "createdroom" /></label>
      <!--<label>Create Password for Room (Optional) <input type ="text" id = "password" /></label>
      <button onclick= "createPrivateRoom()">Make Private Room</button></br>-->
      <!-- <button id= "create" onclick = "createRoom">Make Public Room</button></br>-->
      <button id= "create">Make Public Room</button></br>
    </div>
    <div id = "message">
      <input type="text" id="message_input"/>
      <button onclick="sendMessage()">send</button></br>
    </div>

    <!-- <div hidden id= "rooms"> -->
    <label>Click these buttons to join each room</label>
    <div id= "rooms">
      <!-- <label>Join a Room: <input type = "text" id = "room" /></label> -->
      <br/>

    </div>
    <div id="createdRooms" > </div>
    <div id="chatlog"></div>
  </div>
</body>
</html>
  <script src="/socket.io/socket.io.js"></script>

  <script type ="text/javascript">

  var socketio = io.connect();
  // class room {
  // constructor(name, owner, password) {
  //    this.name = name;
  //    this.owner= owner;
  //    this.password= password;
  // }};
  document.getElementById("create").addEventListener("click", createRoom());
  var roomList = {
    rooms: [ {
      users: [],
      messages: [],
      name: "Home",
      owner: "",
      public: true,
      password: "",
    }]
  };
  var publicChatRooms = [];
  var privateChatRooms = {};
  var username = "";
  var newRoom = "";
  var currentRoom= "";


  socketio.on("connect", function(data) {
    username = prompt("Enter Username");
    currentRoom = "Home";
    console.log("connecting");
    socketio.emit("addUser", username);
  });

  socketio.on("message_to_client",function(data) {
    //Append an HR thematic break and the escaped HTML of the new message
    document.getElementById("chatlog").appendChild(document.createElement("hr"));
    document.getElementById("chatlog").appendChild(document.createTextNode(data['username']+": "+data['message']));
  });
  socketio.on("username",function(data) {
    document.getElementById("username").appendChild(document.createTextNode(data['username']));
    console.log(data['username']);
  });
  socketio.on("addRoom", function(data) {
    //document.getElementById("rooms").appendChild(document.createTextNode(data['name']));
    var button = document.createElement("input");
    button.type= "button";
    button.value= data["name"];
    button.setAttribute("id", data["name"]);
    // button.addEventListener = "moveUserToRoom()"
    document.getElementById("rooms").hidden = false;
    document.getElementById("rooms").appendChild(button)


  });
  socketio.on('updateRooms', function(roomArray, roomNumber) {
    console.log("updating rooms");
    roomList = roomArray;
    var roomButtons = '';
    for (let i=0; i<roomList.rooms.length; i++) {
      roomButtons += '<div><button>'+roomList.rooms[i].name+'</button></div>';
    }
    document.getElementById("rooms").innerHTML= roomButtons;


    console.log(roomArray);
    console.log(roomNumber);
    for (var i=0; i<roomList.rooms[roomNumber].messages.length; i++) {
      var p= document.createElement("p")
      var text= document.createTextNode(roomList.rooms[roomNumber].messages[i]);
      p.appendChild(text);
      document.getElementById("chatlog").appendChild(p);
      console.log(roomList.rooms[roomNumber].messages[i])
      //console.log(roomList.rooms[0].messages);
    }
  });
  function showUsers(roomList) {
    var string = "";
    for (var i=0; i<roomList.rooms.length; i++) {
      string += roomList.rooms[i].name + ": ";
      for (var j=0; j<roomList.rooms[i].users.length; j++) {
        string += roomList.rooms[i].users[j] + " ";
      }
      string += "\n";
    }
    document.getElementById("chatlog").appendChild(string);
  }
    // for(var i = 0; roomList.rooms[roomNumber].users.length; i++){
      // console.log(roomList.rooms[roomNumber].users[i])
    // }
      // console.log(roomList.rooms[roomNumber].users[0])


  // socketio.on('moveUser', function(data) {
  //   console.log('joining room', createdRoom);
  //   socket.join("createdRoom");
  // });

  function sendMessage(){
    var msg = document.getElementById("message_input").value;
    //var username= document.getElementById("username").value;
    socketio.emit("message_to_server", {message:msg, username:username});
    document.getElementById("message_input").value = "";
  }
  function createRoom(){
    var room = document.getElementById("createdroom").value;
    socketio.emit("create_room", {name:room, owner:username});
    document.getElementById("createdroom").value="";


    }


//   function moveUserToRoom(){
//     document.getElementById("message").hidden=false;
//     document.getElementById("chatlog").hidden=false;
//
//   };
//
//   function createPrivateRoom(){
//     createdRoom= document.getElementById("createdroom").value;
//     password = document.getElementById("password").value;
//     roomList.push({name:createdRoom, owner:username, public: false, password:password});
//     socketio.emit("addRoom_server", {name:createdRoom, owner:username, public: false, password:prompt("Enter password:")});
//     document.getElementById("message").hidden=false;
//     document.getElementById("chatlog").hidden=false;
//     console.log(createdRoom);
//     console.log("");
//     let roomDiv= document.createElement("div");
//     for (let i=0; i<roomList.length; i++) {
//       document.getElementById("rooms").appendChild(roomDiv)
//     }
//     console.log(roomList);
//     console.log(createdRoom);
//     console.log("addRoom_server");
//     console.log();
//
//   }
//   function createPublicRoom(){
//     var createdRoom= document.getElementById("createdroom").value;
//     document.getElementById("message").hidden=false;
//     document.getElementById("chatlog").hidden=false;
//     //parsedRooms.rooms.push({"name":createdRoom, "users":[], "public": true});
//     socketio.emit("addRoom_server", {name:createdRoom, owner:username, public: true, password: ""});
//     console.log(roomList);
//     console.log(createdRoom);
//     console.log();
//
//     var linebr = document.createElement('br');
//     var roomButton = document.createElement('button');
//     var text = document.createTextNode(createdRoom);
//     roomButton.appendChild(text);
//     document.getElementById("rooms").appendChild(roomButton);
//     document.getElementById("rooms").appendChild(linebr);
//     let roomDiv= document.createElement("div");
//     for (let i=0; i<roomList.length; i++) {
//       document.getElementById("rooms").appendChild(roomDiv)
//     }
//
//   }
// ;


  </script>

<!-- </head>
<body>
  <div class="container">
    <div id = "sidebar"> <!-- sidebar for list of usernames for private chat -->
      <!-- <p>test hello</p>
    </div> <!-- end username sidebar -->
    <!-- <div id = "createroom">
      <label>Create Room <input type = "text" id = "createdroom" /></label> --> -->
      <!--<label>Create Password for Room (Optional) <input type ="text" id = "password" /></label>
      <button onclick= "createPrivateRoom()">Make Private Room</button></br>-->
      <!-- <button (id= create) onclick = "createRoom">Make Public Room</button></br>
    </div>
    <div id = "message">
      <input type="text" id="message_input"/>
      <button onclick="sendMessage()">send</button></br>
    </div> -->

    <!-- <div hidden id= "rooms"> -->
    <!-- <label>Click these buttons to join each room</label>
    <div id= "rooms"> -->
      <!-- <label>Join a Room: <input type = "text" id = "room" /></label> -->
      <!-- <br/>

    </div>
    <div id="createdRooms" > </div>
    <div id="chatlog"></div>
  </div>
</body>
</html> --> -->