World Xiangqi League: Chinese Chess Web Interface

World Xiangqi League: Chinese Chess Web Interface

Developed an interactive web interface for World Xiangqi League, implementing complex game rules, real-time synchronization, and robust handling of game state and history.

View
Mobile Preview
Back to Projects
Key Responsibilities
Developed core game interface, implemented game rules/logic, handled real-time synchronization, managed internet disconnectivity.
Key Implementations
Game rules engine, move notations, game timers, move history traversal, observer logic, React-DND for piece movements.
Customer Impact
Provided a seamless and engaging online platform for playing and observing Chinese Chess.

Project Overview

The Problem

Lack of a robust, interactive web platform for playing and observing World Xiangqi League games with real-time features.

The Solution

Built a comprehensive web interface with intricate game logic, real-time synchronization, and efficient handling of network disruptions.

Vision & Impact

Helped bring one of the oldest board games to a global online audience, providing a high-quality digital experience.

Detailed Overview

As Lead JavaScript Architect and Developer, I developed the complete web interface for World Xiangqi League (Chinese Chess), one of the world's oldest board games. I meticulously implemented complex game rules, move notations, and synchronized game timers. The interface also featured robust handling of game start/end validity, the ability to traverse move history, and logic for observers. A key achievement was efficiently handling internet disconnectivity to ensure a seamless user experience during live games. I leveraged styled-components for slicing designs and applied Redux-Saga for API calls, socket requests, and complex state management, significantly strengthening my frontend and testing skills. The project also included cross-browser support.

Technical Details

Technologies Used
ReactJS
Redux-Saga
Reselect
Styled-Components
Immutable.js
Socket.io-client
React-DND
Howler.js
Project Information

Duration

Feb 2018 - Sept 2018 (8 months)

Team Size

N/A

My Role

Lead Javascript Architect and Developer

Key Achievements

  • Developed the entire Xiangqi web interface in React JS, including complex game rules and move notations.

  • Implemented synchronized game timers, game start/end validity, and ability to traverse move history.

  • Built robust game logic for observers and handled internet disconnectivity efficiently.

  • Strengthened HTML/CSS skills by slicing designs using styled-components.

  • Learned and applied Redux-Saga for API calls, socket requests, and simplified testing.

  • Utilized React-DND (React drag and drop) library for intuitive pieces movements.

  • Provided comprehensive cross-browser support.

Challenges & Learnings

  • Implementing complex game rules and real-time synchronization logic for a two-player board game.

  • Efficiently handling internet disconnectivity to maintain game state.

  • Mastering advanced state management patterns with Redux-Saga for complex interactions.

Explore This Project

Visit Live Project

Ready to Collaborate?

If you have a project in mind or just want to connect, feel free to reach out.