forked from capnmidnight/Calla
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
300 lines (266 loc) · 15.1 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
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
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
<!DOCTYPE html>
<html lang="en-us">
<head prefix="og: http://ogp.me/ns#">
<meta charset="utf-8">
<title>Calla: Spatialized Voice Chat for Meetups</title>
<meta name="description" content="Voice chat with an RPG map. Volume scales with distance from other users. Walk around, talk to folks, have private conversations by huddling in a corner, or drop in on other conversations. Ideal for meetups!" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://www.calla.chat" />
<meta property="og:site_name" content="Calla.chat" />
<meta property="og:title" content="Calla: Spatialized Voice Chat for Meetups" />
<meta property="og:description" content="Voice chat with an RPG map. Volume scales with distance from other users. Walk around, talk to folks, have private conversations by huddling in a corner, or drop in on other conversations. Ideal for meetups!" />
<meta property="og:image" content="https://www.calla.chat/repo-preview.jpg" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:domain" content="Calla.chat" />
<meta name="twitter:title" content="Calla: Spatialized Voice Chat for Meetups" />
<meta name="twitter:description" content="Voice chat with an RPG map. Volume scales with distance from other users. Walk around, talk to folks, have private conversations by huddling in a corner, or drop in on other conversations. Ideal for meetups!" />
<meta name="twitter:image" content="https://www.calla.chat/repo-preview.jpg" />
<meta name="twitter:creator" content="@Sean_McBeth" />
<meta name="viewport" content="width=device-width, shrink-to-fit=0, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<meta name="keywords" content="peer-to-peer, networking, Web applications, WebRTC">
<meta name="msapplication-TileColor" content="#253858">
<meta name="msapplication-TileImage" content="/icons/ms-icon-144x144.png">
<meta name="theme-color" content="#253858">
<link rel="apple-touch-icon" sizes="57x57" href="/icons/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/icons/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/icons/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/icons/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/icons/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/icons/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/icons/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/icons/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="/icons/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="/icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/icons/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/icons/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<script id="app-settings">
const JITSI_HOST = "jitsi.calla.chat",
MOVE_REPEAT = 0.125,
MOVE_TRANSITION_TIME = 0.5;
</script>
<link type="text/css" rel="stylesheet" href="stylesheets/general.css" />
<link type="text/css" rel="stylesheet" href="stylesheets/icons.css" />
<link type="text/css" rel="stylesheet" href="stylesheets/gui.css" />
</head>
<body>
<section id="appView">
<div id="toolbar">
<button type="button" id="muteAudio">🔊</button>
<span>
<button type="button" id="emote" title="Emote">Emote <kbd>(E)</kbd>(@)</button>
<button type="button" id="selectEmoji" title="Select Emoji">🔻</button>
</span>
<span>
<label for="zoom">Zoom:</label>
<input type="number" id="zoom" title="Change map zoom" value="1" min="0.1" max="8" step="0.1" style="width:4em" />
</span>
<button type="button" id="showOptions" title="Show/hide options" accesskey="o">⚙️</button>
<button type="button" id="tweet" title="Share your current room to twitter">
<span style="margin:auto">Share room</span>
<img src="https://cdn2.iconfinder.com/data/icons/minimalism/512/twitter.png" style="height:1.5em" />
</button>
<button type="button" id="leave" title="Leave the room">Leave</button>
<a href="https://github.com/capnmidnight/Calla" target="_blank" rel="noopener">
<span class="icon icon-github" title="Follow Calla on Github">
<span class="accessibility-text">Follow Calla on Github</span>
</span>
</a>
<a href="https://twitter.com/Sean_McBeth" target="_blank" rel="noopener">
<span class="icon icon-twitter" title="Follow @Sean_McBeth on Twitter" />
</a>
</div>
<div id="jitsi"></div>
<canvas id="frontBuffer"></canvas>
<button type="button" id="hideGame" title="Show Jitsi Meet interface">⏸️</button>
</section>
<section id="guiView">
<div id="emoji" style="display:none">
<h1 style="grid-row: 1; grid-column: 1/4">Emoji</h1>
<div class="content" style="grid-row: 2; grid-column: 1/4">
<h2>Recent</h2>
<p class="recent">(None)</p>
</div>
<span class="preview" style="grid-row: 3; grid-column: 1"></span>
<button type="button" class="confirm" style="grid-row: 3; grid-column: 2">OK</button>
<button type="button" class="cancel" style="grid-row: 3; grid-column: 3">Cancel</button>
</div>
<div id="options" style="display:none">
<h1 style="grid-row:1; grid-column:1/4">Options</h1>
<div style="grid-row:2; grid-column:1/4;overflow-y:scroll;">
<h2>Avatar</h2>
<p>
<div>
<label for="avatarURL">Avatar URL:</label>
<input type="text" id="avatarURL" placeholder="(https://example.com/me.png)" />
</div>
or
<div>
<label>Avatar Emoji:</label>
<span id="avatarEmoji">👤</span>
<button type="button" id="selectAvatarEmoji">Select</button>
</div>
</p>
<h2>Interface</h2>
<p>
<label for="fontSize">Font size:</label>
<input type="number" id="fontSize" value="10" min="5" max="32" style="width:3em" />
</p>
<h2>Input</h2>
<h3>Keyboard</h3>
<p>
<label for="keyButtonUp">Up:</label>
<input type="text" id="keyButtonUp" style="width:7em" />
<label for="keyButtonDown">Down:</label>
<input type="text" id="keyButtonDown" style="width:7em" />
<label for="keyButtonLeft">Left:</label>
<input type="text" id="keyButtonLeft" style="width:7em" />
<label for="keyButtonRight">Right:</label>
<input type="text" id="keyButtonRight" style="width:7em" />
</p>
<p>
<label for="keyButtonEmote">Emote:</label>
<input type="text" id="keyButtonEmote" style="width:7em" />
<label for="keyButtonToggleAudio">Toggle audio:</label>
<input type="text" id="keyButtonToggleAudio" style="width:7em" />
</p>
<h3>Gamepad</h3>
<p>
<label for="gamepads">Use gamepad:</label>
<select id="gamepads"></select>
</p>
<p>
<label for="gpButtonUp">Up:</label>
<input type="text" id="gpButtonUp" style="width:3em" />
<label for="gpButtonDown">Down:</label>
<input type="text" id="gpButtonDown" style="width:3em" />
<label for="gpButtonLeft">Left:</label>
<input type="text" id="gpButtonLeft" style="width:3em" />
<label for="gpButtonRight">Right:</label>
<input type="text" id="gpButtonRight" style="width:3em" />
</p>
<p>
<label for="gpButtonEmote">Emote:</label>
<input type="text" id="gpButtonEmote" style="width:3em" />
<label for="gpButtonToggleAudio">Toggle audio:</label>
<input type="text" id="gpButtonToggleAudio" style="width:3em" />
</p>
<h2>Audio</h2>
<p>
<label for="audioInputDevices">Input:</label>
<select id="audioInputDevices"></select>
</p>
<p>
<label for="audioOutputDevices">Output:</label>
<select id="audioOutputDevices"></select>
</p>
<p>
<label for="drawHearing">Draw hearing range:</label>
<input type="checkbox" id="drawHearing" />
<label for="minAudio">Min:</label>
<input type="number" id="minAudio" value="2" min="0" max="100" style="width:3em" />
<label for="maxAudio">Max:</label>
<input type="number" id="maxAudio" value="10" min="0" max="100" style="width:3em" />
<label for="rolloff">Rolloff:</label>
<input type="number" id="rolloff" value="5" min="0.1" max="10" step="0.1" style="width:3em" />
</p>
<h2>Video</h2>
<p>
<button type="button" id="muteVideo" accesskey="v">Enable video</button>
</p>
<p>
<label for="videoInputDevices">Device:</label>
<select id="videoInputDevices"></select>
</p>
</div>
<button type="button" class="confirm" style="grid-row:3; grid-column:3">OK</button>
</div>
<div id="login">
<h1>
Calla
<a href="https://github.com/capnmidnight/Calla" target="_blank" rel="noopener">
<span class="icon icon-github" title="Follow Calla on Github">
<span class="accessibility-text">Follow Calla on Github</span>
</span>
</a>
</h1>
<p>Voice chat with an RPG map. Volume scales with distance from other users. Walk around, talk to folks, have private conversations by huddling in a corner, or drop in on other conversations. Ideal for meetups!</p>
<h2>Login</h2>
<form autocomplete="on" style="
display: grid;
grid-template-columns: 2fr 4fr 2fr;
grid-template-rows: auto;">
<label for="room" style="
grid-column: 1;
grid-row: 1">
Room:
</label>
<select id="existingRooms" style="
grid-column: 2;
grid-row: 1">
<option value="Calla">Calla</option>
<option value="island">Island</option>
<option value="ALXCC">Alexandria Code & Coffee</option>
<option value="Vurv">Vurv</option>
</select>
<input type="text" id="roomName" autocomplete="off" placeholder="(Required)" style="
grid-column: 2;
grid-row: 1;
display: none" />
<button type="button" id="createNewRoom" title="Create a new, temporary room" style="
grid-column: 3">
New
</button>
<label for="user" style="
grid-column: 1;
grid-row: 2">
Name:
</label>
<input type="text" id="userName" placeholder="(Required)" name="userName" style="
grid-column: 2;
grid-row: 2" />
<button type="button" id="connect" disabled style="
grid-column: 3;
grid-row: 2">
Loading...
</button>
</form>
<h2>Preview</h2>
<video src="videos/demo.webm" style="width:100%" loop autoplay controls></video>
<h2>Instructions</h2>
<aside style="border:dashed 2px darkred;background-color:wheat;border-radius:5px;padding:0.5em"><strong>Note:</strong> Calla is built on top of <a href="https://jitsi.org">Jitsi Meet</a>. Jitsi does not support iPhones and iPads.</aside>
<ul>
<li><strong>Be careful in picking your room name</strong>, if you don't want randos to join. Traffic is low right now, but you never know.</li>
<li>Try to <strong>pick a unique user name</strong>. A lot of people use "Test" and then there are a bunch of people with the same name running around.</li>
<li><strong>Open the Options view</strong> to set the URL to the avatar image you would like to use, or to change your microphone settings.</li>
<li><strong>Click on the map</strong> to move your avatar to wherever you want. Movement is instantaneous, with a smooth animation over the transition. Your avatar will stop at walls.</li>
<li>Or, <strong>use the arrow keys</strong> on your keyboard to move.</li>
<li><strong>Click on yourself</strong> to open a list of Emoji. Select an Emoji to float it out into the map.</li>
<li><strong>Hit the E key</strong> to re-emote with your last selected Emoji.</li>
<li>You can <strong>roll your mouse wheel</strong> or <strong>pinch your touchscreen</strong> to zoom in and out of the map view. This is useful for groups of people standing close to each other to see the detail in their Avatar.</li>
<li>You can <strong>click the Pause button (⏸️)</strong> in the upper-right corner to show the default Jitsi Meet interface, in case you need to change any settings there (the game view blocks clicks on the Jitsi Meet interface).</li>
</ul>
<h2>Made by</h2>
<p>
<a href="https://www.seanmcbeth.com" target="_blank" rel="noopener">
<span class="icon icon-shrink" title="Sean T. McBeth" />
</a>
Sean T. McBeth
</p>
<p>
<a href="https://twitter.com/Sean_McBeth" target="_blank" rel="noopener">
<span class="icon icon-twitter" title="Follow @Sean_McBeth on Twitter" />
</a>
Follow @Sean_McBeth on Twitter
</p>
</div>
</section>
<script type="module">
const pageFileName = document.location.pathname.substring(1) || "index.html",
pageName = pageFileName.match(/(\w+)\.html/)[1],
scriptFile = `./scripts/${pageName}.js`;
import(scriptFile);
</script>
</body>
</html>