epictetusz1/chess-opening-book

A project designed to help people with a visual disability get meaningful insights from their chess games.

👋 Greetings, I’m Jack - aka EpictetusZ1

---

🔭 I'm a Full Stack Developer, who's just trying his best to center all the divs

• 🏠 I'm currently a Full Stack - React, Laravel (PHP), and MySQL - developer at a property technology startup

• 🌱 I’m currently learning Render Pipelines and complex HTMLCanvas user interactions

• 👀 I'm interested in learning: Mobile Accelerated Pages, Redis, and Rust

• 👟 Fun fact: I love running, reading and playing chess! I sometimes bind notebooks for fun too

• 🇯🇵 Outside of the programming world I am studying Japanese - わくわく !

• A personal project I have been working on: Life Story Maps

Find me on the world wide web:

Be Sociable:

Try Hack Me - A cyber security learning platform:

---

Languages and Tools

Applications & Data:

DevOps:

Business Tools:

GitHub Stats

chess-opening-book's Issues

Add basic chess board and pieces

Init the GameBoard Component and pieces

Add basic styles and pieces

It doesn't need to be able to make moves, that will come later, I just want to start developing it to see how it will "fit" and look on the page.

Add Game view

Game Page View

Why

There is a lot of extra data I computed - like the opening data - that is not included in the app UI as it currently stands. Before I finish development of the project I want to show all the data I collected, for the most in-depth insights possible

Fix RegEx to pickup pawn promotions in Moves

The RegEx is ~70%, I just need to test all fringe cases, on top of fixing the move parser not picking up pawn promotions and a few other things.

The pgn parser currently has issues with:

• Pawn promotions
• Checkmate
• Result ( 1-0, 1/2-1/2, 0-1, 0-0)
• Handle no space between move number and first ply " 1.e4 e5" does not parse

Init core design and focus of site for the visually impaired

Visually Impaired first approach

My thinking

It may be true that the percentage of people who are blind/ partially blind/ or otherwise visually impaired is probably quite low. However, even if that is true, if I can help even a handful of people who have such a condition improve at their chess that is more than enough of a reward to motivate this projects development.

I wanted to create a project that would help me learn about something I wanted to be better at: Web Accessibility.
And what better way to do that then by combining it with something I love (chess), while at the same time getting to help someone out (hopefully).

The goal:

To create a site that allows people who may suffer from a visual impairment to be able to get meaningful insights from their chess games.

Add liChess API

Complete base API Route and controller for User

Add the Next API Routes and create the controllers for UserProfile

• GET user by ID
• Create user
• Add game to users games (Held back by Issue #7)

Add ability to programatically guess users site specific username

Say a user uploads a hundred games and more than X percent contain the same user name, ask that user if that is their username for the given site. If yes, proceed as normal, if no, get them to enter their username.

Build basic statistics handler

Just get some simple data from the games for now

Convert api calls into getServerSideProps

I ran into some issues with type checking and getServerSideProps for the dasboard.tsx api calls. Fix these, and put the api calls back into getServerSide.

Complete opening explorer

Need to figure out the best way to manage state for the opening explorer, while keeping in mind the best way to navigate the table for a11y concerns.

Persist a11y preferences

Persist a11y preferences in mongodb.

Should auto update their preferences on "save" click in a11y side modal.

It should be embedded in the userProfile document and not related to their auth method or userAccount

Add Opening Book

Create a simple opening book for some openings (Maybe 50 -100?), and integrate it into a users profile with what colour they were playing as to tell them their favourite and most successful openings.

Example:

Say you played the King's Indian most often with black, we would show the 4 most popular openings you played and your win rate. This strongly integrates with the move matrix.

Secure all protected pages

Need to make sure that Dashboard, and other (future) pages are secured and that they re-direct the user appropriately.

Build dashboard

Build out the user dashboard that will contain the chess data gathered from their games.

Need to add the page structure, handler and functions to generate the data.

Core fix in this branch:

Need to convert all API calls into getServerSideProps, and make TypeScript happy.

Should include:

• W/L/D
• Total game count
• Best win
• Peak Rating

Integrate matrix with app

This also includes adding the opening book api's.

But the main focus is to integrate the moveMatrix with the player stats

Create 'Game' controller and integrate with user

Need to be able to add each game uploaded by a user into its own collection in MongoDB, plus its associations.

Build core myReport page

My Report

After evaluating the implementation of a chess engine for the site (UCI, Stockfish WASM, or API based ones). I have determined it might not be feasible to implement that feature.

Core Focus

I believe a good core focus now is providing a "My Report" page, that has as much meaningful information on it as possible.

Perhaps I will include the ability of downloading the report page as a pdf, although this requires further looking into, as it's not clear how good some of the available JavaScript or HTML to PDF services are.

Information to be provided:

• Top Opening Move
• Top Winning Opening
• Move (Either number or general stage of the game) most commonly lost on
• Top reason (reason which occurs most often) for Win, Loss and Draw terminations
• Games played (Total and per site)
• Peak Rating (Total and per site)
• Average game lengths:
  • Average length on win
  • Average length on loss
  • Average length on draw
• Most frequented opponent if any

Build myReport page

My Report

Last issue got messed up by accident,

After evaluating the implementation of a chess engine for the site (UCI, Stockfish WASM, or API based ones). I have determined it might not be feasible to implement that feature.

Core Focus

I believe a good core focus now is providing a "My Report" page, that has as much meaningful information on it as possible.

Perhaps I will include the ability of downloading the report page as a pdf, although this requires further looking into, as it's not clear how good some of the available JavaScript or HTML to PDF services are.

Information to be provided:

• Top Opening Move
• Top Winning Opening
• Move (Either number or general stage of the game) most commonly lost on
• Top reason (reason which occurs most often) for Win, Loss and Draw terminations
• Games played (Total and per site)
• Peak Rating (Total and per site)
• Average game lengths:
  • Average length on win
  • Average length on loss
  • Average length on draw
• Most frequented opponent if any

Bugs To Be Fixed:

• Opening Data not integrating with Game model properly
• Game Id's not going into "userProfile" game array

Clean up code and update readme

The scope of this project has changed

Due to being unable to incorporate a chess engine, I have decided to 'complete' this project at its currently level of functionality.

The effort required to add a chess engine (external server, complex api's, cost associated with compute time, etc...) I will be polishing what is currently here and ending development.

The README will be updated with most of the relevant data, and then deployed

TODO:

• Run through comprehensive screen reader eval of the site to ensure all a11y aspects work as intended
• Remove hardcoded user names from api calls
• Double check all aria-labels
• Add documentation to README (esp. about difficult apis *cough* LiChess *cough*)
• Add use instructions, about how the app works etc

Create global a11y context with fixed button

Users should be able to adjust the font-size, colours, etc, all from a easy to user menu that stays fixed in the navbar

Functionality

• Support for 3 types of colour blindness
• Support to add dyslexic font
• Support to scale font size (all headers, paragraph, etc) to 3 different settings.
• Support for light and dark themes

Add chessCom API

Allow users to get their chessDOTcom data and games

Fix FCP load for dashboard

First Contentfull Paint is slow

Need to change the placement of the games api call to UseEffect, and set a loader.

Minor change:

Put GET userName call into getServerSideProps

Add interactive moves table

In the opening explorer, users need to be able to SELECT (not click just click) a specific move to pop() it off the moveList array and update their view.

Add byMoves integration with all relevant data points

byMoves

Needs to be added to :

• Move Matrix
• Opening handler
• Possibly user at a future date to allow custom queries from users

For Move Matrix

I can separate the concerns of the "byMoves" opening finder and just pass it an array of moves made from the Move Matrix instead.

Refactor matrix

Some issues

• Using the move as a sub property name creates a plethora of issues, and make it hard to deal with in the front end.
• I will be fixing this as well as considering a complete refactor to the revealing module pattern to expose helper methods on the matrix class.

Init User signup and login capability

Create the UI and API calls to allow a new user to signup and login, build empty /home page