-
Notifications
You must be signed in to change notification settings - Fork 1
/
demo.html
98 lines (67 loc) · 2.38 KB
/
demo.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
<!DOCTYPE html>
<html>
<head>
<title>Joycon.js</title>
<style>
body {
font-family: system-ui;
}
.rumble-buttons.disabled {
opacity: 0.5;
pointer-events: none;
}
a {
display: block;
color: inherit;
position: absolute;
bottom: calc(0.67em + 8px);
text-decoration: none;
}
</style>
</head>
<body>
<h1 class="message">Move a controller</h1>
<hr>
<h3 class="joystick-message"></h3>
<hr>
<h2>Rumble</h2>
<div class="rumble-buttons disabled">
<button onclick="controllers.vibrate({ preset: 'mild' }, 250)">Mild</button>
<button onclick="controllers.vibrate({ preset: 'medium' }, 500)">Medium</button>
<button onclick="controllers.vibrate({ preset: 'strong' }, 1000)">Strong</button>
</div>
<a href="https://github.com/benhatsor/joycon.js">Joycon.js</a>
<script src="https://joycon.js.org/Joycon.min.js"></script>
<script>
const controllers = Joycon.controllers;
const message = document.querySelector('.message');
const joystickMessage = document.querySelector('.joystick-message');
const rumbleButtons = document.querySelector('.rumble-buttons');
const buttons = Object.values(Joycon.buttonMap);
buttons.forEach(button => {
controllers.on.press(button, (value) => {
message.textContent = button + '! ' + value;
});
});
controllers.on.move('left-joystick', (value) => {
joystickMessage.textContent = 'Moved left joystick! ' + value.x + ',' + value.y;
});
controllers.on.move('right-joystick', (value) => {
joystickMessage.textContent = 'Moved right joystick! ' + value.x + ',' + value.y;
});
controllers.on.connect((controller) => {
console.log('Controller connected!', controller);
message.textContent = 'Controller connected';
rumbleButtons.classList.remove('disabled');
});
controllers.on.disconnect((controller) => {
console.log('Controller disconnected!', controller);
message.textContent = 'Controller disconnected';
// if there are no connected controllers
if (Object.keys(Joycon.controller).length === 0) {
rumbleButtons.classList.add('disabled');
}
});
</script>
</body>
</html>