diff options
| -rw-r--r-- | TODO | 4 | ||||
| -rw-r--r-- | src/index.html | 46 | ||||
| -rw-r--r-- | src/main.css | 43 | ||||
| -rw-r--r-- | src/main.ts | 66 |
4 files changed, 141 insertions, 18 deletions
@@ -1,2 +1,4 @@ Get older messages -If there is only one message the chatwindow does not update
\ No newline at end of file +If there is only one message the chatwindow does not update +Add support for displaying known users (later to be users in channel) and information about them +Change current user data (Desc, Status, StatusText, DisplayName)
\ No newline at end of file diff --git a/src/index.html b/src/index.html index ffcbea9..2b44e74 100644 --- a/src/index.html +++ b/src/index.html @@ -6,16 +6,40 @@ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fork-awesome@1.2.0/css/fork-awesome.min.css" integrity="sha256-XoaMnoYC5TH6/+ihMEnospgm0J1PM/nioxbOUdnM8HY=" crossorigin="anonymous"> </head> <body onload="load()"> - <span id="navbar"> - <span>Localhost</span> - <span id = "info" class="UI">Server Information: </span> - <span>username: <input id="username"></span> - </span> - <span id="new_messages" class="new_messages">New Messages</span> - <div id="chatwindow" onscroll="onscrollchat()"></div> - <span id="inputbox"> - <textarea id="input" rows="2.5" onkeydown="inputkey(event)" onkeyup="clearnewlineinput()"></textarea> - <button onclick="send()">Send</button> - </span> + <div id="leftpane"> + <span class="navbar center"> + <span>Localhost</span> + </span> + <span id="channelsbox"> + <span>Only one channel atm</span> + </span> + <span id="usersettings"> + <span>username: <input id="username"></span> + </span> + </div> + <div id="channel"> + <span class="navbar center"> + <span> + <button id="toggleleftpane" onclick="toggleleftpane()"> + <i class="fa fa-align-left" aria-hidden="true"></i> + </button> + </span> + <span id = "info" class="UI">Server Information: </span> + <span> + <button id="toggleusers" onclick="togglerightpane()"> + <i class="fa fa-users" aria-hidden="true"></i> + </button> + </span> + </span> + <span id="new_messages" class="new_messages">New Messages</span> + <div id="chatwindow" onscroll="onscrollchat()"></div> + <span id="inputbox"> + <textarea id="input" rows="2.5" onkeydown="inputkey(event)" onkeyup="clearnewlineinput()"></textarea> + <button onclick="send()">Send</button> + </span> + </div> + <div id="rightpane"> + <span class="navbar center">Users</span> + </div> </body> </html> diff --git a/src/main.css b/src/main.css index 98c2511..1ce0122 100644 --- a/src/main.css +++ b/src/main.css @@ -67,7 +67,7 @@ margin: 2px; } -#navbar { +.navbar { border-bottom: 2px solid black; width: 100%; display: inline-block; @@ -95,7 +95,7 @@ body { display: flex; - flex-direction: column; + flex-direction: row; max-height: 100vh; } @@ -140,4 +140,43 @@ body { } .reply_highlight { background-color: lightblue; +} + +#channel { + display: flex; + flex-direction: column; + max-height: 100vh; + flex-grow: 1; + flex-basis: 90vw; +} +#rightpane { + flex-basis: 20vw; + display: none; + flex-direction: column; + max-width: 20vw; + border-left: 2px solid black; +} + +.center { + text-align: center; +} + +#leftpane { + display: flex; + flex-direction: column; + flex-basis: 20vw; + flex-grow: 0; + border-right: 2px solid black; +} +#channelsbox { + flex-basis: 90vh; +} +#usersettings { + flex-basis: 15vh; + border-top: 2px solid black; +} + +input#username { + max-width: 50%; + border-bottom: 1px dotted black; }
\ No newline at end of file diff --git a/src/main.ts b/src/main.ts index e0f768d..c6ec627 100644 --- a/src/main.ts +++ b/src/main.ts @@ -22,6 +22,7 @@ const messages = new Map<number, Message>(); const users = new Map<number, User>(); let sent = false; const host = location.protocol + "//" + location.host; +let socket: WebSocket; function xhttp_request(location: string): Promise<any> { @@ -462,16 +463,73 @@ function getelementbyid(s: string): any { } } +function togglerightpane(): void { + let window = getelementbyid("rightpane"); + if (window.style.display != "flex") { + window.style.display = "flex" + } else { + window.style.display = "" + } +} +function toggleleftpane(): void { + let window = getelementbyid("leftpane"); + if (window.style.display != "none") { + window.style.display = "none" + } else { + window.style.display = "" + } +} + +function sleep(ms) { + return new Promise(resolve => setTimeout(resolve, ms)); +} + +async function ws_connect(t: number): Promise<WebSocket> { + await sleep(t * 1000); + + return new WebSocket('ws://localhost:8001') +} + +function ws_setup(t: number = 0) { + ws_connect(t).then((sock) => { + socket = sock; + + socket.addEventListener('message', (event) => { + // let newest = JSON.parse(event.data) + get_newest_messages(); + }); + + socket.addEventListener('close', (event) => { + console.log('Connection closed'); + + if (t + 5 > 15) { + alert("Server timed out. Refresh page to try again"); + } else { + console.log('Retrying in: ', t + 5); + ws_setup(t + 5); + } + + }); + + socket.addEventListener('open', (event) => { + get_newest_messages(); + }); + }) + + +} + function load(): void { xhttp_request("").then((server_info) => { getelementbyid("info").innerHTML += server_info.version + ", " + server_info.name + ", users: " + server_info.users; - // Get ready for websockets implementation in rocket_test 0.3 - if (server_info.version[2] < 3 ) { - const interval = setInterval(get_newest_messages, 1000); + // Version 0.3.x implements websockets + if (server_info.version[2] < 3 || server_info.version[0] > 1) { + const interval = setInterval(get_newest_messages, 2000); } else { - // Initiate websocket "polling" + ws_setup(); } }) + } |