-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
160 lines (145 loc) · 8.23 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>The Joy Buzz</title>
<link rel="icon" type="image/x-icon" href="favicon.ico">
<!-- Font Awesome icons (free version)-->
<script src="https://use.fontawesome.com/releases/v6.3.0/js/all.js" crossorigin="anonymous"></script>
<!-- Simple line icons-->
<link href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.5.5/css/simple-line-icons.min.css" rel="stylesheet" />
<!-- Google fonts-->
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css" />
<!-- Core theme CSS (includes Bootstrap)-->
<link href="css/styles.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script type="text/javascript" src="web-notification.js"></script>
<script src="https://joycon.js.org/Joycon.min.js"></script>
<link rel="manifest" href="manifest.json">
<script>
//manually ask for notification permissions (invoked automatically if needed and allowRequest=true)
webNotification.requestPermission(function onRequest(granted) {
if (granted) {
console.log('Permission Granted.');
} else {
console.log('Permission Not Granted.');
}
});
const controllers = Joycon.controllers;
const buttons = Object.values(Joycon.buttonMap);
buttons.forEach(button => {
controllers.on.press(button, (value) => {
if (['a', 'b', 'x', 'y'].includes(button)) {
$("#teambstatus").text("Team B (Right Controller) is connected!");
webNotification.showNotification('Team B has buzzed!', {
body: 'Team B has buzzed in!',
icon: 'favicon.ico',
onClick: function onNotificationClicked() {
console.log('Notification clicked.');
},
autoClose: 4000 //auto close the notification after 4 seconds (you can manually close it via hide function)
}, function onShow(error, hide) {
if (error) {
window.alert('Unable to show notification: ' + error.message);
} else {
console.log('Notification Shown.');
setTimeout(function hideNotification() {
console.log('Hiding notification....');
hide(); //manually close the notification (you can skip this if you use the autoClose option)
}, 5000);
}
});
} else {
$("#teamastatus").text("Team A (Left Controller) is connected!");
webNotification.showNotification('Team A has buzzed!', {
body: 'Team A has buzzed in!',
icon: 'favicon.ico',
onClick: function onNotificationClicked() {
console.log('Notification clicked.');
},
autoClose: 4000 //auto close the notification after 4 seconds (you can manually close it via hide function)
}, function onShow(error, hide) {
if (error) {
window.alert('Unable to show notification: ' + error.message);
} else {
console.log('Notification Shown.');
setTimeout(function hideNotification() {
console.log('Hiding notification....');
hide(); //manually close the notification (you can skip this if you use the autoClose option)
}, 5000);
}
});
}
controllers.vibrate({ preset: 'medium' }, 250);
// Wait so players can't spam the buttons
(async () => await new Promise(resolve => setTimeout(resolve, 500)))();
});
});
controllers.on.connect((controller) => {
console.log('Controller connected!', controller);
Notification.requestPermission().then(function(getperm)
{
console.log('Perm granted', getperm)
});
});
controllers.on.disconnect((controller) => {
console.log('Controller disconnected!', controller);
var cID = controller.id;
if (cID.includes("Right")) {
$("#teambstatus").text("Team B (Right Controller) is disconnected");
} else {
$("#teamastatus").text("Team A (Left Controller) is disconnected");
}
});
</script>
<script>
if ("serviceWorker" in navigator) {
// register service worker
navigator.serviceWorker.register("sw.js");
}
</script>
</head>
<body id="page-top">
<!-- Header-->
<header class="masthead d-flex align-items-center">
<div class="container px-4 px-lg-5 text-center">
<h1 class="mb-1">The Joy Buzz</h1>
<h3 class="mb-5"><em>Turn broken and unused Nintendo JoyCons into a fun quiz game!</em></h3>
<h3 class="mb-5"><em>Here's the guide on how:</em></h3>
<h3 class="mb-5"><em>Connect your JoyCons using Bluetooth! Once connected press any button to connect them to this website. Their status is displayed below.</em></h3>
<h3 class="mb-5"><em>When prompted, allow notifications</em></h3>
<h3 class="mb-5"><em>If your browser supports installing The Joy Buzz as an app, click the install button in the URL bar! Now The Joy Buzz can run minimized and in the background!</em></h3>
<h4><span id="teamastatus" class="label label-info">Team A (Left Controller) is disconnected</span></h4>
<h4><span id="teambstatus" class="label label-info">Team B (Right Controller) is disconnected</span></h4>
</div>
</header>
<!-- About-->
<section class="content-section bg-light" id="about">
<div class="container px-4 px-lg-5 text-center">
<div class="row gx-4 gx-lg-5 justify-content-center">
<div class="col-lg-10">
<h2>JoyCon controllers for the Nintendo Switch can have a second life as quiz buzzers!</h2>
<p class="lead mb-5">
As these devices age, children grow bored with them, or as they break these devices become ewaste. Teachers can collect these broken or unused JoyCons to create new activites for their students! Solutions like these also reduce the waste caused by faulty controllers, such as joystick drift which has been investigated by consumer groups: <a href="https://screenrant.com/nintendo-switch-joy-con-drift-eu-investigation-beuc/">JoyCon joystick drift investigation</a>
</p>
</div>
</div>
</div>
</section>
<!-- Footer-->
<footer class="footer text-center">
<div class="container px-4 px-lg-5">
<p class="text-muted small mb-0">A project by Kevin Loeffler. Check out my other projects <a href="https://kevinloeffler.com/">here</a>!</p>
</div>
</footer>
<!-- Scroll to Top Button-->
<a class="scroll-to-top rounded" href="#page-top"><i class="fas fa-angle-up"></i></a>
<!-- Bootstrap core JS-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<!-- Core theme JS-->
<script src="js/scripts.js"></script>
</body>
</html>