-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
244 lines (218 loc) · 27.5 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
<!DOCTYPE html>
<html id="html" lang="en" style="height: -webkit-fill-available; max-height: -webkit-fill-available">
<head>
<title>PlayScript</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="styles.css">
</head>
<body id="body" scroll="no" style="overflow: hidden; height: -webkit-fill-available; max-height: -webkit-fill-available">
<div id="desktop">
<div class="overlay" id="final">
<div class="title">Thanks for playing</div>
<div class="placings">
<div class="horizontal">
<div class="text">1.</div>
<img id="place1" class="placing">
</div>
<div class="Hdivider">_</div>
<div class="horizontal">
<div class="text">2.</div>
<img id="place2" class="placing">
</div>
<div class="Hdivider">_</div>
<div class="horizontal">
<div class="text">3.</div>
<img id="place3" class="placing">
</div>
<div class="Hdivider">_</div>
<div class="horizontal">
<div class="text">4.</div>
<img id="place4" class="placing">
</div>
</div>
<div id="start" onclick="restart()">Play again!</div>
</div>
<div class="overlay" id="intro">
<div class="title">Welcome to PlayScript</div>
<div class="infographs">
<div class="infograph">
<div class="step">Use your phones<br>as remote controls</div>
<div class="illustration" id="qrcode"></div>
</div>
<div class="Vdivider"></div>
<div class="infograph">
<div class="step">Join with 4 players<br>to start the game</div>
<div id="joined">
<img draggable="false" class="join" id="join1" src="visuals/vectors/soccer.svg">
<img draggable="false" class="join" id="join2" src="visuals/vectors/volley.svg">
<img draggable="false" class="join" id="join3" src="visuals/vectors/tennis.svg">
<img draggable="false" class="join" id="join4" src="visuals/vectors/basketball.svg">
</div>
</div>
<div class="Vdivider"></div>
<div class="infograph">
<div class="step">Last player still alive<br>wins the game!</div>
<div class="illustration" style="background-image: url(visuals/images/winner.png)"></div>
</div>
</div>
</div>
<div id="player1" class="playfield" style="background-image: url(visuals/vectors/soccer_bgBig.svg)">
<img draggable="false" id="circle1" class="circle" src="visuals/vectors/soccer.svg">
</div>
<div id="player2" class="playfield" style="background-image: url(visuals/vectors/volley_bgBig.svg)">
<img draggable="false" id="circle2" class="circle" src="visuals/vectors/volley.svg">
</div>
<div id="player3" class="playfield" style="background-image: url(visuals/vectors/tennis_bgBig.svg)">
<img draggable="false" id="circle3" class="circle" src="visuals/vectors/tennis.svg">
</div>
<div id="player4" class="playfield" style="background-image: url(visuals/vectors/basketball_bgBig.svg)">
<img draggable="false" id="circle4" class="circle" src="visuals/vectors/basketball.svg">
</div>
</div>
<div id="mobile">
<div class="menu">
<div id="segments">
<div id="swipe" style="margin-left: 1.25vw" class="segment selected" onclick="interact(this.id)">Swipe</div>
<div id="motion" class="segment" onclick="interact(this.id)">Motion</div>
<div id="vision" style="margin-right: 1.25vw" class="segment" onclick="interact(this.id)">Vision</div>
</div>
</div>
<svg id="gesture" viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
<path id="dot1" d="M50 25 C50 11.193 38.807 0 25 0 11.193 0 0 11.193 0 25 0 38.807 11.193 50 25 50 38.807 50 50 38.807 50 25 Z" fill="#e6f4ff" fill-opacity="1" stroke="none"/>
<path id="dot2" d="M155 25 C155 11.193 143.807 0 130 0 116.193 0 105 11.193 105 25 105 38.807 116.193 50 130 50 143.807 50 155 38.807 155 25 Z" fill="#e6f4ff" fill-opacity="1" stroke="none"/>
<path id="dot3" d="M261 25 C261 11.193 249.807 0 236 0 222.193 0 211 11.193 211 25 211 38.807 222.193 50 236 50 249.807 50 261 38.807 261 25 Z" fill="#e6f4ff" fill-opacity="1" stroke="none"/>
<path id="dot4" d="M366 25 C366 11.193 354.807 0 341 0 327.193 0 316 11.193 316 25 316 38.807 327.193 50 341 50 354.807 50 366 38.807 366 25 Z" fill="#e6f4ff" fill-opacity="1" stroke="none"/>
<path id="dot5" d="M472 25 C472 11.193 460.807 0 447 0 433.193 0 422 11.193 422 25 422 38.807 433.193 50 447 50 460.807 50 472 38.807 472 25 Z" fill="#e6f4ff" fill-opacity="1" stroke="none"/>
<path id="dot6" d="M577 25 C577 11.193 565.807 0 552 0 538.193 0 527 11.193 527 25 527 38.807 538.193 50 552 50 565.807 50 577 38.807 577 25 Z" fill="#e6f4ff" fill-opacity="1" stroke="none"/>
<path id="dot7" d="M683 25 C683 11.193 671.807 0 658 0 644.193 0 633 11.193 633 25 633 38.807 644.193 50 658 50 671.807 50 683 38.807 683 25 Z" fill="#e6f4ff" fill-opacity="1" stroke="none"/>
<path id="dot8" d="M788 25 C788 11.193 776.807 0 763 0 749.193 0 738 11.193 738 25 738 38.807 749.193 50 763 50 776.807 50 788 38.807 788 25 Z" fill="#e6f4ff" fill-opacity="1" stroke="none"/>
<path id="dot9" d="M894 25 C894 11.193 882.807 0 869 0 855.193 0 844 11.193 844 25 844 38.807 855.193 50 869 50 882.807 50 894 38.807 894 25 Z" fill="#e6f4ff" fill-opacity="1" stroke="none"/>
<path id="dot10" d="M1000 25 C1000 11.193 988.807 0 975 0 961.193 0 950 11.193 950 25 950 38.807 961.193 50 975 50 988.807 50 1000 38.807 1000 25 Z" fill="#e6f4ff" fill-opacity="1" stroke="none"/>
<path id="dot11" d="M50 131 C50 117.193 38.807 106 25 106 11.193 106 0 117.193 0 131 0 144.807 11.193 156 25 156 38.807 156 50 144.807 50 131 Z" fill="#e6f4ff" fill-opacity="1" stroke="none"/>
<path id="dot12" d="M155 131 C155 117.193 143.807 106 130 106 116.193 106 105 117.193 105 131 105 144.807 116.193 156 130 156 143.807 156 155 144.807 155 131 Z" fill="#e6f4ff" fill-opacity="1" stroke="none"/>
<path id="dot13" d="M261 131 C261 117.193 249.807 106 236 106 222.193 106 211 117.193 211 131 211 144.807 222.193 156 236 156 249.807 156 261 144.807 261 131 Z" fill="#e6f4ff" fill-opacity="1" stroke="none"/>
<path id="dot14" d="M366 131 C366 117.193 354.807 106 341 106 327.193 106 316 117.193 316 131 316 144.807 327.193 156 341 156 354.807 156 366 144.807 366 131 Z" fill="#e6f4ff" fill-opacity="1" stroke="none"/>
<path id="dot15" d="M472 131 C472 117.193 460.807 106 447 106 433.193 106 422 117.193 422 131 422 144.807 433.193 156 447 156 460.807 156 472 144.807 472 131 Z" fill="#e6f4ff" fill-opacity="1" stroke="none"/>
<path id="dot16" d="M577 131 C577 117.193 565.807 106 552 106 538.193 106 527 117.193 527 131 527 144.807 538.193 156 552 156 565.807 156 577 144.807 577 131 Z" fill="#e6f4ff" fill-opacity="1" stroke="none"/>
<path id="dot17" d="M683 131 C683 117.193 671.807 106 658 106 644.193 106 633 117.193 633 131 633 144.807 644.193 156 658 156 671.807 156 683 144.807 683 131 Z" fill="#e6f4ff" fill-opacity="1" stroke="none"/>
<path id="dot18" d="M788 131 C788 117.193 776.807 106 763 106 749.193 106 738 117.193 738 131 738 144.807 749.193 156 763 156 776.807 156 788 144.807 788 131 Z" fill="#e6f4ff" fill-opacity="1" stroke="none"/>
<path id="dot19" d="M894 131 C894 117.193 882.807 106 869 106 855.193 106 844 117.193 844 131 844 144.807 855.193 156 869 156 882.807 156 894 144.807 894 131 Z" fill="#e6f4ff" fill-opacity="1" stroke="none"/>
<path id="dot20" d="M1000 131 C1000 117.193 988.807 106 975 106 961.193 106 950 117.193 950 131 950 144.807 961.193 156 975 156 988.807 156 1000 144.807 1000 131 Z" fill="#e6f4ff" fill-opacity="1" stroke="none"/>
<path id="dot21" d="M50 237 C50 223.193 38.807 212 25 212 11.193 212 0 223.193 0 237 0 250.807 11.193 262 25 262 38.807 262 50 250.807 50 237 Z" fill="#e6f4ff" fill-opacity="1" stroke="none"/>
<path id="dot22" d="M155 237 C155 223.193 143.807 212 130 212 116.193 212 105 223.193 105 237 105 250.807 116.193 262 130 262 143.807 262 155 250.807 155 237 Z" fill="#e6f4ff" fill-opacity="1" stroke="none"/>
<path id="dot23" d="M261 237 C261 223.193 249.807 212 236 212 222.193 212 211 223.193 211 237 211 250.807 222.193 262 236 262 249.807 262 261 250.807 261 237 Z" fill="#e6f4ff" fill-opacity="1" stroke="none"/>
<path id="dot24" d="M366 237 C366 223.193 354.807 212 341 212 327.193 212 316 223.193 316 237 316 250.807 327.193 262 341 262 354.807 262 366 250.807 366 237 Z" fill="#e6f4ff" fill-opacity="1" stroke="none"/>
<path id="dot25" d="M472 237 C472 223.193 460.807 212 447 212 433.193 212 422 223.193 422 237 422 250.807 433.193 262 447 262 460.807 262 472 250.807 472 237 Z" fill="#e6f4ff" fill-opacity="1" stroke="none"/>
<path id="dot26" d="M577 237 C577 223.193 565.807 212 552 212 538.193 212 527 223.193 527 237 527 250.807 538.193 262 552 262 565.807 262 577 250.807 577 237 Z" fill="#e6f4ff" fill-opacity="1" stroke="none"/>
<path id="dot27" d="M683 237 C683 223.193 671.807 212 658 212 644.193 212 633 223.193 633 237 633 250.807 644.193 262 658 262 671.807 262 683 250.807 683 237 Z" fill="#e6f4ff" fill-opacity="1" stroke="none"/>
<path id="dot28" d="M788 237 C788 223.193 776.807 212 763 212 749.193 212 738 223.193 738 237 738 250.807 749.193 262 763 262 776.807 262 788 250.807 788 237 Z" fill="#e6f4ff" fill-opacity="1" stroke="none"/>
<path id="dot29" d="M894 237 C894 223.193 882.807 212 869 212 855.193 212 844 223.193 844 237 844 250.807 855.193 262 869 262 882.807 262 894 250.807 894 237 Z" fill="#e6f4ff" fill-opacity="1" stroke="none"/>
<path id="dot30" d="M1000 237 C1000 223.193 988.807 212 975 212 961.193 212 950 223.193 950 237 950 250.807 961.193 262 975 262 988.807 262 1000 250.807 1000 237 Z" fill="#e6f4ff" fill-opacity="1" stroke="none"/>
<path id="dot31" d="M50 342 C50 328.193 38.807 317 25 317 11.193 317 0 328.193 0 342 0 355.807 11.193 367 25 367 38.807 367 50 355.807 50 342 Z" fill="#e6f4ff" fill-opacity="1" stroke="none"/>
<path id="dot32" d="M155 342 C155 328.193 143.807 317 130 317 116.193 317 105 328.193 105 342 105 355.807 116.193 367 130 367 143.807 367 155 355.807 155 342 Z" fill="#e6f4ff" fill-opacity="1" stroke="none"/>
<path id="dot33" d="M261 342 C261 328.193 249.807 317 236 317 222.193 317 211 328.193 211 342 211 355.807 222.193 367 236 367 249.807 367 261 355.807 261 342 Z" fill="#e6f4ff" fill-opacity="1" stroke="none"/>
<path id="dot34" d="M366 342 C366 328.193 354.807 317 341 317 327.193 317 316 328.193 316 342 316 355.807 327.193 367 341 367 354.807 367 366 355.807 366 342 Z" fill="#e6f4ff" fill-opacity="1" stroke="none"/>
<path id="dot35" d="M472 342 C472 328.193 460.807 317 447 317 433.193 317 422 328.193 422 342 422 355.807 433.193 367 447 367 460.807 367 472 355.807 472 342 Z" fill="#e6f4ff" fill-opacity="1" stroke="none"/>
<path id="dot36" d="M577 342 C577 328.193 565.807 317 552 317 538.193 317 527 328.193 527 342 527 355.807 538.193 367 552 367 565.807 367 577 355.807 577 342 Z" fill="#e6f4ff" fill-opacity="1" stroke="none"/>
<path id="dot37" d="M683 342 C683 328.193 671.807 317 658 317 644.193 317 633 328.193 633 342 633 355.807 644.193 367 658 367 671.807 367 683 355.807 683 342 Z" fill="#e6f4ff" fill-opacity="1" stroke="none"/>
<path id="dot38" d="M788 342 C788 328.193 776.807 317 763 317 749.193 317 738 328.193 738 342 738 355.807 749.193 367 763 367 776.807 367 788 355.807 788 342 Z" fill="#e6f4ff" fill-opacity="1" stroke="none"/>
<path id="dot39" d="M894 342 C894 328.193 882.807 317 869 317 855.193 317 844 328.193 844 342 844 355.807 855.193 367 869 367 882.807 367 894 355.807 894 342 Z" fill="#e6f4ff" fill-opacity="1" stroke="none"/>
<path id="dot40" d="M1000 342 C1000 328.193 988.807 317 975 317 961.193 317 950 328.193 950 342 950 355.807 961.193 367 975 367 988.807 367 1000 355.807 1000 342 Z" fill="#e6f4ff" fill-opacity="1" stroke="none"/>
<path id="dot41" d="M50 448 C50 434.193 38.807 423 25 423 11.193 423 0 434.193 0 448 0 461.807 11.193 473 25 473 38.807 473 50 461.807 50 448 Z" fill="#e6f4ff" fill-opacity="1" stroke="none"/>
<path id="dot42" d="M155 448 C155 434.193 143.807 423 130 423 116.193 423 105 434.193 105 448 105 461.807 116.193 473 130 473 143.807 473 155 461.807 155 448 Z" fill="#e6f4ff" fill-opacity="1" stroke="none"/>
<path id="dot43" d="M261 448 C261 434.193 249.807 423 236 423 222.193 423 211 434.193 211 448 211 461.807 222.193 473 236 473 249.807 473 261 461.807 261 448 Z" fill="#e6f4ff" fill-opacity="1" stroke="none"/>
<path id="dot44" d="M366 448 C366 434.193 354.807 423 341 423 327.193 423 316 434.193 316 448 316 461.807 327.193 473 341 473 354.807 473 366 461.807 366 448 Z" fill="#e6f4ff" fill-opacity="1" stroke="none"/>
<path id="dot45" d="M472 448 C472 434.193 460.807 423 447 423 433.193 423 422 434.193 422 448 422 461.807 433.193 473 447 473 460.807 473 472 461.807 472 448 Z" fill="#e6f4ff" fill-opacity="1" stroke="none"/>
<path id="dot46" d="M577 448 C577 434.193 565.807 423 552 423 538.193 423 527 434.193 527 448 527 461.807 538.193 473 552 473 565.807 473 577 461.807 577 448 Z" fill="#e6f4ff" fill-opacity="1" stroke="none"/>
<path id="dot47" d="M683 448 C683 434.193 671.807 423 658 423 644.193 423 633 434.193 633 448 633 461.807 644.193 473 658 473 671.807 473 683 461.807 683 448 Z" fill="#e6f4ff" fill-opacity="1" stroke="none"/>
<path id="dot48" d="M788 448 C788 434.193 776.807 423 763 423 749.193 423 738 434.193 738 448 738 461.807 749.193 473 763 473 776.807 473 788 461.807 788 448 Z" fill="#e6f4ff" fill-opacity="1" stroke="none"/>
<path id="dot49" d="M894 448 C894 434.193 882.807 423 869 423 855.193 423 844 434.193 844 448 844 461.807 855.193 473 869 473 882.807 473 894 461.807 894 448 Z" fill="#e6f4ff" fill-opacity="1" stroke="none"/>
<path id="dot50" d="M1000 448 C1000 434.193 988.807 423 975 423 961.193 423 950 434.193 950 448 950 461.807 961.193 473 975 473 988.807 473 1000 461.807 1000 448 Z" fill="#e6f4ff" fill-opacity="1" stroke="none"/>
<path id="dot51" d="M50 553 C50 539.193 38.807 528 25 528 11.193 528 0 539.193 0 553 0 566.807 11.193 578 25 578 38.807 578 50 566.807 50 553 Z" fill="#e6f4ff" fill-opacity="1" stroke="none"/>
<path id="dot52" d="M155 553 C155 539.193 143.807 528 130 528 116.193 528 105 539.193 105 553 105 566.807 116.193 578 130 578 143.807 578 155 566.807 155 553 Z" fill="#e6f4ff" fill-opacity="1" stroke="none"/>
<path id="dot53" d="M261 553 C261 539.193 249.807 528 236 528 222.193 528 211 539.193 211 553 211 566.807 222.193 578 236 578 249.807 578 261 566.807 261 553 Z" fill="#e6f4ff" fill-opacity="1" stroke="none"/>
<path id="dot54" d="M366 553 C366 539.193 354.807 528 341 528 327.193 528 316 539.193 316 553 316 566.807 327.193 578 341 578 354.807 578 366 566.807 366 553 Z" fill="#e6f4ff" fill-opacity="1" stroke="none"/>
<path id="dot55" d="M472 553 C472 539.193 460.807 528 447 528 433.193 528 422 539.193 422 553 422 566.807 433.193 578 447 578 460.807 578 472 566.807 472 553 Z" fill="#e6f4ff" fill-opacity="1" stroke="none"/>
<path id="dot56" d="M577 553 C577 539.193 565.807 528 552 528 538.193 528 527 539.193 527 553 527 566.807 538.193 578 552 578 565.807 578 577 566.807 577 553 Z" fill="#e6f4ff" fill-opacity="1" stroke="none"/>
<path id="dot57" d="M683 553 C683 539.193 671.807 528 658 528 644.193 528 633 539.193 633 553 633 566.807 644.193 578 658 578 671.807 578 683 566.807 683 553 Z" fill="#e6f4ff" fill-opacity="1" stroke="none"/>
<path id="dot58" d="M788 553 C788 539.193 776.807 528 763 528 749.193 528 738 539.193 738 553 738 566.807 749.193 578 763 578 776.807 578 788 566.807 788 553 Z" fill="#e6f4ff" fill-opacity="1" stroke="none"/>
<path id="dot59" d="M894 553 C894 539.193 882.807 528 869 528 855.193 528 844 539.193 844 553 844 566.807 855.193 578 869 578 882.807 578 894 566.807 894 553 Z" fill="#e6f4ff" fill-opacity="1" stroke="none"/>
<path id="dot60" d="M1000 553 C1000 539.193 988.807 528 975 528 961.193 528 950 539.193 950 553 950 566.807 961.193 578 975 578 988.807 578 1000 566.807 1000 553 Z" fill="#e6f4ff" fill-opacity="1" stroke="none"/>
<path id="dot61" d="M50 659 C50 645.193 38.807 634 25 634 11.193 634 0 645.193 0 659 0 672.807 11.193 684 25 684 38.807 684 50 672.807 50 659 Z" fill="#e6f4ff" fill-opacity="1" stroke="none"/>
<path id="dot62" d="M155 659 C155 645.193 143.807 634 130 634 116.193 634 105 645.193 105 659 105 672.807 116.193 684 130 684 143.807 684 155 672.807 155 659 Z" fill="#e6f4ff" fill-opacity="1" stroke="none"/>
<path id="dot63" d="M261 659 C261 645.193 249.807 634 236 634 222.193 634 211 645.193 211 659 211 672.807 222.193 684 236 684 249.807 684 261 672.807 261 659 Z" fill="#e6f4ff" fill-opacity="1" stroke="none"/>
<path id="dot64" d="M366 659 C366 645.193 354.807 634 341 634 327.193 634 316 645.193 316 659 316 672.807 327.193 684 341 684 354.807 684 366 672.807 366 659 Z" fill="#e6f4ff" fill-opacity="1" stroke="none"/>
<path id="dot65" d="M472 659 C472 645.193 460.807 634 447 634 433.193 634 422 645.193 422 659 422 672.807 433.193 684 447 684 460.807 684 472 672.807 472 659 Z" fill="#e6f4ff" fill-opacity="1" stroke="none"/>
<path id="dot66" d="M577 659 C577 645.193 565.807 634 552 634 538.193 634 527 645.193 527 659 527 672.807 538.193 684 552 684 565.807 684 577 672.807 577 659 Z" fill="#e6f4ff" fill-opacity="1" stroke="none"/>
<path id="dot67" d="M683 659 C683 645.193 671.807 634 658 634 644.193 634 633 645.193 633 659 633 672.807 644.193 684 658 684 671.807 684 683 672.807 683 659 Z" fill="#e6f4ff" fill-opacity="1" stroke="none"/>
<path id="dot68" d="M788 659 C788 645.193 776.807 634 763 634 749.193 634 738 645.193 738 659 738 672.807 749.193 684 763 684 776.807 684 788 672.807 788 659 Z" fill="#e6f4ff" fill-opacity="1" stroke="none"/>
<path id="dot69" d="M894 659 C894 645.193 882.807 634 869 634 855.193 634 844 645.193 844 659 844 672.807 855.193 684 869 684 882.807 684 894 672.807 894 659 Z" fill="#e6f4ff" fill-opacity="1" stroke="none"/>
<path id="dot70" d="M1000 659 C1000 645.193 988.807 634 975 634 961.193 634 950 645.193 950 659 950 672.807 961.193 684 975 684 988.807 684 1000 672.807 1000 659 Z" fill="#e6f4ff" fill-opacity="1" stroke="none"/>
<path id="dot71" d="M50 764 C50 750.193 38.807 739 25 739 11.193 739 0 750.193 0 764 0 777.807 11.193 789 25 789 38.807 789 50 777.807 50 764 Z" fill="#e6f4ff" fill-opacity="1" stroke="none"/>
<path id="dot72" d="M155 764 C155 750.193 143.807 739 130 739 116.193 739 105 750.193 105 764 105 777.807 116.193 789 130 789 143.807 789 155 777.807 155 764 Z" fill="#e6f4ff" fill-opacity="1" stroke="none"/>
<path id="dot73" d="M261 764 C261 750.193 249.807 739 236 739 222.193 739 211 750.193 211 764 211 777.807 222.193 789 236 789 249.807 789 261 777.807 261 764 Z" fill="#e6f4ff" fill-opacity="1" stroke="none"/>
<path id="dot74" d="M366 764 C366 750.193 354.807 739 341 739 327.193 739 316 750.193 316 764 316 777.807 327.193 789 341 789 354.807 789 366 777.807 366 764 Z" fill="#e6f4ff" fill-opacity="1" stroke="none"/>
<path id="dot75" d="M472 764 C472 750.193 460.807 739 447 739 433.193 739 422 750.193 422 764 422 777.807 433.193 789 447 789 460.807 789 472 777.807 472 764 Z" fill="#e6f4ff" fill-opacity="1" stroke="none"/>
<path id="dot76" d="M577 764 C577 750.193 565.807 739 552 739 538.193 739 527 750.193 527 764 527 777.807 538.193 789 552 789 565.807 789 577 777.807 577 764 Z" fill="#e6f4ff" fill-opacity="1" stroke="none"/>
<path id="dot77" d="M683 764 C683 750.193 671.807 739 658 739 644.193 739 633 750.193 633 764 633 777.807 644.193 789 658 789 671.807 789 683 777.807 683 764 Z" fill="#e6f4ff" fill-opacity="1" stroke="none"/>
<path id="dot78" d="M788 764 C788 750.193 776.807 739 763 739 749.193 739 738 750.193 738 764 738 777.807 749.193 789 763 789 776.807 789 788 777.807 788 764 Z" fill="#e6f4ff" fill-opacity="1" stroke="none"/>
<path id="dot79" d="M894 764 C894 750.193 882.807 739 869 739 855.193 739 844 750.193 844 764 844 777.807 855.193 789 869 789 882.807 789 894 777.807 894 764 Z" fill="#e6f4ff" fill-opacity="1" stroke="none"/>
<path id="dot80" d="M1000 764 C1000 750.193 988.807 739 975 739 961.193 739 950 750.193 950 764 950 777.807 961.193 789 975 789 988.807 789 1000 777.807 1000 764 Z" fill="#e6f4ff" fill-opacity="1" stroke="none"/>
<path id="dot81" d="M50 870 C50 856.193 38.807 845 25 845 11.193 845 0 856.193 0 870 0 883.807 11.193 895 25 895 38.807 895 50 883.807 50 870 Z" fill="#e6f4ff" fill-opacity="1" stroke="none"/>
<path id="dot82" d="M155 870 C155 856.193 143.807 845 130 845 116.193 845 105 856.193 105 870 105 883.807 116.193 895 130 895 143.807 895 155 883.807 155 870 Z" fill="#e6f4ff" fill-opacity="1" stroke="none"/>
<path id="dot83" d="M261 870 C261 856.193 249.807 845 236 845 222.193 845 211 856.193 211 870 211 883.807 222.193 895 236 895 249.807 895 261 883.807 261 870 Z" fill="#e6f4ff" fill-opacity="1" stroke="none"/>
<path id="dot84" d="M366 870 C366 856.193 354.807 845 341 845 327.193 845 316 856.193 316 870 316 883.807 327.193 895 341 895 354.807 895 366 883.807 366 870 Z" fill="#e6f4ff" fill-opacity="1" stroke="none"/>
<path id="dot85" d="M472 870 C472 856.193 460.807 845 447 845 433.193 845 422 856.193 422 870 422 883.807 433.193 895 447 895 460.807 895 472 883.807 472 870 Z" fill="#e6f4ff" fill-opacity="1" stroke="none"/>
<path id="dot86" d="M577 870 C577 856.193 565.807 845 552 845 538.193 845 527 856.193 527 870 527 883.807 538.193 895 552 895 565.807 895 577 883.807 577 870 Z" fill="#e6f4ff" fill-opacity="1" stroke="none"/>
<path id="dot87" d="M683 870 C683 856.193 671.807 845 658 845 644.193 845 633 856.193 633 870 633 883.807 644.193 895 658 895 671.807 895 683 883.807 683 870 Z" fill="#e6f4ff" fill-opacity="1" stroke="none"/>
<path id="dot88" d="M788 870 C788 856.193 776.807 845 763 845 749.193 845 738 856.193 738 870 738 883.807 749.193 895 763 895 776.807 895 788 883.807 788 870 Z" fill="#e6f4ff" fill-opacity="1" stroke="none"/>
<path id="dot89" d="M894 870 C894 856.193 882.807 845 869 845 855.193 845 844 856.193 844 870 844 883.807 855.193 895 869 895 882.807 895 894 883.807 894 870 Z" fill="#e6f4ff" fill-opacity="1" stroke="none"/>
<path id="dot90" d="M1000 870 C1000 856.193 988.807 845 975 845 961.193 845 950 856.193 950 870 950 883.807 961.193 895 975 895 988.807 895 1000 883.807 1000 870 Z" fill="#e6f4ff" fill-opacity="1" stroke="none"/>
<path id="dot91" d="M50 975 C50 961.193 38.807 950 25 950 11.193 950 0 961.193 0 975 0 988.807 11.193 1000 25 1000 38.807 1000 50 988.807 50 975 Z" fill="#e6f4ff" fill-opacity="1" stroke="none"/>
<path id="dot92" d="M155 975 C155 961.193 143.807 950 130 950 116.193 950 105 961.193 105 975 105 988.807 116.193 1000 130 1000 143.807 1000 155 988.807 155 975 Z" fill="#e6f4ff" fill-opacity="1" stroke="none"/>
<path id="dot93" d="M261 975 C261 961.193 249.807 950 236 950 222.193 950 211 961.193 211 975 211 988.807 222.193 1000 236 1000 249.807 1000 261 988.807 261 975 Z" fill="#e6f4ff" fill-opacity="1" stroke="none"/>
<path id="dot94" d="M366 975 C366 961.193 354.807 950 341 950 327.193 950 316 961.193 316 975 316 988.807 327.193 1000 341 1000 354.807 1000 366 988.807 366 975 Z" fill="#e6f4ff" fill-opacity="1" stroke="none"/>
<path id="dot95" d="M472 975 C472 961.193 460.807 950 447 950 433.193 950 422 961.193 422 975 422 988.807 433.193 1000 447 1000 460.807 1000 472 988.807 472 975 Z" fill="#e6f4ff" fill-opacity="1" stroke="none"/>
<path id="dot96" d="M577 975 C577 961.193 565.807 950 552 950 538.193 950 527 961.193 527 975 527 988.807 538.193 1000 552 1000 565.807 1000 577 988.807 577 975 Z" fill="#e6f4ff" fill-opacity="1" stroke="none"/>
<path id="dot97" d="M683 975 C683 961.193 671.807 950 658 950 644.193 950 633 961.193 633 975 633 988.807 644.193 1000 658 1000 671.807 1000 683 988.807 683 975 Z" fill="#e6f4ff" fill-opacity="1" stroke="none"/>
<path id="dot98" d="M788 975 C788 961.193 776.807 950 763 950 749.193 950 738 961.193 738 975 738 988.807 749.193 1000 763 1000 776.807 1000 788 988.807 788 975 Z" fill="#e6f4ff" fill-opacity="1" stroke="none"/>
<path id="dot99" d="M894 975 C894 961.193 882.807 950 869 950 855.193 950 844 961.193 844 975 844 988.807 855.193 1000 869 1000 882.807 1000 894 988.807 894 975 Z" fill="#e6f4ff" fill-opacity="1" stroke="none"/>
<path id="dot100" d="M1000 975 C1000 961.193 988.807 950 975 950 961.193 950 950 961.193 950 975 950 988.807 961.193 1000 975 1000 988.807 1000 1000 988.807 1000 975 Z" fill="#e6f4ff" fill-opacity="1" stroke="none"/>
</svg>
<div id="classification">
<div id="canvas"></div>
<div id="status"></div>
</div>
<div class="menu">
<div id="balls">
<img draggable="false" id="controller1" class="ball" onclick="control(1)" src="visuals/vectors/soccer.svg">
<img draggable="false" id="controller2" class="ball" onclick="control(2)" src="visuals/vectors/volley.svg">
<img draggable="false" id="controller3" class="ball" onclick="control(3)" src="visuals/vectors/tennis.svg">
<img draggable="false" id="controller4" class="ball" onclick="control(4)" src="visuals/vectors/basketball.svg">
</div>
</div>
</div>
<audio id="soccer" src="sounds/soccer.m4a"></audio>
<audio id="volley" src="sounds/volley.m4a"></audio>
<audio id="tennis" src="sounds/tennis.m4a"></audio>
<audio id="basketball" src="sounds/basketball.m4a"></audio>
<audio id="winner" src="sounds/winner.caf"></audio>
<audio id="loser" src="sounds/loser.mp3"></audio>
<audio autoplay loop id="background" src="sounds/background.m4a"></audio>
</body>
<!-- experiment 4 -->
<script src="scripts/jquery.min.js"></script>
<script src="scripts/qrcode.js"></script>
<script src="scripts/qrcode.min.js"></script>
<script src="scripts/mqtt compiler.js"></script>
<script src="scripts/mqtt model.js"></script>
<script src="scripts/data model.js"></script>
<script src="scripts/controller.js"></script>
<script src="scripts/viewport.js"></script>
<script src="scripts/device.js"></script>
<!-- references -->
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/[email protected]/dist/tf.min.js"></script> <!-- machine learning dependency -->
<script src="https://cdn.jsdelivr.net/npm/@teachablemachine/[email protected]/dist/teachablemachine-pose.min.js"></script> <!-- machine learning dependency -->
</html>