index.html

<!DOCTYPE html>
<html>
    <head>
        <title>Gamepad.js</title>
        <style type="text/css">
            body, html {
                height: 100%;
            }
            body {
                padding: 0;
                margin: 0;
                height: 100%;
                font-family: "Lucida Console", Monaco, monospace;
                overflow: hidden;
                box-sizing: border-box;
            }

            .gamepads {
                width: 100%;
                height: 100%;
                overflow: hidden;
                display: flex;
                flex-direction: row;
            }

            .column {
                flex: 1;
                height: 100%;
                max-width: 100%;
                border-left: 1px solid #ccc;
                display: flex;
                flex-direction: column;
                flex-shrink: 0;
            }

            .header {
                text-align: center;
                background-color: #efefef;
                border-bottom: 1px solid #ccc;
                padding: 10px;
            }

            .column h2 {
                font-size: 16px;
                line-height: 24px;
            }

            .column h3 {
                font-size: 13px;
                line-height: 16px;
                font-weight: normal;
            }
            .column * {
                margin: 0;
            }
            .output {
                background-color: #333333;
                color: #a3e40d;
                flex-grow: 1;
                overflow-y: auto;
                padding: 10px;
                line-height: 1.2;
                white-space: pre-wrap;
                max-width: 100%;
            }
        </style>
    </head>
    <body>
        <div class="gamepads">
            <div class="column">
                <div class="header">
                    <h2>Slot 0</h2>
                    <h3>No gamepad connected, press a button</h3>
                </div>
                <div class="output"></div>
            </div>
            <div class="column">
                <div class="header">
                    <h2>Slot 1</h2>
                    <h3>No gamepad connected, press a button</h3>
                </div>
                <div class="output"></div>
            </div>
            <div class="column">
                <div class="header">
                    <h2>Slot 2</h2>
                    <h3>No gamepad connected, press a button</h3>
                </div>
                <div class="output"></div>
            </div>
            <div class="column">
                <div class="header">
                    <h2>Slot 3</h2>
                    <h3>No gamepad connected, press a button</h3>
                </div>
                <div class="output"></div>
            </div>
        </div>
        <script src="gamepad.js"></script>
        <script>
            window.addEventListener('load', () => {
                const { GamepadListener } = gamepad;
                const outputs = document.getElementsByClassName('output');
                const titles = document.getElementsByTagName('h3');

                function output(index, message) {
                    const container = outputs[index];
                    container.innerText = message.toString() + '\n' + container.innerText;
                }

                const listener = new GamepadListener({
                    deadZone: 0.05,
                    precision: 3,
                });

                listener.on('gamepad:connected', event => {
                    const { index, gamepad } = event.detail;
                    const title = titles[index];

                    if (typeof title.defaultText === 'undefined') {
                        title.defaultText = title.innerText;
                    }

                    title.innerText = gamepad.id;

                    output(index, `Connected: ${gamepad.id}`, event.detail);
                });

                listener.on('gamepad:disconnected', event => {
                    const { index } = event.detail;
                    const title = titles[index];

                    output(index, 'Disconnected', event.detail);

                    title.innerText = title.defaultText;
                });

                listener.on('gamepad:axis', event => {
                    const { index, axis, value } = event.detail;

                    output(index, `Axis [${axis}]: ${value}`, event.detail);
                });

                listener.on('gamepad:button', event => {
                    const { index, button, value, pressed } = event.detail;

                    output(index, "Button [" + button + "] " + (pressed ? 'pressed' : 'released') + ": " + value, event.detail);
                });

                listener.start();
            });
        </script>
    </body>
</html>