Mastermind

I addressed these challenges through careful algorithm design and thoughtful UX implementation:

• Two-Pass Scoring Algorithm: Implemented a two-pass algorithm for scoring. First pass counts exact matches and marks them, second pass counts color-only matches from unmarked pegs. This ensures accurate scoring even with duplicate colors.
• Event-Driven State Management: Used an event-driven approach where state changes trigger UI updates. Created a centralized game state object with methods that update both state and UI, ensuring consistency.
• Dual Feedback System: For color blind mode, implemented both color and symbol-based feedback. Players can see both the color and a unique symbol for each color, making the game fully playable without color vision.
• Configuration Object Pattern: Used a configuration object pattern for game settings. All customizable options are stored in a single object that's validated and applied consistently throughout the game.
• CSS Animations & Transitions: Used CSS transitions and keyframe animations for smooth UI interactions. JavaScript only triggers class changes, letting CSS handle the animations for better performance.
• Canvas-Based PNG Generation: Implemented a share feature that generates downloadable PNG images of game results using the Canvas API. The system calculates board dimensions dynamically, renders colors and feedback dots accurately, and includes color blind symbols when enabled.
• Progressive Tutorial: Built a step-by-step tutorial that highlights specific UI elements and explains concepts incrementally. Players can skip or replay sections, and the tutorial state is saved.

// Get feedback for each color position
function getFeedback(guess, password) {
    const feedback = new Array(passwordLength).fill('not-found');
    const passwordCopy = [...password];
    const guessCopy = [...guess];
    
    // First pass: mark correct positions
    for (let i = 0; i < passwordLength; i++) {
        if (guessCopy[i] === passwordCopy[i]) {
            feedback[i] = 'correct';
            passwordCopy[i] = null; // Mark as used
            guessCopy[i] = null; // Mark as used
        }
    }
    
    // Second pass: mark wrong positions
    for (let i = 0; i < passwordLength; i++) {
        if (guessCopy[i] !== null && feedback[i] !== 'correct') {
            const index = passwordCopy.indexOf(guessCopy[i]);
            if (index !== -1) {
                feedback[i] = 'wrong-position';
                passwordCopy[index] = null; // Mark as used
            }
        }
    }
    
    return feedback;
}