+ );
}
+
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
-export default Graph;
\ No newline at end of file
diff --git a/src/app/recursion-tree/vertex.jsx b/src/app/recursion-tree/vertex.jsx
index ab72f8d..39081aa 100644
--- a/src/app/recursion-tree/vertex.jsx
+++ b/src/app/recursion-tree/vertex.jsx
@@ -1,83 +1,60 @@
-import React, {Component} from 'react';
+import { useEffect } from 'react';
-class Vertex extends Component {
+export default function Vertex({ id, pos, current, completed, label, ret }) {
+ useEffect(() => {
+ if (id === 0) return;
+ document.getElementById('cxanim' + id)?.beginElement();
+ document.getElementById('cyanim' + id)?.beginElement();
+ document.getElementById('tanim' + id)?.beginElement();
+ }, []);
- constructor() {
- super();
+ const fillColor = current ? '#f59e0b' : completed ? '#334155' : '#0d9488';
+ const strokeColor = current ? '#d97706' : completed ? '#475569' : '#0f766e';
+ const textColor = '#f8fafc';
- }
- componentDidMount() {
- if( this.props.id === 0 ) return;
- // document.getElementById('ranim'+this.props.id).beginElement();
- document.getElementById('cxanim'+this.props.id).beginElement();
- document.getElementById('cyanim'+this.props.id).beginElement();
- document.getElementById('tanim'+this.props.id).beginElement();
- }
- render() {
-
- return (
-
+ );
}
-
-function sleep(ms) {
- return new Promise(resolve => setTimeout(resolve, ms));
-}
-
-export default Vertex;
\ No newline at end of file
diff --git a/src/app/recursion-tree/vertexOriginal.jsx b/src/app/recursion-tree/vertexOriginal.jsx
deleted file mode 100644
index 4637dd3..0000000
--- a/src/app/recursion-tree/vertexOriginal.jsx
+++ /dev/null
@@ -1,76 +0,0 @@
-import React, {Component} from 'react';
-
-class Vertex extends Component {
-
- constructor() {
- super();
- this.state = {
- prevPoss:{
- x:0,
- y:0
- },
- poss:{
- x:0,
- y:0,
- xx:0,
- yy:0
- },
- prevX:0
- }
- }
-
- componentDidUpdate(prevProps) {
- if (this.state.poss.x !== this.props.pos.x) {
- let pp = this.state.poss;
- pp.xx = pp.x;
- pp.yy = pp.y;
- pp.x = this.props.pos.x;
- pp.y = this.props.pos.y;
- this.setState({poss:pp});
- document.getElementById('vbanim').beginElement();
- }
- }
- render() {
-
- return (
-
- );
- }
-}
-
-function sleep(ms) {
- return new Promise(resolve => setTimeout(resolve, ms));
-}
-
-export default Vertex;
\ No newline at end of file
diff --git a/src/app/recursive-sorting/menu.jsx b/src/app/recursive-sorting/menu.jsx
index 510e14c..9309bfb 100644
--- a/src/app/recursive-sorting/menu.jsx
+++ b/src/app/recursive-sorting/menu.jsx
@@ -1,23 +1,27 @@
import { CustomSelect } from '@/components/custom-select';
import { CustomSlider } from '@/components/custom-slider';
import { Button } from '@/components/ui/button';
-import { Component } from 'react';
+import { Play, Shuffle } from 'lucide-react';
+export default function Menu({ disabled, onViusalize, onRandomize, onCountChange, onAlgoChanged, onSpeedChange }) {
+ return (
+
+
Recursive Sorting
-class Menu extends Component {
- render() {
- return (
-
-
Settings
-
+
+
+
+
+
+
- Randomize
+
- Visualize
+
-
- );
- }
- isClickable = () =>{
- if( this.props.disable ){
- return {cursor: "not-allowed"};
- } else{
- return {};
- }
- }
+
+ );
}
-
-
-export default Menu;
\ No newline at end of file
diff --git a/src/app/recursive-sorting/page.jsx b/src/app/recursive-sorting/page.jsx
index e4146ec..0fed136 100644
--- a/src/app/recursive-sorting/page.jsx
+++ b/src/app/recursive-sorting/page.jsx
@@ -1,118 +1,67 @@
"use client";
+import { useState, useEffect, useRef } from 'react';
import Navbar from '@/components/navbar';
import heapSort from "@/lib/algorithms/heapSort";
import mergeSort from '@/lib/algorithms/mergeSort';
import { quickSortRecursive } from "@/lib/algorithms/quickSortRecursive";
-import React, { Component } from 'react';
import Menu from "./menu";
import Rects from "./rects";
-class RecursiveSort extends Component {
- state = {
- count: 20,
- rects: [],
- speed: 50,
- isRunning: false,
- algo: 0
- }
+export default function RecursiveSort() {
+ const [count, setCount] = useState(20);
+ const [rects, setRects] = useState(() => getInitialRects(20));
+ const [speed, setSpeed] = useState(50);
+ const [isRunning, setIsRunning] = useState(false);
+ const [algo, setAlgo] = useState(0);
- constructor() {
- super();
- }
+ const speedRef = useRef(speed);
+ const countRef = useRef(count);
- componentDidMount() {
- var rects = getInitialRects(this.state.count);
- this.setState({ rects });
- /* var rects2 = rects.slice();
- console.log(rects2);
- rects = mergeSort(rects);
- console.log(rects);*/
+ useEffect(() => { speedRef.current = speed; }, [speed]);
+ useEffect(() => { countRef.current = count; }, [count]);
- }
-
- render() {
- return (
-
-
-
+ const handleRandomize = () => {
+ setRects(getInitialRects(count));
+ };
-
- );
- }
-
- handleRandomize = () => {
- const rect = getInitialRects(this.state.count);
- this.setState({ rects: rect });
- }
- handleRefresh = () => {
- const rects = this.state.rects;
- for (let i = 0; i < rects.length; i++) {
- const rect = { ...rects[i], isSorted: false, isSorting: false }
- rects[i] = rect;
- }
- this.setState({ rects });
- }
- handleCountChange = (val) => {
- this.setState({ count: val });
- this.handleRandomize();
- }
- handleAlgoChanged = (val) => {
- this.setState({ algo: val });
- }
- handleSpeedChanged = (val) => {
- const speed = (110 - val);
- this.setState({ speed });
- }
+ const handleCountChange = (val) => {
+ setCount(val);
+ setRects(getInitialRects(val));
+ };
- handleSort = () => {
+ const handleSpeedChanged = (val) => {
+ setSpeed(110 - val);
+ };
- this.setState({ isRunning: true });
+ const handleSort = () => {
+ setIsRunning(true);
let steps;
let rects2;
- switch (this.state.algo) {
-
+ switch (algo) {
case 0:
- steps = mergeSort(this.state.rects);
- this.handleMerge(steps);
+ steps = mergeSort(rects);
+ handleMerge(steps);
break;
case 1:
- rects2 = this.state.rects.slice();
+ rects2 = rects.slice();
steps = heapSort(rects2);
- this.handleHeap(steps);
+ handleHeap(steps);
break;
case 2:
- rects2 = this.state.rects.slice();
+ rects2 = rects.slice();
steps = quickSortRecursive(rects2);
- this.handleQuick(steps);
+ handleQuick(steps);
break;
default:
}
+ };
-
- }
-
- handleQuick = async (steps) => {
- this.setState({ isRunning: true });
- let prevRect = this.state.rects;
- for (let j = 0; j < this.state.count; j++) {
+ const handleQuick = async (steps) => {
+ let prevRect = [...rects];
+ for (let j = 0; j < countRef.current; j++) {
prevRect[j] = { ...prevRect[j], isLeft: false, isSorting: false, isRight: false, isRange: false, isSorted: false };
}
- this.setState({ rects: prevRect });
+ setRects([...prevRect]);
let hasChanged = -1;
let changed;
for (let i = 0; i < steps.length; i++) {
@@ -123,17 +72,17 @@ class RecursiveSort extends Component {
prevRect[right] = { ...prevRect[right], isLeft: false, isSorting: false, isRight: false, isRange: false };
}
if (step.changedRange) {
- await sleep(this.state.speed); await sleep(this.state.speed); await sleep(this.state.speed); await sleep(this.state.speed);
+ await sleep(speedRef.current * 4);
let { left, right } = step;
- for (let j = 0; j < this.state.count; j++) {
+ for (let j = 0; j < countRef.current; j++) {
prevRect[j] = { ...prevRect[j], isLeft: false, isSorting: false, isRight: false, isRange: false };
}
for (let j = left; j <= right; j++) {
prevRect[j] = { ...prevRect[j], isLeft: false, isSorting: false, isRight: true, isRange: true };
}
- this.setState({ rects: prevRect });
- await sleep(this.state.speed); await sleep(this.state.speed); await sleep(this.state.speed); await sleep(this.state.speed);
- for (let j = 0; j < this.state.count; j++) {
+ setRects([...prevRect]);
+ await sleep(speedRef.current * 4);
+ for (let j = 0; j < countRef.current; j++) {
prevRect[j] = { ...prevRect[j], isLeft: false, isSorting: false, isRight: false };
}
} else if (step.swap) {
@@ -146,111 +95,117 @@ class RecursiveSort extends Component {
hasChanged = 1;
changed = step;
}
- this.setState({ rects: prevRect });
- await sleep(this.state.speed);
+ setRects([...prevRect]);
+ await sleep(speedRef.current);
if (i === steps.length - 1) {
- for (let j = 0; j < this.state.count; j++) {
+ for (let j = 0; j < countRef.current; j++) {
prevRect[j] = { ...prevRect[j], isLeft: false, isSorting: false, isRight: false, isSorted: false, isRange: false };
}
- this.setState({ rects: prevRect });
- for (let j = 0; j < this.state.count; j++) {
+ setRects([...prevRect]);
+ for (let j = 0; j < countRef.current; j++) {
prevRect[j] = { ...prevRect[j], isLeft: false, isSorting: false, isRight: false, isSorted: true, isRange: false };
- this.setState({ rects: prevRect });
+ setRects([...prevRect]);
await sleep(10);
}
- this.setState({ isRunning: false, rects: prevRect });
+ setIsRunning(false);
}
}
- }
- handleHeap = async (steps) => {
- this.setState({ isRunning: true });
- let prevRect = this.state.rects;
- for (let j = 0; j < this.state.count; j++) {
+ };
+
+ const handleHeap = async (steps) => {
+ let prevRect = [...rects];
+ for (let j = 0; j < countRef.current; j++) {
prevRect[j] = { ...prevRect[j], isLeft: false, isSorting: false, isRight: false, isRange: false, isSorted: false };
}
- this.setState({ rects: prevRect });
+ setRects([...prevRect]);
for (let i = 0; i < steps.length; i++) {
let step = steps[i];
- // console.log(step);
- for (let i = 0; i < this.state.count; i++) {
- prevRect[i] = { ...prevRect[i], isLeft: false, isSorting: false, isRight: false };
+ for (let j = 0; j < countRef.current; j++) {
+ prevRect[j] = { ...prevRect[j], isLeft: false, isSorting: false, isRight: false };
}
let { left, right, sorted } = step;
prevRect[left] = { ...prevRect[left], isLeft: true };
prevRect[right] = { ...prevRect[right], isRight: true };
- this.setState({ rects: prevRect });
- await sleep(this.state.speed);
+ setRects([...prevRect]);
+ await sleep(speedRef.current);
let temp = prevRect[left];
prevRect[left] = prevRect[right];
prevRect[right] = temp;
- this.setState({ rects: prevRect });
+ setRects([...prevRect]);
if (sorted) prevRect[left] = { ...prevRect[left], isSorted: true };
- await sleep(this.state.speed); await sleep(this.state.speed); await sleep(this.state.speed);
+ await sleep(speedRef.current * 3);
if (i === steps.length - 1) {
-
- for (let i = 0; i < this.state.count; i++) {
- prevRect[i] = { ...prevRect[i], isLeft: false, isSorting: false, isRight: false, isSorted: true };
- this.setState({ rects: prevRect });
- await sleep(this.state.speed);
+ for (let j = 0; j < countRef.current; j++) {
+ prevRect[j] = { ...prevRect[j], isLeft: false, isSorting: false, isRight: false, isSorted: true };
+ setRects([...prevRect]);
+ await sleep(speedRef.current);
}
- this.setState({ isRunning: false, rects: prevRect });
+ setIsRunning(false);
}
}
- }
- handleMerge = async (steps) => {
- this.setState({ isRunning1: true });
-
- const { speed } = this.state;
+ };
- let prevRect = this.state.rects;
- for (let j = 0; j < this.state.count; j++) {
+ const handleMerge = async (steps) => {
+ let prevRect = [...rects];
+ for (let j = 0; j < countRef.current; j++) {
prevRect[j] = { ...prevRect[j], isLeft: false, isSorting: false, isRight: false, isRange: false, isSorted: false };
}
- this.setState({ rects: prevRect });
- await sleep(this.state.speed);
- // console.log("steps ", steps.length);
+ setRects([...prevRect]);
+ await sleep(speedRef.current);
+
for (let ii = 0; ii < steps.length; ii++) {
let step = steps[ii];
- for (let i = 0; i < this.state.count; i++) {
+ for (let i = 0; i < countRef.current; i++) {
prevRect[i] = { ...prevRect[i], isLeft: false, isSorting: false, isRight: false };
}
- // console.log(step.left," ",step.mid," ",step.right);
for (let i = step.left; i <= step.mid; i++) {
prevRect[i] = { ...prevRect[i], isLeft: true, isSorting: false };
}
for (let i = step.mid + 1; i <= step.right; i++) {
prevRect[i] = { ...prevRect[i], isRight: true, isLeft: false, isSorting: false };
}
- this.setState({ rects: prevRect });
- await sleep(this.state.speed); await sleep(this.state.speed); await sleep(this.state.speed);
- // console.log(step);
+ setRects([...prevRect]);
+ await sleep(speedRef.current * 3);
+
for (let i = step.left; i <= step.right; i++) {
prevRect[i] = { ...prevRect[i], width: step.val[i - step.left].width, isSorting: true };
- this.setState({ rects: prevRect });
- await sleep(this.state.speed);
+ setRects([...prevRect]);
+ await sleep(speedRef.current);
}
if (ii === steps.length - 1) {
-
- for (let i = 0; i < this.state.count; i++) {
+ for (let i = 0; i < countRef.current; i++) {
prevRect[i] = { ...prevRect[i], isLeft: false, isSorting: false, isRight: false, isSorted: true };
- this.setState({ rects: prevRect });
- await sleep(this.state.speed);
+ setRects([...prevRect]);
+ await sleep(speedRef.current);
}
- this.setState({ isRunning: false });
+ setIsRunning(false);
}
- this.setState({ rects: prevRect });
- await sleep(this.state.speed);
- prevRect = this.state.rects;
- /* for (let i = 0; i < this.state.count; i++) {
- prevRect[i] = {...prevRect[i], isLeft: false,isSorting: false,isRight:false,isSorted: false};
- }*/
- this.setState({ rects: prevRect });
+ setRects([...prevRect]);
+ await sleep(speedRef.current);
}
- }
-
+ };
+
+ return (
+
+ );
}
function sleep(ms) {
@@ -260,18 +215,13 @@ function sleep(ms) {
const getInitialRects = (tot) => {
const rects = [];
for (let i = 0; i < tot; i++) {
- rects.push(getRect());
+ rects.push({
+ width: Math.floor(Math.random() * 200) + 50,
+ isSorted: false,
+ isSorting: false,
+ isLeft: false,
+ isRight: false,
+ });
}
return rects;
-}
-const getRect = () => {
- return {
- width: Math.floor(Math.random() * 200) + 50,
- isSorted: false,
- isSorting: false,
- isLeft: false,
- isRight: false
- }
-}
-
-export default RecursiveSort;
\ No newline at end of file
+};
diff --git a/src/app/recursive-sorting/rect.jsx b/src/app/recursive-sorting/rect.jsx
index 0052362..28b529a 100644
--- a/src/app/recursive-sorting/rect.jsx
+++ b/src/app/recursive-sorting/rect.jsx
@@ -1,43 +1,28 @@
-import React, {Component} from 'react';
import './style.css';
-class Rect extends Component {
- render() {
- return (
-
{
+ if (rect.isSorted) return "green";
+ if (rect.isSorting) return "orange";
+ if (rect.isLeft) return "red";
+ if (rect.isRight) return "purple";
+ return "#ADD8E6";
+ };
+ const checkBorder = () => {
+ if (rect.isRange) return "0px solid black";
+ return "0px";
+ };
- }}
- >
-
-
- );
- }
- checkColor = () => {
- if( this.props.rect.isSorted ){
- return "green";
- } else if( this.props.rect.isSorting ){
- return "orange";
- } else if( this.props.rect.isLeft ){
- return "red";
- } else if(this.props.rect.isRight){
- return "purple";
- }else{
- return "#ADD8E6";
- }
- }
- checkBorder = () =>{
- if( this.props.rect.isRange ){
- return "0px solid black";
- } else{
- return "0px"
- }
- }
+ return (
+
+ );
}
-
-export default Rect;
\ No newline at end of file
diff --git a/src/app/recursive-sorting/rects.jsx b/src/app/recursive-sorting/rects.jsx
index 7ffb1b4..99e6bcb 100644
--- a/src/app/recursive-sorting/rects.jsx
+++ b/src/app/recursive-sorting/rects.jsx
@@ -1,7 +1,6 @@
-import React, { Component } from 'react';
import Rect from "./rect";
-const Rects = ({ rects, speed }) => {
+const Rects = ({ rects }) => {
let margin = 5;
if (rects.length > 50) {
diff --git a/src/app/sorting/menu.jsx b/src/app/sorting/menu.jsx
index cfa0ff4..2d2b83a 100644
--- a/src/app/sorting/menu.jsx
+++ b/src/app/sorting/menu.jsx
@@ -1,81 +1,96 @@
+import { useState } from 'react';
import { CustomSelect } from '@/components/custom-select';
import { CustomSlider } from '@/components/custom-slider';
import { CustomToggle } from '@/components/custom-toggle';
import { Button } from '@/components/ui/button';
-import { Component } from 'react';
-class Menu extends Component {
- isClickable = () => {
- if (this.props.disable) {
- return { cursor: "not-allowed" };
- } else {
- return {};
- }
- }
- render() {
- return (
- //
-
-
Settings
-
+import { Play, Shuffle } from 'lucide-react';
+
+export default function Menu({ disabled, onDoubleChange, onViusalize, onRandomize, onCountChange, onAlgoChanged1, onAlgoChanged2, onSpeedChange }) {
+ const [compareMode, setCompareMode] = useState(false);
+
+ const handleDoubleChange = (checked) => {
+ setCompareMode(checked);
+ onDoubleChange(checked);
+ };
+
+ return (
+
+
Sorting
+
+
+
+
- {/*
*/}
-
+ {compareMode && (
+
+ )}
+
+
+
+
- Randomize
+
-
- Visualize
+
-
- );
- }
+
+ );
}
-
-
-export default Menu;
\ No newline at end of file
diff --git a/src/app/sorting/page.jsx b/src/app/sorting/page.jsx
index 143e33e..e11c66d 100644
--- a/src/app/sorting/page.jsx
+++ b/src/app/sorting/page.jsx
@@ -1,153 +1,76 @@
"use client";
-import React, { Component } from 'react';
-
+import { useState, useEffect, useRef } from 'react';
import { quickSort } from "@/lib/algorithms/quickSort";
import { bubbleSort, insertionSort, selectionSort } from "@/lib/algorithms/sortingAlgorithms";
import Rects from "./rects";
-
import Navbar from '@/components/navbar';
import Menu from "./menu";
-class Sort extends Component {
- state = {
- count: 20,
- rects: [],
- rects2: [],
- doubles: false,
- speed: 50,
- isRunning: false,
- isRunning1: false,
- isRunning2: false,
- algo1: 0,
- algo2: 0
- }
+export default function Sort() {
+ const [count, setCount] = useState(20);
+ const [rects, setRects] = useState(() => getInitialRects(20));
+ const [rects2, setRects2] = useState(() => getInitialRects(20));
+ const [doubles, setDoubles] = useState(false);
+ const [speed, setSpeed] = useState(50);
+ const [isRunning, setIsRunning] = useState(false);
+ const [algo1, setAlgo1] = useState(0);
+ const [algo2, setAlgo2] = useState(0);
- componentDidMount() {
- const rect = getInitialRects(this.state.count);
- const rect2 = rect.slice();
- this.setState({ rects: rect, rects2: rect2 });
- }
+ const speedRef = useRef(speed);
+ const isRunning1Ref = useRef(false);
+ const isRunning2Ref = useRef(false);
- render() {
- return (
-
-
+ useEffect(() => { speedRef.current = speed; }, [speed]);
-
-
-
-
-
-
- );
- }
- handleRandomize = () => {
- const rect = getInitialRects(this.state.count);
- const rect2 = rect.slice();
- this.setState({ rects: rect, rects2: rect2 });
- }
- handleRefresh = () => {
- const rects = this.state.rects;
- for (let i = 0; i < rects.length; i++) {
- const rect = { ...rects[i], isSorted: false, isSorting: false }
- rects[i] = rect;
- }
- const rects2 = rects.slice();
- this.setState({ rects, rects2 });
- }
+ const handleRandomize = () => {
+ const rect = getInitialRects(count);
+ setRects(rect);
+ setRects2(rect.slice());
+ };
- handleDouble = (val) => {
- this.setState({ doubles: val });
- }
- handleCountChange = (val) => {
- this.setState({ count: val });
- this.handleRandomize();
- }
- handleAlgoChanged1 = (val) => {
- this.setState({ algo1: val });
- }
- handleAlgoChanged2 = (val) => {
- this.setState({ algo2: val });
- }
- handleSpeedChanged = (val) => {
- const speed = (760 - val * 7.5);
- this.setState({ speed });
- }
- handleSort = () => {
+ const handleDouble = (val) => {
+ setDoubles(val);
+ };
+
+ const handleCountChange = (val) => {
+ const rect = getInitialRects(val);
+ setCount(val);
+ setRects(rect);
+ setRects2(rect.slice());
+ };
- this.setState({ isRunning: true });
+ const handleSpeedChanged = (val) => {
+ setSpeed(760 - val * 7.5);
+ };
+
+ const handleSort = () => {
+ setIsRunning(true);
let steps1;
- switch (this.state.algo1) {
- case 0:
- steps1 = bubbleSort(this.state.rects);
- break;
- case 1:
- steps1 = selectionSort(this.state.rects);
- break;
- case 2:
- steps1 = insertionSort(this.state.rects);
- break;
- case 3:
- steps1 = quickSort(this.state.rects2);
- console.log(steps1)
- break;
- default:
- steps1 = bubbleSort(this.state.rects);
- break;
+ switch (algo1) {
+ case 0: steps1 = bubbleSort(rects); break;
+ case 1: steps1 = selectionSort(rects); break;
+ case 2: steps1 = insertionSort(rects); break;
+ case 3: steps1 = quickSort(rects2); break;
+ default: steps1 = bubbleSort(rects); break;
}
let steps2;
- if (this.state.doubles) {
-
- switch (this.state.algo2) {
- case 0:
- steps2 = bubbleSort(this.state.rects2);
- break;
- case 1:
- steps2 = selectionSort(this.state.rects2);
- break;
- case 2:
- steps2 = insertionSort(this.state.rects2);
- break;
- case 3:
- steps2 = quickSort(this.state.rects2);
- break;
- default:
- steps2 = bubbleSort(this.state.rects2);
- break;
+ if (doubles) {
+ switch (algo2) {
+ case 0: steps2 = bubbleSort(rects2); break;
+ case 1: steps2 = selectionSort(rects2); break;
+ case 2: steps2 = insertionSort(rects2); break;
+ case 3: steps2 = quickSort(rects2); break;
+ default: steps2 = bubbleSort(rects2); break;
}
-
}
- this.handleFirst(steps1);
- if (this.state.doubles) this.handleSecond(steps2);
- }
- handleFirst = async (steps) => {
- // console.log("fsdfsdfsdfasdf");
- this.setState({ isRunning1: true });
+ handleFirst(steps1);
+ if (doubles) handleSecond(steps2);
+ };
- // const steps = bubbleSort(this.state.rects);
- // console.log(steps.length);
- const prevRect = this.state.rects;
+ const handleFirst = async (steps) => {
+ isRunning1Ref.current = true;
+ const prevRect = [...rects];
for (let i = 0; i < steps.length; i++) {
- // setTimeout(()=>{
if (i !== 0) {
prevRect[steps[i - 1].xx] = { ...prevRect[steps[i - 1].xx], isSorting: false };
prevRect[steps[i - 1].yy] = { ...prevRect[steps[i - 1].yy], isSorting: false };
@@ -164,29 +87,20 @@ class Sort extends Component {
prevRect[steps[i].yy] = { ...prevRect[steps[i].yy], isSorting: true };
}
if (i === steps.length - 1) {
- this.setState({ isRunning1: false });
- if (this.state.isRunning2 === false) {
- this.setState({ isRunning: false });
+ isRunning1Ref.current = false;
+ if (!isRunning2Ref.current) {
+ setIsRunning(false);
}
}
- /* if( i === (steps.length)-2 ){
- this.setState({isRunning1:false});
- if( this.state.isRunning2 === false ){
- this.setState({isRunning:false});
- }
- prevRect[steps[i].xx] = {...prevRect[steps[i].xx],isSorting:false,isSorted:true};
- prevRect[steps[i].yy] = {...prevRect[steps[i].yy],isSorting:false,isSorted:true};
- }*/
- this.setState({ rects: prevRect });
- await sleep(this.state.speed);
- // },i*speed);
+ setRects([...prevRect]);
+ await sleep(speedRef.current);
}
- }
- handleSecond = async (steps) => {
- this.setState({ isRunning2: true });
- const prevRect = this.state.rects2;
+ };
+
+ const handleSecond = async (steps) => {
+ isRunning2Ref.current = true;
+ const prevRect = [...rects2];
for (let i = 0; i < steps.length; i++) {
- // setTimeout(()=>{
if (i !== 0) {
prevRect[steps[i - 1].xx] = { ...prevRect[steps[i - 1].xx], isSorting: false };
prevRect[steps[i - 1].yy] = { ...prevRect[steps[i - 1].yy], isSorting: false };
@@ -203,43 +117,53 @@ class Sort extends Component {
prevRect[steps[i].yy] = { ...prevRect[steps[i].yy], isSorting: true };
}
if (i === steps.length - 1) {
- this.setState({ isRunning2: false });
- if (this.state.isRunning1 === false) {
- this.setState({ isRunning: false });
+ isRunning2Ref.current = false;
+ if (!isRunning1Ref.current) {
+ setIsRunning(false);
}
}
- /* if( i === (steps.length)-2 ){
- prevRect[steps[i].xx] = {...prevRect[steps[i].xx],isSorting:false,isSorted:true};
- prevRect[steps[i].yy] = {...prevRect[steps[i].yy],isSorting:false,isSorted:true};
- this.setState({isRunning2:false});
- if( this.state.isRunning1 === false ){
- this.setState({isRunning:false});
- }
- }*/
- this.setState({ rects2: prevRect });
- await sleep(this.state.speed);
- // },i*speed);
+ setRects2([...prevRect]);
+ await sleep(speedRef.current);
}
- }
-
+ };
+ return (
+
+
+
+
+
+
+
+
+ );
}
+
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
+
const getInitialRects = (tot) => {
const rects = [];
for (let i = 0; i < tot; i++) {
- rects.push(getRect(i));
+ rects.push({
+ width: Math.floor(Math.random() * 200) + 50,
+ isSorted: false,
+ isSorting: false,
+ kk: i,
+ });
}
return rects;
-}
-const getRect = (kk) => {
- return {
- width: Math.floor(Math.random() * 200) + 50,
- isSorted: false,
- isSorting: false,
- kk: kk
- }
-}
-export default Sort;
+};
diff --git a/src/app/sorting/rects.jsx b/src/app/sorting/rects.jsx
index fc9711f..4023e4d 100644
--- a/src/app/sorting/rects.jsx
+++ b/src/app/sorting/rects.jsx
@@ -1,4 +1,3 @@
-import React from 'react';
import FlipMove from 'react-flip-move';
import Rect from "./rect";
diff --git a/src/app/turing-machine/menu.jsx b/src/app/turing-machine/menu.jsx
index 38c0379..dff9d23 100644
--- a/src/app/turing-machine/menu.jsx
+++ b/src/app/turing-machine/menu.jsx
@@ -1,60 +1,68 @@
-import React, { Component } from 'react';
-
import { CustomSelect } from '@/components/custom-select';
import { Button } from '@/components/ui/button';
+import { Play, RotateCcw } from 'lucide-react';
+export default function Menu({ visualize, onAlgoChanged, onReset, setInput1, setInput2, disabled }) {
+ return (
+
+
Turing Machine
-class Menu extends Component {
- render() {
- return (
-
-
Settings
+
-
+
+
Reset
-
+ onClick={visualize}
+ disabled={disabled}
+ >
+
Visualize
+
Visualize
-
+ variant="outline"
+ onClick={onReset}
+ disabled={disabled}
+ >
+
Reset
+
- );
- }
- isClickable = () => {
- if (this.props.disable) {
- return { cursor: "not-allowed" };
- } else {
- return {};
- }
- }
+
+ );
}
-
-
-export default Menu;
\ No newline at end of file
diff --git a/src/app/turing-machine/page.jsx b/src/app/turing-machine/page.jsx
index 8dc8c57..8cbf175 100644
--- a/src/app/turing-machine/page.jsx
+++ b/src/app/turing-machine/page.jsx
@@ -1,213 +1,182 @@
"use client";
+import { useState, useEffect, useRef } from 'react';
import Navbar from '@/components/navbar';
import { Button } from '@/components/ui/button';
import { getNextStep, getTable } from '@/lib/algorithms/turing';
-import { Component } from 'react';
import Menu from "./menu";
import Ribbon from "./ribbon";
import Table from "./table";
-
-class TuringMachine extends Component {
- constructor() {
- super();
- this.state = {
- cellCount: 0,
- cellStart: 0,
- cellEnd: 0,
- midCell: 0,
- strip: [],
- inputString1: "",
- inputString2: "",
- table: [],
- algo: 0,
- state: -1
- }
- }
-
- componentDidMount() {
- getNextStep('100');
- this.handleReset();
- }
-
- handleLeftShift = () => {
- this.setState({
- cellStart: this.state.cellStart + 1,
- cellEnd: this.state.cellEnd + 1,
- midCell: this.state.midCell + 1
- });
- }
- handleRightShift = () => {
- this.setState({
- cellStart: this.state.cellStart - 1,
- cellEnd: this.state.cellEnd - 1,
- midCell: this.state.midCell - 1
- });
- }
-
- handleSet = () => {
- this.handleReset();
- let string = this.state.inputString1;
- let strip = [...this.state.strip];
- for (let i = 0; i < string.length; i++) {
- strip[50 + i] = {
- ...strip[50 + i],
- val: string[i]
- }
- }
- this.setState({ strip });
- }
- handleReset = () => {
+export default function TuringMachine() {
+ const [strip, setStrip] = useState([]);
+ const [inputString1, setInputString1] = useState("");
+ const [algo, setAlgo] = useState(0);
+ const [currentState, setCurrentState] = useState(-1);
+ const [isRunning, setIsRunning] = useState(false);
+ const [cellStart, setCellStart] = useState(0);
+ const [cellEnd, setCellEnd] = useState(0);
+ const [midCell, setMidCell] = useState(0);
+
+ const stripRef = useRef(strip);
+ const midCellRef = useRef(midCell);
+ const algoRef = useRef(algo);
+
+ useEffect(() => { stripRef.current = strip; }, [strip]);
+ useEffect(() => { midCellRef.current = midCell; }, [midCell]);
+ useEffect(() => { algoRef.current = algo; }, [algo]);
+
+ const handleReset = () => {
const width = window.innerWidth;
- const height = window.innerHeight;
let cellCount = Math.floor(width / 50);
if (cellCount % 2 === 0) cellCount--;
- let strip = [...this.state.strip];
- if (strip.length === 0) strip = getInitialGrid(cellCount);
- for (let i = 0; i < strip.length; i++)
- strip[i].val = 'B';
-
- this.setState({ strip, midCell: 50 });
- let cellStart, cellEnd;
- cellStart = 50 + (1 - cellCount) / 2;
- cellEnd = 50 + (cellCount - 1) / 2;
- this.setState({ cellStart, cellEnd, state: -1 });
- }
-
- handleStart = () => {
- this.handleSet();
- this.handleAlgo();
- }
-
- handleAlgo = async () => {
+ let newStrip = [...stripRef.current];
+ if (newStrip.length === 0) newStrip = getInitialGrid();
+ for (let i = 0; i < newStrip.length; i++) newStrip[i] = { ...newStrip[i], val: 'B' };
+
+ setStrip(newStrip);
+ stripRef.current = newStrip;
+ setMidCell(50);
+ midCellRef.current = 50;
+ const start = 50 + (1 - cellCount) / 2;
+ const end = 50 + (cellCount - 1) / 2;
+ setCellStart(start);
+ setCellEnd(end);
+ setCurrentState(-1);
+ };
+
+ useEffect(() => {
+ getNextStep('100');
+ handleReset();
+ }, []);
+
+ const handleLeftShift = () => {
+ setCellStart(s => s + 1);
+ setCellEnd(e => e + 1);
+ setMidCell(m => m + 1);
+ midCellRef.current += 1;
+ };
+
+ const handleRightShift = () => {
+ setCellStart(s => s - 1);
+ setCellEnd(e => e - 1);
+ setMidCell(m => m - 1);
+ midCellRef.current -= 1;
+ };
+
+ const handleSet = () => {
+ handleReset();
+ const string = inputString1;
+ const newStrip = [...stripRef.current];
+ for (let i = 0; i < string.length; i++) {
+ newStrip[50 + i] = { ...newStrip[50 + i], val: string[i] };
+ }
+ setStrip(newStrip);
+ stripRef.current = newStrip;
+ };
+
+ const handleStart = () => {
+ if (isRunning) return;
+ setIsRunning(true);
+ handleSet();
+ handleAlgo();
+ };
+
+ const handleAlgo = async () => {
await sleep(500);
let state = 'q0';
- while (state != 'qe') {
-
- let read = this.state.strip[this.state.midCell].val;
+ while (state !== 'qe') {
+ let read = stripRef.current[midCellRef.current].val;
read = read.toString();
- let [nextState, write, dir, rowIdx] = getNextStep(state, read, this.state.algo);
- this.setState({ state: rowIdx });
- let strip = [...this.state.strip];
- strip[this.state.midCell].val = write;
+ let [nextState, write, dir, rowIdx] = getNextStep(state, read, algoRef.current);
+ setCurrentState(rowIdx);
+ const newStrip = [...stripRef.current];
+ newStrip[midCellRef.current] = { ...newStrip[midCellRef.current], val: write };
document.getElementById('stepsText').innerText = 'Reads ' + read + ' on strip';
await sleep(1000);
document.getElementById('stepsText').innerText = 'writes ' + write + ' on strip';
- this.setState({ strip });
+ setStrip(newStrip);
+ stripRef.current = newStrip;
await sleep(500);
- if (dir === 'R') this.handleLeftShift();
- else this.handleRightShift();
+ if (dir === 'R') handleLeftShift();
+ else handleRightShift();
state = nextState;
}
- }
-
- setInput1 = (event) => {
- let input = event.target.value;
- const filtered = [...input].filter((item) => item === "0" || item === "1").slice(0, 8).join("");
- this.setState({ inputString1: filtered });
- }
- setInput2 = (event) => {
- let input = event.target.value;
- const filtered = [...input].filter((item) => item === "0" || item === "1").slice(0, 8).join("");
- this.setState({ inputString2: filtered });
- }
- setAlgo = (val) => {
- this.setState({ algo: val });
- }
-
- render() {
- return (
-
-
-
-
+ setIsRunning(false);
+ };
+
+ const handleSetInput1 = (event) => {
+ const filtered = [...event.target.value].filter(c => c === "0" || c === "1").slice(0, 8).join("");
+ setInputString1(filtered);
+ };
+
+ const handleSetInput2 = (_event) => {
+ // placeholder for second input
+ };
+
+ return (
+
+
+
-
- {/*
Turing Machine */}
+
-
-
-
+
+
-
-
-
+
+
-
-
-
-
-
+
+
-
-
+
+
Details goes here
-
- {/**/}
-
+
-
- );
- }
+
+ );
}
-const getInitialGrid = (totCellCount) => {
+const getInitialGrid = () => {
const strip = [];
for (let cell = 0; cell <= 100; cell++) {
- let currentCell = {
- id: cell,
- val: 'B'
- }
- strip.push(currentCell);
+ strip.push({ id: cell, val: 'B' });
}
return strip;
-}
+};
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
-
-export default TuringMachine;
\ No newline at end of file
diff --git a/src/app/turing-machine/ribbon.jsx b/src/app/turing-machine/ribbon.jsx
index 42854ec..0869786 100644
--- a/src/app/turing-machine/ribbon.jsx
+++ b/src/app/turing-machine/ribbon.jsx
@@ -1,8 +1,7 @@
-import React, { Component } from 'react';
import Cell from "./cell";
import FlipMove from 'react-flip-move';
-const Ribbon = ({ strip, midCell, cellCount, cellStart, cellEnd }) => {
+const Ribbon = ({ strip, cellStart, cellEnd }) => {
return (
{
>
{strip
.filter(cell => cell.id >= cellStart && cell.id <= cellEnd)
- .map((cell, cellidx) => {
+ .map((cell) => {
return (
-
-
+export default function Table({ data, state }) {
+ return (
+
+
+
State
Input
@@ -13,24 +10,19 @@ class Table extends Component {
Output
Direction
-
-
- {this.props.data.map( (row,rowidx)=>{
- return (
-
- {row[0]}
- {row[1]}
- {row[2]}
- {row[3]}
- {row[4]}
-
- );
- } )}
-
-
-
+
+ {data.map((row, rowidx) => (
+
+ {row[0]}
+ {row[1]}
+ {row[2]}
+ {row[3]}
+ {row[4]}
+
+ ))}
+
+
+ |
+ );
}
-
-export default Table;
\ No newline at end of file
diff --git a/src/components/custom-select.jsx b/src/components/custom-select.jsx
index 534f942..95ddf70 100644
--- a/src/components/custom-select.jsx
+++ b/src/components/custom-select.jsx
@@ -1,4 +1,4 @@
-import * as React from "react"
+import { useState } from "react"
import {
Select,
SelectContent,
@@ -7,21 +7,17 @@ import {
SelectValue,
} from "@/components/ui/select"
-
-
-export function CustomSelect({ title, options, onChange }) {
- const [value, setValue] = React.useState(0)
+export function CustomSelect({ title, options, onChange, disabled }) {
+ const [value, setValue] = useState(0)
const onChangeCover = (value) => {
setValue(value)
onChange(value)
}
return (
- {/*
*/}
{title}
-
+
- {/* */}
@@ -35,4 +31,3 @@ export function CustomSelect({ title, options, onChange }) {
)
}
-
diff --git a/src/components/custom-slider.jsx b/src/components/custom-slider.jsx
index 82bed58..d97e37a 100644
--- a/src/components/custom-slider.jsx
+++ b/src/components/custom-slider.jsx
@@ -1,18 +1,16 @@
-import * as React from "react"
+import { useState } from "react"
import { Slider } from "@/components/ui/slider"
-
-export function CustomSlider({ title, onChange, min, max, step, defaultValue }) {
- const [value, setValue] = React.useState(defaultValue)
- const onChangeCover = (value) => {
- setValue(value)
- onChange(value)
+export function CustomSlider({ title, onChange, min, max, step, defaultValue, disabled }) {
+ const [value, setValue] = useState(defaultValue)
+ const onChangeCover = (values) => {
+ const val = values[0]
+ setValue(val)
+ onChange(val)
}
-
return (
- {/*
*/}
{title}
{value}
)
}
-
diff --git a/src/components/custom-toggle.jsx b/src/components/custom-toggle.jsx
index 2c2e559..bd8b289 100644
--- a/src/components/custom-toggle.jsx
+++ b/src/components/custom-toggle.jsx
@@ -1,21 +1,15 @@
-import * as React from "react"
+import { useState } from "react"
import { Switch } from "@/components/ui/switch"
-// interface CustomToggleProps {
-// title: string
-// checked: boolean
-// onCheckedChange: (checked: boolean) => void
-// }
-
-export function CustomToggle({ title, onCheckedChange }) {
- const [checked, setChecked] = React.useState(false)
+export function CustomToggle({ title, onCheckedChange, disabled }) {
+ const [checked, setChecked] = useState(false)
const onCheckedChangeCover = (checked) => {
setChecked(checked)
onCheckedChange(checked)
}
return (
-
+
)
}
-
diff --git a/src/components/navbar.jsx b/src/components/navbar.jsx
index 836ef00..c20d2ca 100644
--- a/src/components/navbar.jsx
+++ b/src/components/navbar.jsx
@@ -1,11 +1,11 @@
import Link from 'next/link'
import { Button } from "@/components/ui/button"
-import { Github, Home } from 'lucide-react'
+import { Github, Home, Info } from 'lucide-react'
-export default function Navbar(props) {
+export default function Navbar() {
return (
-
-
-
-
+
diff --git a/src/components/ui/slider.jsx b/src/components/ui/slider.jsx
index 62048f3..25199ba 100644
--- a/src/components/ui/slider.jsx
+++ b/src/components/ui/slider.jsx
@@ -8,7 +8,7 @@ import { cn } from "@/lib/utils"
const Slider = React.forwardRef(({ className, ...props }, ref) => (
diff --git a/src/lib/algorithms/grahamScan.js b/src/lib/algorithms/grahamScan.js
index 64257fd..845305b 100644
--- a/src/lib/algorithms/grahamScan.js
+++ b/src/lib/algorithms/grahamScan.js
@@ -57,7 +57,6 @@ export function convex_hull(points){
}
function cw(a, b, c) {
- const f = a.xx*(b.yy-c.yy)+b.xx*(c.yy-a.yy)+c.xx*(a.yy-b.yy);
if( a.xx*(b.yy-c.yy)+b.xx*(c.yy-a.yy)+c.xx*(a.yy-b.yy) < 0 ){
return true;
} else{
diff --git a/src/lib/algorithms/recursiveMaze.js b/src/lib/algorithms/recursiveMaze.js
index 931e5dd..f607013 100644
--- a/src/lib/algorithms/recursiveMaze.js
+++ b/src/lib/algorithms/recursiveMaze.js
@@ -33,11 +33,7 @@ export function getMaze(board,row,col){
//console.log("here");
return pairs;
}
-let val = 0;
-
function decideMaze(pairs,board,startRow,endRow,startCol,endCol) {
- //console.log("count");
- val++;
if( ((endRow-startRow) <=1) && ((endCol - startCol) <=1) ){
return;
diff --git a/src/lib/helpers/array_helpers.js b/src/lib/helpers/array_helpers.js
index a1a942f..b474c9d 100644
--- a/src/lib/helpers/array_helpers.js
+++ b/src/lib/helpers/array_helpers.js
@@ -56,5 +56,5 @@ Array.range = n => Array.from(new Array(n), (x,i) => i);
Array.matrix = (x, y) => {
const rows = Array.range(y);
const columns = Array.range(x);
- return rows.map( (row, i) => columns.slice() );
+ return rows.map( () => columns.slice() );
}