https://github.com/brean/smui-gamepad-components
Svelte Material UI Components that use Keyboard / Gamepad as alternative input devices
https://github.com/brean/smui-gamepad-components
Last synced: 3 months ago
JSON representation
Svelte Material UI Components that use Keyboard / Gamepad as alternative input devices
- Host: GitHub
- URL: https://github.com/brean/smui-gamepad-components
- Owner: brean
- License: bsd-3-clause
- Created: 2025-02-08T19:00:38.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2025-06-10T21:50:05.000Z (4 months ago)
- Last Synced: 2025-06-10T22:34:26.441Z (4 months ago)
- Language: Svelte
- Homepage: https://brean.github.io/smui-gamepad-components/
- Size: 269 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Svelte Material UI Gamepad components
Using [Svelte Material UI](https://sveltematerialui.com/) components with [svelte-gamepad-virtual-joystick](https://github.com/brean/svelte-gamepad-virtual-joystick)
## Application
Use Material UI with joystick controls to control robots or build prototype games.
## Installation and usage
This library can be installed using npm:
```
npm i -D smui-gamepad-components
```
To use it in your project, you can simply switch most of the SMUI-components with the ones in this repository, Button should be a straight forward replacement for your svelte-material-ui components as its are just wrapper around it.
Instead of the default `@smui/button`-import:
```typescript
import Button from "@smui/button";
```
you can just use the default smui-gamepad-components/Button like this:
```typescript
import { Button } from "smui-gamepad-components/Button";
```
This shows the normal button but now you can also activate it by pressing 'e' on your keyboard or the first button on a connected gamepad ("X" on the Playstation 4 Dual Shock-controller).
If you want to change that behavior just provide an `input_mapping` (take a look at the example application).
Don't forget to also add the `GamepadManager` and `KeyboardManager`.
## Example
A usage example with multiple components can be seen in routs/+page.svelte,
To view this example run
```
npm run smui
npm run dev
```
## Supported Components
Inputs
- Button
- List (next/prev, select)