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">
  <script src="/socket.io/socket.io.js"></script>

  <script type ="text/javascript">


  // class room {
  // constructor(name, owner, password) {
  //    this.name = name;
  //    this.owner= owner;
  //    this.password= password;
  // }};
  var roomList = {
    rooms: [ {
      users: [],
      messages: [],
      name: "Home",
      owner: "",
      public: true,
      password: "",
    }]
  };
  var publicChatRooms = [];
  var privateChatRooms = {};
  var username = "";
  var newRoom = "";
  var currentRoom= "";


  var socketio = io.connect();
  socketio.on("connect", function(data) {
    username = prompt("Enter Username");
    currentRoom = "Home";
    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 = '';
    var roomName= roomList.rooms[i].name;
    for (let i=0; i<roomList.rooms.length; i++) {
      roomButtons += '<div><button>'+roomList.rooms[i].name+'</button></div>';
    }
    document.getElementById("rooms").innerHTML= roomButtons;

    document.getElementById("chatlog").innerHTML= roomName;

    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);
    }
  });
  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("message_input").value="";
    }

  function enterUsername(){
    username= document.getElementById("username").value;
    socketio.emit("username", {username:username});
    //socketio.emit("username", {username:username} + "has entered the room" );
    document.getElementById("createroom").hidden= false;
    document.getElementById("rooms").hidden=false;
    currentRoom = "public";

    document.getElementById("rooms").hidden = false;
  }

  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)
    }

  }
  function displayRoom(){

  }


  </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 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>