-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathmonitor.html
179 lines (169 loc) · 7.23 KB
/
monitor.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
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
<!DOCTYPE html>
<html lang="en">
<head>
<!--
This is the page head - it contains info the browser uses to display the page
You won't see what's in the head in the page
Scroll down to the body element for the page content
-->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" href="https://glitch.com/favicon.ico" />
<!--
This is an HTML comment
You can write text in a comment and the content won't be visible in the page
-->
<title>Hello World!</title>
<!-- Meta tags for SEO and social sharing -->
<link rel="canonical" href="https://glitch-hello-website.glitch.me/" />
<meta
name="description"
content="A simple website, built with Glitch. Remix it to get your own."
/>
<meta name="robots" content="index,follow" />
<meta property="og:title" content="Hello World!" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://glitch-hello-website.glitch.me/" />
<meta
property="og:description"
content="A simple website, built with Glitch. Remix it to get your own."
/>
<meta
property="og:image"
content="https://cdn.glitch.com/605e2a51-d45f-4d87-a285-9410ad350515%2Fhello-website-social.png?v=1616712748147"
/>
<meta name="twitter:card" content="summary" />
<!-- Import the webpage's stylesheet -->
<link rel="stylesheet" href="/style.css" />
<!-- Import the webpage's javascript file -->
<script src="/script.js" defer></script>
</head>
<body>
<!--
This is the body of the page
Look at the elements and see how they appear in the rendered page on the right
Each element is defined using tags, with < and > indicating where each one opens and closes
There are elements for sections of the page, images, text, and more
The elements include attributes referenced in the CSS for the page style
-->
<!-- The wrapper and content divs set margins and positioning -->
<div class="wrapper">
<div class="content" role="main">
<!-- This is the start of content for our page -->
<h1 class="title">WSR Monitor</h1>
<!-- <img
src="https://cdn.glitch.com/a9975ea6-8949-4bab-addb-8a95021dc2da%2Fillustration.svg?v=1618177344016"
class="illustration"
alt="Editor illustration"
title="Click the image!"
/> -->
<!-- Instructions on using this project -->
<div>
<!-- <h2>
Your avatar has been updated, what now?
</h2>
<input id="gotToUrlString" placeholder="Url to go to..."/> <button id="goToUrl">
Go
</button> -->
<table cellspacing="10" style="width: 1400px; table-layout: fixed;">
<tr>
<td style="vertical-align: top"><b>bumpJump</b><div id="bumpJump"></div></td>
<td style="vertical-align: top"><b>frosty</b><div id="frosty"></div></td>
<td style="vertical-align: top"><b>kids</b><div id="kids"></div></td>
<td style="vertical-align: top"><b>leapOfFaith</b><div id="leapOfFaith"></div></td>
<td style="vertical-align: top"><b>slideQuest</b><div id="slideQuest"></div></td>
<td style="vertical-align: top"><b>slideWorks</b><div id="slideWorks"></div></td>
<td style="vertical-align: top"><b>speedster</b><div id="speedster"></div></td>
</tr>
</table>
<p>
</p><br>
<!-- <a class="btn--remix block" href="https://sidequestvr.github.io/Banter/">Banter Documentation</a>
-->
<!-- ADD BUTTON HERE -->
<!-- Once you've added the button from the readme, click it in the page -->
<!-- Check out the function in script.js to see how it works -->
</div>
</div>
</div>
<!-- The footer holds our remix button — you can use it for structure or cut it out ✂ -->
<footer class="footer">
<div class="links"></div>
<a
class="btn--remix"
id="clearButton"
target="_top"
href="#"
>
Clear Leaderboard
</a>
</footer>
<script>
class Monitor{
constructor() {
this.setupWebsocket();
document.getElementById("clearButton").addEventListener('click', () => {
console.log("clear button press");
this.ws.send(JSON.stringify({
path: 'clear',
data: {}
}));
});
}
setupWebsocket(){
return new Promise(resolve => {
this.ws = new WebSocket('wss://sq-wintersport-resort.glitch.me/');
this.ws.onopen = (event) => {
resolve();
};
this.ws.onmessage = (event) => {
if(typeof event.data === 'string'){
this.parseMessage(event.data);
}
}
this.ws.onclose = (event) => {
setTimeout(() => {
this.setupWebsocket();
}, 1000);
};
});
}
parseMessage(data) {
const jsonObj = JSON.parse(data);
const path = jsonObj.path;
const json = jsonObj.data;
if(path == "tick") {
const bumpJump = document.getElementById("bumpJump");
bumpJump.innerHTML = '';
const frosty = document.getElementById("frosty");
frosty.innerHTML = '';
const kids = document.getElementById("kids");
kids.innerHTML = '';
const leapOfFaith = document.getElementById("leapOfFaith");
leapOfFaith.innerHTML = '';
const slideQuest = document.getElementById("slideQuest");
slideQuest.innerHTML = '';
const slideWorks = document.getElementById("slideWorks");
slideWorks.innerHTML = '';
const speedster = document.getElementById("speedster");
speedster.innerHTML = '';
json.bumpJump.forEach(d=>this.createEle(bumpJump, d.name, d.score/1000));
json.frosty.forEach(d=>this.createEle(frosty, d.name, d.score/1000));
json.kids.forEach(d=>this.createEle(kids, d.name, d.score/1000));
json.leapOfFaith.forEach(d=>this.createEle(leapOfFaith, d.name, d.score));
json.slideQuest.forEach(d=>this.createEle(slideQuest, d.name, d.score/1000));
json.slideWorks.forEach(d=>this.createEle(slideWorks, d.name, d.score));
json.speedster.forEach(d=>this.createEle(speedster, d.name, d.score/1000));
}
// console.log(jsonObj);
}
createEle(parent, name, time) {
const ele = document.createElement('div');
ele.innerText = name + ": " + time;
parent.appendChild(ele);
}
}
new Monitor();
</script>
</body>
</html>