Inclushe / clock-in

A stylistically bold clock app built in Vue.

Clock In

pnpm i
npm run watch

Issues with Other Apps

• The Windows 10 Clock app is garbage
• Online clocks are ugly and/or too small

Philosophies

• The app should be bold and playful.
• The app should have a defining symbol to differentiate from other clock apps.
• The clock itself should be as large as aesthetically possible.

Todo

• General Layout
  • Recreate Figma Design (with seconds and main buttons)
  • Create Timer Progress Bar
  • Create Entrance/Exit Animation
  • Set up Vue Router
  • Scale layout to width
• Clock
  • Make the clock functional
  • Add Tick Animation
• Timer
  • Create Input Type
  • Parse Input
  • Create unpauseTimer function
  • Create pauseTimer function
  • Create resetTimer function
  • Add reset button (same style as stopwatch)
  • Fix progress bar (stop when pausing)
  • Add notice for autoplaying disabled or find out how to "bypass" (intent)
  • Add animation
  • Change progress indicator pattern to svg
• Stopwatch
• Alarm
  • Create Alarm Toggle List
  • Save Alarms differently (render from dayjs in interval instead)
  • Create Timer Create
  • Hook current time into checking for alarms
• Pomodoro
  • Plan _ [X] Make the same as interval
  • Interval progress (where seconds are)
  • Add sounds (in material)
  • Breaks should be green
  • Autopause should work
  • Add Settings
    • Work Break Length
    • Short Break Length
    • Long Break Length
    • Interval until long break
    • Session intervals
    • Start automatically
    • Disable pausing
• Interval
  • Constant
  • Variable
  • Add layout
    • Constant
    • Variable
  • Interval progress and indicator
• Settings
  • Create Sliding Pane
  • Add 24 hour option ****
• Gripes & Fixes
  • Adjust colors
    • make red, green, grays palette
  • App should fit in the viewport
  • Interval and Pomodoro should have an indicator for what interval they're on
  • Add reset buttons
  • Add disabled states to button
  • Make color palette and fix colors
  • only allow numerical input (and colons)?
  • Input Validation
    • Timer
    • Alarm
    • Interval
  • fix hours
    • Timer
    • Interval
  • Auto add colons, doesn't work properly
  • Add interval begin flash
  • Fade when inactive
  • Settings
    • Make in Figma
  • Pomodoro Input Validation Settings
  • Clean up code
    • State should not be mutated outside mutation handlers (strict: true)
      • Potential drawback is that components are destroyed
  • Why is timer initially slow?