Skip to content

PLAN-ELECTRON.md

Latest commit

 

History

History
75 lines (52 loc) · 2.19 KB

PLAN-ELECTRON.md

File metadata and controls

75 lines (52 loc) · 2.19 KB

Electron Desktop App - Implementation Log

Goal

Create a floating "Clippy-style" desktop app showing learning cards.

Current Status: WORKING ✅

The app shows an animated sprite character that expands to show a card bubble with smooth, performant animations.

What Works

  1. Animated sprite icon - Pink character with idle animation (4 frames), always visible
  2. Transparent background - Only character/bubble visible, no window chrome
  3. Expand/collapse - Click character to toggle bubble with smooth animation
  4. Manual drag - Hold and drag moves window, click expands
  5. Keyboard movement - Arrow keys move the character smoothly (game-like)
  6. Walk animation - 6-frame walk cycle when moving left/right
  7. Climb animation - 4-frame climb cycle when moving up
  8. Directional facing - Character faces the direction it's moving
  9. GPU-accelerated animations - Pure CSS sprite animations for 60fps

Sprite Animations

Located in public/assets/characters/pink/:

  • idle.png - 4 frames (128x32), plays when stationary
  • walk.png - 6 frames (192x32), plays when moving left/right
  • climb.png - 4 frames (128x32), plays when moving up

Architecture

Window States

  1. Collapsed: 74x74 transparent, just the character
  2. Expanded: 320x580 transparent, bubble + character

Key Files

  • electron/main.ts - Window management, IPC handlers
  • electron/preload.ts - IPC bridge (close, minimize, toggle, drag, move)
  • src/main.tsx - ElectronApp with DraggableIcon, sprite animations, keyboard controls
  • src/index.css - Sprite animation keyframes and styles

IPC Handlers

  • close-window - Close app
  • minimize-window - Minimize to dock
  • toggle-expand - Switch collapsed/expanded
  • get-expanded-state - Get current state
  • start-drag / do-drag - Manual window dragging
  • move-window - Keyboard-based window movement

Controls

  • Click - Toggle expand/collapse
  • Hold + Drag - Move window with mouse
  • Arrow Keys - Move character smoothly (with animations)

Commands

npm run electron:dev      # Development
npm run electron:build    # Production build
pkill -f Electron         # Kill processes