Project Overview:

1. The project involved creating a SaaS (Software as a Service) board game called "Dama."
2. The game was developed using React as the primary framework for building the user interface and managing component interactions.
3. Vanilla JavaScript was utilized alongside React to implement additional functionality and customize game mechanics.
4. Sass was employed as a CSS preprocessor to enhance the styling of the game's user interface, including the implementation of animations to bring the game to life with visually engaging effects.
5. Implemented responsive design to ensure the game works well on various devices (tablets and phones).
6. Deployed the project on Netlify.

Development Process:

• I used an agile approach in the Dama project, which means I worked in short cycles, focused on important tasks, constantly improved, and adapted to changes.
• Initial planning: driven by my passion for 'dama' board game. I often faced challenges finding suitable playing locations or carrying the physical board everywhere. This prompted me to explore existing online options, but I couldn't find a platform that served the Algerian rules of Dama. Motivated by my passion for coding and desire to pursue a professional career in web development, I created an online SaaS Dama game to overcome the challenges of finding suitable playing locations and the inconvenience of carrying physical boards. The objective was to make the game easily accessible, offering a convenient and enjoyable alternative for individuals encountering similar issues.
• Data structures used :
  1. In JavaScript: Arrays, Trees
  2. In React: Component, State, Props, Ref
  3. The hookes used in React: usestate, useEffect, useRef

Functionalities Developed Within the Game:

1. Movement:
• Pieces move diagonally forward (towards the opponent's side) to an adjacent empty square.
• Regular pieces (not kings) can only move forward.
• Diagonal moves can be made to the left or right.
2. Capturing:
• If a player's pawn is adjacent to an opponent's pawn and there is an empty square beyond it, the player can jump over the opponent's pawn and capture it.
• Multiple captures can be made in a single turn if they are in the diagonal line.
• capturing is mandatory, and the player must continue capturing until no more captures are possible
3. Promotion to Kings:
• When a regular pawn reaches the last row on the opponent's side of the board, it is promoted to a "king" pawn .
• King pawns have the ability to move both forward and backward.
4. Kings Pawns Capturing:
• The king in Dama can capture both forward and backward and has the ability to make multiple captures in a single turn, as long as there are additional opponent's pieces available for capture in the chosen direction.
• It is always required to capture the maximum number of opponent's pawns available.
5. Winning:
• The game ends when one player captures all of their opponent's pieces, or when the opponent has no legal moves left. The player with remaining pieces or no legal moves loses the game

Challenges faced:

1. Game Logic: Designing the core game mechanics, such as pawn movement, capturing, and promoting pawns to kings, king capturing, Mandatory capturing and continuous capturing, required careful planning and implementation.
2. Board Representation: Creating an efficient data structure to represent the game board, manage the positions of pieces, and handle moves was crucial for smooth gameplay.
3. Turn Management: Ensuring proper turn management for each player, detecting valid moves, and handling turn switches were essential for a playable game.
4. Rules Enforcement: Enforcing the specific rules of Dama, such as mandatory captures and king movement, demanded meticulous rule-checking logic.

1. Modular Design: Breaking down the game logic into smaller, manageable functions and modules improved code organization and maintainability.
2. Testing and Debugging: Rigorous testing and debugging helped identify and resolve issues in the game's behavior and logic.
3. Optimization: Profiling and optimizing critical parts of the code improved the game's performance and responsiveness.
4. Algorithm Refinement: Iteratively improving the AI algorithm and experimenting with different strategies helped create a challenging opponent for single-player mode.
5. Documentation and Research:Documenting the challenges and solutions and conducting research on Dama's rules and strategies aided in better understanding the game and making informed decisions.

Deployment and Hosting:

Conclusion:

1. Enhanced Development Skills: The project provided valuable experience in working with React, Vanilla JavaScript, and Sass, improving coding proficiency.
2. Problem-Solving: Overcoming challenges in game logic and rules enforcement honed problem-solving abilities.
3. Deployment Experience: Deploying the game on Netlify expanded knowledge of continuous deployment and hosting.
4. Passion for Gaming: Combining a passion for the Dama board game with web development fostered a rewarding and enjoyable project.
5. Potential for Growth: Future expansion plans, including a mobile app version and Facebook game, offer opportunities for further development and reaching a wider audience.

Check out the video demo: