feat: Add warning for over rotating the wheel #57
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
There was a problem hiding this comment.
Pull Request Overview
This PR adds a rotation warning indicator to the steering wheel widget that alerts users when they've over-rotated the wheel beyond 270 degrees in either direction. The warning helps users identify when they might be confused about their wheel position (centered vs 360° rotated) and shows directional guidance to return to center.
- Added a new rotation indicator component with pulsing animation and directional arrows
- Improved steering wheel performance by using CSS custom properties for smooth rotation updates
- Added comprehensive test coverage for rotation tracking and indicator display
- Cleaned up unused TypeScript interfaces in settings types
Reviewed Changes
Copilot reviewed 10 out of 10 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| src/frontend/theme.css | Adds pulse animation keyframes for the rotation warning indicator |
| src/frontend/components/Settings/types.ts | Removes unused 'round' wheel style and AdvancedSettings interface |
| src/frontend/components/Input/InputSteer/hooks/useWheelRotation.tsx | Creates hook for tracking wheel rotation state and detecting over-rotation |
| src/frontend/components/Input/InputSteer/hooks/useWheelRotation.spec.tsx | Comprehensive test suite for rotation tracking functionality |
| src/frontend/components/Input/InputSteer/hooks/index.ts | Exports the new rotation hook and types |
| src/frontend/components/Input/InputSteer/RotationIndicator.tsx | Main indicator component that shows warning when wheel is over-rotated |
| src/frontend/components/Input/InputSteer/RotationIndicator.stories.tsx | Storybook stories for testing different rotation scenarios |
| src/frontend/components/Input/InputSteer/RotationIndicator.spec.tsx | Tests for rotation indicator visibility and display logic |
| src/frontend/components/Input/InputSteer/InputSteer.tsx | Integrates rotation indicator and optimizes wheel rotation performance |
| src/frontend/components/Input/InputSteer/InputSteer.stories.tsx | Updates story controls to support full 360° rotation range |
src/frontend/components/Input/InputSteer/hooks/useWheelRotation.tsx
Outdated
Show resolved
Hide resolved
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This will show a warning when you've overrotated the wheel in cases where you're not sure if you're centred or overrotated it by 360 degrees left or right. It will show an indicator to what direction to move it back to.
Screen.Recording.2025-08-02.133353.mp4
Screen.Recording.2025-08-02.at.1.38.25.PM.mov