-
Notifications
You must be signed in to change notification settings - Fork 6
/
websocket-client.example.html
126 lines (124 loc) · 4.69 KB
/
websocket-client.example.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
<!--
# Dennis MUD
# websocket-client.example.html
# Copyright 2018-2020
# Sei Satzparad
# Parts of codebase borrowed from https://github.com/TKeesh/WebSocketChat
-->
<!DOCTYPE html>
<html>
<head>
<title>Dennis MUD</title>
<meta charset="UTF-8">
<style>
html {
height: 95%;
}
body {
background-color: #808080;
height: 95%;
font-family: monospace;
font-size: 12pt;
}
a:link, a:visited {
color: #0A0A60;
}
a:hover, a:link:hover, a:visited:hover {
color: #802020;
}
#chat_box {
text-align: left;
margin: auto;
margin-top: 10px;
margin-bottom: 15px;
padding: 5px;
background-color: #A0A0A0;
height: 70%;
width: 95%;
border: 1px solid #803030;
overflow: auto;
}
#container {
height: 100%;
max-width: 1200px;
text-align: center;
margin: auto;
}
#input {
background-color: #A0A0A0;
border: 1px solid #803030;
width: 95%;
height: auto;
font-family: monospace;
font-size: 28pt;
}
form.console {
font-family: monospace;
font-size: 28pt;
height: auto;
}
</style>
</head>
<body>
<div id="container">
<div id="supported"></div>
<div id="chat_box">Welcome to the Dennis MUD public test instance, running <a title="GitHub" href="https://github.com/seisatsu/Dennis">Dennis</a>.<br/>
This is experimental software. If something goes wrong, try refreshing the page.<br/>
<br/>
In this game, you use in-game commands to create the content. All content is user-created.<br/>
<br/>
To get started, type "register username password", substituting the username and password you want to use.<br/>
Then type "login username password" with the username and password you chose to log in.<br/>
<br/>
Important commands for the casual player include "look", "go", "say", "action", "chat", "use", and "describe self".<br/>
Read the help pages for the other commands listed by "help" to get started making content.<br/>
Important commands for world-building include "make room", "describe room", "make exit", "describe exit", "make item", and "describe item".<br/>
<br/>
Using the "help" command by itself will list command categories.<br/>
Using "help" on a category will list the commands in that category.<br/>
For example, "help exploration" will list commands related to exploration.<br/>
You can also use help on a particular command to see a manual entry for that command.<br/>
For example, "help make item" will show the manual entry for the "make item" command.<br/>
<br/>
If you get lost, you can use the "xyzzy" command to return to the first room.<br/>
<br/>
Have fun!<br/>
<br/>
</div>
<div style="text-align: center;"><form class="console">
<input id="input" autofocus="autofocus"/>
</form></div>
<br/>
</div>
<script type="text/javascript">
var host = "play.dennismud.xyz";
var port = 37381;
var secure = true;
if(window.WebSocket){
window.addEventListener("load", function() {
if(secure)
var mySocket = new WebSocket("wss://"+host+":"+port+"/ws");
else
var mySocket = new WebSocket("ws://"+host+":"+port+"/ws");
mySocket.onmessage = function (event) {
var output = document.getElementById("chat_box");
output.innerHTML = output.innerHTML + event.data + '<br/><br/>'
output.scrollTop = output.scrollHeight;
};
var form = document.getElementsByClassName("console");
var input = document.getElementById("input");
form[0].addEventListener("submit", function (e) {
input_text = input.value;
input.value = "";
mySocket.send(input_text);
e.preventDefault();
})
});
}
else{
document.getElementById('supported').innerHTML = "Error: WebSockets are NOT supported in current browser"
document.getElementsByClassName('console')[0].style.visibility = 'hidden'
}
</script>
</body>
</html>