Enhance combat controls and sections with martial arts features #166
Conversation
…niques and descriptions
…e design, and bilingual support
…t handling, and detailed martial arts content
- Updated responsive calculations for padding, spacing, and heights to optimize layout for mobile and desktop views. - Replaced ResponsivePixiPanel with ResponsivePixiContainer for better structure. - Added a full-screen background with a gradient and grid overlay for a modern aesthetic. - Enhanced header section with a gradient background and golden accents. - Improved martial values, trigram philosophies, and archetypes sections for better space utilization and visual appeal. - Redesigned footer with a gradient background and refined button placement. - Updated text styles and sizes for better readability across devices. - Removed unnecessary components and streamlined the layout for a cleaner presentation.
|
There was a problem hiding this comment.
Pull Request Overview
This PR enhances the combat controls system and philosophy sections by integrating authentic Korean martial arts techniques with detailed combat mechanics. The changes significantly expand the tactical depth of the trigram stance system and improve the user interface with better visual design and responsiveness.
- Enhanced trigram stances with realistic Korean martial arts techniques including specific combat focuses and effects
- Improved ControlsSection with comprehensive martial arts control mapping and enhanced visual design
- Upgraded PhilosophySection with detailed martial values, trigram philosophies, and archetype information
Reviewed Changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 7 comments.
| File | Description |
|---|---|
| src/systems/types.ts | Enhanced COMBAT_CONTROLS with authentic Korean martial arts techniques, combat focuses, and bilingual descriptions |
| src/components/intro/components/PhilosophySection.tsx | Complete redesign with martial values grid, trigram philosophy cards, and archetype information sections |
| src/components/intro/components/ControlsSection.tsx | Enhanced UI with detailed stance cards showing combat techniques, focuses, and effects with improved responsiveness |
Comments suppressed due to low confidence (1)
src/systems/types.ts:945
- [nitpick] The property name 'WASD' uses inconsistent naming convention compared to other properties in the same object which use PascalCase (like 'ArrowKeys'). Consider renaming to 'Wasd' for consistency.
WASD: {
| @@ -1,5 +1,14 @@ | |||
| import React from "react"; | |||
| import * as PIXI from "pixi.js"; | |||
There was a problem hiding this comment.
Missing proper file header comment with filepath. According to coding guidelines, files should always include proper file headers with filepath comments.
Copilot generated this review using guidance from copilot-instructions.md.
| @@ -1,5 +1,14 @@ | |||
| import React from "react"; | |||
| import * as PIXI from "pixi.js"; | |||
There was a problem hiding this comment.
Imports are not properly organized according to coding guidelines. External imports (pixi.js) should come first, followed by internal imports, then relative imports. The current order mixes these categories.
Copilot generated this review using guidance from copilot-instructions.md.
| @@ -2,11 +2,10 @@ import { COMBAT_CONTROLS } from "@/systems"; | |||
| import * as PIXI from "pixi.js"; | |||
| import React, { useEffect } from "react"; | |||
| import { KOREAN_COLORS } from "../../../types/constants"; | |||
|
|
|||
| import { KoreanText } from "../../ui/base/korean-text/KoreanText"; | |||
There was a problem hiding this comment.
Import organization violates coding guidelines. External imports should be grouped together, followed by internal imports. The KoreanText import should be grouped with other internal imports below the PIXI imports.
Copilot generated this review using guidance from copilot-instructions.md.
|
|
||
| return ( | ||
| <pixiContainer | ||
| <ResponsivePixiContainer |
There was a problem hiding this comment.
The component is not using @pixi/ui components as base building blocks as required by coding guidelines. ResponsivePixiContainer appears to be a custom component rather than extending existing @pixi/ui components.
Copilot generated this review using guidance from copilot-instructions.md.
| ); | ||
|
|
||
| return ( | ||
| <ResponsivePixiPanel | ||
| title="조작법 (Controls)" | ||
| <ResponsivePixiContainer |
There was a problem hiding this comment.
The component is not using @pixi/ui and @pixi/layout as required by coding guidelines. Should use @pixi/ui components and @pixi/layout for responsive layouts instead of custom ResponsivePixiContainer.
Copilot generated this review using guidance from copilot-instructions.md.
| draw={(g) => { | ||
| g.clear(); | ||
| g.fill({ color: KOREAN_COLORS.UI_BACKGROUND_DARK, alpha: 0.95 }); | ||
| g.roundRect(0, 0, width, height, 10); | ||
| // Dark cyberpunk background | ||
| const gradient = new PIXI.FillGradient(0, 0, width, height); | ||
| gradient.addColorStop(0, 0x0a0a0f); | ||
| gradient.addColorStop(0.5, 0x1a1a2e); | ||
| gradient.addColorStop(1, 0x0f0f23); | ||
| g.fill(gradient); | ||
| g.rect(0, 0, width, height); | ||
| g.fill(); | ||
|
|
||
| g.stroke({ width: 2, color: KOREAN_COLORS.ACCENT_GOLD, alpha: 0.6 }); | ||
| g.roundRect(0, 0, width, height, 10); | ||
| // Grid overlay | ||
| g.stroke({ width: 1, color: KOREAN_COLORS.ACCENT_GOLD, alpha: 0.1 }); | ||
| const gridSize = isMobile ? 50 : 80; | ||
| for (let i = 0; i < width; i += gridSize) { | ||
| g.moveTo(i, 0); | ||
| g.lineTo(i, height); | ||
| } | ||
| for (let i = 0; i < height; i += gridSize) { | ||
| g.moveTo(0, i); | ||
| g.lineTo(width, i); | ||
| } | ||
| g.stroke(); | ||
| }} |
There was a problem hiding this comment.
The draw function creates complex gradients and graphics operations in the render cycle. Consider memoizing these graphics operations or using cached textures to avoid recreating them on every render.
| draw={(g) => { | |
| g.clear(); | |
| g.fill({ color: KOREAN_COLORS.UI_BACKGROUND_DARK, alpha: 0.95 }); | |
| g.roundRect(0, 0, width, height, 10); | |
| // Dark cyberpunk background | |
| const gradient = new PIXI.FillGradient(0, 0, width, height); | |
| gradient.addColorStop(0, 0x0a0a0f); | |
| gradient.addColorStop(0.5, 0x1a1a2e); | |
| gradient.addColorStop(1, 0x0f0f23); | |
| g.fill(gradient); | |
| g.rect(0, 0, width, height); | |
| g.fill(); | |
| g.stroke({ width: 2, color: KOREAN_COLORS.ACCENT_GOLD, alpha: 0.6 }); | |
| g.roundRect(0, 0, width, height, 10); | |
| // Grid overlay | |
| g.stroke({ width: 1, color: KOREAN_COLORS.ACCENT_GOLD, alpha: 0.1 }); | |
| const gridSize = isMobile ? 50 : 80; | |
| for (let i = 0; i < width; i += gridSize) { | |
| g.moveTo(i, 0); | |
| g.lineTo(i, height); | |
| } | |
| for (let i = 0; i < height; i += gridSize) { | |
| g.moveTo(0, i); | |
| g.lineTo(width, i); | |
| } | |
| g.stroke(); | |
| }} | |
| draw={useMemo(() => { | |
| return (g) => { | |
| g.clear(); | |
| // Dark cyberpunk background | |
| const gradient = new PIXI.FillGradient(0, 0, width, height); | |
| gradient.addColorStop(0, 0x0a0a0f); | |
| gradient.addColorStop(0.5, 0x1a1a2e); | |
| gradient.addColorStop(1, 0x0f0f23); | |
| g.fill(gradient); | |
| g.rect(0, 0, width, height); | |
| g.fill(); | |
| // Grid overlay | |
| g.stroke({ width: 1, color: KOREAN_COLORS.ACCENT_GOLD, alpha: 0.1 }); | |
| const gridSize = isMobile ? 50 : 80; | |
| for (let i = 0; i < width; i += gridSize) { | |
| g.moveTo(i, 0); | |
| g.lineTo(i, height); | |
| } | |
| for (let i = 0; i < height; i += gridSize) { | |
| g.moveTo(0, i); | |
| g.lineTo(width, i); | |
| } | |
| g.stroke(); | |
| }; | |
| }, [width, height, isMobile])} |
Copilot uses AI. Check for mistakes.
| draw={(g) => { | ||
| g.clear(); | ||
|
|
||
| // Main card background with gradient | ||
| const gradient = new PIXI.FillGradient( | ||
| 0, | ||
| 0, | ||
| 0, | ||
| buttonHeight | ||
| ); | ||
| gradient.addColorStop( | ||
| 0, | ||
| KOREAN_COLORS.UI_BACKGROUND_MEDIUM | ||
| ); | ||
| gradient.addColorStop( | ||
| 0.6, | ||
| KOREAN_COLORS.UI_BACKGROUND_LIGHT | ||
| ); | ||
| gradient.addColorStop( | ||
| 1, | ||
| KOREAN_COLORS.UI_BACKGROUND_MEDIUM | ||
| ); | ||
| g.fill(gradient); | ||
| g.roundRect(0, 0, buttonWidth, buttonHeight, 10); | ||
| g.fill(); | ||
|
|
||
| // Trigram symbol background panel | ||
| g.fill({ | ||
| color: KOREAN_COLORS.UI_BACKGROUND_MEDIUM, | ||
| alpha: 0.8, | ||
| color: KOREAN_COLORS.ACCENT_GOLD, | ||
| alpha: 0.2, | ||
| }); | ||
| g.roundRect(0, 0, buttonWidth, buttonHeight, 6); | ||
| g.roundRect(buttonWidth - 40, 8, 35, 30, 6); | ||
| g.fill(); | ||
|
|
||
| // Enhanced border | ||
| g.stroke({ | ||
| width: 2, | ||
| color: KOREAN_COLORS.ACCENT_GOLD, | ||
| alpha: 0.9, | ||
| }); | ||
| g.roundRect(0, 0, buttonWidth, buttonHeight, 10); | ||
| g.stroke(); | ||
|
|
||
| // Inner accent line | ||
| g.stroke({ | ||
| width: 1, | ||
| color: KOREAN_COLORS.PRIMARY_CYAN, | ||
| alpha: 0.5, | ||
| }); | ||
| g.roundRect(2, 2, buttonWidth - 4, buttonHeight - 4, 8); | ||
| g.stroke(); | ||
| }} |
There was a problem hiding this comment.
Complex graphics operations with gradients are being executed in render loops. These should be memoized or cached to prevent performance issues during frequent re-renders.
Copilot uses AI. Check for mistakes.
Integrate authentic Korean martial arts techniques into combat controls, improve event handling and responsiveness in the ControlsSection, and enhance the PhilosophySection with detailed martial arts content and visual design updates.