Weyoun/chess
1
0
Fork 0
Code Issues 3 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Typescript #6

New Issue
Open
opened 2025-11-23 14:52:57 +00:00 by Weyoun · 1 comment
Weyoun commented 2025-11-23 14:52:57 +00:00
Owner
Copy Link

Rewrite the code in Typescript to improve code quality and maintainability.

Rewrite the code in Typescript to improve code quality and maintainability.
Weyoun added the
analyzed
 label 2025-11-23 15:14:08 +00:00
Weyoun commented 2025-11-23 16:18:43 +00:00
Author
Owner
Copy Link

🎯 TypeScript Migration - Implementation Roadmap

This issue has been fully analyzed by the Hive Mind. The migration is ready to execute with comprehensive documentation and step-by-step guides.

📋 Quick Start for Implementation Hive-Mind

Step 1: Read the Documentation (30 min)

Start here:

  1. docs/issue-6-analysis.md - Complete analysis and recommendations
  2. docs/typescript-migration-summary.md - Executive overview
  3. docs/typescript-testing-starter-guide.md - Day 1 setup tutorial

Key Decision: Choose your timeline

  • 🏃 4 weeks - Aggressive (12-15h/week) - Dedicated focus
  • ⭐ 6 weeks - Balanced (15-20h/week) - RECOMMENDED
  • 🚶 8-10 weeks - Conservative (5-10h/week) - Learning TypeScript

Step 2: Environment Setup (4-6 hours)

Follow docs/typescript-testing-starter-guide.md Steps 1-9:

# 1. Install dependencies
npm install --save-dev typescript ts-node ts-jest @types/jest @types/node
npm install --save-dev @typescript-eslint/parser @typescript-eslint/eslint-plugin

# 2. Create tsconfig.json (full config in docs/typescript-architecture.md)
# 3. Create jest.config.ts (full config in docs/typescript-testing-starter-guide.md)
# 4. Create src/types/ directory structure
# 5. Migrate tests/setup.js to TypeScript
# 6. Verify setup: npm run typecheck && npm test

Success Criteria:

  • ✅ TypeScript compiles without errors
  • ✅ All 124 tests still passing
  • ✅ No runtime errors

Step 3: Phase 1 - Core Types (6-8 hours)

Create type definition files:

# Create directory structure
mkdir -p src/types

# Create type files (templates in docs/typescript-architecture.md lines 200-400)
touch src/types/core.types.ts      # Position, Color, Square
touch src/types/piece.types.ts     # PieceType, IPiece, IBoard
touch src/types/game.types.ts      # GameStatus, GameConfig
touch src/types/move.types.ts      # Move, MoveResult, SpecialMove
touch src/types/ui.types.ts        # GameEvent, typed event handlers
touch src/types/index.ts           # Re-export all types

Migrate utility files:

# Follow conversion pattern in docs/typescript-code-examples.md
js/utils/Constants.js → src/utils/Constants.ts
js/utils/Helpers.js → src/utils/Helpers.ts

Validation:

npm run typecheck  # 0 errors
npm test          # 124/124 passing

Step 4: Phase 2 - Game Models (8-10 hours) ⚠️ CRITICAL

Files to migrate:

js/game/Board.js → src/game/Board.ts
js/game/GameState.js → src/game/GameState.ts

Key Type Annotations Needed:

// Board.ts
class Board implements IBoard {
  private grid: (IPiece | null)[][];

  getPiece(row: number, col: number): IPiece | null { }
  movePiece(from: Position, to: Position): MoveResult { }
}

// GameState.ts
class GameState {
  private moveHistory: Move[] = [];
  private capturedPieces: { white: IPiece[]; black: IPiece[] };
  currentTurn: Color;
  status: GameStatus;
}

See: docs/typescript-code-examples.md sections 1-4 for full patterns

Validation:

  • ✅ Board and GameState compile with strict mode
  • ✅ All tests passing
  • ✅ No type errors in dependent files

Step 5: Phase 3-6 - Continue Migration (Weeks 2-6)

Migration Order (bottom-up):

  1. ✅ Phase 0: Setup (complete in Step 2)
  2. ✅ Phase 1: Core Types (complete in Step 3)
  3. ✅ Phase 2: Game Models (complete in Step 4)
  4. 📝 Phase 3: Piece Classes - js/pieces/*.js → src/pieces/*.ts
  5. 📝 Phase 4: Game Engine - js/engine/*.js → src/engine/*.ts
  6. 📝 Phase 5: Controllers/Views - js/controllers/*.js, js/views/*.js → src/
  7. 📝 Phase 6: Integration - js/main.js → src/main.ts, migrate tests

Use these checklists:

  • docs/typescript-migration-checklist.md - Step-by-step per phase
  • docs/typescript-testing-quick-ref.md - Testing workflow
  • docs/typescript-migration-quickref.md - Quick reference

���� Implementation Tips for Hive-Mind

1. Follow the Migration Pattern (from docs)

// BEFORE (JavaScript)
class Piece {
  constructor(color, position) {
    this.color = color;
    this.position = position;
  }
}

// AFTER (TypeScript)
class Piece implements IPiece {
  constructor(
    public readonly color: Color,
    public position: Position
  ) {}

  getValidMoves(board: IBoard): Position[] {
    // Type-safe implementation
  }
}

2. Use Quality Gates on Every File

# Before committing each migrated file:
npm run typecheck  # Must pass with 0 errors
npm test          # All 124 tests must pass
npm run lint      # 0 errors

3. Handle Common Challenges

DOM Typing:

// Add type guards for DOM elements
const element = document.getElementById('board');
if (!element) {
  console.error('Board element not found');
  return;
}
// Now TypeScript knows element is not null

Event System:

// Use generic event bus (template in docs/typescript-architecture.md)
type EventHandler<T extends GameEvent> = (payload: GameEventPayloads[T]) => void;

Null Safety:

// Use optional chaining and nullish coalescing
const piece = board.getPiece(row, col);
piece?.getValidMoves(board) ?? [];

4. Reference Documentation

For each phase, reference:

  • Type patterns: docs/typescript-code-examples.md
  • Architecture: docs/typescript-architecture.md
  • Testing: docs/typescript-testing-quick-ref.md
  • Troubleshooting: docs/typescript-migration-quickref.md (Common Errors section)

🎯 Success Criteria (When to Close This Issue)

The migration is complete when:

  1. ✅ All files migrated: 0 .js files remain in src/
  2. ✅ Zero TypeScript errors: npm run typecheck passes
  3. ✅ All tests passing: 124/124 tests green
  4. ✅ Type coverage ≥95%: Run type coverage tool
  5. ✅ Code coverage ≥80%: npm run test:coverage
  6. ✅ ESLint clean: npm run lint with 0 errors
  7. ✅ Game functional: Manual testing - all features work
  8. ✅ Documentation updated: README reflects TypeScript
  9. ✅ Build successful: npm run build creates production bundle
  10. ✅ Deployed: Production deployment successful

📊 Progress Tracking Template

Week 1: ⬜ Setup + Phase 1 (Core Types)
Week 2: ⬜ Phase 2 (Game Models)
Week 3: ⬜ Phase 3 (Piece Classes)
Week 4: ⬜ Phase 4 (Game Engine)
Week 5: ⬜ Phase 5 (Controllers/Views)
Week 6: ⬜ Phase 6 (Integration + Polish)

Update this comment with ✅ as you complete each week.

🚨 If You Get Stuck

Common Issues & Solutions:

  1. Jest + TypeScript errors - See: docs/typescript-testing-strategy.md section 2.2
  2. Type errors in event system - See: docs/typescript-architecture.md lines 300-350
  3. DOM type errors - See: docs/typescript-code-examples.md section 8
  4. Build/bundle issues - Vite has native TypeScript support

Need help? All solutions are documented. Search the 15 TypeScript docs for your specific error.

📚 Complete Documentation Index

Quick Reference:

  • issue-6-analysis.md - Full analysis
  • typescript-migration-summary.md - Overview
  • typescript-migration-quickref.md - One-page cheat sheet

Implementation Guides:

  • typescript-testing-starter-guide.md - Day 1 setup ⭐
  • typescript-code-examples.md - Conversion patterns ⭐
  • typescript-migration-checklist.md - Step-by-step ⭐

Architecture:

  • typescript-architecture.md - Complete design
  • typescript-migration-analysis.md - Codebase analysis

Project Management:

  • typescript-migration-plan.md - Project plan
  • typescript-migration-timeline.md - Timeline
  • typescript-migration-risks.md - Risk management

Testing:

  • typescript-testing-strategy.md - Testing approach
  • typescript-testing-quick-ref.md - Testing cheat sheet

🤖 For Future Hive-Minds

This issue is ready for implementation. All research, architecture, and planning is complete. Follow the steps above to execute the TypeScript migration systematically.

Estimated Timeline: 6 weeks (70 hours total)
Risk Level: Medium (mitigated by incremental approach)
Success Rate: High (comprehensive planning + industry best practices)

Start with: docs/typescript-testing-starter-guide.md and execute phases 1-6 in order.

🔖 Analysis Complete: 2025-11-23 | Hive Mind Collective Intelligence System
📋 Status: Ready for Implementation | Next: Setup & Phase 1

## 🎯 TypeScript Migration - Implementation Roadmap This issue has been **fully analyzed** by the Hive Mind. The migration is **ready to execute** with comprehensive documentation and step-by-step guides. --- ## 📋 Quick Start for Implementation Hive-Mind ### Step 1: Read the Documentation (30 min) **Start here:** 1. `docs/issue-6-analysis.md` - Complete analysis and recommendations 2. `docs/typescript-migration-summary.md` - Executive overview 3. `docs/typescript-testing-starter-guide.md` - Day 1 setup tutorial **Key Decision:** Choose your timeline - 🏃 **4 weeks** - Aggressive (12-15h/week) - Dedicated focus - ⭐ **6 weeks** - Balanced (15-20h/week) - **RECOMMENDED** - 🚶 **8-10 weeks** - Conservative (5-10h/week) - Learning TypeScript ### Step 2: Environment Setup (4-6 hours) Follow `docs/typescript-testing-starter-guide.md` Steps 1-9: ```bash # 1. Install dependencies npm install --save-dev typescript ts-node ts-jest @types/jest @types/node npm install --save-dev @typescript-eslint/parser @typescript-eslint/eslint-plugin # 2. Create tsconfig.json (full config in docs/typescript-architecture.md) # 3. Create jest.config.ts (full config in docs/typescript-testing-starter-guide.md) # 4. Create src/types/ directory structure # 5. Migrate tests/setup.js to TypeScript # 6. Verify setup: npm run typecheck && npm test ``` **Success Criteria:** - ✅ TypeScript compiles without errors - ✅ All 124 tests still passing - ✅ No runtime errors ### Step 3: Phase 1 - Core Types (6-8 hours) **Create type definition files:** ```bash # Create directory structure mkdir -p src/types # Create type files (templates in docs/typescript-architecture.md lines 200-400) touch src/types/core.types.ts # Position, Color, Square touch src/types/piece.types.ts # PieceType, IPiece, IBoard touch src/types/game.types.ts # GameStatus, GameConfig touch src/types/move.types.ts # Move, MoveResult, SpecialMove touch src/types/ui.types.ts # GameEvent, typed event handlers touch src/types/index.ts # Re-export all types ``` **Migrate utility files:** ```bash # Follow conversion pattern in docs/typescript-code-examples.md js/utils/Constants.js → src/utils/Constants.ts js/utils/Helpers.js → src/utils/Helpers.ts ``` **Validation:** ```bash npm run typecheck # 0 errors npm test # 124/124 passing ``` ### Step 4: Phase 2 - Game Models (8-10 hours) ⚠️ CRITICAL **Files to migrate:** ```bash js/game/Board.js → src/game/Board.ts js/game/GameState.js → src/game/GameState.ts ``` **Key Type Annotations Needed:** ```typescript // Board.ts class Board implements IBoard { private grid: (IPiece | null)[][]; getPiece(row: number, col: number): IPiece | null { } movePiece(from: Position, to: Position): MoveResult { } } // GameState.ts class GameState { private moveHistory: Move[] = []; private capturedPieces: { white: IPiece[]; black: IPiece[] }; currentTurn: Color; status: GameStatus; } ``` **See:** `docs/typescript-code-examples.md` sections 1-4 for full patterns **Validation:** - ✅ Board and GameState compile with strict mode - ✅ All tests passing - ✅ No type errors in dependent files ### Step 5: Phase 3-6 - Continue Migration (Weeks 2-6) **Migration Order (bottom-up):** 1. ✅ Phase 0: Setup (complete in Step 2) 2. ✅ Phase 1: Core Types (complete in Step 3) 3. ✅ Phase 2: Game Models (complete in Step 4) 4. 📝 Phase 3: Piece Classes - `js/pieces/*.js → src/pieces/*.ts` 5. 📝 Phase 4: Game Engine - `js/engine/*.js → src/engine/*.ts` 6. 📝 Phase 5: Controllers/Views - `js/controllers/*.js, js/views/*.js → src/` 7. 📝 Phase 6: Integration - `js/main.js → src/main.ts`, migrate tests **Use these checklists:** - `docs/typescript-migration-checklist.md` - Step-by-step per phase - `docs/typescript-testing-quick-ref.md` - Testing workflow - `docs/typescript-migration-quickref.md` - Quick reference --- ## ���� Implementation Tips for Hive-Mind ### 1. Follow the Migration Pattern (from docs) ```typescript // BEFORE (JavaScript) class Piece { constructor(color, position) { this.color = color; this.position = position; } } // AFTER (TypeScript) class Piece implements IPiece { constructor( public readonly color: Color, public position: Position ) {} getValidMoves(board: IBoard): Position[] { // Type-safe implementation } } ``` ### 2. Use Quality Gates on Every File ```bash # Before committing each migrated file: npm run typecheck # Must pass with 0 errors npm test # All 124 tests must pass npm run lint # 0 errors ``` ### 3. Handle Common Challenges **DOM Typing:** ```typescript // Add type guards for DOM elements const element = document.getElementById('board'); if (!element) { console.error('Board element not found'); return; } // Now TypeScript knows element is not null ``` **Event System:** ```typescript // Use generic event bus (template in docs/typescript-architecture.md) type EventHandler<T extends GameEvent> = (payload: GameEventPayloads[T]) => void; ``` **Null Safety:** ```typescript // Use optional chaining and nullish coalescing const piece = board.getPiece(row, col); piece?.getValidMoves(board) ?? []; ``` ### 4. Reference Documentation For each phase, reference: - **Type patterns:** `docs/typescript-code-examples.md` - **Architecture:** `docs/typescript-architecture.md` - **Testing:** `docs/typescript-testing-quick-ref.md` - **Troubleshooting:** `docs/typescript-migration-quickref.md` (Common Errors section) --- ## 🎯 Success Criteria (When to Close This Issue) **The migration is complete when:** 1. ✅ **All files migrated:** 0 `.js` files remain in `src/` 2. ✅ **Zero TypeScript errors:** `npm run typecheck` passes 3. ✅ **All tests passing:** 124/124 tests green 4. ✅ **Type coverage ≥95%:** Run type coverage tool 5. ✅ **Code coverage ≥80%:** `npm run test:coverage` 6. ✅ **ESLint clean:** `npm run lint` with 0 errors 7. ✅ **Game functional:** Manual testing - all features work 8. ✅ **Documentation updated:** README reflects TypeScript 9. ✅ **Build successful:** `npm run build` creates production bundle 10. ✅ **Deployed:** Production deployment successful --- ## 📊 Progress Tracking Template **Week 1:** ⬜ Setup + Phase 1 (Core Types) **Week 2:** ⬜ Phase 2 (Game Models) **Week 3:** ⬜ Phase 3 (Piece Classes) **Week 4:** ⬜ Phase 4 (Game Engine) **Week 5:** ⬜ Phase 5 (Controllers/Views) **Week 6:** ⬜ Phase 6 (Integration + Polish) **Update this comment with ✅ as you complete each week.** --- ## 🚨 If You Get Stuck **Common Issues & Solutions:** 1. **Jest + TypeScript errors** - See: `docs/typescript-testing-strategy.md` section 2.2 2. **Type errors in event system** - See: `docs/typescript-architecture.md` lines 300-350 3. **DOM type errors** - See: `docs/typescript-code-examples.md` section 8 4. **Build/bundle issues** - Vite has native TypeScript support **Need help?** All solutions are documented. Search the 15 TypeScript docs for your specific error. --- ## 📚 Complete Documentation Index **Quick Reference:** - `issue-6-analysis.md` - Full analysis - `typescript-migration-summary.md` - Overview - `typescript-migration-quickref.md` - One-page cheat sheet **Implementation Guides:** - `typescript-testing-starter-guide.md` - Day 1 setup ⭐ - `typescript-code-examples.md` - Conversion patterns ⭐ - `typescript-migration-checklist.md` - Step-by-step ⭐ **Architecture:** - `typescript-architecture.md` - Complete design - `typescript-migration-analysis.md` - Codebase analysis **Project Management:** - `typescript-migration-plan.md` - Project plan - `typescript-migration-timeline.md` - Timeline - `typescript-migration-risks.md` - Risk management **Testing:** - `typescript-testing-strategy.md` - Testing approach - `typescript-testing-quick-ref.md` - Testing cheat sheet --- ## 🤖 For Future Hive-Minds **This issue is ready for implementation.** All research, architecture, and planning is complete. Follow the steps above to execute the TypeScript migration systematically. **Estimated Timeline:** 6 weeks (70 hours total) **Risk Level:** Medium (mitigated by incremental approach) **Success Rate:** High (comprehensive planning + industry best practices) **Start with:** `docs/typescript-testing-starter-guide.md` and execute phases 1-6 in order. --- **🔖 Analysis Complete:** 2025-11-23 | Hive Mind Collective Intelligence System **📋 Status:** Ready for Implementation | Next: Setup & Phase 1
Weyoun added the
enhancement
 label 2025-11-23 16:21:02 +00:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
analyzed
Analyzed by Hive Mind
bug
This label describes a bug
enhancement
Improvements to code quality, performance, or maintainability
feature
This label is used for a feature request
No Label
analyzed
enhancement
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
Alex-M Weyoun
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: Weyoun/chess#6
No description provided.
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?