The Challenge

Originally intended as a technical assessment submission, I decided to have some fun with this implementation of Simon by pushing creative boundaries through a Star Wars theme and bonus features.

Core Functionality

All required features were successfully implemented:

• Complete game interface with heading, body text, and four themed buttons
• Start/Stop button toggle functionality
• Interactive buttons with visual and audio feedback
• Computer-controlled sequence playback with sound and visual cues
• Progressive gameplay with pattern expansion
• Win condition after completing a full pattern
• Lose condition on incorrect guesses

Technical Highlights

Vanilla JavaScript Implementation

Working with vanilla JavaScript instead of React presented interesting challenges. The project emphasized understanding fundamental DOM manipulation techniques, particularly when implementing the "Sith mode" difficulty feature.

Solving the Sith Mode Challenge

The most significant technical challenge was implementing the button randomization feature using clean, maintainable code. After initially attempting a complex button mapping system that became messy and bug-prone, I discovered a cleaner solution using native DOM methods: converting button elements to an array with Array.from(), randomizing with sort() and Math.random(), and repositioning with appendChild(). This approach achieved the functionality with significantly cleaner code and taught me valuable lessons about working directly with the DOM.

Design & Aesthetics

• Custom Star Wars styling using the SF Distant Galaxy font family
• Imperial March theme integration for sound patterns
• CSS clip-path techniques for unique button shapes
• Engaging visual feedback for player interactions

Bonus Features

Beyond the core requirements, I implemented:

• Progress bar to visualize game advancement
• Sith mode difficulty with randomized button positions
• Modal notifications with famous Star Wars quotes

Reflection

This project reinforced the importance of understanding fundamental web technologies. While frameworks like React are powerful, knowing how to work directly with the DOM opens up new possibilities and problem-solving approaches. The experience of stepping back to reconsider the problem from first principles led to a much cleaner solution than my initial approach.

If given more time, I would enhance the project with modern frontend features (Next.js, TypeScript, Framer Motion animations), gameplay improvements (practice mode, difficulty settings, custom patterns), and backend integration (user authentication, leaderboards, analytics) to create a more social and engaging experience.