Skip to content

Commit 6e66aa8

Browse files
https-samhttps-sam
committed
height message
1 parent bc8d2ec commit 6e66aa8

3 files changed

Lines changed: 75 additions & 25 deletions

File tree

‎src/components/Canvas/Canvas.js‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,9 @@ class Canvas extends Component {
2525
const FONT_SIZE = Math.floor(BAR_WIDTH * 0.4);
2626
const PINK = "#ff595e";
2727
const PURPLE = "#6a4c93";
28+
const SHOW_HEIGHT_MAX_BARS = Math.floor((window.innerWidth - MARGIN) / 28);
29+
30+
// Math.floor((SCREEN_WIDTH - MARGIN * inputArrayLength) / inputArrayLength);
2831

2932
return (
3033
<div
@@ -67,7 +70,9 @@ class Canvas extends Component {
6770
);
6871
})
6972
) : (
70-
<SortingCanvasDescription />
73+
<SortingCanvasDescription
74+
maxBarsToShowHeight={SHOW_HEIGHT_MAX_BARS}
75+
/>
7176
)}
7277
</div>
7378
<div className="main-canvas-grid z-0 dark:opacity-[0.03]" />

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

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,8 @@ import BoldParagraph from "./BoldParagraph";
99
import NormalParagraph from "./NormalParagraph";
1010
import { InputHandler } from "../../InputHandler/InputHandler";
1111

12-
const SortingCanvasDescription = () => {
12+
const SortingCanvasDescription = ({ maxBarsToShowHeight }) => {
13+
console.log(maxBarsToShowHeight);
1314
return (
1415
<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">
1516
<p className="text-[1.3em] md:text-[2.2em] font-bold mb-5">
@@ -73,6 +74,16 @@ const SortingCanvasDescription = () => {
7374
<BoldParagraph text="Faster" />
7475
<NormalParagraph text="animation (skips some animations)" />{" "}
7576
</ul>
77+
<ul className="space-x-2">
78+
<span className="mx-1 mr-[.3em] font-semibold text-[1.7em] dark:stroke-textGray text-textGray">
79+
H
80+
</span>
81+
<NormalParagraph text="Show bar" />
82+
<BoldParagraph text="Height" />
83+
<NormalParagraph text="(Input must be less than" />
84+
<BoldParagraph text={maxBarsToShowHeight} />
85+
<NormalParagraph text="bars)" />
86+
</ul>
7687
</li>
7788
</div>
7889
</div>

‎src/components/Canvas/ShowValue.js‎

Lines changed: 57 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,66 @@
1-
import React, { useState } from 'react'
2-
import { CONSTANTS } from '../../Utility/config';
1+
import React, { useState } from "react";
2+
import { CONSTANTS } from "../../Utility/config";
33

4-
function ShowValue({mainCanvasInputHandler, inputArrayLength}) {
4+
function ShowValue({ mainCanvasInputHandler, inputArrayLength }) {
55
const MARGIN = CONSTANTS.margin;
66
const SCREEN_WIDTH = window.innerWidth;
7-
const BAR_WIDTH = Math.floor((SCREEN_WIDTH - (MARGIN*inputArrayLength)) / inputArrayLength);
7+
const BAR_WIDTH = Math.floor(
8+
(SCREEN_WIDTH - MARGIN * inputArrayLength) / inputArrayLength
9+
);
810

9-
10-
const [enable, setEnable] = useState(JSON.parse(localStorage.getItem('options'))?.showHeight || false);
11+
const [enable, setEnable] = useState(
12+
JSON.parse(localStorage.getItem("options"))?.showHeight || false
13+
);
1114
return (
12-
<div className={`${BAR_WIDTH > 25 ? 'block' : 'hidden'} h-[2.6em] dark:lg:hover:bg-gray-500 lg:hover:bg-lightGreen group relative rounded-md ${mainCanvasInputHandler.state.options.showHeight && "dark:bg-gray-200 bg-lightGreen"}`} onClick={() => {
13-
mainCanvasInputHandler.setState(prev => ({options: {...prev.options, showHeight: !mainCanvasInputHandler.state.options.showHeight}}));
14-
setEnable(!enable);
15-
let j = JSON.parse(localStorage.getItem('options'));
16-
if(j) {
17-
j["showHeight"] = !enable;
18-
localStorage.setItem('options', JSON.stringify(j))
19-
}
20-
}}>
21-
22-
<div className={`flex items-center justify-center relative cursor-pointer h-full dark:border-[1px] border-2 dark:border-gray-200 border-gray-300 rounded-md ${mainCanvasInputHandler.state.options.showHeight && "dark:border-gray-400"}`}>
15+
<div
16+
className={`${
17+
BAR_WIDTH > 25 ? "block" : "hidden"
18+
} h-[2.6em] dark:lg:hover:bg-gray-500 lg:hover:bg-lightGreen group relative rounded-md ${
19+
mainCanvasInputHandler.state.options.showHeight &&
20+
"dark:bg-gray-200 bg-lightGreen"
21+
}`}
22+
onClick={() => {
23+
mainCanvasInputHandler.setState((prev) => ({
24+
options: {
25+
...prev.options,
26+
showHeight: !mainCanvasInputHandler.state.options.showHeight,
27+
},
28+
}));
29+
setEnable(!enable);
30+
let j = JSON.parse(localStorage.getItem("options"));
31+
if (j) {
32+
j["showHeight"] = !enable;
33+
localStorage.setItem("options", JSON.stringify(j));
34+
}
35+
}}
36+
>
37+
<div
38+
className={`flex items-center justify-center relative cursor-pointer h-full dark:border-[1px] border-2 dark:border-gray-200 border-gray-300 rounded-md ${
39+
mainCanvasInputHandler.state.options.showHeight &&
40+
"dark:border-gray-400"
41+
}`}
42+
>
2343
<div className={`p-2 peer group`}>
24-
{<div className={`scale-[1.3] lg:group-hover:text-white ${mainCanvasInputHandler.state.options.showHeight ? "text-white dark:text-[#7B7B7c]" : "text-[#7B7B7c]"} w-5 text-center font-bold`}>H</div>}
25-
</div>
26-
</div>
27-
<p className={`shadow-lg bg-white z-10 text-[.9em] absolute top-[4.4em] left-[50%] -translate-x-[50%] p-2 rounded-md hidden group-hover:block tool-tip-options text-gray-600 whitespace-nowrap font-semibold`}>Show height</p>
44+
{
45+
<div
46+
className={`scale-[1.3] lg:group-hover:text-white ${
47+
mainCanvasInputHandler.state.options.showHeight
48+
? "text-white dark:text-[#7B7B7c]"
49+
: "text-[#7B7B7c]"
50+
} w-5 text-center font-bold`}
51+
>
52+
H
53+
</div>
54+
}
55+
</div>
56+
</div>
57+
<p
58+
className={`shadow-lg bg-white z-10 text-[.9em] absolute top-[4.4em] left-[50%] -translate-x-[50%] p-2 rounded-md hidden group-hover:block tool-tip-options text-gray-600 whitespace-nowrap font-semibold`}
59+
>
60+
Show height
61+
</p>
2862
</div>
29-
)
63+
);
3064
}
3165

32-
export default ShowValue;
66+
export default ShowValue;

0 commit comments

Comments
 (0)