examples/vibration.html

<!DOCTYPE html>
<html>

<head>
    <title>Joypad.js vibration example</title>
    <meta charset="UTF-8" />
    <style>
        html,
        body {
            margin: 0;
            padding: 0;
            position: relative;
            font-family: sans-serif;
        }

        .info {
            position: absolute;
            right: 0;
            color: #fff;
            background-color: #222;
            padding: 15px;
            z-index: 1;
        }

        .info>h2 {
            font-weight: 400;
            font-size: 1em;
            margin: 0;
        }

        .info>p {
            font-weight: 300;
            font-size: .85em;
            margin: 25px auto 0;
        }

        #vibrate {
            background-color: #547ae2;
            color: #fff;
            font-weight: 300;
            border-radius: 3px;
            text-align: center;
            width: 80px;
            cursor: pointer;
            position: absolute;
            top: 180px;
            padding: 20px 80px;
            left: calc(50% - 120px);
        }

        #vibrate:hover {
            background-color: #1c41a7;
        }
    </style>
</head>

<body>
    <div class="info">
        <h2 id="heading"></h2>
        <p id="message"></p>
    </div>
    <div id="vibrate">Vibrate</div>
    <script type="module">
        import '../dist/joypad.min.js';

        let heading = document.getElementById('heading');
        let message = document.getElementById('message');
        let vibrateButton = document.getElementById('vibrate');

        function resetInfo(e) {
            heading.innerText = 'No controller connected!';
            message.innerText = 'Please connect a controller and press any key to start.';
        };

        function updateInfo(e) {
            const { gamepad } = e;

            heading.innerText = 'Controller connected!';
            message.innerText = gamepad.id + '\n\n' + 'Press the blue button on the screen to make the connected controllers vibrate.';
        };

        function vibrateController() {
            const connectedControllers = window.joypad.instances;

            if (Object.keys(connectedControllers).length) {
                Object.keys(connectedControllers).forEach(controller => {
                    const gamepadInstance = connectedControllers[controller];
                    const options = {
                        startDelay: 0,
                        duration: 2000,
                        weakMagnitude: 1,
                        strongMagnitude: 1
                    };

                    console.log(gamepadInstance);
                    // These options override the global vibration settings
                    joypad.vibrate(gamepadInstance, options);
                });
            }
        };

        resetInfo();
        vibrateButton.addEventListener('click', vibrateController);
        joypad.set({
            // Global vibration settings
            vibration: {
                startDelay: 500,
                duration: 3000,
                weakMagnitude: 1,
                strongMagnitude: 1
            }
        });
        joypad.on('connect', e => updateInfo(e));
        joypad.on('disconnect', e => resetInfo(e));
    </script>
</body>

</html>