Chessdom

Chessdom is an open-source web-based chess application.

View Demo · Report Bug · Request Feature

Table of Contents

1. About The Project
2. Prerequisites
3. Built with
4. Installation
5. Project structure
6. Note
7. License

About The Project

Chessdom is an web-based chess application, whose name comes from combining Chess and Wisdom. Implemented two modes of gameplay in it, computer based gameplay where stockfish acts as your opponent and another is live gameplay where you can play chess with other fellow humans. Also build a game-archive with the name of hall of games, where each game which came to an valid end (resignation, check-mate or draw) in the live gameplay is stored.

Built With

Prerequisites

To run the project in your local machine, you must have

• Node.js : Volta recommended

Installation

Once you finish installation Node.js, follow the commands to setup the project locally on your machine

1. clone the project

   git clone https://git.1-hub.cnSandstorm831/chessdom.git

2. enter the project

   cd chessdom

3. Install NPM packages

   npm install

4. Create .env file at the root of the folder.

   touch .env

5. set up NextAuth Secret by running this command

   npx auth secret

6. Set the value of following OAuth variables in .env.local file created by the previous command

   AUTH_TRUST_HOST=true
   AUTH_GITHUB_ID=
   AUTH_GITHUB_SECRET=
   
   AUTH_GOOGLE_ID=
   AUTH_GOOGLE_SECRET=
   

   You can get the value of these variables from OAuth console of GitHub and Google, read more
   

7. Setup the DATABASE_URL in .env file

   DATABASE_URL=

   You can get a hosted SQL database from Aiven
   

8. Establish link between schema.prisma and .env

   npx prisma generate

9. Run the development server:

   npm run dev

This completes the set-up for this project, all the functionalities present in the application will now be live in your dev server except for live game-play for which you have to setup the chess-socket server

Project Structure

chessdom
┣ .next
┣ prisma                   // Contains DB Schema
┣ app
┃ ┣ (auth)
┃ ┃ ┣ auth
┃ ┃ ┃ ┗ signin
┃ ┃ ┃ ┃ ┗ page.tsx         // Custom SignIn page
┃ ┃ ┗ layout.tsx
┃ ┣ aboutme
┃ ┃ ┗ page.tsx             // AboutMe page
┃ ┣ api
┃ ┃ ┗ auth
┃ ┣ attribution
┃ ┃ ┗ page.tsx             // Attributions page
┃ ┣ dashboard
┃ ┃ ┣ chessboard
┃ ┃ ┃ ┗ page.tsx           // Complete stockfish gameplay code
┃ ┃ ┣ hallofgames
┃ ┃ ┃ ┣ dbqueries.ts
┃ ┃ ┃ ┗ page.tsx           // page for hall of games
┃ ┃ ┣ opponent
┃ ┃ ┃ ┗ page.tsx           // Complete live gameplay code
┃ ┃ ┣ reviewgame
┃ ┃ ┃ ┗ page.tsx           // Review game page
┃ ┃ ┗ page.tsx             // Dashboard page
┃ ┣ ui
┃ ┣ engineAndPGN.ts
┃ ┣ favicon.ico
┃ ┣ globals.css
┃ ┣ layout.tsx
┃ ┣ page.tsx               // root page
┃ ┣ socket.ts              // web-socket connection
┃ ┣ startEngine.ts         // Function for loading engine
┃ ┗ storeProvider.tsx      // Redux store provider
┃
┣ components
┃ ┣ ui                     // shadcn ui components
┃ ┣ auth_HOC.tsx           // route protecting HOC
┃ ┗ auth_components.tsx
┃
┣ hooks
┃ ┗ use-toast.ts           // shadcn toast component
┃
┣ lib
┃ ┣ features
┃ ┃ ┗ engine               // Redux slice folder
┃ ┣ hooks.ts               // Redux hooks
┃ ┣ store.ts               // Redux store generator
┃ ┗ utils.ts
┃
┣ public
┃ ┣ chesspeices            // chesspieces of gameplay
┃ ┣ images
┃ ┣ lib                    // Stockfish engine and
┃ ┃ ┃                      // engine loading scripts
┃ ┃ ┣ loadEngine.js
┃ ┃ ┣ stockfish.js
┃ ┃ ┣ stockfish.wasm
┃ ┃ ┗ stockfish.worker.js
┃ ┃
┃ ┣ sounds                 // Various sounds for gameplay
┃ ┣ chess.png
┃ ┣ chessdom_knight.png
┃ ┣ file.svg
┃ ┣ globe.svg
┃ ┣ knight.png
┃ ┣ knight_mirror.png
┃ ┣ knight_mirror_.png
┃ ┣ next.svg
┃ ┣ vercel.svg
┃ ┣ white_back_knight.png
┃ ┗ window.svg
┃
┣ stockfish                // Dormant stockfish folder
┃ ┣ stockfish              // Complete Stockfish 17 code folder
┃ ┃ ┣ src
┃ ┃ ┣ wiki
┃ ┃ ┣ AUTHORS
┃ ┃ ┣ CITATION.cff
┃ ┃ ┣ CONTRIBUTING.md
┃ ┃ ┣ Copying.txt
┃ ┃ ┣ README.md
┃ ┃ ┣ Top CPU Contributors.txt
┃ ┃ ┗ stockfish-ubuntu-x86-64-avx2
┃ ┃
┃ ┣ running.pid            // file containing running engine pid
┃ ┗ stockfish.ts           // Script to run stockfish on server
┃
┣ README.md
┣ auth.ts
┣ components.json
┣ eslint.config.mjs
┣ middleware.ts            // middleware for server side route
┃                          // protection
┣ next-env.d.ts
┣ next.config.ts           // File enforcing COEP and COOP
┣ package-lock.json
┣ package.json
┣ pnpm-lock.yaml
┣ postcss.config.mjs
┣ styles.txt               // contain font and color-palette
┣ tailwind.config.ts
┣ tsconfig.json
┣ LICENSE
┗ tsconfig.tsbuildinfo

Note

• Header allowances in Next Config

  The engine will run in browsers with proper CORS headers applied. The following HTTP headers are required on top level response

  Cross-Origin-Embedder-Policy: require-corp
  Cross-Origin-Opener-Policy: same-origin
  

  and following on included files

  Cross-Origin-Embedder-Policy: require-corp
  

  If top level headers are not configured properly, the wasmThreadsSupported() function as defined below will return false. If headers on included files are not configured correctly, something like pthread sent an error! undefined:undefined: undefined maybe logged to the console. You can read more about these headers here

• Stockfish Folder and C++ code anomaly

  Stockfish folder present in the root, is a dormant folder and doesn't help in any of the functionalities up untill current project scenario and removing the whole folder at once also will not have any impact in proper functioning of the project. It's kept because it can be moulded into added functionalities in future. The folder structure is as follows

  stockfish                // Dormant stockfish folder
  ┣ stockfish              // Complete Stockfish 17 code folder
  ┃ ┣ src
  ┃ ┣ wiki
  ┃ ┣ AUTHORS
  ┃ ┣ CITATION.cff
  ┃ ┣ CONTRIBUTING.md
  ┃ ┣ Copying.txt
  ┃ ┣ README.md
  ┃ ┣ Top CPU Contributors.txt
  ┃ ┗ stockfish-ubuntu-x86-64-avx2
  ┃
  ┣ running.pid            // file containing running engine pid
  ┗ stockfish.ts           // Script to run stockfish on server
  

  The subfolder named stockfish contains the complete source code to run Stockfish 17 on a linux server. The stockfish.ts file contain the code to run the Stockfish 17 on server, execute stockfish commands, process best moves and information back to the client. The running.pid file will hold the PIDs of all the spawned Stockfish processes. This was initial approach to integrate stockfish with the client, but it faced the problem of scaling and delay, so this approach was abandoned for a client side Web-Assembly (.wasm) stockfish engine originally taken from here. It can be the case in future that we might give an option for server side analysis, and so the reason for keeping the original files.

  The high C++ precentage present in the languages section is due to this folder only, I have not written any C/C++ code in making of this project. This is primarily a typescript project

• Detached Socket-IO server

  The play with a friend option, will not work if the socket-io server is not setup. You can find the socket-io server here, going through the readme will be enought to setup the server.

License

Distributed under the GPL-3.0 license. See LICENSE for more information.