This repository was archived by the owner on Mar 11, 2026. It is now read-only.
feat: Interactive industrial maintenance learning modules#4
Open
Mikecranesync wants to merge 19 commits intomainfrom
Open
feat: Interactive industrial maintenance learning modules#4Mikecranesync wants to merge 19 commits intomainfrom
Mikecranesync wants to merge 19 commits intomainfrom
Conversation
- Update MainActivity.java to load production URL directly in WebView - Configure WebView to keep all navigation inside the app - Update Gradle plugin to 8.9.1 for dependency compatibility - Update Gradle wrapper to 9.0 - Simplify capacitor.config.ts (remove server.url, use native loading) Note: Clerk auth still needs configuration in Clerk dashboard: - Package: com.mikecrane.industrialskillshub - SHA-256: F4:3C:16:47:54:5E:AD:5E:0E:B2:70:DB:86:BF:68:95:16:AA:98:05:36:C1:55:3C:E9:84:B3:AC:48:AE:61:DD - Redirect URL: capacitor://localhost Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Add CookieManager to MainActivity.java for session persistence - Add capacitor:// intent filter to AndroidManifest.xml for OAuth callbacks - Add CFBundleURLTypes to Info.plist for iOS OAuth handling Requires Clerk dashboard configuration: - Add capacitor://localhost to allowed redirect URLs - Add capacitor://localhost to allowed origins Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- 5 Units: Bearings, Pumps, Motors, Power Transmission, Tools & Safety - 25 Lessons covering industrial mechanic fundamentals - 125 bilingual challenges (English/Spanish) - Mechanic L1 completion badge Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- 5 Units: PLC Fundamentals, Ladder Logic, I/O Systems, Troubleshooting, Safety & Documentation - 25 Lessons covering basic PLC programming and troubleshooting - 125 bilingual challenges (English/Spanish) - PLC Technician L1 completion badge Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Complete content for all 4 tracks: - Electrician L1: 125 challenges - Mechanic L1: 125 challenges - PLC Technician L1: 125 challenges - PLC Specialist L1: 125 challenges (NEW) PLC Specialist covers: - Unit 1: HMI/SCADA Systems - Unit 2: Advanced Programming (Function Blocks, ST, AOIs) - Unit 3: Industrial Networks (EtherNet/IP, Modbus) - Unit 4: Process Control (PID, Scaling, Instruments) - Unit 5: System Integration (VFDs, Motion, Commissioning) Total: 500 challenges across all tracks Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Android Gradle configuration updates - Capacitor Google OAuth integration - Native auth helpers for mobile sign-in - L2/L3 seed scripts for all tracks - Project documentation (CLAUDE.md) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
- Add @dnd-kit/core, @dnd-kit/sortable, konva, react-konva dependencies - Extend challengesEnum with CIRCUIT_BUILD, TROUBLESHOOT, IDENTIFY_PARTS, SEQUENCE - Add interactiveChallenges table for module configurations - Create components/interactive/ directory with placeholder components: - CircuitBuilder (drag-drop electrical symbols) - TroubleshootingGame (fault diagnosis) - MachineryModule (part identification) - Add shared ValidationEngine with circuit, troubleshoot, machinery validators - Add types.ts with ElectricalSymbol, CircuitConfig, etc. - Add useInteractive Zustand store with undo/redo support Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Symbol library includes: - Power sources: battery, AC source, ground - Control devices: switches (SPST, SPDT), push buttons (NO, NC), relay coil - Passive components: resistor, capacitor, inductor, fuse - Output devices: LED, lamp, motor, buzzer, solenoid - Sensors: proximity, temperature, limit switch - Wires: horizontal, junction, corner Features: - Bilingual labels (English/Spanish) - SVG inline definitions for optimal rendering - Difficulty levels: beginner, intermediate, advanced - Category groupings for filtering - Helper functions: getSymbolById, getSymbolsByCategory, etc. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- SymbolPalette: Draggable symbol grid using @dnd-kit/core - Canvas: Main drop target with grid overlay - DropZone: Individual placement areas with validation states - PlacedSymbol: Movable placed components with selection UI - Main CircuitBuilder: DndContext, sensors, toolbar, validation button Components support: - Mouse and touch drag-drop with configurable activation constraints - Grid snap-to alignment - Undo/redo via keyboard shortcuts (Ctrl+Z, Ctrl+Y) - Symbol selection and deletion - Bilingual labels (Es/En) - Visual feedback for drag hover, validation states - Accessibility: ARIA labels, keyboard navigation Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- ValidationEngine: Enhanced with detailed error messages (bilingual) - isSymbolInZone() - center-point detection for accuracy - getDetailedErrorMessage() - contextual hints with zone labels - generateHintsFromErrors() - progressive hint generation - Feedback component: Visual validation results display - Success/partial/error states with icons and colors - Animated progress bar showing score percentage - Collapsible error list with type labels - Dismiss button for incorrect attempts - HintSystem component: Progressive hint reveal - Unlocks hints based on attempt count - Expandable hint cards with numbering - Visual states: locked, available, revealed - CircuitBuilder updates: - Integrated Feedback component display - Track attempts count for hint unlocking - Pass symbolsMap to validation for detailed messages - Show attempt counter in status bar Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- InteractiveChallenge component: Wrapper for interactive modules - Routes by challenge type (CIRCUIT_BUILD, TROUBLESHOOT, etc.) - Resets interactive state when challenge changes - Displays placeholder for future modules - Quiz updates: - Added interactiveConfigs prop for challenge configurations - isInteractiveChallengeType() helper for type detection - onInteractiveComplete() handler for progress tracking - Conditional rendering for interactive vs standard challenges - Wider layout for interactive challenges (800px) - Database queries: - Added getInteractiveChallenge() query - Parses JSON config, correctState, and hints - PlacedSymbol fix: - Fixed duplicate role attribute conflict with dnd-kit Challenge types now routed: - SELECT/ASSIST: Standard multiple-choice - CIRCUIT_BUILD: CircuitBuilder component - TROUBLESHOOT/IDENTIFY_PARTS/SEQUENCE: Placeholder for Commits 6-7 Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- TroubleshootingGame component: Fault diagnosis game - Displays symptom description with warning icon - Renders circuit SVG with clickable component overlays - ComponentOverlay: Hover/select/correct/wrong states - Progressive hints unlocked after 2 attempts - Fault type labels (open/short/wrong_value/reversed/burnt) - Validation feedback with detailed messages - InteractiveChallenge updates: - Integrated TroubleshootingGame for TROUBLESHOOT type - Updated config type to support both CircuitConfig and TroubleshootingConfig - Type-safe config casting per challenge type Features: - Click-to-select component diagnosis - Visual feedback: selected (blue), correct (green), wrong (red) - Component name labels on selection - Attempt counter and hint system - Bilingual UI (Spanish/English) - Accessibility: ARIA labels, keyboard focus Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Implement full MachineryModule component with: - PartOverlay clickable components - DiagramView for SVG machinery diagrams - Symptom display with visual feedback - Progressive hints (unlocked after 2 attempts) - Part function info display on selection - Validation with correct/incorrect feedback - Revealed parts tracking for wrong answers - Add sample machinery SVG diagrams for: - Electric Motor with bearings, fan, junction box - Centrifugal Pump with impeller, seal, bearings - Air Compressor with tank, relief valve, gauge - Belt Conveyor with drums, idlers, motor - Industrial Fan with blades, hub, guard mesh - Update interactive-challenge.tsx to route IDENTIFY_PARTS to MachineryModule with proper config typing - Add machinery diagrams and sample configs for testing Bilingual support (ES/EN) throughout all components. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Create AccessibilityWrapper component with: - Screen reader announcements (live region) - Welcome messages per module type - Keyboard shortcuts help (sr-only) - Skip link for keyboard users - High contrast mode detection - Bilingual announcements (ES/EN) - Create useKeyboardNavigation hook with: - Tab navigation between items - Arrow key movement - Enter/Space for selection - Delete/Backspace for removal - Home/End navigation - Focus trap utility - Add getInteractiveAriaProps utility for: - Generating ARIA labels with state - Role and tabindex management - Selected/correct/wrong state descriptions - Add high contrast mode CSS: - Increased border visibility - Enhanced color contrast - Higher contrast text - Add reduced motion support: - Respects prefers-reduced-motion - Disables animations for users who prefer it - Add focus styles for keyboard navigation All features support bilingual (ES/EN) content. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Wrap SymbolPalette and DraggableSymbol with React.memo - Wrap PlacedSymbol with React.memo to prevent re-renders - Create performance utility hooks: - useThrottle: 60fps throttling for drag handlers - useDebounce: Delayed validation after interactions - useRAFThrottle: RequestAnimationFrame-based throttling - useLazyLoad: Intersection Observer for lazy loading - measurePerformance: Performance API wrapper - Add lazy symbol loader by category - Add memoization helper for expensive calculations - Add isLowPowerDevice detection for reduced animations These optimizations ensure smooth 60fps drag performance and reduce unnecessary re-renders during interactions. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Create vitest configuration with jsdom environment
- Add test setup with mocks for browser APIs:
- matchMedia, ResizeObserver, IntersectionObserver
- requestAnimationFrame
- Add ValidationEngine tests:
- validateCircuit: correct placement, missing symbols,
wrong symbols, extra symbols, bilingual messages
- validateTroubleshooting: correct/wrong selection
- validateMachineryPart: part identification
- generateHintsFromErrors: hint generation
- Add symbolLibrary tests:
- Symbol count and required fields
- Unique IDs, valid SVG content
- Category and difficulty filtering
- Bilingual content validation
- Add InteractiveStore (Zustand) tests:
- placeSymbol, removeSymbol, moveSymbol
- Undo/redo functionality
- Selection management
- Reset and completion states
Tests require vitest installation:
npm install -D vitest @vitejs/plugin-react @testing-library/react @testing-library/jest-dom
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Create INTERACTIVE_MODULES.md with: - Overview of all module types - Challenge configuration examples - Symbol library usage - State management guide - Validation engine documentation - Performance optimization tips - Create INTEGRATION_GUIDE.md with: - Database setup instructions - Challenge creation examples - Quiz flow integration - SVG diagram creation tips - Best practices and troubleshooting - Create ACCESSIBILITY.md with: - WCAG 2.1 compliance details - Keyboard navigation tables - Screen reader support - High contrast mode - Reduced motion support - Focus indicators - Touch target sizes - Testing guidelines All documentation is bilingual-ready and includes code examples for developers. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Version bump to 1.1.0 for the interactive learning modules release. ## Features Added in v1.1.0 ### Interactive Challenge Types - CIRCUIT_BUILD: Drag-drop electrical diagram builder - TROUBLESHOOT: Fault diagnosis simulation - IDENTIFY_PARTS: Machinery identification game ### Components - CircuitBuilder with SymbolPalette, Canvas, DropZone, PlacedSymbol - TroubleshootingGame with ComponentOverlay - MachineryModule with PartOverlay, DiagramView - Feedback and HintSystem components ### Electrical Symbol Library - 22 electrical symbols (IEC standard) - 5 categories: power, control, output, sensor, wire - 3 difficulty levels: beginner, intermediate, advanced - Bilingual labels (ES/EN) ### State Management - Zustand store with undo/redo support - Placed symbols tracking - Selection management - History for undo operations ### Validation Engine - Circuit validation with detailed errors - Troubleshooting validation - Machinery part validation - Progressive hint generation ### Accessibility - Keyboard navigation (Tab, Arrow, Enter, Escape) - Screen reader support with ARIA labels - Live regions for announcements - High contrast mode - Reduced motion support ### Performance - React.memo on drag components - useMemo for symbol lookups - Throttle/debounce utilities - Lazy loading support ### Documentation - INTERACTIVE_MODULES.md - INTEGRATION_GUIDE.md - ACCESSIBILITY.md ### Tests - ValidationEngine tests - Symbol library tests - Interactive store tests - Vitest configuration Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Add TroubleshootingGame support for professional images (circuitImage) - Update ComponentInfo to use percentage-based coordinates for responsive overlays - Fix Circuit Builder expected symbol ID (battery instead of dc-source) - Add professional machinery images (motor, pump, conveyor, compressor, fan) - Create challenge-templates.ts with ready-to-use configs - Add INTERACTIVE_MODULE_TEMPLATE.md documentation - Add demo page for testing all three module types - Add calibration tool for positioning hotspots on images Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Adds interactive drag-drop electrical diagrams, circuit games, and troubleshooting simulations to IndustrialSkillsHub.
Target Version: v1.1.0
Features
Implementation Phases
Phase 1 (MVP): Symbols + Simplified Prints
Phase 2 (Enhancement): Real Prints + Machinery
Tech Stack Additions
@dnd-kit/core- Drag and dropkonva+react-konva- Canvas renderingNew Challenge Types
CIRCUIT_BUILD- Drag symbols onto printTROUBLESHOOT- Diagnose faultsIDENTIFY_PARTS- Label machinery componentsTesting
🤖 Generated with Claude Code