feat: all functionality!

src/components/App/App.tsx

@@ -1,36 +1,159 @@
+import { useEffect, useState } from "react";
+import Button from "../Button/Button";
 import Matrix from "../Matrix/Matrix";
 import SelectSize from "../SelectSize/SelectSize";
+import Panel from "../Panel/Panel";
+import Result from "../Result/Result";
 
 function App() {
+ const [sizeMatrix, setSizeMatrix] = useState({ x: 2, y: 2 });
+ const [range, setRange] = useState({ from: 0, to: 99 });
+ const [matrixA, setMatrixA] = useState<number[][]>([
+ [0, 0],
+ [0, 0],
+ ]);
+ const [matrixB, setMatrixB] = useState<number[]>([0, 0]);
+
+ useEffect(() => {
+ updateMatrix();
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [sizeMatrix]);
+
+ const updateMatrix = () => {
+ setMatrixA((current) => {
+ const newMatrix: number[][] = [];
+
+ for (let i = 0; i < sizeMatrix.y; i++) {
+ const newRow: number[] = [];
+ for (let j = 0; j < sizeMatrix.x; j++) {
+ newRow.push(current[i]?.[j] || 0);
+ }
+ newMatrix.push(newRow);
+ }
+
+ return newMatrix;
+ });
+
+ setMatrixB((current) => {
+ const newMatrix: number[] = [];
+
+ for (let i = 0; i < sizeMatrix.y; i++) {
+ newMatrix.push(current[i] || 0);
+ }
+
+ return newMatrix;
+ });
+ };
+
+ const generateMatrix = () => {
+ setMatrixA(() => {
+ const newMatrix: number[][] = [];
+
+ for (let i = 0; i < sizeMatrix.y; i++) {
+ const newRow: number[] = [];
+ for (let j = 0; j < sizeMatrix.x; j++) {
+ newRow.push(
+ Math.round(Math.random() * (range.to - range.from)) + range.from,
+ );
+ }
+ newMatrix.push(newRow);
+ }
+
+ return newMatrix;
+ });
+
+ setMatrixB(() => {
+ const newMatrix: number[] = [];
+
+ for (let i = 0; i < sizeMatrix.y; i++) {
+ newMatrix.push(
+ Math.round(Math.random() * (range.to - range.from)) + range.from,
+ );
+ }
+
+ return newMatrix;
+ });
+ };
+
  return (
  <>
- <div className="flex min-h-screen bg-slate-100">
- <div
- className={
- "m-auto min-h-48 min-w-96 max-w-screen-xl p-4 " +
- "rounded-lg bg-slate-50 shadow-lg " +
- "flex flex-col gap-2"
- }
- >
- <h2 className="mx-auto p-1 text-lg">Input matrix</h2>
-
- <div className="flex flex-row gap-2">
- <p>Size: </p>
- <SelectSize/>
- <p> x </p>
- <SelectSize/>
- </div>
-
- {/* <div className="mx-auto">
- <button
- className={
- "rounded-lg border bg-purple-500 px-2 py-1 text-white " +
- "transition-all hover:scale-105 hover:bg-purple-600 active:scale-90"
- }
- >
- dsadas
- </button>
- </div> */}
+ <div className="flex min-h-screen flex-col items-center justify-center gap-4 bg-slate-100 py-10">
+ <h1 className="p-2 text-center text-3xl">Jordan elimination method</h1>
+ <div className="relative flex gap-8">
+ <div className="absolute -right-14 z-0 size-36 rounded-full bg-purple-500 blur-3xl" />
+ <div className="blur-1xl absolute -bottom-5 -left-5 z-0 size-48 rounded-[2rem] bg-purple-500/40 blur-3xl" />
+ <Panel className="m-0">
+ <h2 className="p-2 text-center text-xl font-medium">
+ Matrix A & B
+ </h2>
+
+ <div className="flex flex-row flex-wrap justify-between gap-4">
+ <div className="flex flex-col gap-2">
+ <div className="flex flex-row items-center gap-2">
+ <p>Size: </p>
+ <SelectSize
+ selectProps={{
+ onChange: (e) =>
+ setSizeMatrix({
+ x: sizeMatrix.x,
+ y: Number(e.currentTarget.value),
+ }),
+ }}
+ />
+ <p> x </p>
+ <SelectSize
+ selectProps={{
+ onChange: (e) =>
+ setSizeMatrix({
+ x: Number(e.currentTarget.value),
+ y: sizeMatrix.y,
+ }),
+ }}
+ />
+ </div>
+ <div className="mb-auto flex flex-row items-center gap-2">
+ <p>From</p>
+ <input
+ type="number"
+ className="w-12 rounded-lg border pl-1"
+ defaultValue={0}
+ onChange={(e) => {
+ setRange({
+ from: Number(e.currentTarget.value),
+ to: range.to,
+ });
+ }}
+ />
+ <p>to</p>
+ <input
+ type="number"
+ className="w-12 rounded-lg border pl-1"
+ defaultValue={99}
+ onChange={(e) => {
+ setRange({
+ from: range.from,
+ to: Number(e.currentTarget.value),
+ });
+ }}
+ />
+ </div>
+ <Button value={"Generate"} onClick={generateMatrix} />
+ </div>
+ <div>
+ {/* <p className="p-2 font-bold">A</p> */}
+ <Matrix value={matrixA} />
+ </div>
+ <div>
+ {/* <p className="p-2 font-bold">B</p> */}
+ <Matrix value={matrixB} />
+ </div>
+ </div>
+ </Panel>
+ </div>
+ <div>
+ <p className="max-w-screen-md text-gray-500">
+ <Result matrixA={matrixA} matrixB={matrixB} />
+ </p>
  </div>
  </div>
  </>

src/components/Button/Button.tsx

@@ -0,0 +1,22 @@
+import { FC, ButtonHTMLAttributes, DetailedHTMLProps } from "react";
+
+type buttonProps = DetailedHTMLProps<
+ ButtonHTMLAttributes<HTMLButtonElement>,
+ HTMLButtonElement
+>;
+
+const Button: FC<buttonProps> = (buttonProps) => {
+ return (
+ <button
+ className={
+ "rounded-lg border bg-purple-500 px-4 py-[0.33rem] text-white " +
+ "font-semibold transition-all hover:scale-105 hover:bg-purple-600 active:scale-90"
+ }
+ {...buttonProps}
+ >
+ {buttonProps.value}
+ </button>
+ );
+};
+
+export default Button;

src/components/Matrix/Matrix.tsx

@@ -1,24 +1,21 @@
 import { FC } from "react";
 
-// const styles = stylex.create({
-// table: {
-// border: "1px solid",
-// paddingHorizontal: "0.5rem",
-// },
-// });
-
-const Matrix: FC<{ value: number[][] }> = ({ value }) => {
+const Matrix: FC<{ value: number[][] | number[] }> = ({ value }) => {
  return (
  <>
  <table>
  <tbody>
- {value.map((row, rowIndex) => (
- <tr key={rowIndex} className="">
- {row.map((value, colIndex) => (
- <td key={colIndex} className="">
- {value}
- </td>
- ))}
+ {value.map((rowVal, rowIndex) => (
+ <tr key={rowIndex} className="border">
+ {Array.isArray(rowVal) ? (
+ rowVal.map((colVal, colIndex) => (
+ <td key={colIndex} className="min-w-8 border p-1 text-center">
+ {colVal}
+ </td>
+ ))
+ ) : (
+ <td className="min-w-8 border p-1 text-center">{rowVal}</td>
+ )}
  </tr>
  ))}
  </tbody>

src/components/Panel/Panel.tsx

@@ -0,0 +1,23 @@
+import { FC, ReactNode } from "react";
+
+interface IPanel {
+ children?: ReactNode;
+ className?: string;
+}
+
+const Panel: FC<IPanel> = ({ children, className }) => {
+ return (
+ <div
+ className={
+ "z-10 m-auto min-h-48 min-w-96 max-w-screen-xl p-4 " +
+ "rounded-2xl bg-slate-50 shadow-lg " +
+ "flex flex-col gap-4 " +
+ className
+ }
+ >
+ {children}
+ </div>
+ );
+};
+
+export default Panel;

src/components/Result/Result.tsx

@@ -0,0 +1,84 @@
+import { FC } from "react";
+import Matrix from "../Matrix/Matrix";
+import inverseMatrix from "../../functions/inverseMatrix";
+import { roundedMatrix, roundedRow } from "../../functions/utils";
+import matrixRank from "../../functions/matrixRank";
+import solveLinearSystem from "../../functions/solveLinearSystem";
+
+interface IResult {
+ matrixA: number[][];
+ matrixB: number[];
+}
+
+const Result: FC<IResult> = ({ matrixA, matrixB }) => {
+ const invertedMatrix = inverseMatrix(matrixA);
+ const rank = matrixRank(matrixA);
+ const solution = solveLinearSystem(matrixA, matrixB);
+
+ return (
+ <div className="inline-flex flex-col">
+ <p className="mt-4 font-bold">Finding the inverse matrix.</p>
+ <span>--------------------------------------------------</span>
+ {invertedMatrix ? (
+ <>
+ <span>Inverse matrix:</span>
+ <Matrix value={roundedMatrix(invertedMatrix)} />
+ </>
+ ) : (
+ <>
+ <span>The inverse matrix was not found.</span>
+ </>
+ )}
+
+ <p className="mt-4 font-bold">Finding the rank of a matrix.</p>
+ <span>--------------------------------------------------</span>
+ <span>Matrix rank: {rank}</span>
+
+ <p className="mt-4 font-bold">
+ Solution of the system of linear equations.
+ </p>
+ <span>--------------------------------------------------</span>
+ {solution ? (
+ <>
+ <span>Solving the system of linear equations:</span>
+ <Matrix value={roundedRow(solution)} />
+ </>
+ ) : (
+ <>
+ <span>A matrix does not have an inverse matrix.</span>
+ </>
+ )}
+ </div>
+ // <>
+ // {invertedMatrix ? (
+ // <>
+ // <p>Inverse matrix:</p>
+ // <Matrix value={roundedMatrix(invertedMatrix)} />
+ // </>
+ // ) : (
+ // <>
+ // <p>
+ // The matrix is not square, the inverse matrix does not exist.
+ // </p>
+ // </>
+ // )}
+
+ // <p>Matrix rank: {rank}</p>
+
+ // {solution ? (
+ // <>
+ // <p>Solving the system of linear equations:</p>
+ // <Matrix value={roundedRow(solution)} />
+ // </>
+ // ) : (
+ // <>
+ // <p>
+ // A matrix does not have an inverse matrix.
+ // </p>
+ // </>
+ // )}
+ // </>
+ );
+};
+
+export default Result;

src/components/SelectSize/SelectSize.tsx

@@ -3,16 +3,21 @@ import { FC, HTMLProps } from "react";
 interface ISelectSize {
  selectProps?: HTMLProps<HTMLSelectElement>;
  optionProps?: HTMLProps<HTMLOptionElement>;
+ // selectProps?: DetailedHTMLProps<SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>;
+ // optionProps?: DetailedHTMLProps<OptionHTMLAttributes<HTMLOptionElement>, HTMLOptionElement>;
 }
 
-const SelectSize: FC<ISelectSize> = (selectProps, optionProps) => {
+const SelectSize: FC<ISelectSize> = ({ selectProps, optionProps }) => {
  return (
  <>
  <select
- name="sizeY"
- id="sizeY"
+ name="size"
+ id="size"
  defaultValue={2}
- className="rounded-lg border"
+ className="rounded-lg border pl-1"
+ onChange={(e) => {
+ e.target.value;
+ }}
  {...selectProps}
  >
  {Array.from({ length: 9 }, (_, index) => (