merge: main

Author: Lxdovic

README.md

@@ -1,5 +1,28 @@
-# Castled Front
-
-- [translations](src/i18n/translations.md)
-
-// TODO: Complete readme
+# Castled Frontend
+## Overview
+This project is a frontend application built using TypeScript and React. It interacts with various APIs to provide a seamless user experience. The project uses modern web development tools and practices, including Tailwind CSS for styling and Axios for HTTP requests.
+### Technologies Used
+- TypeScript: A strongly typed programming language that builds on JavaScript.
+- React: A JavaScript library for building user interfaces.
+- Axios: A promise-based HTTP client for making requests.
+- Tailwind CSS: A utility-first CSS framework for rapid UI development.
+- Autoprefixer: A PostCSS plugin to parse CSS and add vendor prefixes.
+### Project Structure
+- `src/api`: Contains API interaction logic.
+- `src/pages`: Contains React components for different pages.
+- `src/store`: Contains state management logic.
+- `postcss.config.js`: Configuration for PostCSS plugins.
+### Setup
+- Clone the repository
+- Navigate to the project directory:  
+```bash
+cd Front
+```
+- Install dependencies: 
+```bash
+npm install
+```
+- Start the development server:  
+```bash
+npm start
+```

eslint.config.js

@@ -13,6 +13,8 @@ export default [
       '@typescript-eslint/no-redundant-type-constituents': 'off',
       '@typescript-eslint/no-unsafe-assignment': 'off',
       '@typescript-eslint/no-unsafe-member-access': 'off',
+      '@typescript-eslint/prefer-promise-reject-errors': 'off',
+      '@typescript-eslint/no-unsafe-return': 'off',
     },
     languageOptions: {
       globals: { ...globals.browser, React: 'writable' },

src/api/analysis.ts

@@ -2,12 +2,22 @@
 import { Analysis } from '@/types/analysis.ts';
 import { useAuthStore } from '@/store/auth.ts';
 
+/**
+ * Creates a new analysis by sending a POST request to the API.
+ * @param {Analysis} analysis - The analysis data to be created.
+ * @returns {Promise<any>} A promise that resolves to the response of the API call.
+ */
 export const createAnalysis = async (analysis: Analysis) => {
   const token = useAuthStore.getState().accessToken;
 
   return await apiAuthenticated.post(`/api/v1/analysis`, analysis, { headers: { Authorization: `Bearer ${token}` } });
 };
 
+/**
+ * Retrieves an analysis by its ID by sending a GET request to the API.
+ * @param {string} id - The ID of the analysis to retrieve.
+ * @returns {Promise<any>} A promise that resolves to the response of the API call.
+ */
 export const getAnalysisById = async (id: string) => {
   const token = useAuthStore.getState().accessToken;
 

src/api/auth.ts

@@ -3,6 +3,11 @@ import { RegisterSchema, LoginResponseSchema, LoginSchema } from '@/schema/auth.
 import { z } from 'zod';
 import { useAuthStore } from '@/store/auth.ts';
 
+/**
+ * Logs in a user by sending a POST request to the API.
+ * @param {z.infer<typeof LoginSchema>} data - The login data to be sent to the API.
+ * @returns {Promise<void>} A promise that resolves when the login process is complete.
+ */
 export const login = async (data: z.infer<typeof LoginSchema>) => {
   const loginCall = await api.post('/api/v1/auth/login', data);
 
@@ -13,6 +18,11 @@ export const login = async (data: z.infer<typeof LoginSchema>) => {
   useAuthStore.getState().setUser(user);
 };
 
+/**
+ * Registers a new user by sending a POST request to the API.
+ * @param {z.infer<typeof RegisterSchema>} data - The registration data to be sent to the API.
+ * @returns {Promise<void>} A promise that resolves when the registration process is complete.
+ */
 export const register = async (data: z.infer<typeof RegisterSchema>) => {
   const registerCall = await api.post('/api/v1/auth/register', data);
 
@@ -27,6 +37,10 @@ export const register = async (data: z.infer<typeof RegisterSchema>) => {
   useAuthStore.getState().setUser(user);
 };
 
+/**
+ * Refreshes the authentication tokens by sending a POST request to the API.
+ * @returns {Promise<any>} A promise that resolves to the response of the API call.
+ */
 export const refreshTokens = async () => {
   const refreshToken = useAuthStore.getState().refreshToken;
 

src/api/chesscom.ts

@@ -2,11 +2,20 @@
 import { DateRange } from 'react-day-picker';
 import { ChessComGame } from '@/pages/start-analysis/chesscom-select.tsx';
 
-export const getUserGames = async (username: string, dateRange: DateRange | undefined) => {
+/**
+ * Fetches the user's games from Chess.com within a specified date range.
+ *
+ * @param {string} username - The Chess.com username.
+ * @param {DateRange | undefined} dateRange - The date range for fetching games.
+ * @returns {Promise<ChessComGame[]>} - A promise that resolves to an array of ChessComGame objects.
+ */
+export const getUserGames = async (username: string, dateRange: DateRange | undefined): Promise<ChessComGame[]> => {
+  // Return an empty array if the date range is not defined or invalid
   if (!dateRange || !dateRange?.from || !dateRange?.to) {
     return [];
   }
 
+  // Adjust the end date to the current date if it matches today's date
   if (dateRange.to.toDateString() === new Date().toDateString()) {
     dateRange.to = new Date();
   }
@@ -17,6 +26,7 @@ export const getUserGames = async (username: string, dateRange: DateRange | unde
   const startMonth = dateRange.from.getMonth();
   const endMonth = dateRange.to.getMonth();
 
+  // Loop through each year and month within the date range
   for (let year = startYear; year <= endYear; year++) {
     const monthStart = year === startYear ? startMonth : 0;
     const monthEnd = year === endYear ? endMonth : 11;
@@ -29,6 +39,7 @@ export const getUserGames = async (username: string, dateRange: DateRange | unde
         `https://api.chess.com/pub/player/${username}/games/${year}/${formattedMonth}`,
       );
 
+      // Filter and add games within the specified date range
       fetchedGames.push(
         ...games.filter(
           (g) => g.end_time >= dateRange.from!.getTime() / 1000 && g.end_time <= dateRange.to!.getTime() / 1000,

src/api/history.ts

@@ -1,6 +1,12 @@
 import { apiAuthenticated } from './index';
 import { useAuthStore } from '@/store/auth.ts';
 
+/**
+ * Fetches the analysis history for the authenticated user.
+ *
+ * @returns {Promise<any[]>} - A promise that resolves to an array of analysis history items.
+ * @throws {Promise<string>} - A promise that rejects with an error message if no access token is available.
+ */
 export const getHistory = async () => {
   const accessToken = useAuthStore.getState().accessToken;
 
@@ -17,6 +23,13 @@ export const getHistory = async () => {
   return data.data.items;
 };
 
+/**
+ * Fetches a specific game analysis by its ID.
+ *
+ * @param {string} id - The ID of the game analysis to fetch.
+ * @returns {Promise<any>} - A promise that resolves to the game analysis data.
+ * @throws {Promise<string>} - A promise that rejects with an error message if no access token is available.
+ */
 export const getGame = async (id: string) => {
   const accessToken = useAuthStore.getState().accessToken;
 
@@ -33,6 +46,13 @@ export const getGame = async (id: string) => {
   return data.data;
 };
 
+/**
+ * Deletes a specific game analysis by its ID.
+ *
+ * @param {string} id - The ID of the game analysis to delete.
+ * @returns {Promise<void>} - A promise that resolves when the game analysis is deleted.
+ * @throws {Promise<string>} - A promise that rejects with an error message if no access token is available.
+ */
 export const deleteGame = async (id: string) => {
   const accessToken = useAuthStore.getState().accessToken;
 

src/api/lichessorg.ts

@@ -2,11 +2,27 @@
 import { DateRange } from 'react-day-picker';
 import { LichessOrgGame } from '@/pages/start-analysis/lichessorg-select.tsx';
 
+/**
+ * Fetches autocomplete suggestions for usernames from Lichess.org.
+ *
+ * @param {string} query - The query string to search for usernames.
+ * @returns {Promise<string[]>} - A promise that resolves to an array of suggested usernames.
+ */
 export const autoCompleteUsernames = async (query: string) => {
   const { data }: { data: string[] } = await api.get(`https://lichess.org/api/player/autocomplete?term=${query}`);
 
   return data;
 };
+
+/**
+ * Fetches the user's games from Lichess.org within a specified date range and processes each game.
+ *
+ * @param {string} username - The Lichess.org username.
+ * @param {DateRange | undefined} dateRange - The date range for fetching games.
+ * @param {function} onMessage - Callback function to process each game.
+ * @param {function} onComplete - Callback function to call when the fetching is complete.
+ * @returns {Promise<void>} - A promise that resolves when the fetching is complete.
+ */
 export const getUserGames = (
   username: string,
   dateRange: DateRange | undefined,
@@ -33,8 +49,12 @@ export const getUserGames = (
   stream.then(readStream(onMessage)).then(onComplete);
 };
 
-// https://gist.github.com/ornicar/a097406810939cf7be1df8ea30e94f3e
-/* eslint-disable */
+/**
+ * Reads a stream of newline-delimited JSON (NDJSON) and processes each line.
+ *
+ * @param {function} processLine - Callback function to process each line of the stream.
+ * @returns {function} - A function that takes a response and reads the stream.
+ */
 const readStream = (processLine: any) => (response: any) => {
   const stream = response.body.getReader();
   const matcher = /\r?\n/;
@@ -60,4 +80,3 @@ const readStream = (processLine: any) => (response: any) => {
 
   return loop();
 };
-/* eslint-enable */

src/lib/analysis.ts

@@ -46,6 +46,10 @@ export const Engines: Engine[] = [
   },
 ];
 
+/**
+ * Retrieves the cached engines.
+ * @returns {Promise<Engine[]>} A promise that resolves to an array of cached engines.
+ */
 export const getCachedEngines = async () => {
   const cachedEngines: Engine[] = [];
 
@@ -58,6 +62,11 @@ export const getCachedEngines = async () => {
   return cachedEngines;
 };
 
+/**
+ * Analyzes the moves locally using the Stockfish engine.
+ * @param {AnalyseMovesLocalParams} params - The parameters for analyzing moves.
+ * @returns {Promise<AnalysisMove>[]} An array of promises that resolve to analysis moves.
+ */
 export const analyseMovesLocal = ({
   moves,
   data,
@@ -101,10 +110,22 @@ export const analyseMovesLocal = ({
   );
 };
 
+/**
+ * Classifies the moves based on the analysis results.
+ * @param {AnalysisMove[]} moves - The array of analysis moves.
+ * @returns {AnalysisMove[]} The array of classified analysis moves.
+ */
 export const classifyMoves = (moves: AnalysisMove[]): AnalysisMove[] => {
   return moves.map(classifyRegular);
 };
 
+/**
+ * Classifies a single move based on the analysis results.
+ * @param {AnalysisMove} move - The analysis move to classify.
+ * @param {number} index - The index of the move in the array.
+ * @param {AnalysisMove[]} moves - The array of analysis moves.
+ * @returns {AnalysisMove} The classified analysis move.
+ */
 export const classifyRegular = (move: AnalysisMove, index: number, moves: AnalysisMove[]) => {
   const next = moves[index + 1]?.engineResults.sort((a, b) => b.depth! - a.depth!)?.[0];
   const current = move?.engineResults.sort((a, b) => b.depth! - a.depth!)?.[0];
@@ -115,6 +136,13 @@ export const classifyRegular = (move: AnalysisMove, index: number, moves: Analys
   else return { ...move, classification: classifyWithWinChance(move.move, next, current) };
 };
 
+/**
+ * Classifies a move based on mate evaluation.
+ * @param {Move} move - The move to classify.
+ * @param {number} next - The next mate evaluation.
+ * @param {number} current - The current mate evaluation.
+ * @returns {AnalysisMoveClassification} The classification of the move.
+ */
 const classifyWithMate = (move: Move, next: InfoResult, current: InfoResult): AnalysisMoveClassification => {
   if (next.mate === null || current.mate === null) return AnalysisMoveClassification.None;
 
@@ -132,6 +160,13 @@ const classifyWithMate = (move: Move, next: InfoResult, current: InfoResult): An
   return classification;
 };
 
+/**
+ * Classifies a move based on win chance evaluation.
+ * @param {Move} move - The move to classify.
+ * @param {number} next - The next win chance evaluation.
+ * @param {number} current - The current win chance evaluation.
+ * @returns {AnalysisMoveClassification} The classification of the move.
+ */
 const classifyWithWinChance = (move: Move, next: InfoResult, current: InfoResult): AnalysisMoveClassification => {
   if (!next.winChance || !current.winChance) return AnalysisMoveClassification.None;
 

src/lib/opening.ts

@@ -4,6 +4,11 @@ const worker = new Worker(new URL('../workers/opening.ts', import.meta.url), {
   type: 'module',
 });
 
+/**
+ * Finds the opening based on the provided PGN string.
+ * @param {string} pgn - The PGN (Portable Game Notation) string of the chess game.
+ * @returns {Promise<Opening | undefined>} A promise that resolves to the opening or undefined if not found.
+ */
 export const findOpening = (pgn: string): Promise<Opening | undefined> =>
   new Promise<Opening | undefined>((resolve) => {
     worker.onmessage = (message: MessageEvent) => {

src/lib/utils.ts

@@ -1,6 +1,11 @@
 import { clsx, type ClassValue } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 
+/**
+ * Combines class names using `clsx` and merges Tailwind CSS classes using `twMerge`.
+ * @param {...ClassValue[]} inputs - The class values to be combined and merged.
+ * @returns {string} The combined and merged class names.
+ */
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));
 }