+``` + +#### Form / Auth Card +Contained form panel on a clean background. + +```html + +``` + +#### CTA Box +Full-width bordered call-to-action block. + +```html + +``` + +#### Book / Media Card +Two-column item card with accent border. + +```html + +``` + +### Navigation + +#### NavBar +``` +Header: bg-light border-b-2 border-dark sticky top-0 z-50 +Height: h-24 +Logo: h-20 pl-4 (left-aligned) +Desktop nav: hidden md:flex items-center gap-6 +Mobile trigger: flex md:hidden +Nav links: px-4 text-lg font-medium text-dark hover:text-primary +``` + +Dropdowns animate in with Framer Motion (`opacity: 0, translateY: -25` → `opacity: 1, translateY: 0`, duration 0.3s). They use `bg-light rounded-md shadow-lg p-4 z-20`. Section headers inside dropdowns are `text-base font-bold uppercase tracking-wide text-dark`. Links inside are `text-base text-gray hover:text-primary`. + +#### Profile Dropdown +`bg-light rounded-lg shadow-lg p-3 w-48 z-20`, same motion entry as above. + +### Forms & Inputs + +Standard input pattern: + +```tsx +const inputClass = (invalid: boolean) => + `w-full rounded-lg border-2 px-4 py-3 text-sm text-dark bg-white caret-dark + focus:outline-none focus:shadow-none transition-colors ${ + invalid ? "border-red" : "border-borderLight focus:border-primary" + }`; +``` + +- Default border: `border-borderLight` +- Focus border: `border-primary` +- Error border: `border-red` +- Error message: `text-red font-semibold` with `role="alert"` +- Labels: `text-sm font-bold text-dark` +- Field gap: `gap-1.5` between label and input + +### Modal + +The shared `Modal` component (success/error/loading): + +``` +Overlay: fixed inset-0 z-50 flex items-center justify-center p-4 bg-dark/50 +Content: bg-light w-full max-w-sm rounded-2xl shadow-xl p-8 flex flex-col items-center gap-5 animate-modal-in +Icon container (success): w-16 h-16 rounded-full bg-primary/20 +Icon container (error): w-16 h-16 rounded-full bg-redLight +Loading spinner: w-16 h-16 rounded-full border-4 border-soft border-t-primary animate-spin +Title: text-xl font-bold text-dark text-center +Message: text-sm text-gray text-center leading-relaxed +Button: btn-green w-full mt-1 +``` + +ESC key closes non-loading modals. Click-outside behavior is optional per modal implementation. + +### Student Profile Toolbar +Full-width `bg-primary py-4` bar at top of student dashboard. Contains up to 4 `.btn-toolbar` buttons in a centered flex row (`gap-4`). Icons use SVG React components colored with Tailwind: +- Inactive: `text-secondary hover:text-accent` +- Active: `text-accent` + +### Tab Navigation (Sidebar) +Dashboard sidebar: `bg-primary border-r border-borderLight`, `w-[280px]` on large screens. + +Tab buttons: +```html + + + + + +``` + +Icons: `w-12 h-12 object-contain` — grayscale when inactive (`grayscale`), full color when active (`grayscale-0`). + +### Activity Timeline +Infinite-scroll feed with a vertical dotted line on the left. + +``` +Container: max-h-[700px] overflow-y-auto pr-2 activity-scrollbar +Timeline track: absolute left-4 top-0 bottom-0, border-l-[3px] border-dotted border-gray +Items: pl-12 space-y-4 +Dot: absolute -left-9 top-6 w-3 h-3 bg-primary rounded-full border-2 border-light shadow-sm +Item card: bg-light border border-borderLight p-4 rounded-lg shadow-sm hover:shadow-md +Clickable event name: text-primary underline cursor-pointer hover:text-secondary +``` + +### Progress / Stats Section +Inside student dashboard, beneath the chart: + +``` +Container: bg-light rounded-2xl overflow-hidden shadow-lg +Section header: bg-primary p-6, text: font-bold text-3xl text-light +Chart wrapper: h-72 w-full max-w-2xl +Stats list: list-none space-y-2, labels: text-dark font-medium, values: text-primary font-bold +``` + +### Mascot Characters (Stemette & Stemmy) +SVG mascots used in the Streak Modal and other gamification UIs. Rendered as inline SVG React components. They appear alongside speech bubbles with green/rounded styling. Do not use them in non-gamification contexts. + +### Confetti +`` — full-screen animation component. Triggered on portrait click and learning tab switch. Do not add confetti to destructive or neutral interactions. + +### Footer + +Three-column grid (`grid-cols-1 lg:grid-cols-3 gap-12`) inside `bg-light border-t-2 border-dark pt-10 pb-8`: + +1. **Branding:** `YSTEM&CHESS` — "Empowering Tomorrow's STEM Leaders" +2. **Contact:** Phone + email as anchor tags. Icon container: `w-10 h-10 bg-soft rounded-md border border-primary/20 group-hover:bg-primary group-hover:text-light` +3. **Socials:** Icon links with `hover:bg-soft rounded-lg p-2` + +Bottom bar: copyright left, `Play · Learn · Empower` right in `text-xs font-bold text-primary uppercase`. + +--- + +## 6. Motion & Animation + +### Defined Animations (Tailwind keyframes) + +| Class | Effect | Duration | Use | +|---|---|---|---| +| `animate-modal-in` | Scale `0.95` + `translateY(8px)` → `1` + `0`, fade in | 0.15s ease-out | All modal entry | +| `animate-fade-out` | Opacity + `translateY(-5px)` out | 0.4s ease, 2.1s delay, forwards | Toast/notification dismiss | +| `animate-shake` | `translateX` ±5px | 0.5s ease | Form validation error | +| `animate-spin` | Full rotation | 1s linear infinite | Loading spinners | + +### Framer Motion Patterns + +NavBar dropdowns and profile menus use Framer Motion with these shared variants: + +```js +const navbarVariants = { + parentInitial: { opacity: 0, translateY: -25 }, + parentAnimate: { opacity: 1, translateY: -10, transition: { duration: 0.3 } }, + childInitial: { opacity: 0, translateY: -25 }, + childAnimate: { opacity: 1, translateY: 0, transition: { duration: 0.3, staggerChildren: 0.125 } }, +}; +``` + +### Hover Transitions + +| Pattern | Classes | Use | +|---|---|---| +| Scale up on hover | `transition-transform hover:scale-105 active:scale-95` | Buttons, cards, avatar | +| Color transition | `transition-colors duration-300` or `duration-500` | Links, icon containers | +| Shadow lift | `shadow-sm hover:shadow-md transition-shadow` | Activity cards | +| Translate right | `hover:translate-x-1 transition-transform` | Footer contact links | +| Opacity dim | `transition-opacity hover:opacity-80` | Sponsor logos | + +### Rules +- All interactive elements should have a hover state — no bare unstyled hover interactions +- Scale transforms are preferred over shadow-only hover effects for primary CTAs +- Duration 200–300ms for fast micro-interactions, 500ms for button color transitions +- Use `duration-200` for toolbar/nav, `duration-300` for cards, `duration-500` for buttons + +--- + +## 7. Imagery & Assets + +### Logo +- **Full logo:** `full_logo.png` — used in NavBar (`h-20 pl-4`) and Programs page +- **Logo line break:** `LogoLineBreak.png` — full-width decorative divider between sections (`w-full mx-auto`, `role="presentation"`, empty `alt`) +- **Footer wordmark:** `YSTEM&CHESS` — CSS text, not an image + +### Background Pattern +The `.bg-soft` CSS class applies the chess-piece SVG repeating background: +```css +background-image: url('./assets/images/chess-piece-pattern.svg'); +background-repeat: repeat; +background-size: 100%; +``` +This is the default page body background. Do not override it with a plain color on full-page layouts. + +### Icon Libraries + +Two icon libraries are in use — use them consistently, do not import from other libraries: + +| Library | Import | Use | +|---|---|---| +| `lucide-react` | `import { IconName } from 'lucide-react'` | General UI icons (preferred for new work) | +| `@tabler/icons-react` | `import { IconName } from '@tabler/icons-react'` | General UI icons | +| `react-icons/fa6` | `import { FaLinkedin } from 'react-icons/fa6'` | Social media icons (footer only) | +| `@fortawesome/react-fontawesome` | FontAwesome | Caret icons in NavBar dropdowns | + +For new components, prefer `lucide-react`. Match the style already in use in the target area. + +### Student Dashboard Icons +SVG icons for tabs and toolbar buttons live in `src/assets/images/StudentInventoryIcons/` and `src/assets/images/student/`. They are imported as React SVG components or as `src` strings for `` tags. + +### Images +- Student photos: in `src/assets/images/student/` — real photography, not illustrations +- Sponsor/partner logos: `src/assets/images/sponsors/` and `src/assets/images/partners/` +- Mascot characters: SVG React components (`Stemette`, `Stemmy`, `StreakIcon`, etc.) +- Books: Cover images from `src/assets/images/` + +Always include meaningful `alt` text. Use `alt=""` and `role="presentation"` for purely decorative images (logo line breaks, background flourishes). + +--- + +## 8. Copywriting Principles + +### Voice +- Direct and action-oriented: "Join Now", "Get Started", "Donate", "Apply Now" +- Warm and inclusive: never elitist, never condescending +- Honest about access: "For students who qualify for free and reduced lunch" — plainspoken, not euphemistic + +### Headings +- Use sentence case for most headings: "Everyone is included. Everyone is welcome." +- Capitalize proper nouns and brand names: "Y STEM and Chess", "Devin Nakano" +- Avoid question headings in primary CTAs — prefer declarative statements + +### CTAs +- Primary: Short imperative verbs — "Donate", "Join Now!", "Get Started!", "Apply Now!", "Buy Now!" +- Secondary navigation: descriptive — "Create a new account", "Forgot password?" +- Exclamation marks are acceptable on primary student-facing CTAs ("Join Now!") +- Never use generic "Click Here" or "Learn More" without context + +### Error Messages +- Be specific: "The username or password is incorrect." not "An error occurred." +- Validation: "Invalid username or password" — direct, not alarming +- Never blame the user: avoid "You entered the wrong..." — prefer "The username or password is incorrect." + +### Empty States +- Acknowledge absence and direct to action: "Head to the Mentor tab to play chess with the AI tutor!" +- Use encouraging language for gamification empty states + +### Loading States +- Be patient and informative: "Loading more activities...", "Loading lessons page..." +- Use a spinner (`.animate-spin`) paired with a short message + +### Accessibility Language +- All interactive elements must have `aria-label` when the visible text is insufficient +- Use `role="alert"` for dynamic error messages +- Use `aria-expanded` on dropdown triggers + +--- + +## 9. Anti-Patterns — What NOT to Do + +The following patterns are explicitly forbidden. Agents must not produce these. + +### Visual Anti-Patterns + +| Anti-pattern | Why | Correct approach | +|---|---|---| +| Hardcoded hex values in JSX | Breaks token system, hard to update | Use Tailwind tokens (`text-primary`, `bg-soft`) or CSS vars | +| Creating a new button style | Fragment existing variants | Use `.btn-primary`, `.btn-green`, or `.btn-toolbar` | +| Using `bg-primary` as a large section background without `text-light` | Text becomes illegible | Always pair `bg-primary` with `text-light` or `text-dark` carefully | +| `rounded-full` on non-pill buttons | Inconsistent with `btn-green` which is `rounded-xl` | Match the correct variant | +| New font families | Off-brand | Lato only | +| Inline style `style={{}}` for colors or spacing | Bypasses token system | Tailwind utilities only | +| `text-accent` for body text | Accent yellow has poor contrast on white | Reserve for badges/highlights only | +| Shadow values not in the shadow scale | Visually inconsistent | Use `shadow-sm`, `shadow-md`, `shadow-lg`, `shadow-xl`, `shadow-card-yellow`, `shadow-card-green` | + +### CSS / Class Anti-Patterns + +| Anti-pattern | Why | Correct approach | +|---|---|---| +| String interpolation of Tailwind classes: `` `text-${color}` `` | Tailwind can't purge dynamic classes | Use `cn()` with full class names: `cn({ 'text-primary': isActive })` | +| Not using `cn()` for conditional classes | Produces messy or broken class merging | Always use `import { cn } from 'src/core/utils/cn'` | +| Importing SCSS for layout/spacing | SCSS is for complex component-specific overrides only | Use Tailwind for all layout, spacing, and color | +| Adding `!important` | Signals a specificity war | Fix the cascade instead | +| Global button override in SCSS | `Student.scss` already has an erroneous `button { background-color: #0046fd }` — do not replicate this pattern | Use class-scoped styles only | + +### Layout Anti-Patterns + +| Anti-pattern | Why | Correct approach | +|---|---|---| +| Fixed pixel widths | Breaks responsiveness | Use `max-w-*`, percentages, or `flex-1` | +| Desktop-first responsive design | Platform is mobile-first | Write mobile styles first, add `md:` and `lg:` overrides | +| Missing `aria-label` on icon-only buttons | Inaccessible | Always add `aria-label` to buttons without visible text | +| Using `` for nav menus | Inaccessible | Use ``, ``, `` for navigation | +| Not using `max-w-7xl mx-auto` for page sections | Content spans full width, breaking readability on large screens | Always constrain content with a max-width container | + +### Content Anti-Patterns + +| Anti-pattern | Correct approach | +|---|---| +| Generic CTAs: "Click Here", "Learn More" | Use specific action verbs | +| Missing alt text | Always add meaningful `alt` | +| Decorative images with alt text describing decoration | Use `alt=""` + `role="presentation"` | +| Blame-the-user error messages | Neutral, helpful phrasing | + +--- + +## 10. CSS Primitives Reference + +The companion file `design-tokens.css` (in the same `documentation/` directory) is a standalone, build-step-free stylesheet with all tokens as CSS custom properties and all reusable component classes in plain CSS. Any agent or environment without access to the Tailwind build can use it directly. + +### Available CSS variables (from `design-tokens.css`) + +```css +/* Colors */ +--color-primary, --color-secondary, --color-soft, --color-accent, +--color-dark, --color-gray, --color-muted, --color-border-light, +--color-light, --color-red, --color-red-light + +/* Typography */ +--font-family-base, --font-weight-normal, --font-weight-medium, --font-weight-bold + +/* Spacing (4px base scale) */ +--space-1 through --space-24 + +/* Shadows */ +--shadow-sm, --shadow-md, --shadow-lg, --shadow-xl, +--shadow-card-yellow, --shadow-card-green + +/* Border radius */ +--radius-sm, --radius-md, --radius-lg, --radius-xl, --radius-2xl, --radius-3xl, --radius-full + +/* Animation */ +--duration-fast, --duration-base, --duration-slow +--easing-default, --easing-out +``` + +### Available utility classes (from `design-tokens.css`) + +- `.btn-primary` — dark pill button +- `.btn-green` — green rounded button +- `.btn-toolbar` — transparent icon button +- `.activity-scrollbar` — green custom scrollbar +- `.modal-overlay` — full-screen dark backdrop +- `.modal-content` — centered white modal panel +- `.input-base` — standard text input +- `.input-error` — error state input +- `.card` — subtle content card +- `.card-brand-green` — primary brand card (green bg, yellow shadow) +- `.card-brand-light` — primary brand card (light bg, green shadow) diff --git a/documentation/mobile-ui/README.md b/documentation/mobile-ui/README.md new file mode 100644 index 00000000..7c8e50a8 --- /dev/null +++ b/documentation/mobile-ui/README.md @@ -0,0 +1,98 @@ +# YSTEM Mobile App — UI/UX Screen Library + +Designed by Sandith Hewage (UI/UX Engineer, Y STEM and Chess) +For the Cal Poly CSS team building the React Native + Expo mobile app. + +--- + +## Overview + +This directory contains all screen components for the YSTEM mobile app across 5 SOW deliverables: + +| Deliverable | Screens | +|---|---| +| D1 — Auth + Navigation | `LoginScreen`, `SignUpScreen`, `TabNavigator`, `HomeScreen` | +| D2 — Lessons | `LessonsSelectionScreen`, `LessonScreen` | +| D3 — Puzzles | `PuzzlesScreen` | +| D4 — Play vs Computer | `PlaySetupScreen`, `PlayGameScreen` | + +--- + +## File Structure + +``` +mobile-ui/ +├── screens/ +│ ├── LoginScreen.tsx # D1 — Email/password login +│ ├── SignUpScreen.tsx # D1 — Registration with role selector +│ ├── HomeScreen.tsx # D1 — Welcome hero, stats, activity feed +│ ├── LessonsSelectionScreen.tsx # D2 — Piece cards + lesson list +│ ├── LessonScreen.tsx # D2 — Board + instruction walkthrough +│ ├── PuzzlesScreen.tsx # D3 — Full-width board + puzzle info +│ ├── PlaySetupScreen.tsx # D4 — Color picker + difficulty grid +│ └── PlayGameScreen.tsx # D4 — Live game board + tutor panel +├── navigation/ +│ └── TabNavigator.tsx # D1 — Bottom tab bar +└── README.md +``` + +--- + +## Setup + +### 1. Install dependencies + +```bash +npx expo install @expo-google-fonts/lato expo-font expo-linear-gradient +npx expo install react-native-safe-area-context @react-navigation/native @react-navigation/bottom-tabs +``` + +### 2. Copy design tokens + +Copy `design-tokens.rn.ts` (one level up: `documentation/design-tokens.rn.ts`) into your project src: + +```bash +cp documentation/design-tokens.rn.ts src/design-tokens.rn.ts +``` + +### 3. Update token imports + +Each screen imports from `'../design-tokens.rn'` — adjust the relative path to match your project structure. + +### 4. Load fonts in App.tsx + +```tsx +import { useFonts, Lato_400Regular, Lato_700Bold } from '@expo-google-fonts/lato'; + +export default function App() { + const [fontsLoaded] = useFonts({ Lato_400Regular, Lato_700Bold }); + if (!fontsLoaded) return null; + // ... +} +``` + +--- + +## Design Principles + +- **All colors, spacing, radius, and shadows** come from `design-tokens.rn.ts` — no hardcoded hex values +- **Screen background:** `colors.soft` (#E5F3D2) +- **Card surfaces:** `colors.light` (#F9FAF7) +- **Primary CTA:** `btnPrimaryStyle` (dark pill) +- **Green CTA:** `btnGreenStyle` (brand green rounded) +- **Min tap target:** 44pt for all interactive elements +- **Chess board:** `aspectRatio: 1` + `width: '100%'` for square constraint +- **Safe area:** All screens wrap content in `SafeAreaView` or add `paddingBottom` for home indicator + +--- + +## Brand Colors Quick Reference + +| Token | Hex | Use | +|---|---|---| +| `primary` | `#7FCC26` | CTAs, active states, progress | +| `secondary` | `#BFD99E` | Inactive tabs, muted accents | +| `soft` | `#E5F3D2` | Screen backgrounds | +| `accent` | `#EAD94C` | Streaks, badges, highlights | +| `dark` | `#1F1F1F` | Text, btn-primary background | +| `light` | `#F9FAF7` | Card surfaces, form fields | diff --git a/documentation/mobile-ui/navigation/TabNavigator.tsx b/documentation/mobile-ui/navigation/TabNavigator.tsx new file mode 100644 index 00000000..a6059e27 --- /dev/null +++ b/documentation/mobile-ui/navigation/TabNavigator.tsx @@ -0,0 +1,237 @@ +/** + * TabNavigator.tsx + * D1 — Auth + Navigation + * + * YSTEM Mobile App — Y STEM and Chess + * Designed by Sandith Hewage (UI/UX Engineer) + * + * Bottom tab bar: Home | Lessons | Puzzles | Play | Profile + * + * Requires: + * @react-navigation/native + * @react-navigation/bottom-tabs + * react-native-safe-area-context + */ + +import React from 'react'; +import { View, Text, StyleSheet, Platform } from 'react-native'; +import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; +import { + colors, + spacing, + fontSize, + fontFamily, + fontWeight, + radius, + shadows, +} from '../design-tokens.rn'; + +// --------------------------------------------------------------------------- +// Tab Param List +// --------------------------------------------------------------------------- + +export type TabParamList = { + Home: undefined; + Lessons: undefined; + Puzzles: undefined; + Play: undefined; + Profile: undefined; +}; + +const Tab = createBottomTabNavigator(); + +// --------------------------------------------------------------------------- +// Icon components (SVG-free placeholders — swap for lucide-react-native icons) +// --------------------------------------------------------------------------- + +interface TabIconProps { + label: string; + focused: boolean; + emoji: string; +} + +function TabIcon({ label, focused, emoji }: TabIconProps) { + return ( + + {emoji} + + ); +} + +// --------------------------------------------------------------------------- +// Screen placeholders (replace with actual screen imports) +// --------------------------------------------------------------------------- + +// Import your screens here: +// import HomeScreen from '../screens/HomeScreen'; +// import LessonsSelectionScreen from '../screens/LessonsSelectionScreen'; +// import PuzzlesScreen from '../screens/PuzzlesScreen'; +// import PlaySetupScreen from '../screens/PlaySetupScreen'; +// import ProfileScreen from '../screens/ProfileScreen'; + +// Placeholder components for development +const Placeholder = ({ name }: { name: string }) => ( + + {name} + +); + +// --------------------------------------------------------------------------- +// Navigator +// --------------------------------------------------------------------------- + +export default function TabNavigator() { + return ( + + } + options={{ + tabBarLabel: 'Home', + tabBarIcon: ({ focused }) => ( + + ), + }} + /> + + } + options={{ + tabBarLabel: 'Lessons', + tabBarIcon: ({ focused }) => ( + + ), + }} + /> + + {/* Center Play tab — visually elevated */} + } + options={{ + tabBarLabel: 'Play', + tabBarIcon: ({ focused }) => ( + + + ♟ + + + ), + tabBarLabelStyle: { ...styles.tabLabel, marginTop: 28 }, + }} + /> + + } + options={{ + tabBarLabel: 'Puzzles', + tabBarIcon: ({ focused }) => ( + + ), + }} + /> + + } + options={{ + tabBarLabel: 'Profile', + tabBarIcon: ({ focused }) => ( + + ), + }} + /> + + ); +} + +// --------------------------------------------------------------------------- +// Styles +// --------------------------------------------------------------------------- + +const styles = StyleSheet.create({ + tabBar: { + backgroundColor: colors.light, + borderTopWidth: 1, + borderTopColor: colors.borderLight, + height: Platform.OS === 'ios' ? 88 : 68, + paddingBottom: Platform.OS === 'ios' ? 28 : 8, + paddingTop: spacing[2], + ...shadows.md, + }, + + tabItem: { + paddingTop: spacing[1], + }, + + tabLabel: { + fontSize: fontSize.xs, + fontFamily: fontFamily.bold, + fontWeight: fontWeight.bold, + letterSpacing: 0.3, + marginTop: 2, + }, + + // ── Regular tab icon ───────────────────────────────── + + iconWrapper: { + width: 32, + height: 32, + borderRadius: radius.lg, + alignItems: 'center', + justifyContent: 'center', + }, + + iconWrapperActive: { + backgroundColor: colors.primaryFaint, + }, + + iconEmoji: { + fontSize: 18, + opacity: 0.5, + }, + + iconEmojiActive: { + opacity: 1, + }, + + // ── Center Play tab ─────────────────────────────────── + + centerTabContainer: { + alignItems: 'center', + justifyContent: 'center', + marginTop: -20, // Lifts the button above the tab bar + }, + + centerTabButton: { + width: 56, + height: 56, + borderRadius: radius.full, + backgroundColor: colors.dark, + alignItems: 'center', + justifyContent: 'center', + borderWidth: 3, + borderColor: colors.light, + ...shadows.lg, + }, + + centerTabButtonActive: { + backgroundColor: colors.primary, + }, + + centerTabEmoji: { + fontSize: 24, + }, +}); diff --git a/documentation/mobile-ui/preview.html b/documentation/mobile-ui/preview.html new file mode 100644 index 00000000..4893b6d9 --- /dev/null +++ b/documentation/mobile-ui/preview.html @@ -0,0 +1,1033 @@ + + + + + + YSTEM Mobile App — Screen Previews + + + + + + + + + + + Y + + YSTEM Mobile App + UI/UX Screen Library · React Native + Expo · Designed by Sandith Hewage + + + PR #246 on GitHub ↗ + + + + + + +D1 — Auth + Navigation + + + + + D1 + + + + 9:41●●● 100% + + + + Y + Y STEM and Chess + Learn. Play. Grow. + + + + + Welcome back + + + Username + sandith_h + + + + Password + •••••••••• + + + + Forgot password? + + + Enter + + + Don't have an account? Sign up + + + + + + Login Screen + + + + + D1 + + + + 9:41●●● 100% + + + Y + Create your account + Join Y STEM and Chess today + + + + + Username + Choose a username + + + Password + Create a password (min 8) + + + Confirm password + Re-enter your password + + + + + I am a… + + Student + Mentor + + + + Create Account + + Already have an account? Log in + + + + + + Sign Up Screen + + + + + D1 + + + + 9:41●●● 100% + + + + + + Good morning, + Student! 👋 + Ready to learn something new? + + S + + + + + + 📚Start Lesson + + + 🧩Daily Puzzle + + + + + Your Progress + + + 🌐 + 2.5 + hrs + Web Time + + + 📚 + 45 + min + Lessons + + + 🧩 + 12 + solved + Puzzles + + + + + Recent Activity + + + + + Completed "How the Knight Moves" + 2h ago + + + + + + Solved puzzle #4821 — Mate in 2 + 3h ago + + + + + + Earned "Quick Learner" badge 🏅 + Yesterday + + + + + + + + + + + 🏠 + Home + + + 📚 + Lessons + + + ♟ + Play + + + 🧩 + Puzzles + + + 👤 + Profile + + + + + + Home Screen + + + + + + + + +D2 — Lessons + + + + + D2 + + + + 9:41●●● 100% + + + Lessons + + 5/22 lessons complete + + + + Select a piece + + + + ♔ + King + + 3/3 + + + + ♕ + Queen + + 2/4 + + + + ♖ + Rook + + 0/3 + + + + + + + King Lessons + 3/3 done + + + + + ✓ + + The Most Important Piece + + Beginner + ⏱ 5 min + + + › + + + ✓ + + King Safety & Castling + + Beginner + ⏱ 8 min + + + › + + + ✓ + + King in the Endgame + + Intermediate + ⏱ 10 min + + + › + + + + + + + + + Start Lesson → + + + + + Lessons Selection + + + + + D2 + + + + 9:41●●● 100% + + + + ‹ + + Knight Lesson + The L-Shape Move + + 2/4 + + + + + + + + + + + + + + + + ♞ + + + + + + + + + + + ♞ + Knight + + From e4, the Knight can jump to f6, g5, g3, f2, d2, c3, c5, or d6. That's up to 8 squares from the center! + + 💡 Tip + Center Knights are more powerful — they control more squares. + + + + + + + ‹ Back + Next › + + + + + Lesson Screen + + + + + + + + +D3 — Puzzles + + + + D3 + + + + 9:41●●● 100% + + + + + Puzzle + #4821 + + Puzzles + + 🔥5 + + + + + + + + + + ♜ + ♞ + ♔ + + + + + ⬜ White to move + + + + + + + + Rating + 1287 + + + White to move. Find the move that wins material. + + + + Fork + Knight + Intermediate + + + + 💡 Hint + Look for a Knight move that attacks two pieces at once. + + + + + + + New Puzzle › + + + + + Puzzles Screen + + + + + + + + +D4 — Play vs Computer + + + + + D4 + + + + 9:41●●● 100% + + + + ‹ + Play vs Computer + + + + + + Choose your color + + + + ✓ + ♔ + White + Moves first + + + + ♚ + Black + Moves second + + + + + Choose difficulty + + + + + 🌱 + Beginner + For basics + + + + + + + + + + + 😊 + Easy + Gentle + + + + + + + + + + + 🤔 + Medium + Real thinking + + + + + + + + + + + + + + 😤 + Hard + Tactical + + + + + + + + + + + 👑 + Master + Near-perfect + + + + + + + + + + + + + + Playing as + ♔ White + + + + Difficulty + 🌱 Beginner + + + + Engine + Lv 1 + + + + + + Let's Go! ♟ + + + + + Play Setup + + + + + D4 + + + + 9:41●●● 100% + + + + ‹ + vs Computer + + Beginner + + + + + + + + 🤖 + + Computer (Beginner) + + + 10:00 + + + + + + ♜♛♚♝♜ + ♟♟♟♟♟♟ + ♞♟ + ♟♝ + ♙ + ♘ + ♙♙♙♙♙♙ + ♖♘♗♕♔♗♖ + + + + + S + + You + ♙ ♙ + + + 9:42 + + + + + + + + 🎓 + Tutor + +0.3 + + ‹ + + + The Ruy Lopez opening. Consider castling to protect your king before attacking. + + + + + + + + 1. + e4 + e5 + + + 2. + Nf3 + Nc6 + + + 3. + Bb5 + a6 + + + 7. + Bb3 + + + + + + + + + ↩ + Undo + + + ⇅ + Flip + + + 🤝 + Draw + + + 🏳 + Resign + + + + + + Play Game Screen + + + + + + + Y STEM and Chess · Mobile UI/UX · Designed by Sandith Hewage · PR #246 + + + + diff --git a/documentation/mobile-ui/screens/HomeScreen.tsx b/documentation/mobile-ui/screens/HomeScreen.tsx new file mode 100644 index 00000000..1d02f744 --- /dev/null +++ b/documentation/mobile-ui/screens/HomeScreen.tsx @@ -0,0 +1,522 @@ +/** + * HomeScreen.tsx + * D1 — Home + * + * YSTEM Mobile App — Y STEM and Chess + * Designed by Sandith Hewage (UI/UX Engineer) + * + * Features: + * - Welcome hero with user greeting + avatar + * - Quick stats row: web time, lesson time, puzzles solved + * - Recent activity feed with timeline dots + * - Donate CTA card (brand dark pill button) + * - Safe area + scrollable layout + */ + +import React from 'react'; +import { + View, + Text, + ScrollView, + TouchableOpacity, + StyleSheet, + StatusBar, +} from 'react-native'; +import { SafeAreaView } from 'react-native-safe-area-context'; +import { + colors, + spacing, + fontSize, + fontFamily, + fontWeight, + radius, + shadows, + btnPrimaryStyle, + btnPrimaryTextStyle, + cardStyle, + avatarStyle, + timelineDotStyle, + layout, + getLineHeight, +} from '../design-tokens.rn'; + +// --------------------------------------------------------------------------- +// Types +// --------------------------------------------------------------------------- + +interface StatItem { + label: string; + value: string; + unit: string; + emoji: string; +} + +interface ActivityItem { + id: string; + description: string; + time: string; + type: 'lesson' | 'puzzle' | 'game' | 'badge'; +} + +interface HomeScreenProps { + username?: string; + stats?: StatItem[]; + recentActivity?: ActivityItem[]; + onDonate?: () => void; + onStartLesson?: () => void; + onPlayPuzzle?: () => void; +} + +// --------------------------------------------------------------------------- +// Default data +// --------------------------------------------------------------------------- + +const DEFAULT_STATS: StatItem[] = [ + { label: 'Web Time', value: '2.5', unit: 'hrs', emoji: '🌐' }, + { label: 'Lesson Time', value: '45', unit: 'min', emoji: '📚' }, + { label: 'Puzzles', value: '12', unit: 'solved', emoji: '🧩' }, +]; + +const DEFAULT_ACTIVITY: ActivityItem[] = [ + { id: '1', description: 'Completed "How the Knight Moves"', time: '2h ago', type: 'lesson' }, + { id: '2', description: 'Solved puzzle #4821 — Mate in 2', time: '3h ago', type: 'puzzle' }, + { id: '3', description: 'Earned "Quick Learner" badge', time: 'Yesterday', type: 'badge' }, + { id: '4', description: 'Played 3 games vs Computer (Easy)', time: 'Yesterday', type: 'game' }, + { id: '5', description: 'Started "Pawn Structures" lesson', time: '2 days ago', type: 'lesson' }, +]; + +const ACTIVITY_EMOJI: Record = { + lesson: '📖', + puzzle: '🧩', + game: '♟', + badge: '🏅', +}; + +// --------------------------------------------------------------------------- +// Sub-components +// --------------------------------------------------------------------------- + +function StatCard({ item }: { item: StatItem }) { + return ( + + {item.emoji} + {item.value} + {item.unit} + {item.label} + + ); +} + +function ActivityRow({ item, isLast }: { item: ActivityItem; isLast: boolean }) { + return ( + + {/* Timeline */} + + + {!isLast && } + + + {/* Content */} + + + {ACTIVITY_EMOJI[item.type]} + + + {item.description} + {item.time} + + + + ); +} + +// --------------------------------------------------------------------------- +// Main Screen +// --------------------------------------------------------------------------- + +export default function HomeScreen({ + username = 'Student', + stats = DEFAULT_STATS, + recentActivity = DEFAULT_ACTIVITY, + onDonate, + onStartLesson, + onPlayPuzzle, +}: HomeScreenProps) { + const hour = new Date().getHours(); + const greeting = hour < 12 ? 'Good morning' : hour < 17 ? 'Good afternoon' : 'Good evening'; + + return ( + + + + {/* ── Hero / Welcome ──────────────────────────────── */} + + + {greeting}, + {username}! 👋 + Ready to learn something new? + + + + {username.charAt(0).toUpperCase()} + + + + + {/* ── Quick Action Buttons ─────────────────────────── */} + + + 📚 + Start Lesson + + + 🧩 + Daily Puzzle + + + + {/* ── Stats Row ────────────────────────────────────── */} + + Your Progress + + {stats.map((s) => ( + + ))} + + + + {/* ── Recent Activity ───────────────────────────────── */} + + Recent Activity + + {recentActivity.map((item, index) => ( + + ))} + + + + {/* ── Donate CTA ────────────────────────────────────── */} + + + Support our mission + + Help us bring chess and STEM education to underserved students everywhere. + + + + Donate + + + + + + ); +} + +// --------------------------------------------------------------------------- +// Styles +// --------------------------------------------------------------------------- + +const styles = StyleSheet.create({ + safeArea: { + flex: 1, + backgroundColor: colors.soft, + }, + + scroll: { + flex: 1, + }, + + scrollContent: { + paddingHorizontal: layout.screenPaddingH, + paddingTop: spacing[8], + paddingBottom: spacing[12], + gap: layout.sectionSpacing, + }, + + // ── Hero ──────────────────────────────────────────── + + hero: { + flexDirection: 'row', + alignItems: 'flex-start', + justifyContent: 'space-between', + }, + + heroLeft: { + flex: 1, + gap: spacing[1], + }, + + greeting: { + fontSize: fontSize.base, + fontFamily: fontFamily.regular, + color: colors.gray, + }, + + username: { + fontSize: fontSize['3xl'], + fontFamily: fontFamily.bold, + fontWeight: fontWeight.bold, + color: colors.dark, + lineHeight: getLineHeight(fontSize['3xl'], 1.2), + }, + + heroSub: { + fontSize: fontSize.sm, + fontFamily: fontFamily.regular, + color: colors.gray, + marginTop: spacing[1], + }, + + avatarContainer: { + marginLeft: spacing[4], + }, + + avatar: { + ...avatarStyle, + width: 60, + height: 60, + backgroundColor: colors.primaryFaint, + }, + + avatarInitial: { + fontSize: fontSize['2xl'], + fontFamily: fontFamily.bold, + fontWeight: fontWeight.bold, + color: colors.primary, + }, + + // ── Quick Actions ──────────────────────────────────── + + quickActions: { + flexDirection: 'row', + gap: spacing[4], + marginTop: -spacing[4], // Pull up slightly + }, + + quickActionBtn: { + flex: 1, + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'center', + gap: spacing[2], + paddingVertical: spacing[4], + backgroundColor: colors.dark, + borderRadius: radius.xl, + ...shadows.md, + }, + + quickActionBtnAccent: { + backgroundColor: colors.primary, + }, + + quickActionEmoji: { + fontSize: 18, + }, + + quickActionText: { + fontSize: fontSize.sm, + fontFamily: fontFamily.bold, + fontWeight: fontWeight.bold, + color: colors.light, + }, + + // ── Sections ───────────────────────────────────────── + + section: { + gap: spacing[4], + }, + + sectionTitle: { + fontSize: fontSize.lg, + fontFamily: fontFamily.bold, + fontWeight: fontWeight.bold, + color: colors.dark, + }, + + // ── Stats ───────────────────────────────────────────── + + statsRow: { + flexDirection: 'row', + gap: spacing[3], + }, + + // ── Activity ────────────────────────────────────────── + + activityCard: { + ...cardStyle, + gap: 0, + paddingVertical: spacing[2], + }, + + // ── Donate Card ─────────────────────────────────────── + + donateCard: { + backgroundColor: colors.dark, + borderRadius: radius['2xl'], + padding: spacing[6], + gap: spacing[4], + ...shadows.lg, + }, + + donateTextGroup: { + gap: spacing[2], + }, + + donateTitle: { + fontSize: fontSize.xl, + fontFamily: fontFamily.bold, + fontWeight: fontWeight.bold, + color: colors.light, + }, + + donateBody: { + fontSize: fontSize.sm, + fontFamily: fontFamily.regular, + color: colors.white60, + lineHeight: getLineHeight(fontSize.sm), + }, + + donateButton: { + ...btnPrimaryStyle, + backgroundColor: colors.primary, + borderColor: colors.primary, + alignSelf: 'flex-start', + paddingVertical: spacing[3], + paddingHorizontal: spacing[8], + }, + + donateButtonText: { + ...btnPrimaryTextStyle, + color: colors.dark, + }, +}); + +// ── Stat card styles ───────────────────────────────── + +const statStyles = StyleSheet.create({ + card: { + flex: 1, + ...cardStyle, + alignItems: 'center', + justifyContent: 'center', + paddingVertical: spacing[4], + gap: spacing[1], + }, + + emoji: { + fontSize: 22, + marginBottom: spacing[1], + }, + + value: { + fontSize: fontSize['2xl'], + fontFamily: fontFamily.bold, + fontWeight: fontWeight.bold, + color: colors.dark, + }, + + unit: { + fontSize: fontSize.xs, + fontFamily: fontFamily.regular, + color: colors.muted, + }, + + label: { + fontSize: fontSize.xs, + fontFamily: fontFamily.bold, + fontWeight: fontWeight.bold, + color: colors.gray, + textAlign: 'center', + }, +}); + +// ── Activity row styles ────────────────────────────── + +const activityStyles = StyleSheet.create({ + row: { + flexDirection: 'row', + paddingVertical: spacing[3], + }, + + timeline: { + width: 24, + alignItems: 'center', + paddingTop: 4, + }, + + dot: { + ...timelineDotStyle, + }, + + line: { + width: 2, + flex: 1, + backgroundColor: colors.borderLight, + marginTop: spacing[1], + }, + + content: { + flex: 1, + flexDirection: 'row', + alignItems: 'flex-start', + gap: spacing[3], + paddingLeft: spacing[3], + }, + + emojiContainer: { + width: 32, + height: 32, + borderRadius: radius.lg, + backgroundColor: colors.soft, + alignItems: 'center', + justifyContent: 'center', + flexShrink: 0, + }, + + typeEmoji: { + fontSize: 15, + }, + + textGroup: { + flex: 1, + gap: spacing[1], + }, + + description: { + fontSize: fontSize.sm, + fontFamily: fontFamily.regular, + color: colors.dark, + lineHeight: getLineHeight(fontSize.sm), + }, + + time: { + fontSize: fontSize.xs, + fontFamily: fontFamily.regular, + color: colors.muted, + }, +}); diff --git a/documentation/mobile-ui/screens/LessonScreen.tsx b/documentation/mobile-ui/screens/LessonScreen.tsx new file mode 100644 index 00000000..207ab374 --- /dev/null +++ b/documentation/mobile-ui/screens/LessonScreen.tsx @@ -0,0 +1,611 @@ +/** + * LessonScreen.tsx + * D2 — Lessons + * + * YSTEM Mobile App — Y STEM and Chess + * Designed by Sandith Hewage (UI/UX Engineer) + * + * Features: + * - Full-width chess board (aspectRatio: 1 enforced) + * - Chess piece diagram overlay (current piece highlight) + * - Instruction panel with step text + step counter + * - Back / Next navigation controls + * - Completion state with "Lesson Complete" banner + * - Progress bar at top + */ + +import React, { useState } from 'react'; +import { + View, + Text, + TouchableOpacity, + StyleSheet, + StatusBar, + ScrollView, +} from 'react-native'; +import { SafeAreaView } from 'react-native-safe-area-context'; +import { + colors, + spacing, + fontSize, + fontFamily, + fontWeight, + radius, + shadows, + btnGreenStyle, + btnGreenTextStyle, + btnPrimaryStyle, + btnPrimaryTextStyle, + cardStyle, + layout, + chess, + getLineHeight, +} from '../design-tokens.rn'; + +// --------------------------------------------------------------------------- +// Types + Data +// --------------------------------------------------------------------------- + +interface LessonStep { + id: string; + instruction: string; + highlight?: string; // Square to highlight e.g. 'e4' + tip?: string; +} + +interface LessonScreenProps { + title?: string; + pieceName?: string; + pieceEmoji?: string; + steps?: LessonStep[]; + onBack?: () => void; + onComplete?: () => void; + onNextLesson?: () => void; +} + +const DEFAULT_STEPS: LessonStep[] = [ + { + id: '1', + instruction: 'The Knight is the only piece that can jump over other pieces. It moves in an "L" shape: two squares in one direction, then one square perpendicular.', + highlight: 'g1', + tip: 'Remember: Knights always land on a different color square than they started on!', + }, + { + id: '2', + instruction: 'From e4, the Knight can jump to f6, g5, g3, f2, d2, c3, c5, or d6. That\'s up to 8 squares from the center!', + highlight: 'e4', + tip: 'Center Knights are more powerful — they control more squares.', + }, + { + id: '3', + instruction: 'At the edge of the board, the Knight loses many options. A Knight on a1 can only reach b3 or c2 — just 2 squares!', + highlight: 'a1', + tip: 'Chess pros say: "A Knight on the rim is dim."', + }, + { + id: '4', + instruction: 'Knights are excellent at creating "forks" — attacking two pieces at once. Because of their L-shape, opponents often miss the threat!', + tip: 'Look for Knight forks against the King and Rook — a "royal fork".', + }, +]; + +// --------------------------------------------------------------------------- +// Chess Board (simplified representation) +// --------------------------------------------------------------------------- + +function ChessBoardDisplay({ highlight }: { highlight?: string }) { + const files = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h']; + const ranks = [8, 7, 6, 5, 4, 3, 2, 1]; + + return ( + + {ranks.map((rank) => ( + + {files.map((file, fileIdx) => { + const isLight = (fileIdx + rank) % 2 === 0; + const squareName = `${file}${rank}`; + const isHighlighted = highlight === squareName; + + // Show knight on e4 or g1 depending on step + const isKnightSquare = squareName === (highlight || 'g1'); + + return ( + + {isKnightSquare && ( + ♞ + )} + + ); + })} + + ))} + + {/* File labels */} + + {files.map((f) => ( + {f} + ))} + + + ); +} + +// --------------------------------------------------------------------------- +// Main Screen +// --------------------------------------------------------------------------- + +export default function LessonScreen({ + title = 'The L-Shape Move', + pieceName = 'Knight', + pieceEmoji = '♞', + steps = DEFAULT_STEPS, + onBack, + onComplete, + onNextLesson, +}: LessonScreenProps) { + const [currentStep, setCurrentStep] = useState(0); + const [completed, setCompleted] = useState(false); + + const step = steps[currentStep]; + const isFirst = currentStep === 0; + const isLast = currentStep === steps.length - 1; + const progress = (currentStep + 1) / steps.length; + + const handleNext = () => { + if (isLast) { + setCompleted(true); + onComplete?.(); + } else { + setCurrentStep((s) => s + 1); + } + }; + + const handleBack = () => { + if (isFirst) { + onBack?.(); + } else { + setCurrentStep((s) => s - 1); + } + }; + + return ( + + + + {/* ── Top Bar ──────────────────────────────────────── */} + + + ‹ + + + + {pieceName} Lesson + {title} + + + + + {currentStep + 1}/{steps.length} + + + + + {/* ── Progress Bar ─────────────────────────────────── */} + + + + + + {/* ── Chess Board ──────────────────────────────────── */} + + + + + {/* ── Instruction Panel ─────────────────────────────── */} + {!completed ? ( + + {/* Piece badge */} + + {pieceEmoji} + {pieceName} + + + {/* Instruction text */} + {step.instruction} + + {/* Tip */} + {step.tip && ( + + 💡 Tip + {step.tip} + + )} + + ) : ( + // ── Completion State ──────────────────────────────── + + 🏆 + Lesson Complete! + + You've mastered the basics of the {pieceName}. Keep it up! + + + +50 XP + + + )} + + + + {/* ── Navigation Controls ───────────────────────────── */} + + {!completed ? ( + <> + + {isFirst ? 'Exit' : '‹ Back'} + + + + + {isLast ? 'Finish ✓' : 'Next ›'} + + + + ) : ( + + Next Lesson → + + )} + + + ); +} + +// --------------------------------------------------------------------------- +// Board Styles +// --------------------------------------------------------------------------- + +const boardStyles = StyleSheet.create({ + board: { + width: '100%', + aspectRatio: 1, + backgroundColor: chess.boardBg, + borderRadius: radius.lg, + overflow: 'hidden', + ...shadows.md, + }, + + rank: { + flex: 1, + flexDirection: 'row', + }, + + square: { + flex: 1, + alignItems: 'center', + justifyContent: 'center', + }, + + squareLight: { + backgroundColor: '#F0D9B5', // Classic light wood + }, + + squareDark: { + backgroundColor: '#B58863', // Classic dark wood + }, + + squareHighlighted: { + backgroundColor: chess.highlightSquare, + }, + + piece: { + fontSize: 22, + }, + + fileLabels: { + position: 'absolute', + bottom: 2, + left: 0, + right: 0, + flexDirection: 'row', + }, + + fileLabel: { + flex: 1, + fontSize: 8, + fontFamily: fontFamily.bold, + fontWeight: fontWeight.bold, + color: colors.muted, + textAlign: 'center', + opacity: 0.6, + }, +}); + +// --------------------------------------------------------------------------- +// Screen Styles +// --------------------------------------------------------------------------- + +const styles = StyleSheet.create({ + safeArea: { + flex: 1, + backgroundColor: colors.soft, + }, + + // ── Top Bar ───────────────────────────────────────── + + topBar: { + flexDirection: 'row', + alignItems: 'center', + paddingHorizontal: layout.screenPaddingH, + paddingVertical: spacing[4], + gap: spacing[3], + }, + + backButton: { + width: 40, + height: 40, + borderRadius: radius.full, + backgroundColor: colors.light, + alignItems: 'center', + justifyContent: 'center', + ...shadows.sm, + }, + + backArrow: { + fontSize: fontSize['2xl'], + color: colors.dark, + marginTop: -2, + }, + + topCenter: { + flex: 1, + alignItems: 'center', + }, + + topTitle: { + fontSize: fontSize.xs, + fontFamily: fontFamily.bold, + fontWeight: fontWeight.bold, + color: colors.muted, + textTransform: 'uppercase', + letterSpacing: 1.2, + }, + + topSubtitle: { + fontSize: fontSize.base, + fontFamily: fontFamily.bold, + fontWeight: fontWeight.bold, + color: colors.dark, + }, + + stepCounter: { + backgroundColor: colors.dark, + paddingVertical: spacing[1], + paddingHorizontal: spacing[3], + borderRadius: radius.full, + }, + + stepCounterText: { + fontSize: fontSize.xs, + fontFamily: fontFamily.bold, + fontWeight: fontWeight.bold, + color: colors.light, + }, + + // ── Progress ────────────────────────────────────────── + + progressTrack: { + height: 4, + backgroundColor: colors.borderLight, + marginHorizontal: layout.screenPaddingH, + borderRadius: radius.full, + overflow: 'hidden', + marginBottom: spacing[4], + }, + + progressFill: { + height: '100%', + backgroundColor: colors.primary, + borderRadius: radius.full, + }, + + // ── Scroll ──────────────────────────────────────────── + + scroll: { + flex: 1, + }, + + scrollContent: { + paddingHorizontal: layout.screenPaddingH, + paddingBottom: spacing[4], + gap: spacing[6], + }, + + boardContainer: { + width: '100%', + }, + + // ── Instruction Panel ──────────────────────────────── + + instructionPanel: { + ...cardStyle, + gap: spacing[4], + }, + + pieceBadge: { + flexDirection: 'row', + alignItems: 'center', + gap: spacing[2], + }, + + pieceBadgeEmoji: { + fontSize: 24, + }, + + pieceBadgeName: { + fontSize: fontSize.lg, + fontFamily: fontFamily.bold, + fontWeight: fontWeight.bold, + color: colors.dark, + }, + + instructionText: { + fontSize: fontSize.base, + fontFamily: fontFamily.regular, + color: colors.dark, + lineHeight: getLineHeight(fontSize.base), + }, + + tipBox: { + backgroundColor: colors.accentFaint, + borderRadius: radius.lg, + borderLeftWidth: 3, + borderLeftColor: colors.accent, + padding: spacing[4], + gap: spacing[2], + }, + + tipLabel: { + fontSize: fontSize.xs, + fontFamily: fontFamily.bold, + fontWeight: fontWeight.bold, + color: colors.dark, + textTransform: 'uppercase', + letterSpacing: 1.2, + }, + + tipText: { + fontSize: fontSize.sm, + fontFamily: fontFamily.regular, + color: colors.dark, + lineHeight: getLineHeight(fontSize.sm), + }, + + // ── Completion Panel ────────────────────────────────── + + completionPanel: { + ...cardStyle, + alignItems: 'center', + paddingVertical: spacing[10], + gap: spacing[4], + }, + + completionEmoji: { + fontSize: 64, + }, + + completionTitle: { + fontSize: fontSize['2xl'], + fontFamily: fontFamily.bold, + fontWeight: fontWeight.bold, + color: colors.dark, + }, + + completionBody: { + fontSize: fontSize.base, + fontFamily: fontFamily.regular, + color: colors.gray, + textAlign: 'center', + lineHeight: getLineHeight(fontSize.base), + }, + + completionBadge: { + backgroundColor: colors.accent, + paddingVertical: spacing[2], + paddingHorizontal: spacing[6], + borderRadius: radius.full, + }, + + completionBadgeText: { + fontSize: fontSize.base, + fontFamily: fontFamily.bold, + fontWeight: fontWeight.bold, + color: colors.dark, + }, + + // ── Footer Controls ─────────────────────────────────── + + controlsFooter: { + flexDirection: 'row', + gap: spacing[3], + paddingHorizontal: layout.screenPaddingH, + paddingVertical: spacing[4], + paddingBottom: spacing[6], + backgroundColor: colors.soft, + borderTopWidth: 1, + borderTopColor: colors.borderLight, + }, + + navButton: { + flex: 1, + height: 52, + borderRadius: radius.xl, + alignItems: 'center', + justifyContent: 'center', + }, + + navButtonBack: { + backgroundColor: colors.light, + borderWidth: 2, + borderColor: colors.borderLight, + }, + + navButtonBackText: { + fontSize: fontSize.base, + fontFamily: fontFamily.bold, + fontWeight: fontWeight.bold, + color: colors.dark, + }, + + navButtonNext: { + flex: 2, + ...btnGreenStyle, + height: 52, + }, + + navButtonNextText: { + ...btnGreenTextStyle, + }, + + nextLessonButton: { + flex: 1, + ...btnPrimaryStyle, + height: 52, + }, + + nextLessonButtonText: { + ...btnPrimaryTextStyle, + }, +}); diff --git a/documentation/mobile-ui/screens/LessonsSelectionScreen.tsx b/documentation/mobile-ui/screens/LessonsSelectionScreen.tsx new file mode 100644 index 00000000..d759f1e0 --- /dev/null +++ b/documentation/mobile-ui/screens/LessonsSelectionScreen.tsx @@ -0,0 +1,606 @@ +/** + * LessonsSelectionScreen.tsx + * D2 — Lessons + * + * YSTEM Mobile App — Y STEM and Chess + * Designed by Sandith Hewage (UI/UX Engineer) + * + * Features: + * - Section header with progress indicator + * - Horizontal scroll of chess piece cards (King, Queen, Rook, Bishop, Knight, Pawn) + * - Lesson list for the selected piece — locked/unlocked states + * - Start Lesson green CTA that activates when a lesson is selected + * - Safe area + scroll layout + */ + +import React, { useState } from 'react'; +import { + View, + Text, + ScrollView, + TouchableOpacity, + StyleSheet, + StatusBar, + FlatList, +} from 'react-native'; +import { SafeAreaView } from 'react-native-safe-area-context'; +import { + colors, + spacing, + fontSize, + fontFamily, + fontWeight, + radius, + shadows, + btnGreenStyle, + btnGreenTextStyle, + cardStyle, + layout, + getLineHeight, +} from '../design-tokens.rn'; + +// --------------------------------------------------------------------------- +// Types + Data +// --------------------------------------------------------------------------- + +type PieceId = 'king' | 'queen' | 'rook' | 'bishop' | 'knight' | 'pawn'; + +interface ChessPiece { + id: PieceId; + name: string; + emoji: string; + color: string; + lessonsCount: number; + completedCount: number; +} + +interface Lesson { + id: string; + title: string; + duration: string; + difficulty: 'Beginner' | 'Intermediate' | 'Advanced'; + completed: boolean; + locked: boolean; +} + +const CHESS_PIECES: ChessPiece[] = [ + { id: 'king', name: 'King', emoji: '♔', color: colors.accent, lessonsCount: 3, completedCount: 3 }, + { id: 'queen', name: 'Queen', emoji: '♕', color: colors.primary, lessonsCount: 4, completedCount: 2 }, + { id: 'rook', name: 'Rook', emoji: '♖', color: colors.secondary, lessonsCount: 3, completedCount: 0 }, + { id: 'bishop', name: 'Bishop', emoji: '♗', color: colors.primaryMid, lessonsCount: 3, completedCount: 0 }, + { id: 'knight', name: 'Knight', emoji: '♘', color: colors.accentFaint, lessonsCount: 4, completedCount: 0 }, + { id: 'pawn', name: 'Pawn', emoji: '♙', color: colors.soft, lessonsCount: 5, completedCount: 0 }, +]; + +const LESSONS_BY_PIECE: Record = { + king: [ + { id: 'k1', title: 'The Most Important Piece', duration: '5 min', difficulty: 'Beginner', completed: true, locked: false }, + { id: 'k2', title: 'King Safety & Castling', duration: '8 min', difficulty: 'Beginner', completed: true, locked: false }, + { id: 'k3', title: 'King in the Endgame', duration: '10 min', difficulty: 'Intermediate', completed: true, locked: false }, + ], + queen: [ + { id: 'q1', title: 'How the Queen Moves', duration: '5 min', difficulty: 'Beginner', completed: true, locked: false }, + { id: 'q2', title: 'Queen Development', duration: '7 min', difficulty: 'Beginner', completed: true, locked: false }, + { id: 'q3', title: 'Queen vs Minor Pieces', duration: '10 min', difficulty: 'Intermediate', completed: false, locked: false }, + { id: 'q4', title: 'Queen Tactics & Forks', duration: '12 min', difficulty: 'Intermediate', completed: false, locked: true }, + ], + rook: [ + { id: 'r1', title: 'How the Rook Moves', duration: '5 min', difficulty: 'Beginner', completed: false, locked: false }, + { id: 'r2', title: 'Open Files & Rooks', duration: '8 min', difficulty: 'Beginner', completed: false, locked: true }, + { id: 'r3', title: 'Rook Endgames', duration: '12 min', difficulty: 'Advanced', completed: false, locked: true }, + ], + bishop: [ + { id: 'b1', title: 'How the Bishop Moves', duration: '5 min', difficulty: 'Beginner', completed: false, locked: false }, + { id: 'b2', title: 'Good and Bad Bishops', duration: '8 min', difficulty: 'Intermediate', completed: false, locked: true }, + { id: 'b3', title: 'Bishop Pairs', duration: '10 min', difficulty: 'Intermediate', completed: false, locked: true }, + ], + knight: [ + { id: 'n1', title: 'The L-Shape Move', duration: '6 min', difficulty: 'Beginner', completed: false, locked: false }, + { id: 'n2', title: 'Knight Outposts', duration: '9 min', difficulty: 'Intermediate', completed: false, locked: true }, + { id: 'n3', title: 'Knight Forks', duration: '10 min', difficulty: 'Intermediate', completed: false, locked: true }, + { id: 'n4', title: 'Knight vs Bishop', duration: '12 min', difficulty: 'Advanced', completed: false, locked: true }, + ], + pawn: [ + { id: 'p1', title: 'How Pawns Move', duration: '5 min', difficulty: 'Beginner', completed: false, locked: false }, + { id: 'p2', title: 'Pawn Captures & En Passant', duration: '8 min', difficulty: 'Beginner', completed: false, locked: true }, + { id: 'p3', title: 'Pawn Promotion', duration: '7 min', difficulty: 'Beginner', completed: false, locked: true }, + { id: 'p4', title: 'Pawn Structures', duration: '12 min', difficulty: 'Intermediate', completed: false, locked: true }, + { id: 'p5', title: 'Passed Pawns', duration: '10 min', difficulty: 'Advanced', completed: false, locked: true }, + ], +}; + +const DIFFICULTY_COLOR: Record = { + Beginner: colors.primary, + Intermediate: colors.accent, + Advanced: colors.red, +}; + +// --------------------------------------------------------------------------- +// Sub-components +// --------------------------------------------------------------------------- + +function PieceCard({ + piece, + selected, + onPress, +}: { + piece: ChessPiece; + selected: boolean; + onPress: () => void; +}) { + const progress = piece.lessonsCount > 0 + ? piece.completedCount / piece.lessonsCount + : 0; + + return ( + + + {piece.emoji} + + + {piece.name} + + {/* Progress bar */} + + + + + {piece.completedCount}/{piece.lessonsCount} + + + ); +} + +function LessonRow({ + lesson, + selected, + onPress, +}: { + lesson: Lesson; + selected: boolean; + onPress: () => void; +}) { + return ( + + {/* Status icon */} + + + {lesson.locked ? '🔒' : lesson.completed ? '✓' : '○'} + + + + {/* Info */} + + + {lesson.title} + + + + + {lesson.difficulty} + + + ⏱ {lesson.duration} + + + + {/* Arrow */} + {!lesson.locked && ( + › + )} + + ); +} + +// --------------------------------------------------------------------------- +// Main Screen +// --------------------------------------------------------------------------- + +interface LessonsSelectionScreenProps { + onStartLesson?: (lessonId: string, pieceId: PieceId) => void; +} + +export default function LessonsSelectionScreen({ onStartLesson }: LessonsSelectionScreenProps) { + const [selectedPiece, setSelectedPiece] = useState('king'); + const [selectedLesson, setSelectedLesson] = useState(null); + + const lessons = LESSONS_BY_PIECE[selectedPiece]; + const piece = CHESS_PIECES.find((p) => p.id === selectedPiece)!; + const totalCompleted = CHESS_PIECES.reduce((sum, p) => sum + p.completedCount, 0); + const totalLessons = CHESS_PIECES.reduce((sum, p) => sum + p.lessonsCount, 0); + + const handleStart = () => { + if (selectedLesson) { + onStartLesson?.(selectedLesson, selectedPiece); + } + }; + + return ( + + + + {/* ── Header ──────────────────────────────────────── */} + + Lessons + + + + + {totalCompleted}/{totalLessons} lessons complete + + + + {/* ── Piece Cards (horizontal scroll) ─────────────── */} + + Select a piece + + {CHESS_PIECES.map((p) => ( + { + setSelectedPiece(p.id); + setSelectedLesson(null); + }} + /> + ))} + + + + {/* ── Lesson List ───────────────────────────────────── */} + + + + {piece.name} Lessons + + + {piece.completedCount}/{piece.lessonsCount} done + + + + + {lessons.map((lesson) => ( + setSelectedLesson(lesson.id)} + /> + ))} + + + + {/* Spacer for sticky button */} + + + + {/* ── Sticky Start Button ───────────────────────────── */} + + + + {selectedLesson ? 'Start Lesson →' : 'Select a lesson'} + + + + + ); +} + +// --------------------------------------------------------------------------- +// Styles +// --------------------------------------------------------------------------- + +const styles = StyleSheet.create({ + safeArea: { + flex: 1, + backgroundColor: colors.soft, + }, + + scroll: { + flex: 1, + }, + + scrollContent: { + paddingTop: spacing[8], + paddingBottom: spacing[4], + }, + + // ── Header ────────────────────────────────────────── + + header: { + paddingHorizontal: layout.screenPaddingH, + gap: spacing[4], + marginBottom: spacing[6], + }, + + heading: { + fontSize: fontSize['3xl'], + fontFamily: fontFamily.bold, + fontWeight: fontWeight.bold, + color: colors.dark, + }, + + progressSummary: { + gap: spacing[2], + }, + + progressBarFull: { + height: 8, + backgroundColor: colors.borderLight, + borderRadius: radius.full, + overflow: 'hidden', + }, + + progressBarFill: { + height: '100%', + backgroundColor: colors.primary, + borderRadius: radius.full, + }, + + progressText: { + fontSize: fontSize.sm, + fontFamily: fontFamily.regular, + color: colors.gray, + }, + + // ── Pieces ─────────────────────────────────────────── + + piecesSection: { + gap: spacing[3], + marginBottom: spacing[6], + }, + + sectionLabel: { + fontSize: fontSize.sm, + fontFamily: fontFamily.bold, + fontWeight: fontWeight.bold, + color: colors.muted, + textTransform: 'uppercase', + letterSpacing: 1.2, + paddingHorizontal: layout.screenPaddingH, + }, + + piecesScroll: { + paddingHorizontal: layout.screenPaddingH, + gap: spacing[3], + }, + + // ── Lessons ────────────────────────────────────────── + + lessonsSection: { + paddingHorizontal: layout.screenPaddingH, + gap: spacing[4], + }, + + lessonsSectionHeader: { + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'space-between', + }, + + completedBadge: { + fontSize: fontSize.xs, + fontFamily: fontFamily.bold, + fontWeight: fontWeight.bold, + color: colors.primary, + backgroundColor: colors.primaryFaint, + paddingVertical: spacing[1], + paddingHorizontal: spacing[3], + borderRadius: radius.full, + }, + + lessonsList: { + gap: spacing[3], + }, + + buttonSpacer: { + height: 100, + }, + + // ── Sticky footer ──────────────────────────────────── + + stickyFooter: { + position: 'absolute', + bottom: 0, + left: 0, + right: 0, + paddingHorizontal: layout.screenPaddingH, + paddingBottom: spacing[8], + paddingTop: spacing[4], + backgroundColor: colors.soft, + borderTopWidth: 1, + borderTopColor: colors.borderLight, + }, + + startButton: { + ...btnGreenStyle, + height: 56, + }, + + startButtonDisabled: { + backgroundColor: colors.borderLight, + ...shadows.sm, + }, + + startButtonText: { + ...btnGreenTextStyle, + }, +}); + +// ── Piece card styles ──────────────────────────────── + +const pieceCardStyles = StyleSheet.create({ + card: { + width: 88, + backgroundColor: colors.light, + borderRadius: radius['2xl'], + borderWidth: 2, + borderColor: colors.borderLight, + padding: spacing[4], + alignItems: 'center', + gap: spacing[2], + ...shadows.sm, + }, + + cardSelected: { + borderColor: colors.primary, + backgroundColor: colors.primaryFaint, + ...shadows.md, + }, + + emojiCircle: { + width: 44, + height: 44, + borderRadius: radius.full, + alignItems: 'center', + justifyContent: 'center', + }, + + emoji: { + fontSize: 22, + }, + + name: { + fontSize: fontSize.xs, + fontFamily: fontFamily.bold, + fontWeight: fontWeight.bold, + color: colors.gray, + textAlign: 'center', + }, + + nameSelected: { + color: colors.primary, + }, + + progressBar: { + width: '100%', + height: 4, + backgroundColor: colors.borderLight, + borderRadius: radius.full, + overflow: 'hidden', + }, + + progressFill: { + height: '100%', + backgroundColor: colors.primary, + borderRadius: radius.full, + }, + + progressLabel: { + fontSize: fontSize.xs, + fontFamily: fontFamily.regular, + color: colors.muted, + }, +}); + +// ── Lesson row styles ──────────────────────────────── + +const lessonRowStyles = StyleSheet.create({ + row: { + ...cardStyle, + flexDirection: 'row', + alignItems: 'center', + gap: spacing[3], + }, + + rowSelected: { + borderColor: colors.primary, + backgroundColor: colors.primaryFaint, + }, + + rowLocked: { + opacity: 0.5, + }, + + statusIcon: { + width: 32, + height: 32, + borderRadius: radius.full, + backgroundColor: colors.soft, + alignItems: 'center', + justifyContent: 'center', + flexShrink: 0, + }, + + statusIconDone: { + backgroundColor: colors.primaryFaint, + }, + + statusEmoji: { + fontSize: 14, + }, + + info: { + flex: 1, + gap: spacing[1], + }, + + title: { + fontSize: fontSize.base, + fontFamily: fontFamily.bold, + fontWeight: fontWeight.bold, + color: colors.dark, + lineHeight: getLineHeight(fontSize.base), + }, + + titleLocked: { + color: colors.muted, + }, + + meta: { + flexDirection: 'row', + alignItems: 'center', + gap: spacing[3], + }, + + diffBadge: { + paddingVertical: 2, + paddingHorizontal: spacing[2], + borderRadius: radius.full, + }, + + diffText: { + fontSize: fontSize.xs, + fontFamily: fontFamily.bold, + fontWeight: fontWeight.bold, + }, + + duration: { + fontSize: fontSize.xs, + fontFamily: fontFamily.regular, + color: colors.muted, + }, + + arrow: { + fontSize: fontSize.xl, + color: colors.muted, + }, +}); diff --git a/documentation/mobile-ui/screens/LoginScreen.tsx b/documentation/mobile-ui/screens/LoginScreen.tsx new file mode 100644 index 00000000..2824b167 --- /dev/null +++ b/documentation/mobile-ui/screens/LoginScreen.tsx @@ -0,0 +1,362 @@ +/** + * LoginScreen.tsx + * D1 — Auth + Navigation + * + * YSTEM Mobile App — Y STEM and Chess + * Designed by Sandith Hewage (UI/UX Engineer) + * + * Features: + * - Logo + brand wordmark hero + * - Username + password inputs with focus states + * - Enter (green CTA) + Forgot Password / Sign Up links + * - KeyboardAvoidingView for input accessibility + * - Full token coverage from design-tokens.rn.ts + */ + +import React, { useState } from 'react'; +import { + View, + Text, + TextInput, + TouchableOpacity, + StyleSheet, + KeyboardAvoidingView, + Platform, + ScrollView, + Image, + StatusBar, +} from 'react-native'; +import { SafeAreaView } from 'react-native-safe-area-context'; +import { + colors, + spacing, + fontSize, + fontFamily, + fontWeight, + radius, + shadows, + btnGreenStyle, + btnGreenTextStyle, + cardFormStyle, + inputBaseStyle, + errorTextStyle, + layout, + getLineHeight, +} from '../design-tokens.rn'; + +// --------------------------------------------------------------------------- +// Types +// --------------------------------------------------------------------------- + +interface LoginScreenProps { + onLogin?: (username: string, password: string) => void; + onForgotPassword?: () => void; + onSignUp?: () => void; +} + +// --------------------------------------------------------------------------- +// Component +// --------------------------------------------------------------------------- + +export default function LoginScreen({ + onLogin, + onForgotPassword, + onSignUp, +}: LoginScreenProps) { + const [username, setUsername] = useState(''); + const [password, setPassword] = useState(''); + const [usernameFocused, setUsernameFocused] = useState(false); + const [passwordFocused, setPasswordFocused] = useState(false); + const [error, setError] = useState(''); + const [loading, setLoading] = useState(false); + + const handleLogin = async () => { + if (!username.trim() || !password.trim()) { + setError('Please enter your username and password.'); + return; + } + setError(''); + setLoading(true); + try { + await onLogin?.(username.trim(), password); + } catch { + setError('Invalid credentials. Please try again.'); + } finally { + setLoading(false); + } + }; + + return ( + + + + + {/* ── Logo / Hero ─────────────────────────────────── */} + + {/* Logo placeholder — replace with actual asset */} + + + Y + + + Y STEM and Chess + Learn. Play. Grow. + + + {/* ── Auth Card ───────────────────────────────────── */} + + Welcome back + + {/* Username */} + + Username + { setUsername(t); setError(''); }} + onFocus={() => setUsernameFocused(true)} + onBlur={() => setUsernameFocused(false)} + autoCapitalize="none" + autoCorrect={false} + returnKeyType="next" + accessibilityLabel="Username input" + /> + + + {/* Password */} + + Password + { setPassword(t); setError(''); }} + onFocus={() => setPasswordFocused(true)} + onBlur={() => setPasswordFocused(false)} + secureTextEntry + returnKeyType="done" + onSubmitEditing={handleLogin} + accessibilityLabel="Password input" + /> + + + {/* Error message */} + {!!error && {error}} + + {/* Forgot password */} + + Forgot password? + + + {/* Enter CTA */} + + + {loading ? 'Logging in…' : 'Enter'} + + + + {/* Sign up link */} + + Don't have an account? + + Sign up + + + + + + + ); +} + +// --------------------------------------------------------------------------- +// Styles +// --------------------------------------------------------------------------- + +const styles = StyleSheet.create({ + safeArea: { + flex: 1, + backgroundColor: colors.soft, + }, + + keyboardView: { + flex: 1, + }, + + scrollContent: { + flexGrow: 1, + alignItems: 'center', + paddingHorizontal: layout.screenPaddingH, + paddingTop: spacing[12], + paddingBottom: spacing[10], + }, + + // ── Hero ──────────────────────────────────────────── + + heroSection: { + alignItems: 'center', + marginBottom: spacing[10], + }, + + logoContainer: { + marginBottom: spacing[4], + }, + + logoCircle: { + width: 80, + height: 80, + borderRadius: radius.full, + backgroundColor: colors.dark, + alignItems: 'center', + justifyContent: 'center', + ...shadows.lg, + }, + + logoLetter: { + fontSize: fontSize['4xl'], + fontFamily: fontFamily.bold, + fontWeight: fontWeight.bold, + color: colors.primary, + }, + + wordmark: { + fontSize: fontSize['2xl'], + fontFamily: fontFamily.bold, + fontWeight: fontWeight.bold, + color: colors.dark, + marginBottom: spacing[1], + letterSpacing: 0.5, + }, + + tagline: { + fontSize: fontSize.sm, + fontFamily: fontFamily.regular, + color: colors.gray, + letterSpacing: 1.5, + textTransform: 'uppercase', + }, + + // ── Form Card ─────────────────────────────────────── + + formCard: { + ...cardFormStyle, + width: '100%', + maxWidth: layout.maxFormWidth, + gap: layout.formFieldGap, + }, + + formTitle: { + fontSize: fontSize['2xl'], + fontFamily: fontFamily.bold, + fontWeight: fontWeight.bold, + color: colors.dark, + textAlign: 'center', + marginBottom: spacing[2], + }, + + fieldGroup: { + gap: layout.labelFieldGap, + }, + + fieldLabel: { + fontSize: fontSize.sm, + fontFamily: fontFamily.bold, + fontWeight: fontWeight.bold, + color: colors.dark, + letterSpacing: 0.3, + }, + + input: { + ...inputBaseStyle, + height: 48, + }, + + inputFocused: { + borderColor: colors.primary, + }, + + inputError: { + borderColor: colors.red, + }, + + errorText: { + ...errorTextStyle, + textAlign: 'center', + }, + + forgotText: { + fontSize: fontSize.sm, + fontFamily: fontFamily.medium, + fontWeight: fontWeight.medium, + color: colors.primary, + textAlign: 'right', + }, + + enterButton: { + ...btnGreenStyle, + height: 52, + marginTop: spacing[2], + }, + + enterButtonText: { + ...btnGreenTextStyle, + }, + + buttonDisabled: { + opacity: 0.6, + }, + + signUpRow: { + flexDirection: 'row', + justifyContent: 'center', + alignItems: 'center', + }, + + signUpPrompt: { + fontSize: fontSize.sm, + fontFamily: fontFamily.regular, + color: colors.gray, + }, + + signUpLink: { + fontSize: fontSize.sm, + fontFamily: fontFamily.bold, + fontWeight: fontWeight.bold, + color: colors.primary, + textDecorationLine: 'underline', + }, +}); diff --git a/documentation/mobile-ui/screens/PlayGameScreen.tsx b/documentation/mobile-ui/screens/PlayGameScreen.tsx new file mode 100644 index 00000000..9f4bbd72 --- /dev/null +++ b/documentation/mobile-ui/screens/PlayGameScreen.tsx @@ -0,0 +1,887 @@ +/** + * PlayGameScreen.tsx + * D4 — Play vs Computer + * + * YSTEM Mobile App — Y STEM and Chess + * Designed by Sandith Hewage (UI/UX Engineer) + * + * Features: + * - Full-width chess board (aspectRatio: 1) + * - Player/opponent headers with timers and captured pieces + * - Tutor panel (collapsible): position evaluation + tip + * - Move history (horizontal scroll of SAN notation) + * - Controls footer: Undo, Resign, Flip Board, Offer Draw + * - Game-over modal overlay + */ + +import React, { useState } from 'react'; +import { + View, + Text, + TouchableOpacity, + StyleSheet, + StatusBar, + ScrollView, + Modal, +} from 'react-native'; +import { SafeAreaView } from 'react-native-safe-area-context'; +import { + colors, + spacing, + fontSize, + fontFamily, + fontWeight, + radius, + shadows, + btnGreenStyle, + btnGreenTextStyle, + btnPrimaryStyle, + btnPrimaryTextStyle, + cardStyle, + avatarStyle, + layout, + chess, + modalOverlayStyle, + modalContentStyle, + getLineHeight, +} from '../design-tokens.rn'; + +// --------------------------------------------------------------------------- +// Types +// --------------------------------------------------------------------------- + +type GameResult = 'white' | 'black' | 'draw' | null; + +interface MoveEntry { + moveNumber: number; + white: string; + black?: string; +} + +interface PlayGameScreenProps { + playerColor?: 'white' | 'black'; + playerUsername?: string; + difficulty?: string; + onResign?: () => void; + onUndo?: () => void; + onNewGame?: () => void; + onExit?: () => void; +} + +// --------------------------------------------------------------------------- +// Sample move history +// --------------------------------------------------------------------------- + +const SAMPLE_MOVES: MoveEntry[] = [ + { moveNumber: 1, white: 'e4', black: 'e5' }, + { moveNumber: 2, white: 'Nf3', black: 'Nc6' }, + { moveNumber: 3, white: 'Bb5', black: 'a6' }, + { moveNumber: 4, white: 'Ba4', black: 'Nf6' }, + { moveNumber: 5, white: 'O-O', black: 'Be7' }, + { moveNumber: 6, white: 'Re1', black: 'b5' }, + { moveNumber: 7, white: 'Bb3' }, +]; + +// --------------------------------------------------------------------------- +// Chess Board +// --------------------------------------------------------------------------- + +function GameBoard({ playerColor }: { playerColor: 'white' | 'black' }) { + const files = playerColor === 'white' + ? ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h'] + : ['h', 'g', 'f', 'e', 'd', 'c', 'b', 'a']; + const ranks = playerColor === 'white' + ? [8, 7, 6, 5, 4, 3, 2, 1] + : [1, 2, 3, 4, 5, 6, 7, 8]; + + return ( + + {ranks.map((rank) => ( + + {/* Rank label */} + + {rank} + + {files.map((file, fileIdx) => { + const isLight = (fileIdx + rank) % 2 === 0; + // Highlight last move: e4 and e5 + const isHighlighted = (file === 'e' && rank === 4) || (file === 'e' && rank === 5); + return ( + + ); + })} + + ))} + {/* File labels */} + + + {files.map((f) => ( + {f} + ))} + + + ); +} + +// --------------------------------------------------------------------------- +// Player Header +// --------------------------------------------------------------------------- + +function PlayerHeader({ + username, + isOpponent, + timeLeft, + capturedPieces, + isActive, +}: { + username: string; + isOpponent: boolean; + timeLeft: string; + capturedPieces: string; + isActive: boolean; +}) { + return ( + + + {isOpponent ? '🤖' : username.charAt(0).toUpperCase()} + + + {username} + {!!capturedPieces && ( + {capturedPieces} + )} + + + + {timeLeft} + + + + ); +} + +// --------------------------------------------------------------------------- +// Tutor Panel +// --------------------------------------------------------------------------- + +function TutorPanel({ evaluation, tip, collapsed, onToggle }: { + evaluation: string; + tip: string; + collapsed: boolean; + onToggle: () => void; +}) { + return ( + + + + 🎓 + Tutor + + + {evaluation} + + + + {collapsed ? '›' : '‹'} + + + {!collapsed && ( + + {tip} + + )} + + ); +} + +// --------------------------------------------------------------------------- +// Move History +// --------------------------------------------------------------------------- + +function MoveHistory({ moves }: { moves: MoveEntry[] }) { + return ( + + + {moves.map((m) => ( + + {m.moveNumber}. + + {m.white} + + {m.black && ( + + {m.black} + + )} + + ))} + + + ); +} + +// --------------------------------------------------------------------------- +// Game Over Modal +// --------------------------------------------------------------------------- + +function GameOverModal({ + result, + playerColor, + onNewGame, + onExit, +}: { + result: GameResult; + playerColor: 'white' | 'black'; + onNewGame?: () => void; + onExit?: () => void; +}) { + const playerWon = result === playerColor; + const isDraw = result === 'draw'; + + return ( + + + + + {isDraw ? '🤝' : playerWon ? '🏆' : '😓'} + + + {isDraw ? 'Draw!' : playerWon ? 'You Win!' : 'You Lose'} + + + {isDraw + ? 'The game ended in a draw. Good fight!' + : playerWon + ? 'Excellent play! You defeated the computer!' + : 'Don\'t give up — every loss is a lesson!'} + + + + Play Again + + + Exit + + + + + + ); +} + +// --------------------------------------------------------------------------- +// Main Screen +// --------------------------------------------------------------------------- + +export default function PlayGameScreen({ + playerColor = 'white', + playerUsername = 'You', + difficulty = 'Beginner', + onResign, + onUndo, + onNewGame, + onExit, +}: PlayGameScreenProps) { + const [tutorCollapsed, setTutorCollapsed] = useState(false); + const [gameResult, setGameResult] = useState(null); + const [moves] = useState(SAMPLE_MOVES); + + const opponentUsername = `Computer (${difficulty})`; + const isPlayerTurn = true; // Wire to game state + + return ( + + + + {/* ── Top Bar ──────────────────────────────────────── */} + + + ‹ + + vs Computer + + {difficulty} + + + + + {/* ── Opponent Header ───────────────────────────────── */} + + + {/* ── Chess Board ──────────────────────────────────── */} + + + {/* ── Player Header ─────────────────────────────────── */} + + + {/* ── Tutor Panel ───────────────────────────────────── */} + setTutorCollapsed((v) => !v)} + /> + + {/* ── Move History ──────────────────────────────────── */} + + Move History + + + + {/* Bottom spacer */} + + + + {/* ── Controls Footer ───────────────────────────────── */} + + + ↩ + Undo + + + + ⇅ + Flip + + + + 🤝 + Draw + + + { onResign?.(); setGameResult('black'); }} + activeOpacity={0.8} + accessibilityLabel="Resign game" + > + 🏳 + Resign + + + + {/* ── Game Over Modal ───────────────────────────────── */} + { setGameResult(null); onNewGame?.(); }} + onExit={() => { setGameResult(null); onExit?.(); }} + /> + + ); +} + +// --------------------------------------------------------------------------- +// Board Styles +// --------------------------------------------------------------------------- + +const boardStyles = StyleSheet.create({ + board: { + width: '100%', + aspectRatio: 1, + backgroundColor: chess.boardBg, + borderRadius: radius.lg, + overflow: 'hidden', + ...shadows.md, + }, + + rank: { + flex: 1, + flexDirection: 'row', + alignItems: 'stretch', + }, + + rankLabel: { + width: 16, + alignItems: 'center', + justifyContent: 'center', + }, + + labelText: { + fontSize: 8, + fontFamily: fontFamily.bold, + fontWeight: fontWeight.bold, + color: colors.muted, + opacity: 0.6, + }, + + square: { + flex: 1, + }, + + squareLight: { + backgroundColor: '#F0D9B5', + }, + + squareDark: { + backgroundColor: '#B58863', + }, + + squareHighlighted: { + backgroundColor: chess.highlightSquare, + }, + + fileLabelRow: { + flexDirection: 'row', + paddingBottom: 2, + }, + + fileLabelText: { + flex: 1, + fontSize: 8, + fontFamily: fontFamily.bold, + fontWeight: fontWeight.bold, + color: colors.muted, + textAlign: 'center', + opacity: 0.6, + }, +}); + +// --------------------------------------------------------------------------- +// Player header styles +// --------------------------------------------------------------------------- + +const playerStyles = StyleSheet.create({ + row: { + flexDirection: 'row', + alignItems: 'center', + gap: spacing[3], + paddingVertical: spacing[3], + paddingHorizontal: spacing[2], + borderRadius: radius.xl, + backgroundColor: 'transparent', + }, + + rowActive: { + backgroundColor: colors.primaryFaint, + }, + + avatar: { + width: 40, + height: 40, + borderRadius: radius.full, + backgroundColor: colors.soft, + borderWidth: 2, + borderColor: colors.borderLight, + alignItems: 'center', + justifyContent: 'center', + }, + + avatarText: { + fontSize: 20, + }, + + info: { + flex: 1, + gap: 2, + }, + + username: { + fontSize: fontSize.sm, + fontFamily: fontFamily.bold, + fontWeight: fontWeight.bold, + color: colors.dark, + }, + + captured: { + fontSize: fontSize.xs, + color: colors.muted, + letterSpacing: 2, + }, + + timerBox: { + paddingVertical: spacing[2], + paddingHorizontal: spacing[3], + backgroundColor: colors.dark, + borderRadius: radius.lg, + minWidth: 64, + alignItems: 'center', + }, + + timerBoxActive: { + backgroundColor: colors.primary, + }, + + timerText: { + fontSize: fontSize.base, + fontFamily: fontFamily.bold, + fontWeight: fontWeight.bold, + color: colors.white60, + letterSpacing: 1, + }, + + timerTextActive: { + color: colors.dark, + }, +}); + +// --------------------------------------------------------------------------- +// Tutor panel styles +// --------------------------------------------------------------------------- + +const tutorStyles = StyleSheet.create({ + panel: { + ...cardStyle, + padding: 0, + overflow: 'hidden', + }, + + header: { + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'space-between', + padding: spacing[4], + backgroundColor: colors.accentFaint, + }, + + headerLeft: { + flexDirection: 'row', + alignItems: 'center', + gap: spacing[2], + }, + + headerEmoji: { + fontSize: 18, + }, + + headerTitle: { + fontSize: fontSize.base, + fontFamily: fontFamily.bold, + fontWeight: fontWeight.bold, + color: colors.dark, + }, + + evalBadge: { + paddingVertical: 2, + paddingHorizontal: spacing[2], + borderRadius: radius.full, + }, + + evalText: { + fontSize: fontSize.xs, + fontFamily: fontFamily.bold, + fontWeight: fontWeight.bold, + }, + + chevron: { + fontSize: fontSize.xl, + color: colors.muted, + }, + + body: { + padding: spacing[4], + }, + + tipText: { + fontSize: fontSize.sm, + fontFamily: fontFamily.regular, + color: colors.dark, + lineHeight: getLineHeight(fontSize.sm), + }, +}); + +// --------------------------------------------------------------------------- +// Move history styles +// --------------------------------------------------------------------------- + +const moveStyles = StyleSheet.create({ + container: { + ...cardStyle, + padding: 0, + overflow: 'hidden', + }, + + scroll: { + paddingHorizontal: spacing[4], + paddingVertical: spacing[3], + gap: spacing[2], + alignItems: 'center', + }, + + moveGroup: { + flexDirection: 'row', + alignItems: 'center', + gap: spacing[1], + }, + + moveNumber: { + fontSize: fontSize.xs, + fontFamily: fontFamily.regular, + color: colors.muted, + minWidth: 20, + }, + + moveToken: { + paddingVertical: spacing[1], + paddingHorizontal: spacing[2], + backgroundColor: colors.soft, + borderRadius: radius.md, + }, + + moveTokenBlack: { + backgroundColor: colors.dark, + }, + + moveText: { + fontSize: fontSize.sm, + fontFamily: fontFamily.bold, + fontWeight: fontWeight.bold, + color: colors.dark, + }, +}); + +// --------------------------------------------------------------------------- +// Modal styles +// --------------------------------------------------------------------------- + +const modalStyles = StyleSheet.create({ + overlay: { + ...modalOverlayStyle, + }, + + content: { + ...modalContentStyle, + gap: spacing[4], + }, + + emoji: { + fontSize: 56, + }, + + title: { + fontSize: fontSize['2xl'], + fontFamily: fontFamily.bold, + fontWeight: fontWeight.bold, + color: colors.dark, + textAlign: 'center', + }, + + body: { + fontSize: fontSize.base, + fontFamily: fontFamily.regular, + color: colors.gray, + textAlign: 'center', + lineHeight: getLineHeight(fontSize.base), + }, + + actions: { + width: '100%', + gap: spacing[3], + }, + + newGameButton: { + ...btnGreenStyle, + height: 52, + }, + + newGameText: { + ...btnGreenTextStyle, + }, + + exitButton: { + height: 48, + borderRadius: radius.xl, + borderWidth: 2, + borderColor: colors.borderLight, + alignItems: 'center', + justifyContent: 'center', + }, + + exitText: { + fontSize: fontSize.base, + fontFamily: fontFamily.bold, + fontWeight: fontWeight.bold, + color: colors.gray, + }, +}); + +// --------------------------------------------------------------------------- +// Screen Styles +// --------------------------------------------------------------------------- + +const styles = StyleSheet.create({ + safeArea: { + flex: 1, + backgroundColor: colors.soft, + }, + + // ── Top Bar ───────────────────────────────────────── + + topBar: { + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'space-between', + paddingHorizontal: layout.screenPaddingH, + paddingVertical: spacing[3], + backgroundColor: colors.dark, + }, + + topBackButton: { + width: 36, + height: 36, + borderRadius: radius.full, + backgroundColor: colors.white10, + alignItems: 'center', + justifyContent: 'center', + }, + + topBackArrow: { + fontSize: fontSize['2xl'], + color: colors.light, + marginTop: -2, + }, + + topTitle: { + fontSize: fontSize.lg, + fontFamily: fontFamily.bold, + fontWeight: fontWeight.bold, + color: colors.light, + }, + + diffBadge: { + paddingVertical: spacing[1], + paddingHorizontal: spacing[3], + backgroundColor: colors.primaryFaint, + borderRadius: radius.full, + }, + + diffBadgeText: { + fontSize: fontSize.xs, + fontFamily: fontFamily.bold, + fontWeight: fontWeight.bold, + color: colors.primary, + }, + + // ── Scroll ──────────────────────────────────────────── + + scroll: { + flex: 1, + }, + + scrollContent: { + paddingHorizontal: layout.screenPaddingH, + paddingTop: spacing[4], + paddingBottom: spacing[4], + gap: spacing[4], + }, + + // ── Move history section ────────────────────────────── + + moveHistorySection: { + gap: spacing[3], + }, + + moveHistoryLabel: { + fontSize: fontSize.xs, + fontFamily: fontFamily.bold, + fontWeight: fontWeight.bold, + color: colors.muted, + textTransform: 'uppercase', + letterSpacing: 1.2, + }, + + // ── Controls Footer ─────────────────────────────────── + + controlsFooter: { + flexDirection: 'row', + paddingHorizontal: layout.screenPaddingH, + paddingVertical: spacing[4], + paddingBottom: spacing[6], + backgroundColor: colors.dark, + gap: spacing[2], + }, + + controlButton: { + flex: 1, + alignItems: 'center', + justifyContent: 'center', + gap: spacing[1], + paddingVertical: spacing[3], + backgroundColor: colors.white10, + borderRadius: radius.xl, + minHeight: 56, + }, + + resignButton: { + backgroundColor: 'rgba(214,69,69,0.15)', + }, + + controlIcon: { + fontSize: 20, + }, + + controlLabel: { + fontSize: fontSize.xs, + fontFamily: fontFamily.bold, + fontWeight: fontWeight.bold, + color: colors.white60, + }, + + resignLabel: { + color: colors.red, + }, +}); diff --git a/documentation/mobile-ui/screens/PlaySetupScreen.tsx b/documentation/mobile-ui/screens/PlaySetupScreen.tsx new file mode 100644 index 00000000..844a01d2 --- /dev/null +++ b/documentation/mobile-ui/screens/PlaySetupScreen.tsx @@ -0,0 +1,657 @@ +/** + * PlaySetupScreen.tsx + * D4 — Play vs Computer + * + * YSTEM Mobile App — Y STEM and Chess + * Designed by Sandith Hewage (UI/UX Engineer) + * + * Features: + * - Color picker: White (default) / Black cards with piece icons + * - Difficulty grid: 5 levels (Beginner → Master) with emoji + description + * - "Let's Go!" green CTA + * - Clean scrollable layout with brand styling + */ + +import React, { useState } from 'react'; +import { + View, + Text, + TouchableOpacity, + StyleSheet, + StatusBar, + ScrollView, +} from 'react-native'; +import { SafeAreaView } from 'react-native-safe-area-context'; +import { + colors, + spacing, + fontSize, + fontFamily, + fontWeight, + radius, + shadows, + btnGreenStyle, + btnGreenTextStyle, + cardStyle, + layout, + getLineHeight, +} from '../design-tokens.rn'; + +// --------------------------------------------------------------------------- +// Types + Data +// --------------------------------------------------------------------------- + +type PieceColor = 'white' | 'black'; +type Difficulty = 'beginner' | 'easy' | 'medium' | 'hard' | 'master'; + +interface DifficultyOption { + id: Difficulty; + label: string; + emoji: string; + description: string; + stockfishLevel: number; // 1–20 + color: string; +} + +const DIFFICULTY_OPTIONS: DifficultyOption[] = [ + { + id: 'beginner', + label: 'Beginner', + emoji: '🌱', + description: 'Perfect for learning the basics', + stockfishLevel: 1, + color: colors.primary, + }, + { + id: 'easy', + label: 'Easy', + emoji: '😊', + description: 'A gentle challenge', + stockfishLevel: 4, + color: colors.secondary, + }, + { + id: 'medium', + label: 'Medium', + emoji: '🤔', + description: 'Requires real thinking', + stockfishLevel: 8, + color: colors.accent, + }, + { + id: 'hard', + label: 'Hard', + emoji: '😤', + description: 'Strong tactical play', + stockfishLevel: 14, + color: '#FF8C42', + }, + { + id: 'master', + label: 'Master', + emoji: '👑', + description: 'Near-perfect engine', + stockfishLevel: 20, + color: colors.red, + }, +]; + +// --------------------------------------------------------------------------- +// Sub-components +// --------------------------------------------------------------------------- + +function ColorOption({ + value, + selected, + onPress, +}: { + value: PieceColor; + selected: boolean; + onPress: () => void; +}) { + const isWhite = value === 'white'; + return ( + + {isWhite ? '♔' : '♚'} + + {isWhite ? 'White' : 'Black'} + + + {isWhite ? 'Moves first' : 'Moves second'} + + {selected && ( + + ✓ + + )} + + ); +} + +function DifficultyCard({ + option, + selected, + onPress, +}: { + option: DifficultyOption; + selected: boolean; + onPress: () => void; +}) { + return ( + + {/* Colored top accent */} + + + {option.emoji} + {option.label} + {option.description} + + {/* Level indicator dots */} + + {Array.from({ length: 5 }).map((_, i) => ( + + ))} + + + ); +} + +// --------------------------------------------------------------------------- +// Main Screen +// --------------------------------------------------------------------------- + +interface PlaySetupScreenProps { + onStartGame?: (color: PieceColor, difficulty: Difficulty) => void; + onBack?: () => void; +} + +export default function PlaySetupScreen({ onStartGame, onBack }: PlaySetupScreenProps) { + const [selectedColor, setSelectedColor] = useState('white'); + const [selectedDifficulty, setSelectedDifficulty] = useState('beginner'); + + const difficultyOption = DIFFICULTY_OPTIONS.find((d) => d.id === selectedDifficulty)!; + + const handleStart = () => { + onStartGame?.(selectedColor, selectedDifficulty); + }; + + return ( + + + + {/* ── Top Bar ──────────────────────────────────────── */} + + + ‹ + + Play vs Computer + + + + + {/* ── Color Picker ─────────────────────────────────── */} + + Choose your color + + setSelectedColor('white')} + /> + setSelectedColor('black')} + /> + + + + {/* ── Difficulty Grid ───────────────────────────────── */} + + + Choose difficulty + + + {difficultyOption.emoji} {difficultyOption.label} + + + + + {/* 3 + 2 grid layout */} + + + {DIFFICULTY_OPTIONS.slice(0, 3).map((opt) => ( + setSelectedDifficulty(opt.id)} + /> + ))} + + + {DIFFICULTY_OPTIONS.slice(3).map((opt) => ( + setSelectedDifficulty(opt.id)} + /> + ))} + + + + + {/* ── Summary Card ─────────────────────────────────── */} + + + + Playing as + + {selectedColor === 'white' ? '♔ White' : '♚ Black'} + + + + + Difficulty + + {difficultyOption.emoji} {difficultyOption.label} + + + + + Engine + Lv {difficultyOption.stockfishLevel} + + + + + {/* Bottom spacer */} + + + + {/* ── Let's Go CTA ─────────────────────────────────── */} + + + Let's Go! ♟ + + + + ); +} + +// --------------------------------------------------------------------------- +// Color option styles +// --------------------------------------------------------------------------- + +const colorStyles = StyleSheet.create({ + card: { + flex: 1, + borderRadius: radius['2xl'], + borderWidth: 2, + padding: spacing[6], + alignItems: 'center', + gap: spacing[2], + ...shadows.sm, + }, + + cardWhite: { + backgroundColor: '#FAFAFA', + borderColor: colors.borderLight, + }, + + cardBlack: { + backgroundColor: '#2A2A2A', + borderColor: '#444', + }, + + cardSelected: { + ...shadows.md, + }, + + cardWhiteSelected: { + borderColor: colors.primary, + backgroundColor: colors.primaryFaint, + }, + + cardBlackSelected: { + borderColor: colors.primary, + }, + + pieceEmoji: { + fontSize: 40, + }, + + label: { + fontSize: fontSize.lg, + fontFamily: fontFamily.bold, + fontWeight: fontWeight.bold, + color: colors.dark, + }, + + labelLight: { + color: colors.light, + }, + + moveOrder: { + fontSize: fontSize.xs, + fontFamily: fontFamily.regular, + color: colors.gray, + }, + + moveOrderLight: { + color: colors.white60, + }, + + checkBadge: { + position: 'absolute', + top: spacing[2], + right: spacing[2], + width: 24, + height: 24, + borderRadius: radius.full, + alignItems: 'center', + justifyContent: 'center', + }, + + checkBadgeDark: { + backgroundColor: colors.dark, + }, + + checkBadgeLight: { + backgroundColor: colors.light, + }, + + checkText: { + fontSize: 12, + fontFamily: fontFamily.bold, + fontWeight: fontWeight.bold, + }, + + checkTextLight: { + color: colors.primary, + }, + + checkTextDark: { + color: colors.primary, + }, +}); + +// --------------------------------------------------------------------------- +// Difficulty card styles +// --------------------------------------------------------------------------- + +const diffStyles = StyleSheet.create({ + card: { + flex: 1, + backgroundColor: colors.light, + borderRadius: radius['2xl'], + borderWidth: 2, + borderColor: colors.borderLight, + padding: spacing[3], + alignItems: 'center', + gap: spacing[1], + overflow: 'hidden', + ...shadows.sm, + }, + + cardSelected: { + borderColor: colors.primary, + backgroundColor: colors.primaryFaint, + ...shadows.md, + }, + + accentBar: { + position: 'absolute', + top: 0, + left: 0, + right: 0, + height: 3, + borderTopLeftRadius: radius['2xl'], + borderTopRightRadius: radius['2xl'], + }, + + emoji: { + fontSize: 24, + marginTop: spacing[3], + }, + + label: { + fontSize: fontSize.sm, + fontFamily: fontFamily.bold, + fontWeight: fontWeight.bold, + color: colors.dark, + }, + + labelSelected: { + color: colors.primary, + }, + + description: { + fontSize: fontSize.xs, + fontFamily: fontFamily.regular, + color: colors.muted, + textAlign: 'center', + lineHeight: getLineHeight(fontSize.xs), + }, + + levelDots: { + flexDirection: 'row', + gap: 3, + marginTop: spacing[1], + }, + + dot: { + width: 6, + height: 6, + borderRadius: radius.full, + }, +}); + +// --------------------------------------------------------------------------- +// Screen Styles +// --------------------------------------------------------------------------- + +const styles = StyleSheet.create({ + safeArea: { + flex: 1, + backgroundColor: colors.soft, + }, + + // ── Top Bar ───────────────────────────────────────── + + topBar: { + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'space-between', + paddingHorizontal: layout.screenPaddingH, + paddingVertical: spacing[4], + }, + + backButton: { + width: 40, + height: 40, + borderRadius: radius.full, + backgroundColor: colors.light, + alignItems: 'center', + justifyContent: 'center', + ...shadows.sm, + }, + + backArrow: { + fontSize: fontSize['2xl'], + color: colors.dark, + marginTop: -2, + }, + + heading: { + fontSize: fontSize['2xl'], + fontFamily: fontFamily.bold, + fontWeight: fontWeight.bold, + color: colors.dark, + }, + + // ── Scroll ──────────────────────────────────────────── + + scroll: { + flex: 1, + }, + + scrollContent: { + paddingHorizontal: layout.screenPaddingH, + paddingBottom: spacing[4], + gap: layout.sectionSpacing, + }, + + // ── Sections ───────────────────────────────────────── + + section: { + gap: spacing[4], + }, + + sectionHeader: { + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'space-between', + }, + + sectionLabel: { + fontSize: fontSize.sm, + fontFamily: fontFamily.bold, + fontWeight: fontWeight.bold, + color: colors.muted, + textTransform: 'uppercase', + letterSpacing: 1.2, + }, + + difficultyBadge: { + paddingVertical: spacing[1], + paddingHorizontal: spacing[3], + borderRadius: radius.full, + }, + + difficultyBadgeText: { + fontSize: fontSize.xs, + fontFamily: fontFamily.bold, + fontWeight: fontWeight.bold, + }, + + // ── Color row ───────────────────────────────────────── + + colorRow: { + flexDirection: 'row', + gap: spacing[4], + }, + + // ── Difficulty grid ─────────────────────────────────── + + difficultyGrid: { + gap: spacing[3], + }, + + difficultyRow: { + flexDirection: 'row', + gap: spacing[3], + }, + + difficultyRowCentered: { + justifyContent: 'center', + }, + + // ── Summary ─────────────────────────────────────────── + + summaryCard: { + ...cardStyle, + }, + + summaryRow: { + flexDirection: 'row', + alignItems: 'center', + }, + + summaryItem: { + flex: 1, + alignItems: 'center', + gap: spacing[1], + }, + + summaryDivider: { + width: 1, + height: 40, + backgroundColor: colors.borderLight, + }, + + summaryLabel: { + fontSize: fontSize.xs, + fontFamily: fontFamily.bold, + fontWeight: fontWeight.bold, + color: colors.muted, + textTransform: 'uppercase', + letterSpacing: 0.8, + }, + + summaryValue: { + fontSize: fontSize.base, + fontFamily: fontFamily.bold, + fontWeight: fontWeight.bold, + color: colors.dark, + }, + + // ── Footer ──────────────────────────────────────────── + + footer: { + paddingHorizontal: layout.screenPaddingH, + paddingVertical: spacing[4], + paddingBottom: spacing[6], + backgroundColor: colors.soft, + borderTopWidth: 1, + borderTopColor: colors.borderLight, + }, + + startButton: { + ...btnGreenStyle, + height: 56, + }, + + startButtonText: { + ...btnGreenTextStyle, + }, +}); diff --git a/documentation/mobile-ui/screens/PuzzlesScreen.tsx b/documentation/mobile-ui/screens/PuzzlesScreen.tsx new file mode 100644 index 00000000..8dc4cd37 --- /dev/null +++ b/documentation/mobile-ui/screens/PuzzlesScreen.tsx @@ -0,0 +1,647 @@ +/** + * PuzzlesScreen.tsx + * D3 — Puzzles + * + * YSTEM Mobile App — Y STEM and Chess + * Designed by Sandith Hewage (UI/UX Engineer) + * + * Features: + * - Full-width chess board (aspectRatio: 1) + * - Puzzle info panel below: rating, themes, hint toggle + * - Streak badge + puzzle number + * - Hint reveal button (secondary) + * - New Puzzle green CTA + * - Result states: solving / correct / incorrect + */ + +import React, { useState } from 'react'; +import { + View, + Text, + TouchableOpacity, + StyleSheet, + StatusBar, + ScrollView, +} from 'react-native'; +import { SafeAreaView } from 'react-native-safe-area-context'; +import { + colors, + spacing, + fontSize, + fontFamily, + fontWeight, + radius, + shadows, + btnGreenStyle, + btnGreenTextStyle, + cardStyle, + layout, + chess, + getLineHeight, +} from '../design-tokens.rn'; + +// --------------------------------------------------------------------------- +// Types + Data +// --------------------------------------------------------------------------- + +type PuzzleState = 'solving' | 'correct' | 'incorrect'; + +interface Puzzle { + id: string; + number: number; + rating: number; + themes: string[]; + hint: string; + colorToMove: 'White' | 'Black'; + description: string; +} + +const SAMPLE_PUZZLE: Puzzle = { + id: 'pz001', + number: 4821, + rating: 1287, + themes: ['Fork', 'Knight', 'Intermediate'], + hint: 'Look for a Knight move that attacks two pieces at once.', + colorToMove: 'White', + description: 'White to move. Find the move that wins material.', +}; + +// --------------------------------------------------------------------------- +// Chess Board Display (same base as LessonScreen) +// --------------------------------------------------------------------------- + +function PuzzleBoard({ state }: { state: PuzzleState }) { + const files = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h']; + const ranks = [8, 7, 6, 5, 4, 3, 2, 1]; + + // Overlay tint based on result + const overlayColor = + state === 'correct' ? 'rgba(127,204,38,0.15)' : + state === 'incorrect' ? 'rgba(214,69,69,0.15)' : + 'transparent'; + + return ( + + + {ranks.map((rank) => ( + + {files.map((file, fileIdx) => { + const isLight = (fileIdx + rank) % 2 === 0; + return ( + + ); + })} + + ))} + {/* Result overlay */} + {state !== 'solving' && ( + + + {state === 'correct' ? '✓' : '✗'} + + + )} + + + {/* Color-to-move indicator */} + + + White to move + + + ); +} + +// --------------------------------------------------------------------------- +// Main Screen +// --------------------------------------------------------------------------- + +interface PuzzlesScreenProps { + puzzle?: Puzzle; + streak?: number; + onNewPuzzle?: () => void; + onHint?: () => void; +} + +export default function PuzzlesScreen({ + puzzle = SAMPLE_PUZZLE, + streak = 5, + onNewPuzzle, + onHint, +}: PuzzlesScreenProps) { + const [puzzleState, setPuzzleState] = useState('solving'); + const [hintShown, setHintShown] = useState(false); + const [hintUsed, setHintUsed] = useState(false); + + const handleShowHint = () => { + setHintShown(true); + setHintUsed(true); + onHint?.(); + }; + + const handleNewPuzzle = () => { + setPuzzleState('solving'); + setHintShown(false); + setHintUsed(false); + onNewPuzzle?.(); + }; + + // Simulate result (wire to actual chess logic) + const simulateCorrect = () => setPuzzleState('correct'); + const simulateIncorrect = () => setPuzzleState('incorrect'); + + return ( + + + + {/* ── Top Bar ──────────────────────────────────────── */} + + + Puzzle + #{puzzle.number} + + + Puzzles + + {/* Streak */} + + 🔥 + {streak} + + + + + {/* ── Board ────────────────────────────────────────── */} + + + {/* ── Result Banner ─────────────────────────────────── */} + {puzzleState !== 'solving' && ( + + + {puzzleState === 'correct' ? '🎉' : '😕'} + + + {puzzleState === 'correct' + ? `Brilliant!${hintUsed ? '' : ' +10 bonus (no hint)'}` + : 'Not quite — try the next one!'} + + + )} + + {/* ── Puzzle Info Panel ─────────────────────────────── */} + + {/* Header row */} + + + Rating + {puzzle.rating} + + + {puzzle.description} + + + + {/* Themes */} + + {puzzle.themes.map((theme) => ( + + {theme} + + ))} + + + {/* Hint toggle */} + {!hintShown ? ( + + 💡 + Show Hint + (−5 pts) + + ) : ( + + 💡 Hint + {puzzle.hint} + + )} + + + {/* Dev simulate buttons — remove in production */} + {puzzleState === 'solving' && ( + + + ✓ Correct + + + ✗ Wrong + + + )} + + {/* Bottom spacer */} + + + + {/* ── New Puzzle CTA ────────────────────────────────── */} + + + New Puzzle › + + + + ); +} + +// --------------------------------------------------------------------------- +// Board Styles +// --------------------------------------------------------------------------- + +const boardStyles = StyleSheet.create({ + wrapper: { + gap: spacing[2], + }, + + board: { + width: '100%', + aspectRatio: 1, + borderRadius: radius.lg, + overflow: 'hidden', + ...shadows.md, + }, + + rank: { + flex: 1, + flexDirection: 'row', + }, + + square: { + flex: 1, + }, + + squareLight: { + backgroundColor: '#F0D9B5', + }, + + squareDark: { + backgroundColor: '#B58863', + }, + + resultOverlay: { + position: 'absolute', + top: 0, + left: 0, + right: 0, + bottom: 0, + alignItems: 'center', + justifyContent: 'center', + }, + + resultEmoji: { + fontSize: 80, + opacity: 0.7, + }, + + turnIndicator: { + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'flex-end', + gap: spacing[2], + }, + + turnDot: { + width: 12, + height: 12, + borderRadius: radius.full, + borderWidth: 1, + borderColor: colors.borderLight, + }, + + turnText: { + fontSize: fontSize.xs, + fontFamily: fontFamily.bold, + fontWeight: fontWeight.bold, + color: colors.muted, + textTransform: 'uppercase', + letterSpacing: 1, + }, +}); + +// --------------------------------------------------------------------------- +// Screen Styles +// --------------------------------------------------------------------------- + +const styles = StyleSheet.create({ + safeArea: { + flex: 1, + backgroundColor: colors.soft, + }, + + // ── Top Bar ───────────────────────────────────────── + + topBar: { + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'space-between', + paddingHorizontal: layout.screenPaddingH, + paddingVertical: spacing[4], + }, + + puzzleId: { + alignItems: 'flex-start', + }, + + puzzleIdLabel: { + fontSize: fontSize.xs, + fontFamily: fontFamily.bold, + fontWeight: fontWeight.bold, + color: colors.muted, + textTransform: 'uppercase', + letterSpacing: 1, + }, + + puzzleIdValue: { + fontSize: fontSize.lg, + fontFamily: fontFamily.bold, + fontWeight: fontWeight.bold, + color: colors.dark, + }, + + heading: { + fontSize: fontSize['2xl'], + fontFamily: fontFamily.bold, + fontWeight: fontWeight.bold, + color: colors.dark, + }, + + streakBadge: { + flexDirection: 'row', + alignItems: 'center', + gap: spacing[1], + backgroundColor: colors.accentFaint, + paddingVertical: spacing[2], + paddingHorizontal: spacing[3], + borderRadius: radius.full, + borderWidth: 1, + borderColor: colors.accent, + }, + + streakEmoji: { + fontSize: 16, + }, + + streakCount: { + fontSize: fontSize.base, + fontFamily: fontFamily.bold, + fontWeight: fontWeight.bold, + color: colors.dark, + }, + + // ── Scroll ──────────────────────────────────────────── + + scroll: { + flex: 1, + }, + + scrollContent: { + paddingHorizontal: layout.screenPaddingH, + paddingBottom: spacing[4], + gap: spacing[4], + }, + + // ── Result Banner ──────────────────────────────────── + + resultBanner: { + flexDirection: 'row', + alignItems: 'center', + gap: spacing[3], + borderRadius: radius.xl, + paddingVertical: spacing[4], + paddingHorizontal: spacing[5], + ...shadows.sm, + }, + + resultBannerCorrect: { + backgroundColor: colors.primaryFaint, + borderWidth: 1, + borderColor: colors.primary, + }, + + resultBannerIncorrect: { + backgroundColor: colors.redLight, + borderWidth: 1, + borderColor: colors.red, + }, + + resultBannerEmoji: { + fontSize: 24, + }, + + resultBannerText: { + flex: 1, + fontSize: fontSize.base, + fontFamily: fontFamily.bold, + fontWeight: fontWeight.bold, + color: colors.dark, + }, + + // ── Info Card ───────────────────────────────────────── + + infoCard: { + ...cardStyle, + gap: spacing[4], + }, + + infoHeader: { + flexDirection: 'row', + alignItems: 'flex-start', + gap: spacing[4], + }, + + ratingBox: { + backgroundColor: colors.soft, + borderRadius: radius.lg, + padding: spacing[4], + alignItems: 'center', + minWidth: 64, + gap: spacing[1], + }, + + ratingLabel: { + fontSize: fontSize.xs, + fontFamily: fontFamily.bold, + fontWeight: fontWeight.bold, + color: colors.muted, + textTransform: 'uppercase', + letterSpacing: 0.8, + }, + + ratingValue: { + fontSize: fontSize['2xl'], + fontFamily: fontFamily.bold, + fontWeight: fontWeight.bold, + color: colors.primary, + }, + + descBox: { + flex: 1, + justifyContent: 'center', + }, + + descText: { + fontSize: fontSize.base, + fontFamily: fontFamily.regular, + color: colors.dark, + lineHeight: getLineHeight(fontSize.base), + }, + + // ── Themes ─────────────────────────────────────────── + + themesRow: { + flexDirection: 'row', + flexWrap: 'wrap', + gap: spacing[2], + }, + + themeBadge: { + backgroundColor: colors.primaryFaint, + paddingVertical: spacing[1], + paddingHorizontal: spacing[3], + borderRadius: radius.full, + borderWidth: 1, + borderColor: colors.primary + '40', + }, + + themeText: { + fontSize: fontSize.xs, + fontFamily: fontFamily.bold, + fontWeight: fontWeight.bold, + color: colors.primary, + }, + + // ── Hint ───────────────────────────────────────────── + + hintButton: { + flexDirection: 'row', + alignItems: 'center', + gap: spacing[2], + paddingVertical: spacing[3], + paddingHorizontal: spacing[4], + backgroundColor: colors.accentFaint, + borderRadius: radius.lg, + borderWidth: 1, + borderColor: colors.accent, + alignSelf: 'flex-start', + }, + + hintButtonEmoji: { + fontSize: 16, + }, + + hintButtonText: { + fontSize: fontSize.sm, + fontFamily: fontFamily.bold, + fontWeight: fontWeight.bold, + color: colors.dark, + }, + + hintButtonNote: { + fontSize: fontSize.xs, + fontFamily: fontFamily.regular, + color: colors.muted, + }, + + hintBox: { + backgroundColor: colors.accentFaint, + borderRadius: radius.lg, + borderLeftWidth: 3, + borderLeftColor: colors.accent, + padding: spacing[4], + gap: spacing[2], + }, + + hintBoxLabel: { + fontSize: fontSize.xs, + fontFamily: fontFamily.bold, + fontWeight: fontWeight.bold, + color: colors.dark, + textTransform: 'uppercase', + letterSpacing: 1, + }, + + hintBoxText: { + fontSize: fontSize.sm, + fontFamily: fontFamily.regular, + color: colors.dark, + lineHeight: getLineHeight(fontSize.sm), + }, + + // ── Dev simulate row ────────────────────────────────── + + devRow: { + flexDirection: 'row', + gap: spacing[3], + opacity: 0.6, + }, + + devBtn: { + flex: 1, + paddingVertical: spacing[3], + backgroundColor: colors.primaryFaint, + borderRadius: radius.lg, + alignItems: 'center', + borderWidth: 1, + borderColor: colors.primary, + }, + + devBtnRed: { + backgroundColor: colors.redLight, + borderColor: colors.red, + }, + + devBtnText: { + fontSize: fontSize.sm, + fontFamily: fontFamily.bold, + fontWeight: fontWeight.bold, + color: colors.dark, + }, + + // ── Footer ──────────────────────────────────────────── + + footer: { + paddingHorizontal: layout.screenPaddingH, + paddingVertical: spacing[4], + paddingBottom: spacing[6], + backgroundColor: colors.soft, + borderTopWidth: 1, + borderTopColor: colors.borderLight, + }, + + newPuzzleButton: { + ...btnGreenStyle, + height: 56, + }, + + newPuzzleButtonText: { + ...btnGreenTextStyle, + }, +}); diff --git a/documentation/mobile-ui/screens/SignUpScreen.tsx b/documentation/mobile-ui/screens/SignUpScreen.tsx new file mode 100644 index 00000000..d1c513bd --- /dev/null +++ b/documentation/mobile-ui/screens/SignUpScreen.tsx @@ -0,0 +1,431 @@ +/** + * SignUpScreen.tsx + * D1 — Auth + Navigation + * + * YSTEM Mobile App — Y STEM and Chess + * Designed by Sandith Hewage (UI/UX Engineer) + * + * Features: + * - Username, password, confirm password fields + * - Role selector: Student | Mentor (segmented control style) + * - Create Account CTA + back-to-login link + * - Real-time password match validation + * - KeyboardAvoidingView for input accessibility + */ + +import React, { useState } from 'react'; +import { + View, + Text, + TextInput, + TouchableOpacity, + StyleSheet, + KeyboardAvoidingView, + Platform, + ScrollView, + StatusBar, +} from 'react-native'; +import { SafeAreaView } from 'react-native-safe-area-context'; +import { + colors, + spacing, + fontSize, + fontFamily, + fontWeight, + radius, + shadows, + btnPrimaryStyle, + btnPrimaryTextStyle, + cardFormStyle, + inputBaseStyle, + errorTextStyle, + layout, +} from '../design-tokens.rn'; + +// --------------------------------------------------------------------------- +// Types +// --------------------------------------------------------------------------- + +type Role = 'student' | 'mentor'; + +interface SignUpScreenProps { + onSignUp?: (username: string, password: string, role: Role) => void; + onLogin?: () => void; +} + +// --------------------------------------------------------------------------- +// Component +// --------------------------------------------------------------------------- + +export default function SignUpScreen({ onSignUp, onLogin }: SignUpScreenProps) { + const [username, setUsername] = useState(''); + const [password, setPassword] = useState(''); + const [confirmPassword, setConfirmPassword] = useState(''); + const [role, setRole] = useState('student'); + const [errors, setErrors] = useState>({}); + const [loading, setLoading] = useState(false); + + // Focus states + const [usernameFocused, setUsernameFocused] = useState(false); + const [passwordFocused, setPasswordFocused] = useState(false); + const [confirmFocused, setConfirmFocused] = useState(false); + + const validate = (): boolean => { + const newErrors: Record = {}; + if (!username.trim()) newErrors.username = 'Username is required.'; + else if (username.trim().length < 3) newErrors.username = 'At least 3 characters.'; + if (!password) newErrors.password = 'Password is required.'; + else if (password.length < 8) newErrors.password = 'At least 8 characters.'; + if (password !== confirmPassword) newErrors.confirm = 'Passwords do not match.'; + setErrors(newErrors); + return Object.keys(newErrors).length === 0; + }; + + const handleSignUp = async () => { + if (!validate()) return; + setLoading(true); + try { + await onSignUp?.(username.trim(), password, role); + } catch { + setErrors({ general: 'Something went wrong. Please try again.' }); + } finally { + setLoading(false); + } + }; + + return ( + + + + + {/* ── Header ──────────────────────────────────────── */} + + + Y + + Create your account + Join Y STEM and Chess today + + + {/* ── Form Card ───────────────────────────────────── */} + + + {/* General error */} + {!!errors.general && ( + + {errors.general} + + )} + + {/* Username */} + + Username + { setUsername(t); setErrors((e) => ({ ...e, username: '' })); }} + onFocus={() => setUsernameFocused(true)} + onBlur={() => setUsernameFocused(false)} + autoCapitalize="none" + autoCorrect={false} + returnKeyType="next" + accessibilityLabel="Username input" + /> + {!!errors.username && {errors.username}} + + + {/* Password */} + + Password + { setPassword(t); setErrors((e) => ({ ...e, password: '' })); }} + onFocus={() => setPasswordFocused(true)} + onBlur={() => setPasswordFocused(false)} + secureTextEntry + returnKeyType="next" + accessibilityLabel="Password input" + /> + {!!errors.password && {errors.password}} + + + {/* Confirm Password */} + + Confirm password + { setConfirmPassword(t); setErrors((e) => ({ ...e, confirm: '' })); }} + onFocus={() => setConfirmFocused(true)} + onBlur={() => setConfirmFocused(false)} + secureTextEntry + returnKeyType="done" + onSubmitEditing={handleSignUp} + accessibilityLabel="Confirm password input" + /> + {!!errors.confirm && {errors.confirm}} + + + {/* Role selector */} + + I am a… + + {(['student', 'mentor'] as Role[]).map((r) => ( + setRole(r)} + activeOpacity={0.8} + accessibilityLabel={`Select role: ${r}`} + accessibilityState={{ selected: role === r }} + > + + {r.charAt(0).toUpperCase() + r.slice(1)} + + + ))} + + + + {/* Create Account CTA */} + + + {loading ? 'Creating account…' : 'Create Account'} + + + + {/* Login link */} + + Already have an account? + + Log in + + + + + + + ); +} + +// --------------------------------------------------------------------------- +// Styles +// --------------------------------------------------------------------------- + +const styles = StyleSheet.create({ + safeArea: { + flex: 1, + backgroundColor: colors.soft, + }, + + keyboardView: { + flex: 1, + }, + + scrollContent: { + flexGrow: 1, + alignItems: 'center', + paddingHorizontal: layout.screenPaddingH, + paddingTop: spacing[10], + paddingBottom: spacing[10], + }, + + // ── Header ────────────────────────────────────────── + + header: { + alignItems: 'center', + marginBottom: spacing[8], + }, + + logoCircle: { + width: 64, + height: 64, + borderRadius: radius.full, + backgroundColor: colors.dark, + alignItems: 'center', + justifyContent: 'center', + marginBottom: spacing[4], + ...shadows.lg, + }, + + logoLetter: { + fontSize: fontSize['3xl'], + fontFamily: fontFamily.bold, + fontWeight: fontWeight.bold, + color: colors.primary, + }, + + heading: { + fontSize: fontSize['2xl'], + fontFamily: fontFamily.bold, + fontWeight: fontWeight.bold, + color: colors.dark, + marginBottom: spacing[1], + }, + + subheading: { + fontSize: fontSize.sm, + fontFamily: fontFamily.regular, + color: colors.gray, + }, + + // ── Form Card ──────────────────────────────────────── + + formCard: { + ...cardFormStyle, + width: '100%', + maxWidth: layout.maxFormWidth, + gap: layout.formFieldGap, + }, + + errorBanner: { + backgroundColor: colors.redLight, + borderRadius: radius.lg, + borderWidth: 1, + borderColor: colors.red, + paddingVertical: spacing[3], + paddingHorizontal: spacing[4], + }, + + errorBannerText: { + ...errorTextStyle, + textAlign: 'center', + }, + + fieldGroup: { + gap: spacing[2], + }, + + fieldLabel: { + fontSize: fontSize.sm, + fontFamily: fontFamily.bold, + fontWeight: fontWeight.bold, + color: colors.dark, + letterSpacing: 0.3, + }, + + input: { + ...inputBaseStyle, + height: 48, + }, + + inputFocused: { + borderColor: colors.primary, + }, + + inputError: { + borderColor: colors.red, + }, + + fieldError: { + ...errorTextStyle, + fontSize: fontSize.xs, + }, + + // ── Role Selector ──────────────────────────────────── + + roleSelector: { + flexDirection: 'row', + borderRadius: radius.xl, + borderWidth: 2, + borderColor: colors.borderLight, + overflow: 'hidden', + backgroundColor: colors.light, + }, + + roleOption: { + flex: 1, + paddingVertical: spacing[3], + alignItems: 'center', + justifyContent: 'center', + }, + + roleOptionActive: { + backgroundColor: colors.dark, + }, + + roleOptionText: { + fontSize: fontSize.base, + fontFamily: fontFamily.bold, + fontWeight: fontWeight.bold, + color: colors.muted, + }, + + roleOptionTextActive: { + color: colors.light, + }, + + // ── Submit ─────────────────────────────────────────── + + submitButton: { + ...btnPrimaryStyle, + height: 52, + marginTop: spacing[2], + }, + + submitButtonText: { + ...btnPrimaryTextStyle, + }, + + buttonDisabled: { + opacity: 0.6, + }, + + loginRow: { + flexDirection: 'row', + justifyContent: 'center', + alignItems: 'center', + }, + + loginPrompt: { + fontSize: fontSize.sm, + fontFamily: fontFamily.regular, + color: colors.gray, + }, + + loginLink: { + fontSize: fontSize.sm, + fontFamily: fontFamily.bold, + fontWeight: fontWeight.bold, + color: colors.primary, + textDecorationLine: 'underline', + }, +});