forked from piulin/piured
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathonline-multiplayer.html
264 lines (230 loc) · 15.2 KB
/
online-multiplayer.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
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<style type="text/css">
/*html, body{ height: 100%; } */
/*.full-page{ height: 100vh; width: 100vw; }*/
.selector-height {
height: 400px;
}
body {
padding-top: 120px;
overflow: auto;
background-image: url('imgs/bg.png');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
.chat-card {
height: 400px;
}
.scrollable {
overflow-y: auto;
height: 350px;
}
</style>
<title>Online Battle</title>
<script src="Demo/NTP/syncTime.js"></script>
<!-- <script src="Demo/NTP/masterDate.js"></script>-->
<script src="Demo/RemoteConnection/Master.js"></script>
<script src="Demo/RemoteConnection/Slave.js"></script>
<script src="Demo/RemoteConnection/MessageManager.js"></script>
<script src="piured-engine/js/Utils/FileReader.js"></script>
<script src="piured-engine/lib/stats.min.js"></script>
<script src="piured-engine/js/pegjs-ssc-parser/parser/SSCParserClient.js"></script>
<script src="piured-engine/js/Song/Song.js"></script>
<script src="piured-engine/js/Song/NoteData.js"></script>
<script src="Demo/SongPicker/Utils.js"></script>
<script src="Demo/Filter.js"></script>
</head>
<body>
<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark" id="navbar">
<div class="container-fluid">
<a href="index.html" class="navbar-brand mb-0 h1">
<img src="imgs/logo-flat-mono-white.png" class="img-fluid mx-auto d-block" alt="PIURED" style="height: 50px;">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="online-multiplayer.html">Battle</a>
</li>
<li class="nav-item">
<a class="nav-link" aria-current="page" href="local.html">Local</a>
</li>
</ul>
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" aria-current="page" href="about.html">About</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="logo-bg p-3">
<img src="imgs/online-battle-color.png" class="img-fluid mx-auto d-block" alt="PIURED" style="width: 820px;">
</div>
<div id="connectionContainer" class="container h-100">
<div class="row align-items-baseline">
<div class="col-sm-12">
<div class="card col-sm-12 m-4">
<div class="card-header fs-4">
Automatic Player Matching
<span class="badge bg-secondary">New</span>
</div>
<div class="card-body p-5">
<p class="card-text">If you don't feel like sharing invite codes, go ahead and press "Find Mate".
You will be added to a waiting list. If someone else is available, the system will create a battle automatically.</p>
<button onclick="findMate()" id="findMate" class="btn btn-primary" type="button">
<span id="findMateButtonLabel" class="sr-only">Find Mate</span>
</button>
<span class="badge rounded-pill bg-light text-dark m-3">#Waiting: <span id="noPlayersWaiting"></span></span>
<span class="badge rounded-pill bg-light text-dark">#Matches: <span id="noOnlineMatches"></span></span>
<!-- <button class="btn btn-secondary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">No. Players waiting: <span id="noPlayersWaiting">1</span></button>-->
<!-- <button class="btn btn-secondary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">No. Online matches: <span id="noOnlineMatches">2</span></button>-->
</div>
</div>
</div>
<div class="col-sm-12">
<div class="card col-sm-12 m-4">
<div class="card-header fs-4">
Play against a friend via invite sharing
</div>
<div class="row">
<div class="card-body col-sm-6 p-5">
<h5 class="card-title">Create a new Online Battle</h5>
<p class="card-text">To play with a friend you will need to create an online battle, unless you have an invite code. If you don't have one, please,
press "Create Battle" and wait until a new invite code is generated. Then, share it somehow with the friend
you want to play with. He can use it to connect to your battle by typing/pasting the code into the card to the right. </p>
<p>If you don't have friends, consider joining <a href="https://discord.gg/5pJbcEvvMj">PIURED's discord server</a> to find a mate to play with.</p>
<button onclick="connectMaster()" id="masterButton" class="btn btn-primary" type="button">
<span id="masterSpinner" class="spinner-border spinner-border-sm" role="status" aria-hidden="true" style="display: none ;"></span>
<span id="masterButtonLabel" class="sr-only">Create Battle</span>
</button>
</div>
<div class="card-body col-sm-6 p-5">
<h5 class="card-title">Join an Online Battle</h5>
<p class="card-text">If you got an invite code, please, type/paste it in the form below and press "Accept Invite". A confirmation code
will be generated after a few seconds. You will need to send the confirmation code back to the friend that sent you the invite. </p>
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
<div class="input-group me-2 has-validation">
<div class="input-group-text">#</div>
<input id="inviteCodeTextField" type="text" class="form-control" placeholder="Invite code" aria-label="Invite code" aria-describedby="inviteCodeTextField">
<div id="validationInviteCode" class="invalid-feedback">
Invalid invite code
</div>
</div>
<button onclick="connectSlave($('#inviteCodeTextField').val())" id="slaveButton" class="btn btn-primary" type="button">
<span id="slaveSpinner" class="spinner-border spinner-border-sm" role="status" aria-hidden="true" style="display: none ;"></span>
<span id="slaveButtonLabel" class="sr-only">Accept Invite</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--<div id="connectionContainer" class="container h-100">-->
<!-- <div class="row p-3">-->
<!-- <div class="card">-->
<!-- <div class="card-body">-->
<!-- <h5 class="card-title">Battle disabled temporarily</h5>-->
<!-- <p class="card-text"> Stay tuned for new updates at <a href="https://discord.gg/5pJbcEvvMj">PIURED's discord server.</a></p>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!--</div>-->
<div class="modal fade" id="createBattleModal" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false" aria-labelledby="createBattleModal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Invite</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
Here you have the invite code (#)! Send it to your friend somehow. This code is valid for 5 minutes only.
<div class="input-group me-2 p-3">
<div class="input-group-text">#</div>
<input id="generatedInviteCodeTextField" type="text" class="form-control" aria-label="Invite code" aria-describedby="generatedInviteCodeTextField" disabled>
</div>
You need to get a confirmation code (@) from your friend. Once you have it, please, type/paste it in the form below
and press the button "Connect".
<div class="input-group me-2 p-3">
<div class="input-group-text has-validation" >@</div>
<input id="confirmationCodeTextField" type="text" class="form-control" placeholder="Confirmation code" aria-label="Invite code" aria-describedby="confirmationCodeTextField">
<div id="validationConfirmationCode" class="invalid-feedback">
Invalid confirmation code
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
<button id="connectSlaveButton" onclick="addSlave($('#confirmationCodeTextField').val())" class="btn btn-primary" type="button">
<span id="connectSlaveSpinner" class="spinner-border spinner-border-sm" role="status" aria-hidden="true" style="display: none ;"></span>
<span id="connectSlaveButtonLabel" class="sr-only">Connect</span>
</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="joinBattleModal" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false" aria-labelledby="createBattleModal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Join</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
Here you have the confirmation code (@)! Send it to your friend somehow. This code is valid for 5 minutes only.
<div class="input-group me-2 p-3">
<div class="input-group-text">@</div>
<input id="generatedConfirmationCodeTextField" type="text" class="form-control" value="code" aria-label="Invite code" aria-describedby="generatedConfirmationCodeTextField" disabled>
</div>
You should wait here until your friend introduces the confirmation code and the connection is established.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="findMateModal" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false" aria-labelledby="createBattleModal" >
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Finding mate...</h5>
</div>
<div class="modal-body">
<p id="findMateStatus">Finding players...</p>
<br>
You should wait here until we find an opponent for you. <br>
The connection will be established automatically.
</div>
<div class="modal-footer">
<span id="findMateSpinner" class="spinner-border spinner-border-sm" role="status"></span>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer class="text-center text-lg-start bg-light text-muted">
<div class="text-center p-4" style="background-color: white;">
PIURED v1.1.4 <hr>
<a href="https://github.com/piulin/piured" class="text-reset text-decoration-none"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-github" viewBox="0 0 16 16">
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"/>
</svg></a>
<a href="https://discord.gg/5pJbcEvvMj" class="text-reset text-decoration-none p-3"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-discord" viewBox="0 0 16 16">
<path d="M13.545 2.907a13.227 13.227 0 0 0-3.257-1.011.05.05 0 0 0-.052.025c-.141.25-.297.577-.406.833a12.19 12.19 0 0 0-3.658 0 8.258 8.258 0 0 0-.412-.833.051.051 0 0 0-.052-.025c-1.125.194-2.22.534-3.257 1.011a.041.041 0 0 0-.021.018C.356 6.024-.213 9.047.066 12.032c.001.014.01.028.021.037a13.276 13.276 0 0 0 3.995 2.02.05.05 0 0 0 .056-.019c.308-.42.582-.863.818-1.329a.05.05 0 0 0-.01-.059.051.051 0 0 0-.018-.011 8.875 8.875 0 0 1-1.248-.595.05.05 0 0 1-.02-.066.051.051 0 0 1 .015-.019c.084-.063.168-.129.248-.195a.05.05 0 0 1 .051-.007c2.619 1.196 5.454 1.196 8.041 0a.052.052 0 0 1 .053.007c.08.066.164.132.248.195a.051.051 0 0 1-.004.085 8.254 8.254 0 0 1-1.249.594.05.05 0 0 0-.03.03.052.052 0 0 0 .003.041c.24.465.515.909.817 1.329a.05.05 0 0 0 .056.019 13.235 13.235 0 0 0 4.001-2.02.049.049 0 0 0 .021-.037c.334-3.451-.559-6.449-2.366-9.106a.034.034 0 0 0-.02-.019Zm-8.198 7.307c-.789 0-1.438-.724-1.438-1.612 0-.889.637-1.613 1.438-1.613.807 0 1.45.73 1.438 1.613 0 .888-.637 1.612-1.438 1.612Zm5.316 0c-.788 0-1.438-.724-1.438-1.612 0-.889.637-1.613 1.438-1.613.807 0 1.451.73 1.438 1.613 0 .888-.631 1.612-1.438 1.612Z"/>
</svg></a>
</div>
</footer>
</body>
<script src="Demo/OnlineMultiplayer/ViewConnectionManager.js"></script>
</html>