@antha/gamepad-type 0.1.0

package/dist/demo/elements/modals/vir-create-new-type.modal.element.js

@@ -0,0 +1,135 @@
+import { assert } from '@augment-vir/assert';
+import { waitForAnimationFrame } from '@augment-vir/web';
+import { css, defineElement, defineElementEvent, html, listen } from 'element-vir';
+import { ViraButton, ViraInput, noNativeFormStyles } from 'vira';
+import { findMatchingGamepadModel } from '../../../index.js';
+import { ModalClose } from '../../events/modal-close.event.js';
+import { SelectedGamepadIndexChange } from '../../events/selected-gamepad-index-change.event.js';
+import { kebabCaseToNameCase } from '../../util/casing.js';
+import { VirModal } from './vir-modal.element.js';
+export const VirCreateNewTypeModal = defineElement()({
+    tagName: 'vir-create-new-type-modal',
+    events: {
+        newModelCreate: defineElementEvent(),
+    },
+    styles: css `
+        .wrapper {
+            display: flex;
+            flex-direction: column;
+            align-items: stretch;
+            gap: 24px;
+        }
+
+        select {
+            ${noNativeFormStyles};
+            flex-grow: 1;
+            cursor: pointer;
+            padding: 2px 4px;
+            font: inherit;
+            margin: 2px 0;
+        }
+
+        .selected-gamepad {
+            display: flex;
+            flex-direction: column;
+        }
+
+        .new-model-name {
+            display: flex;
+            flex-direction: column;
+            gap: 16px;
+        }
+
+        ${ViraInput} {
+            width: 100%;
+        }
+    `,
+    state() {
+        return {
+            newModelName: '',
+        };
+    },
+    init({ host }) {
+        setTimeout(async () => {
+            await waitForAnimationFrame();
+            const viraInput = host.shadowRoot.querySelector(ViraInput.tagName);
+            if (viraInput) {
+                assert.instanceOf(viraInput, ViraInput);
+                viraInput.shadowRoot.querySelector('input')?.select();
+            }
+        }, 0);
+    },
+    render({ inputs, dispatch, state, updateState, events }) {
+        const selectedDevice = inputs.gamepadDevices[inputs.selectedGamepadIndex];
+        if (!selectedDevice) {
+            return html `
+                No selected gamepad.
+            `;
+        }
+        const gamepadNameSelectTemplate = html `
+            <select
+                ${listen('change', (event) => {
+            const element = event.currentTarget;
+            assert.instanceOf(element, HTMLSelectElement);
+            const value = Number(element.value);
+            if (!isNaN(value)) {
+                dispatch(new SelectedGamepadIndexChange(value));
+            }
+        })}
+            >
+                ${inputs.gamepadDevices.map((gamepadDevice, gamepadIndex) => {
+            return html `
+                        <option
+                            ?selected=${inputs.selectedGamepadIndex === gamepadIndex}
+                            value=${String(gamepadIndex)}
+                            title=${gamepadDevice.deviceName}
+                        >
+                            &nbsp;${gamepadIndex}: "${gamepadDevice.deviceName}"
+                        </option>
+                    `;
+        })}
+            </select>
+        `;
+        const { gamepadModel } = findMatchingGamepadModel({
+            gamepad: selectedDevice,
+        });
+        const currentModelTemplate = html `
+            <p>Current model: ${gamepadModel ? kebabCaseToNameCase(gamepadModel) : 'unknown'}</p>
+        `;
+        const currentNameMapTemplate = html `
+            <${ViraInput.assign({
+            placeholder: 'Enter a new model name',
+            value: state.newModelName,
+            disableBrowserHelps: true,
+        })}
+                ${listen(ViraInput.events.valueChange, (event) => {
+            updateState({
+                newModelName: event.detail,
+            });
+        })}
+            ></${ViraInput}>
+            <${ViraButton.assign({
+            text: 'Save',
+        })}
+                ${listen('click', () => {
+            dispatch(new events.newModelCreate(state.newModelName));
+            dispatch(new ModalClose());
+        })}
+            ></${ViraButton}>
+        `;
+        return html `
+            <${VirModal.assign({
+            modalTitle: 'Enter New Model',
+        })}>
+                <div class="wrapper">
+                    <div class="selected-gamepad">
+                        <span>Selected Gamepad by Name:</span>
+                        ${gamepadNameSelectTemplate}
+                    </div>
+                    <div class="current-model">${currentModelTemplate}</div>
+                    <div class="new-model-name">${currentNameMapTemplate}</div>
+                </div>
+            </${VirModal}>
+        `;
+    },
+});

package/dist/demo/elements/modals/vir-edit-mappings.modal.element.d.ts

@@ -0,0 +1,29 @@
+import { type GamepadDevice, type GamepadInputValue, type InputDeviceHandler } from 'input-device-handler';
+import { type GamepadLayout, type GamepadModelMap } from '../../../index.js';
+export declare const VirEditMappingsModal: import("element-vir").DeclarativeElementDefinition<"vir-edit-mappings-modal", {
+    gamepadDevices: ReadonlyArray<Readonly<GamepadDevice>>;
+    savedGamepadLayouts: ReadonlyArray<Readonly<GamepadLayout>>;
+    selectedGamepadIndex: number;
+    selectedGamepadInput: Readonly<GamepadInputValue> | undefined;
+    savedGamepadModelMap: Readonly<GamepadModelMap>;
+    inputDeviceHandler: Readonly<InputDeviceHandler>;
+}, {
+    cleanup: undefined | (() => void);
+}, {
+    inputMapSave: import("element-vir").DefineEvent<Readonly<{
+        inputName: string;
+        mappedName: string;
+    }>>;
+    selectedGamepadInputChange: import("element-vir").DefineEvent<Readonly<Readonly<{
+        deviceName: string;
+        deviceKey: import("input-device-handler").GamepadInputDeviceKey;
+        deviceType: import("input-device-handler").InputDeviceType;
+        inputName: string;
+        inputValue: number;
+        details: Readonly<Readonly<{
+            inputName: string;
+            value: number;
+            inputType: import("input-device-handler").DeviceInputType;
+        }>>;
+    }>> | undefined>;
+}, "vir-edit-mappings-modal-", "vir-edit-mappings-modal-", readonly [], readonly []>;

package/dist/demo/elements/modals/vir-edit-mappings.modal.element.js

@@ -0,0 +1,185 @@
+import { assert } from '@augment-vir/assert';
+import { waitForAnimationFrame } from '@augment-vir/web';
+import { css, defineElement, defineElementEvent, html, listen } from 'element-vir';
+import { CurrentInputsChangedEvent, } from 'input-device-handler';
+import { ViraInput, noNativeFormStyles } from 'vira';
+import { findMatchingGamepadLayout, findMatchingGamepadModel, } from '../../../index.js';
+import { SelectedGamepadIndexChange } from '../../events/selected-gamepad-index-change.event.js';
+import { kebabCaseToNameCase } from '../../util/casing.js';
+import { VirGamepadInput } from '../gamepad/vir-gamepad-input.element.js';
+import { VirModal } from './vir-modal.element.js';
+export const VirEditMappingsModal = defineElement()({
+    tagName: 'vir-edit-mappings-modal',
+    events: {
+        inputMapSave: defineElementEvent(),
+        selectedGamepadInputChange: defineElementEvent(),
+    },
+    styles: css `
+        .wrapper {
+            display: flex;
+            flex-direction: column;
+            align-items: stretch;
+            gap: 24px;
+        }
+
+        select {
+            ${noNativeFormStyles};
+            flex-grow: 1;
+            cursor: pointer;
+            padding: 2px 4px;
+            font: inherit;
+            margin: 2px 0;
+        }
+
+        .selected-gamepad {
+            display: flex;
+            flex-direction: column;
+        }
+
+        .current-input {
+            display: flex;
+            justify-content: center;
+        }
+    `,
+    state() {
+        return {
+            cleanup: undefined,
+        };
+    },
+    init({ state, updateState, inputs, host, dispatch, events }) {
+        function focusInput() {
+            setTimeout(async () => {
+                await waitForAnimationFrame();
+                const viraInput = host.shadowRoot.querySelector(ViraInput.tagName);
+                if (viraInput) {
+                    assert.instanceOf(viraInput, ViraInput);
+                    viraInput.shadowRoot.querySelector('input')?.select();
+                }
+            }, 0);
+        }
+        focusInput();
+        if (!state.cleanup) {
+            const cleanup = inputs.inputDeviceHandler.listen(CurrentInputsChangedEvent, (event) => {
+                const selectedDevice = inputs.gamepadDevices[inputs.selectedGamepadIndex];
+                if (!selectedDevice) {
+                    return;
+                }
+                const newInputs = event.detail.inputs.newInputs
+                    .filter((newInput) => newInput.deviceKey === selectedDevice.deviceKey)
+                    .sort((a, b) => Math.abs(b.inputValue) - Math.abs(a.inputValue));
+                if (!newInputs.length) {
+                    return;
+                }
+                const firstNewInput = newInputs[0];
+                if (firstNewInput &&
+                    inputs.selectedGamepadInput?.inputName !== firstNewInput.inputName) {
+                    focusInput();
+                    dispatch(new events.selectedGamepadInputChange(firstNewInput));
+                }
+            });
+            updateState({
+                cleanup,
+            });
+        }
+    },
+    cleanup({ state, updateState }) {
+        state.cleanup?.();
+        updateState({
+            cleanup: undefined,
+        });
+    },
+    render({ inputs, dispatch, events }) {
+        const selectedDevice = inputs.gamepadDevices[inputs.selectedGamepadIndex];
+        if (!selectedDevice) {
+            return html `
+                No selected gamepad.
+            `;
+        }
+        const { gamepadBrand } = findMatchingGamepadModel({
+            gamepad: selectedDevice.deviceName,
+            gamepadModelMap: inputs.savedGamepadModelMap,
+        });
+        if (inputs.selectedGamepadInput &&
+            (selectedDevice.deviceKey !== inputs.selectedGamepadInput.deviceKey ||
+                selectedDevice.deviceName !== inputs.selectedGamepadInput.deviceName)) {
+            dispatch(new events.selectedGamepadInputChange(undefined));
+        }
+        const gamepadTypeSelectTemplate = html `
+            <select
+                ${listen('change', (event) => {
+            const element = event.currentTarget;
+            assert.instanceOf(element, HTMLSelectElement);
+            const value = Number(element.value);
+            if (!isNaN(value)) {
+                dispatch(new SelectedGamepadIndexChange(value));
+            }
+        })}
+            >
+                ${inputs.gamepadDevices.map((gamepadDevice, gamepadIndex) => {
+            const { gamepadModel } = findMatchingGamepadModel({
+                gamepad: gamepadDevice.deviceName,
+                gamepadModelMap: inputs.savedGamepadModelMap,
+            });
+            return html `
+                        <option
+                            ?selected=${inputs.selectedGamepadIndex === gamepadIndex}
+                            value=${String(gamepadIndex)}
+                        >
+                            &nbsp;${gamepadIndex}:
+                            ${gamepadModel ? kebabCaseToNameCase(gamepadModel) : 'unknown'}
+                        </option>
+                    `;
+        })}
+            </select>
+        `;
+        const currentInput = inputs.selectedGamepadInput
+            ? selectedDevice.deviceDetails.inputsByName[inputs.selectedGamepadInput.inputName]
+            : undefined;
+        const currentInputTemplate = currentInput
+            ? html `
+                  <${VirGamepadInput.assign({
+                gamepadLayout: undefined,
+                gamepadInput: currentInput,
+                gamepadBrand,
+            })}></${VirGamepadInput}>
+              `
+            : html `
+                  <p>Press an input on this gamepad to map it.</p>
+              `;
+        const matchingLayout = findMatchingGamepadLayout({
+            gamepad: selectedDevice,
+            layouts: inputs.savedGamepadLayouts,
+            gamepadModelMap: inputs.savedGamepadModelMap,
+        });
+        const currentNameMapTemplate = currentInput
+            ? html `
+                  <${ViraInput.assign({
+                placeholder: 'Enter an input name',
+                value: matchingLayout?.inputMappings[currentInput.inputName] || '',
+                disableBrowserHelps: true,
+            })}
+                      ${listen(ViraInput.events.valueChange, (event) => {
+                dispatch(new events.inputMapSave({
+                    inputName: currentInput.inputName,
+                    mappedName: event.detail,
+                }));
+            })}
+                  ></${ViraInput}>
+              `
+            : '';
+        return html `
+            <${VirModal.assign({
+            modalTitle: 'Edit Mappings',
+        })}>
+                <div class="wrapper">
+                    <div class="selected-gamepad">
+                        <span>Selected Gamepad:</span>
+                        ${gamepadTypeSelectTemplate}
+                    </div>
+                    <div class="current-input">${currentInputTemplate}</div>
+                    <div class="current-mapping">${currentNameMapTemplate}</div>
+                </div>
+            </${VirModal}>
+        `;
+    },
+});

package/dist/demo/elements/modals/vir-modal.element.d.ts

@@ -0,0 +1,3 @@
+export declare const VirModal: import("element-vir").DeclarativeElementDefinition<"vir-modal", {
+    modalTitle: string;
+}, {}, {}, "vir-modal-", "vir-modal-", readonly [], readonly []>;

package/dist/demo/elements/modals/vir-modal.element.js

@@ -0,0 +1,88 @@
+import { css, defineElement, html, listen } from 'element-vir';
+import { CloseX24Icon, ViraIcon, noNativeFormStyles, noNativeSpacing } from 'vira';
+import { ModalClose } from '../../events/modal-close.event.js';
+export const VirModal = defineElement()({
+    tagName: 'vir-modal',
+    styles: css `
+        .background {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            position: fixed;
+            top: 0;
+            left: 0;
+            z-index: 9999;
+            width: 100vw;
+            height: 100vh;
+            background-color: rgba(0, 0, 0, 0.8);
+        }
+
+        .modal-wrapper {
+            background-color: white;
+            border: 4px solid #ddd;
+            border-radius: 16px;
+            padding: 0 0 32px 16px;
+        }
+
+        h1 {
+            ${noNativeSpacing};
+            font-size: 1.8em;
+            margin-top: 8px;
+            margin-bottom: 16px;
+            flex-grow: 1;
+        }
+
+        .slot-wrapper {
+            margin: 0 32px 16px 16px;
+        }
+
+        .close-x {
+            ${noNativeFormStyles};
+            padding: 2px;
+            font-family: monospace;
+            color: #aaa;
+            cursor: pointer;
+            transition: 100ms;
+        }
+
+        .close-x:hover {
+            color: black;
+        }
+
+        header {
+            display: flex;
+            align-items: flex-start;
+        }
+    `,
+    render({ inputs, dispatch }) {
+        return html `
+            <div
+                class="background"
+                ${listen('mousedown', (event) => {
+            if (event.target === event.currentTarget) {
+                dispatch(new ModalClose());
+            }
+        })}
+            >
+                <div class="modal-wrapper">
+                    <header>
+                        <h1>${inputs.modalTitle}</h1>
+                        <button
+                            class="close-x"
+                            ${listen('click', () => {
+            dispatch(new ModalClose());
+        })}
+                        >
+                            <${ViraIcon.assign({
+            icon: CloseX24Icon,
+        })}></${ViraIcon}>
+                        </button>
+                    </header>
+                    <div class="slot-wrapper">
+                        <slot></slot>
+                    </div>
+                </div>
+            </div>
+        `;
+    },
+});

package/dist/demo/elements/vir-demo.element.d.ts

@@ -0,0 +1,27 @@
+import { type GamepadDevice, type GamepadInputValue, InputDeviceHandler } from 'input-device-handler';
+import { type GamepadLayout } from '../../index.js';
+import { type GamepadOverrides } from '../overrides.js';
+declare enum EditMode {
+    None = "none",
+    Mappings = "mappings",
+    CreateType = "create-type"
+}
+export declare const VirDemo: import("element-vir").DeclarativeElementDefinition<"vir-demo", {}, {
+    deviceHandler: InputDeviceHandler;
+    gamepadDevices: ReadonlyArray<Readonly<GamepadDevice>>;
+    newInputs: {
+        timestamp: number;
+        devices: ReadonlyArray<string>;
+    };
+    gamepadIndexForEditing: number;
+    inputForEditing: Readonly<GamepadInputValue> | undefined;
+    savedGamepadLayouts: import("element-vir").AsyncProp<readonly Readonly<GamepadLayout>[], void>;
+    submittedChanges: import("element-vir").AsyncProp<Readonly<import("../util/check-changes.js").ChangedEntries> | undefined, void>;
+    savedGamepadModelMap: import("element-vir").AsyncProp<Readonly<Readonly<{
+        [x: string]: string;
+    }>>, void>;
+    overrides: undefined | GamepadOverrides;
+    editMode: EditMode;
+    cleanup: (() => void) | undefined;
+}, {}, "vir-demo-", "vir-demo-", readonly [], readonly []>;
+export {};