| 
| 
| 
| 
|
43 |
44 | ## Contribution
45 | If you would like to contribute on the project, fixing bugs, improve accessibility or open an issue, please follow our [Contribution guide](https://github.com/enochndika/kimia-UI/blob/main/contributing.md)
46 |
47 | First, run the development server:
48 |
49 | ```bash
50 | npm run dev
51 | # or
52 | yarn dev
53 | ```
54 |
55 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
56 |
57 |
--------------------------------------------------------------------------------
/src/components/Elements/button/button.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { cn } from 'utils';
3 |
4 | // eslint-disable-next-line @typescript-eslint/no-empty-interface
5 | interface BtnPropsWithChildren {}
6 |
7 | interface BtnProps
8 | extends React.ButtonHTMLAttributes
93 |
107 |
108 | ),
109 | document.body,
110 | )}
111 |
112 | );
113 | }
114 |
115 | function DrawerHeader({ children }: Props) {
116 | return (
117 |
100 |
106 |
103 | {children}
104 |
105 |
118 |
120 | );
121 | }
122 |
123 | function DrawerBody({ children }: Props) {
124 | return {children}
119 |{children}
;
125 | }
126 |
127 | function DrawerFooter({ children }: Props) {
128 | return {children}
;
129 | }
130 |
131 | export { Drawer, DrawerHeader, DrawerBody, DrawerFooter };
132 |
--------------------------------------------------------------------------------
/src/components/Elements/hamburger-menu/hamburgerMenu.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Link } from 'react-router-dom';
3 | import { cn } from 'utils';
4 |
5 | interface Props {
6 | children: React.ReactNode;
7 | }
8 |
9 | interface LinkProps extends Props {
10 | href: string;
11 | }
12 |
13 | interface HamburgerMenuProps extends React.HTMLAttributes
74 | {children}
75 |
76 | );
77 | }
78 |
79 | function HamburgerMenuNav({ children }: Props) {
80 | return - {children}
15 |
25 |
26 | );
27 |
28 | export { Icon };
29 |
--------------------------------------------------------------------------------
/src/components/Elements/index.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Export all the Atomic Elements from here to be used in the rest of the project
3 | */
4 | export * from './button/button';
5 | export * from './drawer/drawer';
6 | export * from './hamburger-menu/hamburgerMenu';
7 | export * from './modal/modal';
8 | export * from './navbar/navbar';
9 | export * from './sidenav/sidenav';
10 | export * from './icon/icon';
11 |
--------------------------------------------------------------------------------
/src/components/Elements/modal/modal.tsx:
--------------------------------------------------------------------------------
1 | import { useEffect, ReactNode, useRef } from 'react';
2 | import { createPortal } from 'react-dom';
3 | import { cn } from 'utils';
4 |
5 | interface Props {
6 | children: ReactNode;
7 | }
8 |
9 | interface ModalProps extends Props {
10 | isOpen: boolean;
11 | position?: 'default' | 'large' | 'extraLarge';
12 | toggle: (isOpen?: boolean) => void;
13 | closeOnClickOutside?: boolean;
14 | animate?: boolean;
15 | }
16 |
17 | const ngClass = {
18 | animate: 'animate-backInDown',
19 | body: `flex-shrink flex-grow p-4`,
20 | headerTitle: `text-2xl md:text-3xl font-light`,
21 | header: `items-start justify-between p-4 border-b border-gray-300`,
22 | container: `fixed top-0 left-0 z-40 w-full h-full m-0 overflow-y-auto`,
23 | overlay: `fixed top-0 left-0 z-30 w-screen h-screen backdrop-blur-sm`,
24 | footer: `flex flex-wrap items-center justify-end p-3 border-t border-gray-300`,
25 | content: {
26 | default: `relative flex flex-col bg-white pointer-events-auto shadow-primary shadow-md`,
27 | },
28 | orientation: {
29 | default:
30 | 'mt-5 mx-8 pb-0 md:m-auto md:w-6/12 lg:w-4/12 md:pt-0 focus:outline-none rounded-lg',
31 | large:
32 | 'mt-5 mx-8 pb-0 md:m-auto md:w-8/12 lg:w-8/12 md:pt-0 focus:outline-none rounded-lg',
33 | extraLarge: 'mt-5 mx-8 pb-0 focus:outline-none rounded-lg',
34 | },
35 | };
36 |
37 | function Modal({
38 | isOpen,
39 | toggle,
40 | children,
41 | animate = false,
42 | closeOnClickOutside = false,
43 | position = 'default',
44 | }: ModalProps) {
45 | const ref = useRef
96 |
113 |
114 | ),
115 | document.body,
116 | )}
117 |
118 | );
119 | }
120 |
121 | function ModalHeader({ children }: Props) {
122 | return (
123 |
102 |
112 |
109 | {children}
110 |
111 |
124 |
126 | );
127 | }
128 |
129 | function ModalBody({ children }: Props) {
130 | return {children}
125 |{children}
;
131 | }
132 |
133 | function ModalFooter({ children }: Props) {
134 | return {children}
;
135 | }
136 |
137 | export { Modal, ModalHeader, ModalBody, ModalFooter };
138 |
--------------------------------------------------------------------------------
/src/components/Elements/navbar/navbar.tsx:
--------------------------------------------------------------------------------
1 | import { ReactNode } from 'react';
2 | import { Link } from 'react-router-dom';
3 | import { cn } from 'utils';
4 |
5 | interface Props {
6 | children: ReactNode;
7 | }
8 |
9 | interface INavbarProps extends Props {
10 | className?: string;
11 | }
12 |
13 | interface INavbarBrandProps extends Props {
14 | href: string;
15 | }
16 |
17 | interface INavbarNavProps extends Props {
18 | position?: 'left' | 'center' | 'right';
19 | }
20 |
21 | interface INavbarLinkProps extends INavbarBrandProps {
22 | active?: boolean;
23 | activeClass?: string;
24 | external?: boolean;
25 | className?: string;
26 | }
27 |
28 | const ngClass = {
29 | navbar: 'font-light h-16 relative flex items-center flex-row justify-start',
30 | brand: `inline-block cursor-pointer pl-1`,
31 | active: `text-purple-800`,
32 | toggler: `ml-auto flex lg:hidden px-3 py-3 text-5xl focus:outline-none focus:shadow rounded transition-colors hover:text-black border border-white hover:border-black`,
33 | link: `cursor-pointer px-4 text-gray-900 hover:text-black font-medium`,
34 | position: {
35 | center: `flex pl-0 mb-0 mx-auto pr-8 lg:hidden`,
36 | left: `hidden lg:pl-0 lg:mb-0 lg:mr-auto md:flex`,
37 | right: `hidden lg:pl-0 lg:mb-0 lg:ml-auto lg:flex`,
38 | },
39 | };
40 |
41 | function Navbar({ children, className }: INavbarProps) {
42 | return ;
43 | }
44 |
45 | // ! You can wrap the a tag with Link and pass href to Link if you are using either Create-React-App, Next.js or Gatsby
46 | function NavbarBrand({ children, href }: INavbarBrandProps) {
47 | return (
48 |
49 | {children}
50 |
51 | );
52 | }
53 |
54 | function NavbarToggler({ toggle }: { toggle: () => void }) {
55 | return (
56 |
65 | );
66 | }
67 |
68 | function NavbarNav({ children, position = 'right' }: INavbarNavProps) {
69 | return - {children}
86 | {external ? (
87 |
88 | {children}
89 |
90 | ) : (
91 |
92 | {children}
93 |
94 | )}
95 |
96 | );
97 | }
98 |
99 | export {
100 | Navbar,
101 | NavbarBrand,
102 | NavbarNav,
103 | NavbarItem,
104 | NavbarLink,
105 | NavbarToggler,
106 | };
107 |
--------------------------------------------------------------------------------
/src/components/Elements/sidenav/sidenav.tsx:
--------------------------------------------------------------------------------
1 | import { ReactNode, useEffect, useRef } from 'react';
2 | import { cn } from 'utils';
3 |
4 | interface Props {
5 | children: ReactNode;
6 | }
7 |
8 | interface LinkProps extends Props {
9 | href: string;
10 | }
11 | interface SidenavProps extends Props {
12 | open: boolean;
13 | position?: 'left' | 'right';
14 | toggle: (value?: unknown) => void;
15 | closeOnClickOutside?: boolean;
16 | }
17 |
18 | const ngClass = {
19 | item: `flex justify-start cursor-pointer font-medium hover:text-gray-400 ml-8 mb-10`,
20 | closeIcon: `absolute top-1 focus:outline-none right-3 text-3xl text-white cursor-pointer`,
21 | position: {
22 | left: {
23 | open: `w-7/12 md:w-60 bg-gray-800 text-white overflow-x-hidden`,
24 | close: `w-0 bg-gray-800 text-white overflow-x-hidden`,
25 | default: `h-screen fixed z-20 top-0 left-0 transition-all ease duration-200`,
26 | },
27 | right: {
28 | open: `w-7/12 md:w-60 bg-gray-800 text-white overflow-x-hidden`,
29 | close: `w-0 bg-gray-800 text-white overflow-x-hidden`,
30 | default: `right-0 h-screen fixed z-20 top-0 transition-all ease duration-200`,
31 | },
32 | },
33 | };
34 |
35 | function Sidenav({
36 | open,
37 | toggle,
38 | position = 'left',
39 | children,
40 | closeOnClickOutside,
41 | }: SidenavProps) {
42 | const ref = useRef
49 |
61 | {showNotation && (
62 |
81 |
82 | );
83 | }
84 | for (let row = 0; row <= 7; row++) {
85 | for (let col = 0; col <= 7; col++) {
86 | squares.push(renderSquare(col, 7 - row));
87 | }
88 | }
89 | const rotate = orientation === 'black' ? 'rotate-180' : '';
90 | return (
91 |
92 | {squares}
93 |
94 | );
95 | };
96 |
97 | export default Board;
98 |
--------------------------------------------------------------------------------
/src/components/Features/Chessboard/BoardSquare.tsx:
--------------------------------------------------------------------------------
1 | import { cn } from 'utils';
2 | import type { CSSProperties, ReactNode } from 'react';
3 | import { coordToSquare } from '../chess';
4 | import type { Orientation, Square } from 'types';
5 |
6 | export interface BoardSquareProps {
7 | col: number;
8 | row: number;
9 | orientation?: Orientation;
10 | children?: ReactNode;
11 | lightSquareStyle?: CSSProperties;
12 | darkSquareStyle?: CSSProperties;
13 | customSquareStyle?: CSSProperties;
14 | onMouseOverSquare?: (square: Square) => void;
15 | onMouseOutSquare?: (square: Square) => void;
16 | onDragOverSquare?: (square: Square) => void;
17 | onDrop?: (square: Square) => void;
18 | onSquareClick?: (square: Square) => void;
19 | onSquareRightClick?: (square: Square) => void;
20 | }
21 |
22 | const squareStyle = {
23 | width: '100%',
24 | height: '100%',
25 | };
26 |
27 | export const BoardSquare: React.FC onMouseOverSquare(square)}
59 | onMouseLeave={() => onMouseOutSquare(square)}
60 | onClick={handleClick}
61 | onContextMenu={handleClick}
62 | role="Space"
63 | data-testid={`(${col},${row})`}
64 | style={{
65 | position: 'relative',
66 | width: '100%',
67 | height: '100%',
68 | }}
69 | >
70 |
81 | );
82 | };
83 |
--------------------------------------------------------------------------------
/src/components/Features/Chessboard/CustomDragLayer.tsx:
--------------------------------------------------------------------------------
1 | import { CSSProperties } from 'react';
2 | import type { XYCoord } from 'react-dnd';
3 | import { useDragLayer } from 'react-dnd';
4 | import type { CustomPieces, Square } from 'types';
5 |
6 | type Props = {
7 | width: number;
8 | pieces: CustomPieces;
9 | wasPieceTouched: boolean;
10 | sourceSquare: Square;
11 | id?: string | number;
12 | };
13 |
14 | const layerStyles: CSSProperties = {
15 | position: 'fixed',
16 | pointerEvents: 'none',
17 | zIndex: 10,
18 | left: 0,
19 | top: 0,
20 | };
21 |
22 | const getItemStyle = (
23 | currentOffset: XYCoord | null,
24 | wasPieceTouched: boolean,
25 | ): CSSProperties => {
26 | if (!currentOffset) return { display: 'none' };
27 |
28 | let { x, y } = currentOffset;
29 | const transform = wasPieceTouched
30 | ? `translate(${x}px, ${y + -25}px) scale(2)`
31 | : `translate(${x}px, ${y}px)`;
32 | return { transform };
33 | };
34 |
35 | const CustomDragLayer = ({
36 | // id,
37 | // pieces,
38 | // sourceSquare,
39 | // width,
40 | wasPieceTouched,
41 | }: Props) => {
42 | const { isDragging, currentOffset } = useDragLayer((monitor) => ({
43 | item: monitor.getItem(),
44 | itemType: monitor.getItemType(),
45 | // initialOffset: monitor.getInitialSourceClientOffset(),
46 | currentOffset: monitor.getSourceClientOffset(),
47 | isDragging: monitor.isDragging(),
48 | }));
49 |
50 | return isDragging ? (
51 |
78 | {children}
79 |
80 |
52 |
64 | ) : null;
65 | };
66 |
67 | export default CustomDragLayer;
68 |
--------------------------------------------------------------------------------
/src/components/Features/Chessboard/Notation.tsx:
--------------------------------------------------------------------------------
1 | import { Fragment, CSSProperties } from 'react';
2 | import { Orientation } from 'types';
3 | import { COLUMNS } from './helpers';
4 | import { Property } from 'csstype';
5 |
6 | //-----------------------------//
7 | type SquareProps = {
8 | row: number;
9 | col: number;
10 | width: number;
11 | orientation?: Orientation;
12 | };
13 | type NotationProps = SquareProps & {
14 | lightSquareStyle?: CSSProperties;
15 | darkSquareStyle?: CSSProperties;
16 | };
17 | type WhiteColor = { whiteColor: Property.BackgroundColor | undefined };
18 | type BlackColor = { blackColor: Property.BackgroundColor | undefined };
19 |
20 | //-----------------------------//
21 | // helper functions
22 |
23 | /** Get Row as a number */
24 | const getRow = (orientation: Orientation, row: number) =>
25 | orientation === 'white' ? row + 1 : row + 1;
26 |
27 | /** Get Column as a letter */
28 | const getColumn = (orientation: Orientation, col: number) =>
29 | orientation === 'white' ? COLUMNS[col] : COLUMNS[7 - col];
30 |
31 | const renderBottomLeft = ({
32 | orientation = 'white',
33 | row,
34 | width,
35 | col,
36 | whiteColor,
37 | }: SquareProps & WhiteColor) => {
38 | return (
39 |
53 |
63 | P
54 | {/* {renderChessPiece({ 55 | width, 56 | pieces, 57 | piece: item.piece, 58 | isDragging, 59 | customDragLayerStyles: { opacity: 1 }, 60 | sourceSquare, 61 | })} */} 62 |
48 | {getRow(orientation, row)}
49 |
50 |
58 | {getColumn(orientation, col)}
59 |
60 |
80 | {getColumn(orientation, col)}
81 |
82 | );
83 | };
84 |
85 | const renderNumbers = ({
86 | orientation = 'white',
87 | row,
88 | width,
89 | whiteColor,
90 | blackColor,
91 | isRow,
92 | isBottomLeftSquare,
93 | }: Omit
112 | {getRow(orientation, row)}
113 |
114 | );
115 | };
116 |
117 | const columnStyle = ({
118 | col,
119 | width,
120 | blackColor,
121 | whiteColor,
122 | orientation,
123 | }: Omit
26 | {piece && (
27 |
36 | )}
37 |
38 | );
39 | }
40 |
--------------------------------------------------------------------------------
/src/components/Features/Chessboard/helpers.ts:
--------------------------------------------------------------------------------
1 | import type { FENpiece, Piece, Position, Square } from 'types';
2 |
3 | export const ItemTypes = { PIECE: 'piece' };
4 | export const COLUMNS = 'abcdefgh'.split('');
5 |
6 | function isString(s: any): boolean {
7 | return typeof s === 'string';
8 | }
9 |
10 | /** convert FEN string to a Position Object i.e. {'a1': 'wK',...} */
11 | export function fenToObj(fen: string): Position {
12 | // cut off any move, castling, etc info from the end
13 | // we're only interested in position information
14 | fen = fen.replace(/ .+$/, '');
15 | let [rows, currentRow] = [fen.split('/'), 8];
16 | let position: Position = {};
17 | for (let i = 0; i < 8; i++) {
18 | let [row, colIdx] = [rows[i].split(''), 0];
19 | // loop through each character in the FEN section
20 | for (let j = 0; j < row.length; j++) {
21 | // number / empty squares
22 | if (row[j].search(/[1-8]/) !== -1) {
23 | let numEmptySquares = parseInt(row[j], 10);
24 | colIdx += numEmptySquares;
25 | } else {
26 | // piece
27 | let square = (COLUMNS[colIdx] + currentRow) as Square;
28 | position[square] = fenToPieceCode(row[j] as FENpiece);
29 | colIdx += 1;
30 | }
31 | }
32 |
33 | currentRow = currentRow - 1;
34 | }
35 |
36 | return position;
37 | }
38 |
39 | /** replace summed gaps between pieces with several '1' spacers */
40 | function expandFenEmptySquares(fen: string) {
41 | return fen
42 | .replace(/8/g, '11111111')
43 | .replace(/7/g, '1111111')
44 | .replace(/6/g, '111111')
45 | .replace(/5/g, '11111')
46 | .replace(/4/g, '1111')
47 | .replace(/3/g, '111')
48 | .replace(/2/g, '11');
49 | }
50 |
51 | /** check if the input string is a valid FEN string */
52 | export function validFen(fen: string): boolean {
53 | if (!isString(fen)) return false;
54 | // cut off any move, castling, etc info from the end
55 | // we're only interested in position information
56 | fen = fen.replace(/ .+$/, '');
57 | // expand the empty square numbers to just 1s
58 | fen = expandFenEmptySquares(fen);
59 | // FEN should be 8 sections separated by slashes
60 | let chunks = fen.split('/');
61 | if (chunks.length !== 8) return false;
62 | // check each section
63 | for (let i = 0; i < 8; i++) {
64 | if (chunks[i].length !== 8 || chunks[i].search(/[^kqrnbpKQRNBP1]/) !== -1) {
65 | return false;
66 | }
67 | }
68 | return true;
69 | }
70 |
71 | /** convert FEN piece code to bP, wK, etc */
72 | function fenToPieceCode(piece: FENpiece): Piece {
73 | // black piece
74 | if (piece.toLowerCase() === piece) {
75 | return ('b' + piece.toUpperCase()) as Piece;
76 | }
77 | // white piece
78 | return ('w' + piece.toUpperCase()) as Piece;
79 | }
80 |
81 | /** check if the input square string conforms to the square syntax i.e. 'a1' */
82 | function validSquare(square: Square | string): boolean {
83 | return isString(square) && square.search(/^[a-h][1-8]$/) !== -1;
84 | }
85 |
86 | /** check if the input piece string conforms to the piece syntax i.e. 'bQ' */
87 | function validPieceCode(code: Piece | string): boolean {
88 | return isString(code) && code.search(/^[bw][KQRNBP]$/) !== -1;
89 | }
90 |
91 | /** check if the input position object is valid */
92 | export function validPositionObject(pos: Position | string): boolean {
93 | if (pos === null || typeof pos !== 'object') return false;
94 |
95 | for (let square in Object.keys(pos)) {
96 | if (!pos.hasOwnProperty(square)) continue;
97 | if (
98 | !validSquare(square) ||
99 | !validPieceCode(pos[square as Square] as string)
100 | ) {
101 | // either the object key isn't a square or value isn't a piece
102 | return false;
103 | }
104 | }
105 | return true;
106 | }
107 |
108 | /** replace placeholder '1' spacers with the sum of those spacers */
109 | function squeezeFenEmptySquares(fen: string) {
110 | return fen
111 | .replace(/11111111/g, '8')
112 | .replace(/1111111/g, '7')
113 | .replace(/111111/g, '6')
114 | .replace(/11111/g, '5')
115 | .replace(/1111/g, '4')
116 | .replace(/111/g, '3')
117 | .replace(/11/g, '2');
118 | }
119 |
120 | /** convert bP, wK, etc code to FEN structure */
121 | function pieceCodeToFen(piece: Piece): FENpiece {
122 | let pieceCodeLetters = piece.split('');
123 | // white piece
124 | if (pieceCodeLetters[0] === 'w') {
125 | return pieceCodeLetters[1].toUpperCase() as FENpiece;
126 | }
127 | // black piece
128 | return pieceCodeLetters[1].toLowerCase() as FENpiece;
129 | }
130 |
131 | /** position object to FEN string
132 | * returns false if the obj is not a valid position object */
133 | export function objToFen(obj: Position): false | string {
134 | if (!validPositionObject(obj)) return false;
135 | let [fen, currentRow] = ['', 8];
136 | for (let i = 0; i < 8; i++) {
137 | for (let j = 0; j < 8; j++) {
138 | let square = (COLUMNS[j] + currentRow) as Square;
139 | // if piece exists add it, otherwise add a '1' spacer
140 | fen += obj[square] ? pieceCodeToFen(obj[square] as Piece) : 1;
141 | }
142 | if (i !== 7) fen += '/';
143 | currentRow -= 1;
144 | }
145 | // squeeze the empty numbers together
146 | return squeezeFenEmptySquares(fen);
147 | }
148 |
--------------------------------------------------------------------------------
/src/components/Features/Chessboard/index.tsx:
--------------------------------------------------------------------------------
1 | import { useState, useEffect, CSSProperties } from 'react';
2 | import type { ChessboardProps } from 'types';
3 | import { DndProvider } from 'react-dnd';
4 | import { HTML5Backend } from 'react-dnd-html5-backend';
5 | import Board from './Board';
6 |
7 | const ChessBoard: React.FC
60 |
86 |
16 | {promotions.map((promotion, index) => (
17 |
32 |
18 |
29 |
30 | ))}
31 |
13 |
18 |
23 | );
24 | }
25 |
--------------------------------------------------------------------------------
/src/components/Layout/Footer/Footer.tsx:
--------------------------------------------------------------------------------
1 | import { cn } from 'utils';
2 | import Copywrite from './Copywrite';
3 |
4 | export default function Footer() {
5 | return (
6 |
11 | );
12 | }
13 |
--------------------------------------------------------------------------------
/src/components/Layout/Header/Header.tsx:
--------------------------------------------------------------------------------
1 | import { useEffect } from 'react';
2 | import { cn } from 'utils';
3 | import debounce from 'debounce';
4 | import {
5 | Navbar,
6 | NavbarBrand,
7 | NavbarItem,
8 | NavbarToggler,
9 | NavbarLink,
10 | NavbarNav,
11 | } from 'components/Elements';
12 | import { useToggle } from '../helpers/context';
13 | import Logo from '../Logo';
14 | import { routes } from 'routes';
15 | import { useScrollDirection } from 'hooks';
16 |
17 | type HeaderProps = {
18 | appName?: string;
19 | };
20 |
21 | function Header({}: HeaderProps) {
22 | const { toggle } = useToggle();
23 | const scrollDirection = useScrollDirection({
24 | initialDirection: 'up', // this is so the navbar is present on page load
25 | thresholdPixels: 50, // this means we need to move a certain speed before the nav displays
26 | });
27 |
28 | useEffect(() => {
29 | console.log(scrollDirection);
30 | }, [scrollDirection]);
31 |
32 | return (
33 | v{version}
19 |2025
21 | 22 |
25 |
33 |
29 | {children}
30 |
31 |
32 | -
9 | {routes.map(({ title, path }) => {
10 | return (
11 |
Chess
20 |
26 |
34 | )}
35 |
36 | );
37 | };
38 |
39 | export default Alert;
40 |
--------------------------------------------------------------------------------
/src/components/Layout/helpers/context.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | useEffect,
3 | useRef,
4 | useContext,
5 | useState,
6 | useCallback,
7 | createContext,
8 | ReactNode,
9 | } from 'react';
10 |
11 | interface ContextProps {
12 | open: boolean;
13 | ref: any;
14 | toggle: () => void;
15 | }
16 | // create new context
17 | const Context = createContext
27 | Kimia-UI is now using Tailwind CSS v3, introducing some small
28 | changes. Please use JIT mode or update to Tailwind CSS v3
29 |
32 |
33 |
3 |
14 | );
15 |
16 | export default AboutPage;
17 |
--------------------------------------------------------------------------------
/src/pages/HomePage.tsx:
--------------------------------------------------------------------------------
1 | import { useState, useEffect } from 'react';
2 | import type {
3 | Position,
4 | Square,
5 | BoardStateArray,
6 | MoveList,
7 | PositionStyles,
8 | MetaGame,
9 | } from 'types';
10 | import { Button } from 'components/Elements';
11 | import {
12 | coordToSquare,
13 | highlightSquares,
14 | parseBoardState,
15 | AskNewGame,
16 | } from 'components/Features/chess';
17 | import Chessboard from 'components/Features/Chessboard';
18 | import { useToggle } from 'hooks';
19 | import { cn } from 'utils';
20 | import Promotions from 'components/Features/chess/promotions';
21 | import { invoke } from '@tauri-apps/api/core';
22 | import { listen } from '@tauri-apps/api/event';
23 |
24 | const HomePage: React.FC = () => {
25 | const [newGameIsOpen, newGameToggle] = useToggle(true);
26 | const [promoterIsOpen, promoterToggle] = useToggle(false);
27 | const [position, setPosition] = useStateAbout Page
4 |
5 |
13 | -
6 |
- Written by: James Sizeland 7 |
- Uses fork of chessboardjsx React library 8 |
- Uses fork of Kimia-UI library 9 |
- Built using Tauri and Rust for the backend 10 |
- Built using Vitejs TypeScript React for the frontend 11 |
74 |
173 | );
174 | };
175 | export default HomePage;
176 |
--------------------------------------------------------------------------------
/src/pages/SummaryPage.tsx:
--------------------------------------------------------------------------------
1 | import { useState } from 'react';
2 |
3 | const SummaryPage: React.FC = () => {
4 | const [score] = useState(0);
5 | return (
6 | Game
75 |
76 | {
91 | // stop unnecessary repeats of this function call
92 | if (square !== hoveredSquare) {
93 | invoke('hover_square', { square: square }).then((sq) =>
94 | setSquareStyles(highlightSquares(sq, square)),
95 | );
96 | }
97 | setHoveredSquare(square);
98 | }}
99 | boardStyle={{
100 | borderRadius: '5px',
101 | boxShadow: `0 5px 15px rgba(0,0,0,0.5)`,
102 | }}
103 | squareStyles={squareStyles}
104 | dropSquareStyle={undefined}
105 | onSquareClick={(square) => {
106 | if (!gameMeta.game_over) {
107 | invoke<[MoveList, BoardStateArray, MetaGame]>('click_square', {
108 | square: square,
109 | }).then(([sq, board, gameMeta]) => {
110 | setSquareStyles(highlightSquares(sq, square));
111 | setPosition(parseBoardState(board));
112 | setGameMeta(gameMeta);
113 | if (rotation) {
114 | gameMeta.turn % 2 == 0
115 | ? setWhiteTurn(true)
116 | : setWhiteTurn(false);
117 | }
118 | if (gameMeta.game_over) newGameToggle(); // ask if we want to start a new game
119 | });
120 | }
121 | }}
122 | />
123 |
124 | {/* Game State Row */}
125 |
126 |
172 | 133 | white king:{' '} 134 | {coordToSquare( 135 | gameMeta.white_king.square[0], 136 | gameMeta.white_king.square[1], 137 | )} 138 |
139 |146 | black king:{' '} 147 | {coordToSquare( 148 | gameMeta.black_king.square[0], 149 | gameMeta.black_king.square[1], 150 | )} 151 |
152 |153 | score: {gameMeta.score}, turn: {gameMeta.turn} ( 154 | {gameMeta.turn % 2 == 0 ? 'White' : 'Black'}) 155 |
156 | 171 |
7 |
12 | );
13 | };
14 |
15 | export default SummaryPage;
16 |
--------------------------------------------------------------------------------
/src/pages/TestPage.tsx:
--------------------------------------------------------------------------------
1 | import { useEffect } from 'react';
2 | import {
3 | Button,
4 | Modal,
5 | ModalBody,
6 | ModalHeader,
7 | ModalFooter,
8 | } from 'components/Elements';
9 | import { useToggle } from 'hooks';
10 | import { listen } from '@tauri-apps/api/event';
11 | import { invoke } from '@tauri-apps/api/core';
12 |
13 | const TestPage: React.FC = () => {
14 | useEffect(() => {
15 | const unlisten = listenSummary Page
8 |
9 |
11 | {score}
10 |
28 |
60 | );
61 | };
62 |
63 | export default TestPage;
64 |
--------------------------------------------------------------------------------
/src/pages/index.ts:
--------------------------------------------------------------------------------
1 | export { default as HomePage } from './HomePage';
2 | export { default as AboutPage } from './AboutPage';
3 | export { default as TestPage } from './TestPage';
4 |
--------------------------------------------------------------------------------
/src/routes/index.tsx:
--------------------------------------------------------------------------------
1 | import { Routes, Route } from 'react-router-dom';
2 | import { HomePage, AboutPage, TestPage } from 'pages';
3 | import { checkEnv } from 'utils';
4 |
5 | type RouteType = {
6 | title: string;
7 | path: string;
8 | element: React.ReactNode;
9 | };
10 |
11 | const publicRoutes: RouteType[] = [
12 | { title: 'Home', path: '/', element: Test Page
29 |
30 |
31 | Popup
32 |
33 | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
34 | eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
35 | ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
36 | aliquip ex ea commodo consequat.
37 |
38 |
39 |
40 |
41 |
42 |
43 | Popup
44 |
45 | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
46 | eiusmod tempor incididunt ut fdsfasdjkfasdf adsfasdfsdfasdf
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
57 | {/*
59 | {score}
*/} 58 |