-
Notifications
You must be signed in to change notification settings - Fork 10
/
chat.html
117 lines (117 loc) · 6.76 KB
/
chat.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
<!DOCTYPE html>
<html>
<head>
<title>Gametime.js Multiplayer Chat</title>
<style>
body { margin: 0; padding-bottom: 3rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
#form { backdrop-filter: blur(4px); background: rgba(0, 0, 0, 0.15); padding: 0.25rem; position: fixed; bottom: 0; left: 0; right: 0; display: flex; height: 3rem; box-sizing: border-box; } #input { border: none; padding: 0 1rem; flex-grow: 1; border-radius: 2rem; margin: 0.25rem; }
#input:focus { outline: none; } #form button { background: #38b6ff; border: none; padding: 0 1rem; margin: 0.25rem; border-radius: 3px; outline: none; color: #fff; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.24); }
#messages { list-style-type: none; margin: 0; padding: 0; }
#messages > li { padding: 0.5rem 1rem; }
#messages > li:nth-child(odd) { background: #efefef; }
#input:disabled, form button:disabled { opacity: 0.5; }
#close { cursor: pointer; color: #ff4444; user-select: none; }
#option { cursor: pointer; color: #51bfff; user-select: none; }
[id^="NotiflixNotify-"] { border: 2px solid #38b6ff }
a { color: #38b6ff; font-weight: lighter; text-decoration: underline; }
</style>
<script src="https://cdn.jsdelivr.net/gh/Parking-Master/Gametime.js-2.0@latest/gametime.js"></script>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-KDN09VRHPS"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag("js", new Date());
gtag("config", "G-KDN09VRHPS");
</script>
</head>
<script src="https://cdn.jsdelivr.net/gh/notiflix/Notiflix@latest/dist/notiflix-aio-3.2.7.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/Chalarangelo/parse-md-js/parsemd.js"></script>
<script type="text/javascript" src="https://npmcdn.com/[email protected]/dist/parse.min.js"></script>
<script src="chatengine.js"></script>
<script src="userman.js"></script>
<body>
<form id="form" action="" style="top:0;display:inline-flex;align-items:center;justify-content:center;text-align:center">
<span id="close" onclick="parent.postMessage('close', '*')">×</span>          <div id="list" style="color:#38b6ff">There are <span id="users">0</span> user(s) online</div>          <span style="color:#38b6ff">|</span>          <span id="option" onclick="">⊕</span>    <span id="option" onclick="invite()">⊝</span>
</form>
<ul id="messages" style="margin-top:55px"></ul>
<form id="form" action="">
<input id="input" autocomplete="off" style="border: 2px solid #38b6ff; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.24)" /><button class="send">Send</button><button class="disconnect">Disconnect</button>
</form>
<script>
words = [];
fetch("words.json").then((e) => e.json()).then((e) => words = (e.words));
gametime.set("key", "pub-c-61965947-3f17-4d68-97f4-7ff836c75b3e", "sub-c-5ebee0f0-c27d-48c1-bd20-4d167102bcc7");
gametime.set("channel", "world");
gametime.make("message");
function sendMessage(msg) {
msg = "**@" + (userMan.isLoggedIn ? userMan.get("username") : localStorage["bak-username"]) + "**: " + msg;
msg = parseMarkdown(msg);
let i = msg;
words.forEach((x)=>{i=i.replace(x.toString().toLowerCase(),((t)=>{let g="";t.forEach(()=>{g+="*"});return g})(x.toString().toLowerCase().split("")));msg=i});
msg = msg.replace(/\*/gi, "(|-star-|)");
var item = document.createElement("li");
item.innerHTML = msg.replace(/\<\>/gi,"").split("(|-star-|)").join("*");
messages.appendChild(item);
window.scrollTo(0, document.body.scrollHeight);
chatHistory.add(msg);
}
gametime.on("message", sendMessage);
var messages = document.getElementById("messages");
var form = document.getElementById("form");
var input = document.getElementById("input");
chatHistory.get((chatHistory) => {
for (var i = 0; i < chatHistory.split(",").length; i++) {
var item = document.createElement("li");
let msg = decodeURIComponent(chatHistory.split(",")[i]);
item.innerHTML = msg.replace(/\<\>/gi,"").split("(|-star-|)").join("*");
msg && messages.appendChild(item);
window.scrollTo(0, document.body.scrollHeight);
}
});
document.querySelector(".send").onclick = function(event) {
event.preventDefault();
if (input.value) {
gametime.run("message", [input.value]);
input.value = "";
}
};
gametime.connected = true;
gametime.onconnect = () => document.querySelector("#users").textContent = gametime.connectedPlayers;
document.querySelector(".disconnect").onclick = function(event) {
event.preventDefault();
if (gametime.connected) {
if (confirm("Are you sure?")) {
this.textContent = "Reconnect";
gametime.disconnect();
localStorage.removeItem("history");
messages.innerHTML = "";
document.querySelector(".send").disabled = "disabled", input.disabled = "disabled";
gametime.connected = false;
}
} else {
this.textContent = "Connecting...";
setTimeout(() => {
location.reload();
}, 2000);
}
};
Notiflix.Notify.init({plainText:false,messageMaxLength:1000,timeout:3000,position:"right-top",info:{background:"#fff",textColor:"#38b6ff",notiflixIconColor:"#38b6ff"}});
Notiflix.Notify.info("Hi! Please take a minute or two to review the <a href='/legal/roomrules.html' target='_blank'>Room Rules</a>, and make sure to be nice!");
function invite() {
Notiflix.Notify.info("In the input box, type the players username that you want to invite, starting with an \"@\". Then submit it to find an invite.");
let k = sendMessage;
gametime.on("message", function(i) {
if (!i.includes(" ") && !i.includes("@")) {
return;
}
let username = (localStorage["username"] || ("Guest" + Math.random().toString().split(".")[1]));
let uselink = (localStorage["username"] ? true : false);
sendMessage("[@" + (localStorage["username"] || ("Guest" + Math.random().toString().split(".")[1])) + "](" + (uselink ? "/users/#/" + username : "#") + ") invited [" + i.toString() + "](/users/#/" + i.toString() + ") to a 1v1 match")
});
}
</script>
</body>
</html>