Add swipper for phone play #74
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
1 Skipped Deployment
|
WalkthroughThe pull request introduces several updates to the Changes
Possibly related PRs
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 6
🧹 Outside diff range and nitpick comments (8)
client/src/ui/components/Swipper.tsx (1)
26-44: Reduce code duplication in slide components.The three SwiperSlide sections contain nearly identical code with only the mode prop differing.
Consider refactoring to use a map:
-<SwiperSlide> - <GameModeCardMobile - mode={ModeType.Free} - handleGameMode={() => setIsGameOn("isOn")} - /> -</SwiperSlide> -<SwiperSlide> - <GameModeCardMobile - mode={ModeType.Daily} - handleGameMode={() => setIsGameOn("isOn")} - /> -</SwiperSlide> -<SwiperSlide> - <GameModeCardMobile - mode={ModeType.Normal} - handleGameMode={() => setIsGameOn("isOn")} - /> -</SwiperSlide> +{[ModeType.Free, ModeType.Daily, ModeType.Normal].map((mode) => ( + <SwiperSlide key={mode}> + <GameModeCardMobile + mode={mode} + handleGameMode={() => setIsGameOn("isOn")} + /> + </SwiperSlide> +))}client/src/index.css (2)
199-202: Consider using responsive dimensions for the swiperThe fixed dimensions (280px × 400px) might not provide the best experience across different screen sizes. Consider using relative units or viewport-based units for better responsiveness.
.swiper { - width: 280px; - height: 400px; + width: min(280px, 90vw); + height: min(400px, 60vh); }
Line range hint
127-151: Remove duplicate animation classesThe animation classes
wiggle,blink, andwiggle-blinkare defined twice in the file. Remove the duplicate definitions to maintain clean and maintainable code.Remove one set of these duplicate classes:
- .wiggle { - animation: wiggle 0.2s ease-in-out infinite; - } - - .blink { - animation: blink 0.5s ease-in-out infinite; - } - - .wiggle-blink { - animation: - wiggle 0.2s ease-in-out infinite, - blink 0.5s ease-in-out infinite; - }Also applies to: 152-164
client/src/ui/components/GameModeCardMobile.tsx (2)
27-30: Add TypeScript documentation and improve type safety.Consider adding JSDoc documentation and making the callback type more specific.
+/** + * Props for the GameModeCardMobile component + * @property {ModeType} mode - The game mode to display + * @property {() => void} handleGameMode - Callback triggered when game mode is selected + */ interface GameModeCardProps { mode: ModeType; - handleGameMode: () => void; + handleGameMode: (selectedMode: ModeType) => void; }
80-144: Improve accessibility and maintainability of the rendered content.Consider the following improvements:
- Add aria-labels for better accessibility
- Add min-height to prevent layout shifts
- Externalize text strings for easier maintenance and localization
+const CARD_STRINGS = { + cost: 'Cost', + free: 'Free', + difficulty: 'Difficulty', + endsIn: 'Ends in', + prizePool: 'Prize Pool', +}; return ( - <Card className="w-full h-full bg-gray-800 text-white border-2 border-white"> + <Card + className="w-full h-full min-h-[400px] bg-gray-800 text-white border-2 border-white" + role="article" + aria-label={`${mode} game mode card`} + > <CardHeader className="pt-4 pb-10 md:pb-4"> <CardTitle className="text-2xl md:text-2xl font-bold text-center"> {mode} </CardTitle> </CardHeader> <CardContent className="space-y-2 text-sm md:text-base pb-4"> <div className="flex items-center space-x-2 gap-2"> - <Coins className="h-5 w-5 flex-shrink-0" /> + <Coins className="h-5 w-5 flex-shrink-0" aria-hidden="true" /> <div className="flex-grow flex justify-between items-center"> - <span className="font-semibold">Cost</span> + <span className="font-semibold">{CARD_STRINGS.cost}</span>client/src/ui/screens/Home.tsx (3)
40-41: Fix component naming conventionThe
Swippercomponent name contains a typo - it should beSwiper(single 'p') to follow standard naming conventions and match the common Swiper component naming.
237-242: Enhance button accessibility and stylingThe Play button should use theme variables instead of hardcoded colors and include accessibility attributes.
<Button className="w-full bg-primary text-white text-lg py-6 border-4 shadow-lg bg-sky-900 font-sans rounded-none" variant="brutal" + aria-label="Start game" > Play ! </Button>
244-250: Consider improving dialog responsivenessA few suggestions for the dialog implementation:
- The hardcoded width of 95% might not be optimal for all screen sizes
- Consider adding loading states for the Swiper component
- The dialog content padding (p-8) might be too large on very small screens
-<DialogContent className="w-[95%] flex flex-col justify-center p-8"> +<DialogContent className="w-full max-w-[500px] mx-auto flex flex-col justify-center p-4 sm:p-8">
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
⛔ Files ignored due to path filters (1)
client/pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (8)
client/package.json(2 hunks)client/src/index.css(1 hunks)client/src/ui/components/GameModeCard.tsx(1 hunks)client/src/ui/components/GameModeCardMobile.tsx(1 hunks)client/src/ui/components/HeaderNftBalance.tsx(1 hunks)client/src/ui/components/MobileHeader.tsx(1 hunks)client/src/ui/components/Swipper.tsx(1 hunks)client/src/ui/screens/Home.tsx(3 hunks)
✅ Files skipped from review due to trivial changes (2)
- client/src/ui/components/GameModeCard.tsx
- client/src/ui/components/HeaderNftBalance.tsx
🔇 Additional comments (9)
client/src/ui/components/Swipper.tsx (2)
1-10: LGTM! Imports are well-organized.
The imports are properly structured, separating external library imports from internal ones.
1-48: Verify component integration in Home screen.
Let's verify that this component is properly imported and used in the Home screen with correct props.
✅ Verification successful
Component integration verified successfully
The Swipper component is correctly imported and used in the Home screen with the required setIsGameOn prop being passed as expected. The implementation matches the component's interface definition.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Check how the Swipper component is imported and used in the Home screen
rg -A 5 "import.*Swipper" client/src/ui/screens/
rg -A 10 "<Swipper" client/src/ui/screens/
Length of output: 1155
client/src/index.css (1)
204-208: LGTM! Proper flex layout for centering content
The flex layout configuration correctly centers the slide content both horizontally and vertically.
client/package.json (1)
35-36: Verify version constraints and security implications
The new dependencies use caret ranges (^) which allow minor version updates. While this is common practice, it's important to ensure these versions are stable and secure.
Let's check for known vulnerabilities and latest stable versions:
Also applies to: 89-89
✅ Verification successful
The initial results show that:
- There's a critical vulnerability in swiper < 6.5.1 (but swiper isn't in the code snippet)
- The latest versions are newer than what's specified (4.12.0-beta vs 4.11.4, and 4.8.0-beta vs 4.7.1)
- Both latest versions are beta releases
Let me check the actual usage and locked versions before making a final recommendation.
The project uses pnpm instead of npm. Let me check the locked versions and actual usage patterns to make a final recommendation about the version constraints.
Version constraints are appropriate and secure
The specified versions (@egjs/[email protected] and @egjs/[email protected]) are:
- Locked to specific versions in pnpm-lock.yaml
- Not affected by any known vulnerabilities
- Using stable releases instead of the latest beta versions (4.12.0-beta.11 and 4.8.0-beta.1)
- Properly integrated with their peer dependencies
The caret ranges are appropriate here as they allow for safe minor version updates while maintaining stability.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Check for vulnerabilities and latest versions
# Check for known vulnerabilities in new packages
gh api graphql -f query='
{
securityVulnerabilities(first: 5, ecosystem: NPM, package: "swiper") {
nodes {
advisory {
summary
severity
publishedAt
}
vulnerableVersionRange
}
}
}
'
# Check latest stable versions
npm view swiper versions --json | jq '.[-1]'
npm view @egjs/react-flicking versions --json | jq '.[-1]'
npm view @egjs/flicking-plugins versions --json | jq '.[-1]'
Length of output: 647
Script:
#!/bin/bash
# Let's check the specific versions being used in package-lock.json for these dependencies
rg -A 2 '"@egjs/(react-flicking|flicking-plugins)"' package-lock.json
# Also check if there are any direct usages of these packages
rg -l "@egjs/(react-flicking|flicking-plugins)"
Length of output: 221
Script:
#!/bin/bash
# Let's check the pnpm-lock.yaml for locked versions and check actual usage
cat client/pnpm-lock.yaml | grep -A 5 "@egjs/"
# Check actual usage patterns to understand the impact
rg -A 3 "@egjs/(react-flicking|flicking-plugins)" --type ts --type tsx --type js --type jsx
Length of output: 3054
client/src/ui/components/MobileHeader.tsx (1)
Line range hint 115-121: LGTM! Consider verifying accessibility.
The addition of asChild prop is a good practice that allows proper composition of the custom Button trigger with the dropdown menu while maintaining proper event handling.
Let's verify the accessibility of this dropdown trigger implementation:
✅ Verification successful
Implementation follows established accessibility patterns
The asChild prop usage in MobileHeader.tsx follows the consistent pattern found across the codebase. The search results show:
- All
DropdownMenuTriggercomponents (in SettingsDropDown.tsx, Theme.tsx, and MobileHeader.tsx) use theasChildprop consistently - The Button + FontAwesomeIcon pattern is used consistently across multiple components
- The codebase shows proper accessibility considerations with extensive use of ARIA attributes
- The implementation is consistent with the UI component library's button and dropdown patterns
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Check for similar dropdown implementations to ensure consistency
# and proper accessibility patterns across the codebase
# Look for other DropdownMenuTrigger usages
ast-grep --pattern 'DropdownMenuTrigger $$$'
# Look for other Button components used as triggers
ast-grep --pattern 'Button variant="outline">
<FontAwesomeIcon $$$'
Length of output: 118
Script:
#!/bin/bash
# Let's try a different approach to find dropdown trigger implementations
# Search for DropdownMenuTrigger with proper JSX/TSX syntax
ast-grep --pattern '<DropdownMenuTrigger $$$'
# Search for Button components used with FontAwesomeIcon
ast-grep --pattern '<Button $$$>
<FontAwesomeIcon $$$'
# Also search for similar patterns using ripgrep for backup
rg -U "DropdownMenuTrigger.*asChild" --type tsx
# Look for accessibility attributes in dropdown related components
rg -U "aria-|role.*dropdown" --type tsx
Length of output: 254
Script:
#!/bin/bash
# Let's try one more time with correct ripgrep file type and patterns
# Search for DropdownMenuTrigger implementations
rg -U "<DropdownMenuTrigger" --type ts --type tsx
# Search for Button components with FontAwesomeIcon
rg -U "<Button.*>[\s]*<FontAwesomeIcon" --type ts --type tsx
# Look for accessibility attributes in dropdown related components
rg -U "aria-|role.*dropdown" --type ts --type tsx
# Search for other instances of asChild prop
rg "asChild" --type ts --type tsx
Length of output: 312
Script:
#!/bin/bash
# Let's try without file type specifications since tsx might not be supported
# Search for DropdownMenuTrigger implementations
rg -U "<DropdownMenuTrigger"
# Search for Button components with FontAwesomeIcon
rg -U "<Button.*>[\s]*<FontAwesomeIcon"
# Look for accessibility attributes in dropdown related components
rg -U "aria-|role.*dropdown"
# Search for other instances of asChild prop
rg "asChild"
Length of output: 6032
client/src/ui/components/GameModeCardMobile.tsx (2)
1-25: LGTM! Imports and environment setup are well organized.
The imports are properly structured and the environment variable usage follows best practices.
1-146: Verify integration with parent components.
Since this is a new mobile component, ensure it's properly integrated with the parent components and responsive design works as expected.
✅ Verification successful
Component integration is properly implemented
The verification shows that the GameModeCardMobile component is correctly integrated:
- It's properly used within the Swipper component which handles mobile card swiping functionality
- The Home screen conditionally renders either desktop view (GameModeCard) or mobile view (Swipper with GameModeCardMobile) based on viewport size
- Responsive design is implemented with proper md: breakpoints in the component
- The component receives and handles all required props (mode and handleGameMode)
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Check for proper component integration and usage
# Check for parent component imports of GameModeCardMobile
rg -l "GameModeCardMobile" --type typescript --type tsx
# Check for responsive design implementation
rg "useMediaQuery|sm:|md:|lg:" --type typescript --type tsx
Length of output: 187
Script:
#!/bin/bash
# Let's try without file type filters since they're not recognized
# Check for parent component imports and usage
rg -l "GameModeCardMobile"
# Check for responsive design implementation
rg "useMediaQuery|sm:|md:|lg:"
# Also check for any game mode related components
rg -l "GameMode.*Card"
Length of output: 22556
Script:
#!/bin/bash
# Let's check the Swipper component which seems to be the parent component
cat client/src/ui/components/Swipper.tsx
# Also check Home screen to understand the overall integration
cat client/src/ui/screens/Home.tsx
Length of output: 17937
client/src/ui/screens/Home.tsx (2)
274-274: LGTM!
The flex layout with centered items is appropriate for the dialog content.
235-251: Consider edge cases in dialog-based game flow
The dialog-based game mode selection is a good mobile UX improvement. However, consider these architectural points:
- Ensure proper dialog state cleanup when transitioning between game states
- Consider lazy loading the Swiper component to improve initial load performance
- Add error boundaries around the dialog content to gracefully handle potential rendering issues
Let's verify the Swiper component's usage across the codebase:
| setIsGameOn: (isOn: string) => void; | ||
| } | ||
|
|
||
| export default function Swipper({ setIsGameOn }: SwiperProps) { |
There was a problem hiding this comment.
Fix component name spelling.
The component name "Swipper" is misspelled. It should be "Swiper" to maintain consistency with the library name and common naming conventions.
-export default function Swipper({ setIsGameOn }: SwiperProps) {
+export default function Swiper({ setIsGameOn }: SwiperProps) {📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| export default function Swipper({ setIsGameOn }: SwiperProps) { | |
| export default function Swiper({ setIsGameOn }: SwiperProps) { |
| interface SwiperProps { | ||
| setIsGameOn: (isOn: string) => void; | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Consider using more specific types for better type safety.
The setIsGameOn callback accepts any string, but it appears to only handle "isOn". This could lead to runtime errors if different strings are passed.
Consider this improvement:
interface SwiperProps {
- setIsGameOn: (isOn: string) => void;
+ setIsGameOn: (state: boolean) => void;
}Then update the usage:
- handleGameMode={() => setIsGameOn("isOn")}
+ handleGameMode={() => setIsGameOn(true)}Committable suggestion skipped: line range outside the PR's diff.
| <Swiper | ||
| effect={"cards"} | ||
| grabCursor={true} | ||
| modules={[EffectCards]} | ||
| className="mySwiper" | ||
| initialSlide={1} | ||
| > |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Add accessibility attributes to the Swiper component.
The slider component lacks proper accessibility attributes which could make it difficult for users with assistive technologies.
<Swiper
effect={"cards"}
grabCursor={true}
modules={[EffectCards]}
className="mySwiper"
initialSlide={1}
+ a11y={{
+ prevSlideMessage: 'Previous game mode',
+ nextSlideMessage: 'Next game mode',
+ firstSlideMessage: 'This is the first game mode',
+ lastSlideMessage: 'This is the last game mode'
+ }}
>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <Swiper | |
| effect={"cards"} | |
| grabCursor={true} | |
| modules={[EffectCards]} | |
| className="mySwiper" | |
| initialSlide={1} | |
| > | |
| <Swiper | |
| effect={"cards"} | |
| grabCursor={true} | |
| modules={[EffectCards]} | |
| className="mySwiper" | |
| initialSlide={1} | |
| a11y={{ | |
| prevSlideMessage: 'Previous game mode', | |
| nextSlideMessage: 'Next game mode', | |
| firstSlideMessage: 'This is the first game mode', | |
| lastSlideMessage: 'This is the last game mode' | |
| }} | |
| > |
| "@egjs/flicking-plugins": "^4.7.1", | ||
| "@egjs/react-flicking": "^4.11.4", |
There was a problem hiding this comment.
💡 Codebase verification
Remove unused @egjs/flicking dependencies
Based on the codebase analysis, only the Swiper library is being actively used in the implementation (Swipper.tsx component). The @egjs/flicking-plugins and @egjs/react-flicking packages are included in package.json but are not used anywhere in the codebase. These should be removed to avoid unnecessary dependencies.
- Remove
@egjs/flicking-pluginsfrom package.json - Remove
@egjs/react-flickingfrom package.json
🔗 Analysis chain
Consider consolidating slider libraries
I notice that both Swiper and @egjs/flicking (with plugins) are being added, which serve similar purposes for creating slider/carousel components. Consider using just one of these libraries to reduce bundle size and maintain consistency.
Let's check the bundle sizes and peer dependencies:
If you decide to proceed with both libraries, please document the specific use case for each to justify maintaining both dependencies.
Also applies to: 89-89
Let me gather more information about how these libraries are actually used in the codebase.
Let me try again with correct file type flags for ripgrep.
Let me check the actual implementation of the Swiper component and the CSS to understand if both libraries are actually being used.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Check package sizes and peer dependencies
# Get package sizes
npm view swiper size
npm view @egjs/react-flicking size
npm view @egjs/flicking-plugins size
# Check peer dependencies
npm view swiper peerDependencies --json
npm view @egjs/react-flicking peerDependencies --json
npm view @egjs/flicking-plugins peerDependencies --json
Length of output: 287
Script:
#!/bin/bash
# Search for usage of both slider libraries
echo "=== Searching for Swiper usage ==="
rg -l "swiper" --type ts --type tsx --type js --type jsx
echo -e "\n=== Searching for Flicking usage ==="
rg -l "flicking" --type ts --type tsx --type js --type jsx
echo -e "\n=== Checking specific component implementations ==="
rg -A 5 "import.*[SF]licking|import.*[Ss]wiper" --type ts --type tsx --type js --type jsx
Length of output: 578
Script:
#!/bin/bash
# Search for usage of both slider libraries
echo "=== Searching for Swiper usage ==="
rg -l "swiper"
echo -e "\n=== Searching for Flicking usage ==="
rg -l "flicking"
echo -e "\n=== Checking specific component implementations ==="
rg -A 5 "import.*[SF]licking|import.*[Ss]wiper"
# Also check for any CSS/SCSS files that might use these components
echo -e "\n=== Checking CSS/SCSS files ==="
rg -l "swiper|flicking" -g "*.{css,scss}"
Length of output: 1483
Script:
#!/bin/bash
# Check the Swiper component implementation
echo "=== Swiper Component Implementation ==="
cat client/src/ui/components/Swipper.tsx
echo -e "\n=== CSS Implementation ==="
cat client/src/index.css | grep -A 10 -B 10 "swiper\|flicking"
Length of output: 1801
| const GameModeCardMobile: React.FC<GameModeCardProps> = ({ | ||
| mode, | ||
| handleGameMode, | ||
| }) => { | ||
| const { settings } = useSettings(); | ||
|
|
||
| const { endTimestamp, tournament } = useTournament(mode); | ||
|
|
There was a problem hiding this comment.
Add error handling for hook failures.
The hooks useSettings and useTournament might fail, but there's no error handling in place.
const GameModeCardMobile: React.FC<GameModeCardProps> = ({
mode,
handleGameMode,
}) => {
- const { settings } = useSettings();
+ const { settings, error: settingsError } = useSettings();
+ const { endTimestamp, tournament, error: tournamentError } = useTournament(mode);
- const { endTimestamp, tournament } = useTournament(mode);
+ if (settingsError || tournamentError) {
+ return (
+ <Card className="w-full h-full bg-gray-800 text-white border-2 border-white">
+ <CardContent>
+ <div className="text-center text-red-500">
+ Failed to load game mode data. Please try again.
+ </div>
+ </CardContent>
+ </Card>
+ );
+ }Committable suggestion skipped: line range outside the PR's diff.
| const potentialWin = useMemo(() => { | ||
| if (!tournament) return formatPrize(0n, VITE_PUBLIC_GAME_TOKEN_SYMBOL); | ||
| return formatPrize(tournament.prize, VITE_PUBLIC_GAME_TOKEN_SYMBOL); | ||
| }, [tournament]); | ||
|
|
||
| const cost = useMemo(() => { | ||
| if (!settings) return formatPrize(0n, VITE_PUBLIC_GAME_TOKEN_SYMBOL); | ||
| const weiCost = settings.game_price; | ||
| return formatPrize(weiCost, VITE_PUBLIC_GAME_TOKEN_SYMBOL); | ||
| }, [settings]); | ||
|
|
||
| const difficultyRule = useMemo(() => { | ||
| switch (mode) { | ||
| case ModeType.Daily: | ||
| return { | ||
| name: "Pro Mode", | ||
| description: | ||
| "A fixed high-difficulty challenge that tests your skills at their peak.", | ||
| }; | ||
| case ModeType.Normal: | ||
| return { | ||
| name: "Escalation Mode", | ||
| description: | ||
| "Difficulty increases over time, pushing you to adapt and improve.", | ||
| }; | ||
| case ModeType.Free: | ||
| return { | ||
| name: "Escalation Mode", | ||
| description: | ||
| "Difficulty increases over time, pushing you to adapt and improve.", | ||
| }; | ||
| default: | ||
| return { | ||
| name: "Normal Mode", | ||
| description: | ||
| "A standard mode with a fixed difficulty level for consistent play.", | ||
| }; | ||
| } | ||
| }, [mode]); |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Refactor duplicate difficulty rules and add price formatting error handling.
There are two issues to address:
- Duplicate difficulty rules for Free and Normal modes
- Missing error handling for price formatting
const potentialWin = useMemo(() => {
- if (!tournament) return formatPrize(0n, VITE_PUBLIC_GAME_TOKEN_SYMBOL);
- return formatPrize(tournament.prize, VITE_PUBLIC_GAME_TOKEN_SYMBOL);
+ try {
+ if (!tournament) return formatPrize(0n, VITE_PUBLIC_GAME_TOKEN_SYMBOL);
+ return formatPrize(tournament.prize, VITE_PUBLIC_GAME_TOKEN_SYMBOL);
+ } catch (error) {
+ console.error('Error formatting prize:', error);
+ return { withImage: '0' };
+ }
}, [tournament]);
const difficultyRule = useMemo(() => {
+ const ESCALATION_MODE = {
+ name: "Escalation Mode",
+ description: "Difficulty increases over time, pushing you to adapt and improve.",
+ };
+
switch (mode) {
case ModeType.Daily:
return {
name: "Pro Mode",
description:
"A fixed high-difficulty challenge that tests your skills at their peak.",
};
case ModeType.Normal:
- return {
- name: "Escalation Mode",
- description:
- "Difficulty increases over time, pushing you to adapt and improve.",
- };
+ return ESCALATION_MODE;
case ModeType.Free:
- return {
- name: "Escalation Mode",
- description:
- "Difficulty increases over time, pushing you to adapt and improve.",
- };
+ return ESCALATION_MODE;
default:
return {
name: "Normal Mode",Committable suggestion skipped: line range outside the PR's diff.
Summary by CodeRabbit
Release Notes
New Features
GameModeCardMobilecomponent for displaying game modes.Swippercomponent for an interactive card-style slider interface.SwipperandHeaderBalancecomponents.Styling Enhancements
Bug Fixes
HeaderNftBalancecomponent for improved display.