diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/index.html | 87 | ||||
| -rw-r--r-- | src/index.ts | 168 | ||||
| -rw-r--r-- | src/modules/helpers.ts | 41 | ||||
| -rw-r--r-- | src/modules/messages.ts | 47 |
4 files changed, 197 insertions, 146 deletions
diff --git a/src/index.html b/src/index.html index 8341455..8fa72e0 100644 --- a/src/index.html +++ b/src/index.html @@ -13,7 +13,7 @@ <!-- BLOAT --> <script src="<%= htmlWebpackPlugin.options.staticPath %>/jquery/jquery.js"></script> - <script src="<%= htmlWebpackPlugin.options.staticPath %>/jquery/emoticons-jquery/jquery.cssemoticons.js"></script> + <script src="<%= htmlWebpackPlugin.options.staticPath %>/jquery/emoticons-jquery/jquery.cssemoticons.min.js"></script> <link href="<%= htmlWebpackPlugin.options.staticPath %>/jquery/emoticons-jquery/jquery.cssemoticons.css" rel="stylesheet"> </link> @@ -35,92 +35,11 @@ </div> <div class="viewport"> <div class="overview"> - <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> - <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> - <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> - <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> - <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> - <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> - <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> - <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> - <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> - <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> - <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> - <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> - <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> - <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> - <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> - <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> - <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> - <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> - <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> - <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> - <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> - <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> - <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> - <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> - <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> - <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> - <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> - <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> - <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> - <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> - <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> - <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> - <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> - <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> - <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> - <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> - <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> - <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> - <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> - <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> - <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> - <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> - <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> - <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> - <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> - <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> - <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> - <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> - <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> - <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> - <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> - <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> - <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> - <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> - <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> - <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> - <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> - <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> - <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> - <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> - <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> - <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> - <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> - <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> - <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> - <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> - <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> - <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> - <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> - <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> - <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> - <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> - <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> - <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> - <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> - <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> - <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> - <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> - <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> - <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> - <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> - <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> </div> </div> </div> - <input type="text" name="msg" id="msg" style="width: 570px; display: block; margin: 5px auto;"> + <input type="text" name="msg" id="msg" style="width: 970px; display: block; margin: 5px auto;"> + <span id="error" class="text-center" style="width: 970px; display: block; margin: 5px auto; font-size: 2em; color: red;"></span> </body> </html>
\ No newline at end of file diff --git a/src/index.ts b/src/index.ts index b074be1..670e861 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,64 +1,108 @@ -type Message = { - text: string; - user: string; - color: string; -}; -const url = "http://localhost:5000/"; -const input = document.getElementById("msg") as HTMLInputElement; -let username: string; -let color: string; -color = "#123456"; -// @ts-ignore -const chatListScroll = $("#chatlist").tinyscrollbar(); -function init() { - const username = prompt("Gimme your name: "); - if (username === null) { - document.body.innerHTML = "You should give me your name!"; - return; +import Messages, { Message } from "Modules/messages"; +import Helpers from "Modules/helpers"; + +export default class Irc { + private username: string; + private color: string; + private readonly messages = new Messages(); + private readonly helpers = new Helpers(); + + readonly input = document.getElementById("msg") as HTMLInputElement; + readonly divError = document.getElementById("error") as HTMLDivElement; + + constructor() { + this.username = this.helpers.getUsername; + this.color = this.helpers.getRandomColor; + + if (this.input === null) throw new Error("NoInputError"); + + this.input.onkeyup = (e: KeyboardEvent) => { + if (e.code === "Enter") { + if (this.messageExe(this.input.value) === true) { + if (this.input.value === "") return; + const msg = { + text: this.input.value, + username: this.username, + color: this.color, + time: Date.now(), + }; + this.input.value = ""; + this.messages.sendMessage(msg); + } + } + }; + + this.poll(); + } + + poll(): void { + console.log("polling"); + $.ajax({ + url: this.messages.url + "poll", + success: msg => { + this.messages.addMessage(msg); + const update = + document.activeElement === this.input ? "bottom" : "relative"; + + this.helpers.updateScrollbar(update); + this.poll(); + }, + error: () => { + this.poll(); + }, + timeout: 30000, // 30 seconds + }); + } + + messageExe(msg: string): boolean { + if (msg[0] !== "/") return true; + + const msgToSend: Message = { + time: Date.now(), + color: "black", + username: "Server", + text: "", + }; + + msg = msg.slice(1); + + if (msg.startsWith("quit") === true) { + msgToSend.text = `User ${this.username} has left the chat`; + this.messages.sendMessage(msgToSend); + + this.helpers.suicide( + "Thank you for using this site, you can now safely close it." + ); + } else if (msg.startsWith("color") === true) { + const color = msg.split(" ")[1]; + + if (this.helpers.isColor(color) === true) { + msgToSend.text = `User ${this.username} has changed his color to ${color}`; + this.messages.sendMessage(msgToSend); + + this.color = color; + } else { + this.divError.innerText = "You need to give correct color!"; + } + } else if (msg.startsWith("nick") === true) { + const username = msg.slice(4).trim(); + + if (username === "Server") { + this.divError.innerText = "You have to give legal nick!"; + } else { + msgToSend.text = `User ${this.username} has changed his nick to ${username}`; + this.messages.sendMessage(msgToSend); + + this.username = username; + } + } else { + this.divError.innerText = "Wrong command!"; + } + + setTimeout(() => (this.divError.innerText = ""), 3000); + this.input.value = ""; + return false; } - // @ts-ignore - // chatList.tinyscrollbar(); - // //@ts-ignore - // $("#emot").emoticonize(); - if (input === null) return; - input.onclick = sendMessage; - poll(); -} -function poll() { - $.ajax({ - url: url + "poll", - success: addMessage /* data => { - console.log(data); // { text: "Some data" } -> will be printed in your browser console every 5 seconds - poll(); - } */, - error: () => setTimeout(() => poll(), 1000), - timeout: 30000, // 30 seconds - }); -} -function sendMessage() { - const msg = { - text: input.value, - user: username, - color: color, - }; - fetch(url + "send", { - method: "POST", - headers: { - Accept: "application/json", - "Content-Type": "application/json", - }, - body: JSON.stringify(msg), - }); -} -function addMessage(msg: Message) { - const board = $(".overview")[0]; - const div = document.createElement("div"); - div.innerHTML = JSON.stringify(msg); - board.appendChild(div); - console.log(msg); - // @ts-ignore - $(chatListScroll).data().plugin_tinyscrollbar.update("relative"); - // $(chatListScroll).data().plugin_tinyscrollbar.update("bottom"); - poll(); } -init(); + +new Irc(); diff --git a/src/modules/helpers.ts b/src/modules/helpers.ts new file mode 100644 index 0000000..862f121 --- /dev/null +++ b/src/modules/helpers.ts @@ -0,0 +1,41 @@ +export default class Helpers { + //@ts-expect-error + readonly chatListScroll = $("#chatlist").tinyscrollbar(); + + isColor(strColor: string) { + const s = new Option().style; + s.color = strColor; + return s.color !== ""; + } + + suicide(msg: string): void { + document.body.innerHTML = /* html */ ` + <div class="text-center" style="margin: 45vh auto; font-size: 3em;">${msg}</div> + `; + throw new Error( + "This page has committed suicide by design, that's a feature!" + ); + } + + updateScrollbar(update: string) { + $(this.chatListScroll).data().plugin_tinyscrollbar.update(update); + } + + get getRandomColor(): string { + return "#" + (Math.random().toString(16) + "000000").substring(2, 8); + } + + get getUsername(): string { + let username = prompt("Gimme your name: "); + if (username === null) { + this.suicide("You should give me your name!"); + throw new Error("NoNameError"); + } + username = username.trim(); + if (username === "Server") { + this.suicide("That name is illegal!"); + throw new Error("IllegalNameError"); + } + return username; + } +} diff --git a/src/modules/messages.ts b/src/modules/messages.ts new file mode 100644 index 0000000..4a4b48a --- /dev/null +++ b/src/modules/messages.ts @@ -0,0 +1,47 @@ +// import Irc from "@/index"; + +export default class Messages { + readonly url = "http://localhost:5000/"; + + sendMessage(msg: Message): void { + fetch(this.url + "send", { + method: "POST", + headers: { + Accept: "application/json", + "Content-Type": "application/json", + }, + body: JSON.stringify(msg), + }); + } + + async addMessage(msg: Message): Promise<void> { + const board = $(".overview")[0], + time = new Date(msg.time), + div = document.createElement("div"), + spans = [ + document.createElement("span"), + document.createElement("span"), + document.createElement("span"), + ]; + + let min = new Date().getMinutes().toString(); + min = min.length === 1 ? "0" + min : min; + + spans[0].innerText = `[${time.getHours()}:${min}] `; + spans[1].innerText = `<@${msg.username}> `; + spans[1].style.color = msg.color; + spans[2].innerText = msg.text; + + // @ts-expect-error + $(spans[2]).emoticonize(); + spans.forEach(span => div.appendChild(span)); + + board.appendChild(div); + } +} +export interface Message { + text: string; + color: string; + username: string; + time: number; +} |