(feature) Revamping Front-End CSS #11
Conversation
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| if (totalEventCount.current >= MIN_EVENTS_FOR_CHECK) { | ||
| const ratio = untrustedEventCount.current / totalEventCount.current; | ||
| if (ratio >= UNTRUSTED_THRESHOLD) { | ||
| flagSuspicious('scripted-input', { |
There was a problem hiding this comment.
When scripted input is detected, trackAndCheckTrust calls flagSuspicious, but Typing.jsx no longer pulls that function from useRace. Once the untrusted ratio crosses the threshold the handler will throw a ReferenceError instead of reporting the suspicion, likely crashing the typing component and disabling bot detection for that session. Please re-import/propagate flagSuspicious into this component.
Useful? React with 👍 / 👎.
There was a problem hiding this comment.
Pull request overview
This PR introduces significant CSS enhancements across the front-end to create a more visually appealing and modern interface, with a focus on glassmorphism effects, animations, and an improved profile modal featuring a leveling system. The changes also include anti-cheat improvements and removal of emoji icons in favor of Bootstrap icons.
Key Changes:
- Redesigned profile modal with rank-based progression system (Freshman → Einstein tiers)
- Enhanced visual styling with glassmorphism, gradient effects, and animations throughout the application
- Anti-cheat system refinements to reduce false positives by tracking untrusted event ratios instead of blocking individual synthetic events
Reviewed changes
Copilot reviewed 16 out of 16 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| server/controllers/socket-handlers.js | Relaxed anti-cheat rules to reduce false positives; removed negative progress checks and interval flagging |
| client/src/pages/Landing.css | Added particle backgrounds, enhanced login button with gradient shimmer, improved animated text containers |
| client/src/pages/Home.css | Reduced margins for viewport fit, added subtle background particles with orange tones |
| client/src/index.css | Added global animation utilities (shimmer, pulse-glow, fade-up, gradient-shift) |
| client/src/components/Typing.jsx | Refactored anti-cheat to track untrusted event ratio; removed reference to unused flagSuspicious function |
| client/src/components/StatsShowcase.jsx | Replaced emoji icons with Bootstrap icon classes |
| client/src/components/StatsShowcase.css | Enhanced stat cards with gradients, hover effects, and icon styling |
| client/src/components/SegmentedToggle.jsx | New reusable segmented toggle component for tab selection |
| client/src/components/SegmentedToggle.css | Styling for animated segmented toggle with sliding highlight |
| client/src/components/Results.css | Enhanced winner showcase with celebratory effects, improved back button styling |
| client/src/components/ProfileModal.jsx | Major redesign with hero section, rank progression system, and tabbed stats view |
| client/src/components/ProfileModal.css | Complete visual overhaul with rank-themed backgrounds, animated particles, and modern card layouts |
| client/src/components/Navbar.css | Added glassmorphism on scroll, enhanced logo glow, gradient login button |
| client/src/components/Modes.jsx | Added mode-specific class names for styling |
| client/src/components/Modes.css | Enhanced mode cards with hover effects, gradients, and entrance animations |
| client/src/components/Leaderboard.jsx | Extracted SegmentedToggle to separate component |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| flagSuspicious('scripted-input', { | ||
| ratio: ratio.toFixed(2), | ||
| untrusted: untrustedEventCount.current, | ||
| total: totalEventCount.current | ||
| }); |
There was a problem hiding this comment.
The function flagSuspicious is being called but was removed from the destructured imports on line 45. This will cause a runtime error. Either add flagSuspicious back to the useRace destructuring or use an alternative approach to flag suspicious behavior.
| const [detailedStats, setDetailedStats] = useState(null); | ||
| const [loadingStats, setLoadingStats] = useState(true); | ||
| const [selectedTitle, setSelectedTitle] =useState(''); | ||
| const [selectedTitle, setSelectedTitle] = useState(''); |
There was a problem hiding this comment.
[nitpick] The variable selectedTitle stores a title ID (number or string), not the title object itself. Consider renaming to selectedTitleId for clarity, as this matches the API field name selected_title_id.
| const [selectedTitle, setSelectedTitle] = useState(''); | |
| const [selectedTitleId, setSelectedTitleId] = useState(''); |
| const activeIndexRaw = options.findIndex(option => option.value === value); | ||
| const activeIndex = activeIndexRaw >= 0 ? activeIndexRaw : 0; |
There was a problem hiding this comment.
[nitpick] The variable name activeIndexRaw is unclear. Consider renaming to foundIndex or matchedIndex to better convey that it's the result of the findIndex operation before the fallback logic.
| const activeIndexRaw = options.findIndex(option => option.value === value); | |
| const activeIndex = activeIndexRaw >= 0 ? activeIndexRaw : 0; | |
| const foundIndex = options.findIndex(option => option.value === value); | |
| const activeIndex = foundIndex >= 0 ? foundIndex : 0; |
| const MIN_PROGRESS_INTERVAL = 25; // min ms between progress packets (unused, kept for reference) | ||
| const MAX_ALLOWED_WPM = 350; // anything above is flagged |
There was a problem hiding this comment.
This constant is marked as unused but retained for reference. Consider removing it entirely to avoid confusion, or if it's truly needed for future reference, move it to a comment rather than keeping it as a declared constant.
| const MIN_PROGRESS_INTERVAL = 25; // min ms between progress packets (unused, kept for reference) | |
| const MAX_ALLOWED_WPM = 350; // anything above is flagged |
* first redesign of profile modal page * finalizing profile modal redesign * full revamp of landing pages and lobby * merging master + merge conflict * pulling main updating leveling to only track public races
* first redesign of profile modal page * finalizing profile modal redesign * full revamp of landing pages and lobby * merging master + merge conflict * pulling main updating leveling to only track public races finalizing badge removal
Summary
Embracing AI to make the CSS look more unique.
Implementation Details
Full-faith in AI; not a single line of code was touched or reviewed manually by me :D