-
Notifications
You must be signed in to change notification settings - Fork 6
/
index.html
133 lines (116 loc) · 3.95 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>APOSTLEAI</title>
<script src="js/jquery-3.6.0.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" media="screen" href="css/main.css" />
<link rel="shortcut icon" href="assets/favicon.ico" type="image/x-icon" />
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css2?family=Carrois+Gothic&display=swap"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css2?family=Special+Elite&display=swap"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css2?family=Oswald&display=swap"
rel="stylesheet"
/>
</head>
<body>
<div class="eye">
<div class="shut">
<span></span>
</div>
<div class="ball"></div>
</div>
<div class="title"></div>
<p class="textScramble talkingpoints"></p>
<script src="js/scramble.js"></script>
<div id="messageContainer" class="messageContainer">
<div id="chat" class="chat">
<div id="messages" class="messages"></div>
<input
id="message"
type="text"
name="message"
placeholder="Speak your mind..."
autocomplete="off"
autofocus="true"
/>
<button id="chatButton" type="submit">Send Message</button>
<a id="saveChat" href="#" download="chatLog.txt">
<button>Save Chat Log</button>
</a>
</div>
</div>
<!-- importing porterStemming and chat log this way lets us use the functions within our inputs -->
<script src="/js/saveChat.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script>
// main script body
// import the socket object for socket calls
var socket = io();
// Jquery identifiers for dom objects
var sendChat = $("#chatButton")[0];
var input = $("#message")[0];
var messages = $("#messages")[0];
// user input
$(document).on("keypress", function (e) {
if (e.which == 13) {
if (input.value) {
let data = {
sender: "user",
msg: input.value,
};
socket.emit("message", data);
input.value = "";
}
}
});
sendChat.onclick = function () {
if (input.value) {
let data = {
sender: "user",
msg: input.value,
};
socket.emit("message", data);
input.value = "";
}
};
// display messages
socket.on("message", function (data) {
displayMessage(data);
saveChatLog(data.sender + ": " + data.msg);
});
function displayMessage(data) {
/* note that the message stream that comes through is
a json object with sender and msg attributes */
let messageDiv = document.createElement("div");
if (data.sender == "user") {
messageDiv.id = "user";
messageDiv.className = "user response box sb1";
// This includes an image for the user (in assets/)
messageDiv.innerHTML = `<span id="msgSpan">${data.msg}</span><img src="assets/user.png" class="avatar">`;
} else {
let messageImg = document.createElement("img");
let messageText = document.createElement("span");
messageDiv.id = "bot";
messageImg.src = "assets/paul.jpg";
messageImg.className = "avatar";
messageDiv.className = "bot response box sb2";
messageText.innerText = data.msg;
messageDiv.appendChild(messageImg);
messageDiv.appendChild(messageText);
}
messages.appendChild(messageDiv);
messages.scrollTop = messages.scrollHeight - messages.clientHeight;
}
</script>
</body>
</html>