Files
romm-web-ui/src/context/InputModeContext.tsx

55 lines
1.4 KiB
TypeScript

import React, { createContext, useContext, useEffect, useState } from 'react';
type InputMode = 'mouse' | 'gamepad';
interface InputModeContextType {
mode: InputMode;
setMode: (mode: InputMode) => void;
}
const InputModeContext = createContext<InputModeContextType | undefined>(undefined);
export const InputModeProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
const [mode, setMode] = useState<InputMode>('mouse');
useEffect(() => {
// Spatial Engine Override
if (mode === 'mouse') {
document.body.classList.remove('gamepad-active');
} else {
document.body.classList.add('gamepad-active');
}
}, [mode]);
useEffect(() => {
const onMouseMove = () => {
setMode('mouse');
};
const onMouseDown = () => {
setMode('mouse');
};
window.addEventListener('mousemove', onMouseMove, { passive: true });
window.addEventListener('mousedown', onMouseDown, { passive: true });
return () => {
window.removeEventListener('mousemove', onMouseMove);
window.removeEventListener('mousedown', onMouseDown);
};
}, []);
return (
<InputModeContext.Provider value={{ mode, setMode }}>
{children}
</InputModeContext.Provider>
);
};
export const useInputMode = () => {
const context = useContext(InputModeContext);
if (context === undefined) {
throw new Error('useInputMode must be used within an InputModeProvider');
}
return context;
};