Skip to content

Commit bc8d2ec

Browse files
https-samhttps-sam
committed
added messages for shortcuts
1 parent cb41611 commit bc8d2ec

File tree

2 files changed

+72
-30
lines changed

2 files changed

+72
-30
lines changed

‎src/components/Canvas/Description/NormalParagraph.js‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
1-
import React from 'react'
1+
import React from "react";
22

3-
function NormalParagraph({text}) {
3+
function NormalParagraph({ text }) {
44
return (
5-
<p className="font-medium text-[1.1em] text-gray-700 dark:text-textGray inline">{text}</p>
6-
)
5+
<p className="font-medium text-[1em] text-gray-700 dark:text-textGray inline">
6+
{text}
7+
</p>
8+
);
79
}
810

9-
export default NormalParagraph
11+
export default NormalParagraph;

‎src/components/Canvas/Description/SortingCanvasDescription.js‎

Lines changed: 65 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,82 @@
1-
import React from 'react'
2-
import { ReactComponent as CPU } from '../../../img/cpu.svg'
3-
import { ReactComponent as UnsortedBars } from '../../../img/unsortedBars.svg'
4-
import { ReactComponent as SortedBars } from '../../../img/sortedBars.svg'
5-
import { ReactComponent as Runner } from '../../../img/running.svg'
6-
import { ReactComponent as Speed } from '../../../img/Speed.svg'
7-
import { ReactComponent as Key } from '../../../img/key.svg'
8-
import BoldParagraph from './BoldParagraph'
9-
import NormalParagraph from './NormalParagraph'
10-
import { InputHandler } from '../../InputHandler/InputHandler'
11-
1+
import React from "react";
2+
import { ReactComponent as CPU } from "../../../img/cpu.svg";
3+
import { ReactComponent as UnsortedBars } from "../../../img/unsortedBars.svg";
4+
import { ReactComponent as SortedBars } from "../../../img/sortedBars.svg";
5+
import { ReactComponent as Runner } from "../../../img/running.svg";
6+
import { ReactComponent as Speed } from "../../../img/Speed.svg";
7+
import { ReactComponent as Key } from "../../../img/key.svg";
8+
import BoldParagraph from "./BoldParagraph";
9+
import NormalParagraph from "./NormalParagraph";
10+
import { InputHandler } from "../../InputHandler/InputHandler";
1211

1312
const SortingCanvasDescription = () => {
1413
return (
1514
<div className="z-10 self-center font-sans max-w-[90vw] text-gray-700 dark:text-white mt-10 xl:mt-0 md:pt-0">
16-
<p className="text-[1.5em] md:text-[2.8em] font-bold mb-5">Welcome to Sorting Visualizer</p>
15+
<p className="text-[1.3em] md:text-[2.2em] font-bold mb-5">
16+
Welcome to Sorting Visualizer
17+
</p>
1718
<div>
18-
<span className="font-medium text-[1.1em] text-gray-700 dark:text-textGray">Let's start by entering a number. It will generate an array of the input length with <BoldParagraph text="random numbers"/>.</span><br/>
19-
<span className="font-medium text-[1.1em] text-gray-700 dark:text-textGray">Next, select an <BoldParagraph text="algorithm"/> and press the <BoldParagraph text="play"/> button.</span>
19+
<span className="font-medium text-[1em] text-gray-700 dark:text-textGray">
20+
Let's start by entering a number. It will generate an array of the
21+
input length with <BoldParagraph text="random numbers" />.
22+
</span>
23+
<br />
24+
<span className="font-medium text-[1em] text-gray-700 dark:text-textGray">
25+
Next, select an <BoldParagraph text="algorithm" /> and press the{" "}
26+
<BoldParagraph text="play" /> button.
27+
</span>
2028
</div>
2129

2230
<div className="mt-4">
23-
<span className="font-medium text-[1.1em] text-gray-700 dark:text-textGray">The maximum input is currently limited to <BoldParagraph text={InputHandler.getAllowedMaxInputSize()}/>. To play with a larger number, increase the window size and refresh the page.</span>
31+
<span className="font-medium text-[1em] text-gray-700 dark:text-textGray">
32+
The maximum input is currently limited to{" "}
33+
<BoldParagraph text={InputHandler.getAllowedMaxInputSize()} />. To
34+
play with a larger number, increase the window size and refresh the
35+
page <br />
36+
(or press "⌘" + "-" on Mac, "ctrl" + "-" on windows).
37+
</span>
2438
</div>
2539

2640
<div className="mt-[4em] mb-10">
2741
<p className="text-[1.3em] font-semibold">Options</p>
28-
<p className="m-3 font-medium text-[1em] text-gray-700 dark:text-textGray">*Some options are not available in some algorithms</p>
42+
<p className="m-3 font-medium text-[1em] text-gray-700 dark:text-textGray">
43+
*Some options are not available in some algorithms
44+
</p>
2945
<li className="list-none mt-5 space-y-3">
30-
<ul className="space-x-2"><UnsortedBars className="mr-2 dark:stroke-textGray stroke-[#7B7B7c] scale-[1.2] inline "/><BoldParagraph text="Unsorted"/><NormalParagraph text="bars color"/></ul>
31-
<ul className="space-x-2"><SortedBars className="mr-2 dark:stroke-textGray stroke-[#7B7B7c] scale-[1.2] inline "/><BoldParagraph text="Sorted"/><NormalParagraph text="bars color"/></ul>
32-
<ul className="space-x-2"><CPU className="mr-2 dark:stroke-textGray stroke-[#7B7B7c] scale-[1.2] inline "/><BoldParagraph text="Processing"/><NormalParagraph text="bars color"/></ul>
33-
<ul className="space-x-2"><Key className="mr-2 dark:stroke-textGray stroke-[#7B7B7c] scale-[1.2] inline "/><BoldParagraph text="Key"/><NormalParagraph text="bars color"/></ul>
34-
<ul className="space-x-2"><Speed className="mr-2 dark:stroke-textGray stroke-[#7B7B7c] scale-[1.2] inline "/><NormalParagraph text="Animation"/><BoldParagraph text="delay"/></ul>
35-
<ul className="space-x-2"><Runner className="mr-2 dark:stroke-textGray stroke-[#7B7B7c] scale-[1.2] inline "/><BoldParagraph text="Faster"/><NormalParagraph text="animation (skips some animations)"/> </ul>
46+
<ul className="space-x-2">
47+
<UnsortedBars className="mr-2 dark:stroke-textGray stroke-[#7B7B7c] scale-[1.2] inline " />
48+
<BoldParagraph text="Unsorted" />
49+
<NormalParagraph text="bars color" />
50+
</ul>
51+
<ul className="space-x-2">
52+
<SortedBars className="mr-2 dark:stroke-textGray stroke-[#7B7B7c] scale-[1.2] inline " />
53+
<BoldParagraph text="Sorted" />
54+
<NormalParagraph text="bars color" />
55+
</ul>
56+
<ul className="space-x-2">
57+
<CPU className="mr-2 dark:stroke-textGray stroke-[#7B7B7c] scale-[1.2] inline " />
58+
<BoldParagraph text="Processing" />
59+
<NormalParagraph text="bars color" />
60+
</ul>
61+
<ul className="space-x-2">
62+
<Key className="mr-2 dark:stroke-textGray stroke-[#7B7B7c] scale-[1.2] inline " />
63+
<BoldParagraph text="Key" />
64+
<NormalParagraph text="bars color" />
65+
</ul>
66+
<ul className="space-x-2">
67+
<Speed className="mr-2 dark:stroke-textGray stroke-[#7B7B7c] scale-[1.2] inline " />
68+
<NormalParagraph text="Animation" />
69+
<BoldParagraph text="delay" />
70+
</ul>
71+
<ul className="space-x-2">
72+
<Runner className="mr-2 dark:stroke-textGray stroke-[#7B7B7c] scale-[1.2] inline " />
73+
<BoldParagraph text="Faster" />
74+
<NormalParagraph text="animation (skips some animations)" />{" "}
75+
</ul>
3676
</li>
3777
</div>
3878
</div>
39-
)
40-
}
79+
);
80+
};
4181

42-
export default SortingCanvasDescription;
82+
export default SortingCanvasDescription;

0 commit comments

Comments
 (0)