# TypeScript Migration - Visual Timeline

## 6-Week Balanced Timeline (RECOMMENDED)

### Gantt Chart View

```
Week 1: Foundation & Core Types
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Phase 0: Setup         ████████░░░░░░░░░░░░░░░░░░░░░░  4-6h
Phase 1: Core Types    ░░░░░░░░████████████████░░░░░░  6-8h
                       Mon  Tue  Wed  Thu  Fri
CHECKPOINT 1: Build works, utils typed ✓

Week 2: Board & Piece Foundation
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Phase 2a: Board        ████████████░░░░░░░░░░░░░░░░░░  3-4h
Phase 2b: Piece Base   ░░░░░░░░░░░░████████████░░░░░░  2h
Phase 2c: Simple       ░░░░░░░░░░░░░░░░░░░░████████░░  3h
             Pieces    Mon  Tue  Wed  Thu  Fri
CHECKPOINT 2: Core models typed ✓

Week 3: Complete Pieces & Engine
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Phase 2d: Complex      ████████████░░░░░░░░░░░░░░░░░░  3-4h
             Pieces
Phase 3a: GameState    ░░░░░░░░░░░░████████░░░░░░░░░░  3-4h
Phase 3b: Validators   ░░░░░░░░░░░░░░░░░░░░████████░░  3-4h
                       Mon  Tue  Wed  Thu  Fri
CHECKPOINT 3: Game logic works ✓

Week 4: Engine & UI Foundation
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Phase 3c: Special      ████████░░░░░░░░░░░░░░░░░░░░░░  2-3h
             Moves
Phase 4a: Renderer     ░░░░░░░░████████████░░░░░░░░░░  2-3h
Phase 4b: DragDrop     ░░░░░░░░░░░░░░░░████████░░░░░░  2-3h
                       Mon  Tue  Wed  Thu  Fri
CHECKPOINT 4: UI typed ✓

Week 5: Controllers & Integration
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Phase 4c: Controller   ████████████░░░░░░░░░░░░░░░░░░  2-3h
Phase 5a: Main Entry   ░░░░░░░░░░░░████░░░░░░░░░░░░░░  1-2h
Phase 5b: Test Mig     ░░░░░░░░░░░░░░░░████████████░░  3-4h
                       Mon  Tue  Wed  Thu  Fri
CHECKPOINT 5: Full game playable ✓

Week 6: Polish & Production
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Phase 6a: Optimize     ████████░░░░░░░░░░░░░░░░░░░░░░  2h
Phase 6b: Docs         ░░░░░░░░████████░░░░░░░░░░░░░░  1-2h
Phase 6c: Build Setup  ░░░░░░░░░░░░░░░░████░░░░░░░░░░  1h
Phase 6d: Final QA     ░░░░░░░░░░░░░░░░░░░░████████░░  1h
Buffer/Contingency     ░░░░░░░░░░░░░░░░░░░░░░░░████░░  Flex
                       Mon  Tue  Wed  Thu  Fri
CHECKPOINT 6: Production ready! ✓✓✓
```

---

## Daily Breakdown (Balanced 6-Week Timeline)

### Week 1: Foundation (10-14 hours)

**Monday (2-3h)**
- Install TypeScript and dependencies (1h)
- Create tsconfig.json (1h)
- Configure Jest with ts-jest (1h)

**Tuesday (2-3h)**
- Create global type definitions (1h)
- Set up build scripts (1h)
- Test compilation pipeline (1h)

**Wednesday (2-3h)**
- Migrate Constants.js → Constants.ts (2h)
- Run validation tests (1h)

**Thursday (2-3h)**
- Migrate Helpers.js → Helpers.ts (2h)
- Update tests (1h)

**Friday (2-3h)**
- Migrate EventBus.js → EventBus.ts (2-3h)

**Weekend: CHECKPOINT 1**
- Verify all utils typed
- Ensure build works
- All tests passing

---

### Week 2: Board & Pieces (10-12 hours)

**Monday (3-4h)**
- Create Board interface (1h)
- Migrate Board.js → Board.ts (2-3h)

**Tuesday (2-3h)**
- Fix Board type issues (1h)
- Run Board tests (1h)
- Create Piece interfaces (1h)

**Wednesday (2-3h)**
- Migrate Piece.js → Piece.ts (2h)
- Update piece tests (1h)

**Thursday (2-3h)**
- Migrate Rook.ts + Bishop.ts (2h)
- Run tests (1h)

**Friday (2-3h)**
- Migrate Knight.ts + Queen.ts (2-3h)

**Weekend: CHECKPOINT 2**
- Verify core models typed
- Simple pieces working
- Tests passing

---

### Week 3: Complex Pieces & Engine (12-14 hours)

**Monday (3-4h)**
- Migrate Pawn.ts (en passant logic) (2-3h)
- Run pawn tests (1h)

**Tuesday (3-4h)**
- Migrate King.ts (castling logic) (2-3h)
- Run king tests (1h)

**Wednesday (3-4h)**
- Create GameState types (1h)
- Migrate GameState.js → GameState.ts (2-3h)

**Thursday (3-4h)**
- Create Move types (1h)
- Migrate MoveValidator.js → MoveValidator.ts (2-3h)

**Friday (2-3h)**
- Migrate SpecialMoves.js → SpecialMoves.ts (2-3h)

**Weekend: CHECKPOINT 3**
- Game logic fully typed
- All pieces working
- Move validation correct

---

### Week 4: UI Layer (10-12 hours)

**Monday (2-3h)**
- Create UI types (30min)
- Migrate BoardRenderer.js → BoardRenderer.ts (2h)

**Tuesday (2-3h)**
- Fix DOM type issues (1h)
- Test rendering (1h)
- Create drag/drop types (30min)

**Wednesday (2-3h)**
- Migrate DragDropHandler.js → DragDropHandler.ts (2h)
- Test drag/drop (1h)

**Thursday (2-3h)**
- Migrate GameController.js → GameController.ts (2-3h)

**Friday (2-3h)**
- Fix controller type issues (1h)
- Integration testing (1-2h)

**Weekend: CHECKPOINT 4**
- Full UI typed
- Game playable
- All interactions work

---

### Week 5: Integration (8-10 hours)

**Monday (2h)**
- Migrate main.js → main.ts (1-2h)

**Tuesday (2-3h)**
- Fix main entry point issues (1h)
- Update HTML references (30min)
- Test full application (1h)

**Wednesday (2-3h)**
- Start test file conversions (2-3h)

**Thursday (2-3h)**
- Continue test migrations (2-3h)

**Friday (2-3h)**
- Complete test migrations (2h)
- Run full test suite (1h)

**Weekend: CHECKPOINT 5**
- All source files .ts
- All test files .ts
- 124/124 tests passing

---

### Week 6: Polish & Production (8-10 hours)

**Monday (2h)**
- Type optimization (1h)
- Remove unnecessary assertions (1h)

**Tuesday (2-3h)**
- Update README.md (1h)
- Create migration guide (1h)
- Document type conventions (1h)

**Wednesday (2h)**
- Configure production build (1h)
- Set up source maps (30min)
- Optimize compilation (30min)

**Thursday (2h)**
- Full test suite run (30min)
- Manual feature testing (1h)
- Performance testing (30min)

**Friday (2-3h)**
- Code review (1-2h)
- Final fixes (1h)
- Prepare deployment (30min)

**Weekend: CHECKPOINT 6**
- Production ready!
- Zero type errors
- All tests passing
- Documentation complete

---

## 4-Week Aggressive Timeline

### Compressed View
```
Week 1: Phase 0-1      ████████████████████░░░░░░░░░░  10-14h
Week 2: Phase 2        ░░░░░░░░░░░░░░░░░░░░████████░░  12-15h
Week 3: Phase 3-4      ░░░░░░░░░░░░░░░░░░░░░░░░░░██░░  15-18h
Week 4: Phase 5-6      ░░░░░░░░░░░░░░░░░░░░░░░░░░░░██  10-12h
```

**Total:** 47-59 hours over 4 weeks (12-15h per week)
**Intensity:** HIGH - requires focused, full-time effort
**Risk:** Medium - less buffer for issues

---

## 8-Week Conservative Timeline

### Relaxed View
```
Week 1-2: Phase 0-1    ████████████████████░░░░░░░░░░  10-14h
Week 3-4: Phase 2      ░░░░░░░░░░░░░░░░░░░░████████░░  12-15h
Week 5-6: Phase 3-4    ░░░░░░░░░░░░░░░░░░░░░░░░░░██░░  15-18h
Week 7-8: Phase 5-6    ░░░░░░░░░░░░░░░░░░░░░░░░░░░░██  10-12h
```

**Total:** 47-59 hours over 8 weeks (6-7h per week)
**Intensity:** LOW - sustainable, learning-friendly
**Risk:** Low - plenty of buffer time

---

## Parallel Work Opportunities

### Can Work in Parallel

**Phase 1: Core Types**
```
Developer A: Constants.ts   ████████
Developer B: Helpers.ts     ████████
Developer C: EventBus.ts    ████████
              Mon  Tue  Wed
```
**Time Saved:** 4-6 hours (from 6-8h to 2-3h)

**Phase 2c: Concrete Pieces**
```
Dev A: Rook + Bishop        ████████
Dev B: Knight + Queen       ████████
Dev C: Pawn + King          ████████████
              Mon  Tue  Wed  Thu
```
**Time Saved:** 3-4 hours (from 5-6h to 2-3h)

**Phase 4: UI Components**
```
Dev A: BoardRenderer        ████████
Dev B: DragDropHandler      ████████
Dev C: GameController       ████████
              Mon  Tue  Wed
```
**Time Saved:** 2-3 hours (from 6-8h to 3-4h)

**Total Parallelization Savings:** 9-13 hours

---

## Critical Path (Cannot Parallelize)

### Sequential Dependencies
```
1. TypeScript Setup (Phase 0)         4-6h
   ↓ [BLOCKING]
2. Constants & Types (Phase 1)        6-8h
   ↓ [BLOCKING]
3. Board.ts                           3-4h
   ↓ [BLOCKING]
4. Piece.ts (base class)              2h
   ↓ [BLOCKING]
5. [Concrete pieces - CAN PARALLEL]   3-4h
   ↓ [BLOCKING]
6. GameState.ts                       3-4h
   ↓ [BLOCKING]
7. MoveValidator.ts                   2-3h
   ↓ [BLOCKING]
8. [UI components - CAN PARALLEL]     3-4h
   ↓ [BLOCKING]
9. main.ts                            1-2h
   ↓ [BLOCKING]
10. Test migrations                    3-4h

TOTAL CRITICAL PATH: 30-40 hours
```

---

## Resource Allocation Strategies

### Strategy 1: Solo Developer (6 weeks)
```
Week  Hours   Cumulative
1     10-14   10-14
2     10-12   20-26
3     12-14   32-40
4     10-12   42-52
5      8-10   50-62
6      8-10   58-72

TOTAL: 58-72 hours over 6 weeks
```

### Strategy 2: Pair (2 devs, 4 weeks)
```
Week  Hours/Dev  Total Hours
1       10        20
2       12        24
3       12        24
4       10        20

TOTAL: 44h/dev, 88h combined
TIME SAVED: 2 weeks
```

### Strategy 3: Team (3 devs, 3 weeks)
```
Week  Hours/Dev  Total Hours
1        8         24
2       10         30
3       10         30

TOTAL: 28h/dev, 84h combined
TIME SAVED: 3 weeks
```

---

## Checkpoint Success Criteria

### Checkpoint 1: Foundation (End Week 1)
- ✅ TypeScript compiles without errors
- ✅ Jest runs with ts-jest
- ✅ All util modules typed
- ✅ Build scripts work
- ✅ Team comfortable with setup

**GO/NO-GO Decision:**
- GO: Proceed to Phase 2
- NO-GO: Fix foundation issues

---

### Checkpoint 2: Models (End Week 2)
- ✅ Board class fully typed
- ✅ Piece hierarchy correct
- ✅ Simple pieces migrated
- ✅ Tests passing (>90%)
- ✅ No critical type errors

**GO/NO-GO Decision:**
- GO: Proceed to complex pieces
- NO-GO: Fix model types

---

### Checkpoint 3: Engine (End Week 3)
- ✅ All pieces migrated
- ✅ GameState typed
- ✅ Move validation works
- ✅ Special moves typed
- ✅ Tests passing (>95%)

**GO/NO-GO Decision:**
- GO: Proceed to UI
- NO-GO: Fix game logic

---

### Checkpoint 4: UI (End Week 4)
- ✅ All controllers typed
- ✅ Rendering works correctly
- ✅ Drag/drop functional
- ✅ Full game playable
- ✅ No DOM errors

**GO/NO-GO Decision:**
- GO: Proceed to integration
- NO-GO: Fix UI types

---

### Checkpoint 5: Integration (End Week 5)
- ✅ All source files .ts
- ✅ All test files .ts
- ✅ 124/124 tests passing
- ✅ Main entry typed
- ✅ Full app functional

**GO/NO-GO Decision:**
- GO: Proceed to polish
- NO-GO: Fix integration issues

---

### Checkpoint 6: Production (End Week 6)
- ✅ Zero TypeScript errors
- ✅ Type coverage >95%
- ✅ Documentation complete
- ✅ Build optimized
- ✅ Ready to deploy

**SHIP/NO-SHIP Decision:**
- SHIP: Deploy to production
- NO-SHIP: Address remaining issues

---

## Velocity Tracking

### Expected Progress by Week

| Week | Phase | Files Complete | Tests Passing | Type Coverage |
|------|-------|----------------|---------------|---------------|
| 1 | 0-1 | 3/18 (17%) | 124/124 | 15% |
| 2 | 2 | 11/18 (61%) | 120/124 | 55% |
| 3 | 3 | 14/18 (78%) | 118/124 | 75% |
| 4 | 4 | 17/18 (94%) | 122/124 | 90% |
| 5 | 5 | 18/18 (100%) | 124/124 | 95% |
| 6 | 6 | 18/18 (100%) | 124/124 | 98% |

### Burn-Down Chart (Ideal)
```
Files Remaining
18 ┤ ●
16 ┤  ╲
14 ┤   ╲
12 ┤    ●
10 ┤     ╲
8  ┤      ╲
6  ┤       ●
4  ┤        ╲
2  ┤         ●
0  ┤          ●──●
   └─────────────────
   0  1  2  3  4  5  6  Weeks
```

---

## Time-Boxing Guidelines

### Maximum Time per Module

| Module | Estimate | Time Box | Escalation Trigger |
|--------|----------|----------|-------------------|
| Constants.ts | 2h | 3h | Type complexity |
| Helpers.ts | 2h | 3h | Function signatures |
| EventBus.ts | 2-3h | 4h | Generic types |
| Board.ts | 2-3h | 4h | Grid typing |
| Piece.ts | 2h | 3h | Abstract class |
| Simple Piece | 30-45min | 1.5h | Move logic |
| Complex Piece | 1-1.5h | 2h | Special moves |
| GameState.ts | 3-4h | 5h | State management |
| MoveValidator.ts | 2-3h | 4h | Validation logic |
| SpecialMoves.ts | 2-3h | 4h | Castling/en passant |
| BoardRenderer.ts | 2h | 3h | DOM types |
| DragDropHandler.ts | 2h | 3h | Event types |
| GameController.ts | 2-3h | 4h | Orchestration |
| main.ts | 1-2h | 3h | Initialization |

**Escalation Process:**
1. Hit time box → Document blocker
2. Ask for help / pair program
3. Consider rollback if >2x estimate
4. Re-evaluate approach

---

## Visual Progress Tracker

### Use This Template for Weekly Updates

```markdown
## Week X Progress Report

### Completed ✅
- [x] Module A (Xh actual vs Yh estimated)
- [x] Module B (Xh actual vs Yh estimated)

### In Progress 🔄
- [ ] Module C (50% complete)

### Blocked 🛑
- [ ] Module D (reason: waiting for...)

### Metrics
- Files: X/18 (X%)
- Tests: X/124 (X%)
- Type Coverage: X%
- Hours This Week: X
- Hours Total: X/47

### Velocity
- Planned: Xh
- Actual: Xh
- Variance: +/- Xh

### Next Week
- [ ] Task 1
- [ ] Task 2
- [ ] Task 3

### Blockers / Risks
- [List any issues]

### Confidence
- ● High / ○ Medium / ○ Low
```

---

**Ready to start?**
1. Choose your timeline (4, 6, or 8 weeks)
2. Allocate resources (solo, pair, or team)
3. Set up weekly checkpoints
4. Begin Phase 0!

**Document Version:** 1.0
**Last Updated:** 2025-11-23
