{"ast":null,"code":"var _jsxFileName = \"D:\\\\Project\\\\UC_Trains_Voice\\\\react-demo\\\\src\\\\Canvas\\\\Stair.tsx\",\n  _s = $RefreshSig$();\nimport React, { useEffect, useState } from 'react';\nimport { map, drawBackground } from '../function/canvasDefault';\nimport { Col, Row, Slider } from 'antd';\n// types\nimport { useCanvasHooks } from '../hooks/useCanvasHooks'; // variables and functions\nimport { useTemString } from '../hooks/useTemString';\nimport useCanvasMouseText from '../hooksUseEffect/useCanvasMouseText';\nimport useCanvasRetry from '../hooksUseEffect/useCanvasRetry';\nimport useCanvasUpdatePitch from '../hooksUseEffect/useCanvasUpdatePitch';\nimport useCanvasAdjustHeight from '../hooksUseEffect/useCanvasAdjustHeight';\nimport useCanvasInitializeGetPitch from '../hooksUseEffect/useCanvasInitializeGetPitch';\nimport useCanvasChangeHzAndNotes from '../hooksUseEffect/useCanvasChangeHzAndNotes';\nimport useCanvasRedrawBackground from '../hooksUseEffect/useCanvasRedrawBackground';\n// variables from Sample.tsx\nimport { jsxDEV as _jsxDEV } from \"react/jsx-dev-runtime\";\nconst Stair = ({\n  setMaxLyricCount,\n  initialRange,\n  divisor,\n  txtShow,\n  isRetry,\n  setPlayingPause,\n  playLyricCount,\n  config,\n  COLORS,\n  size,\n  isPlaying,\n  showNotesPar,\n  setShowNotesPar\n}) => {\n  _s();\n  var _notesLabel$map, _freqLabel$map, _freqLabel$map2;\n  const {\n    pitch,\n    setPitch,\n    mouseHeight,\n    setMouseHeight,\n    realVoiceColor,\n    targetVoiceColor,\n    closeVoiceColor,\n    ballYCurr,\n    setBallYCurr,\n    canvasRef,\n    rectWidth,\n    CanvasLength,\n    canvasHeight,\n    setCanvasHeight,\n    showNotes,\n    setShowNotes,\n    offset,\n    currentX,\n    setCurrentX,\n    initialcurrentX,\n    notesLabel,\n    setNotesLabel,\n    freqLabel,\n    setFreqLabel,\n    updateBallY,\n    updateCanvasHeight,\n    handleMouseMove\n  } = useCanvasHooks(size, divisor, COLORS, initialRange);\n  const {\n    syllablesString\n  } = useTemString();\n  const [inputValue, setInputValue] = useState([110, 200]);\n  const desiredLength = Math.floor(size[1] / divisor);\n\n  // Initialization curve\n  const initialColorChangesFull = new Array(CanvasLength).fill(false);\n  const initialBallHistoryFull = new Array(CanvasLength).fill(NaN);\n  const [colorChangesFull, setColorChangesFull] = useState(initialColorChangesFull);\n  const [ballHistoryFull, setBallHistoryFull] = useState(initialBallHistoryFull);\n  const resetStatesFull = () => {\n    setColorChangesFull([...initialColorChangesFull]);\n    setBallHistoryFull([...initialBallHistoryFull]);\n    setCurrentX(initialcurrentX);\n  };\n  const initialPitchArrayCus = new Array(desiredLength).fill(NaN);\n  const [pitchArrayCus, setPitchArrayCus] = useState(initialPitchArrayCus);\n  const [shouldDisabled, setShouldDisabled] = useState(false);\n\n  // +++++++++++++++++++++++++++++++++++++++++++++++++\n  // Setting the stair curve\n  const onChange = newValue => {\n    setInputValue(newValue);\n    // setA(a+1);\n  };\n  const updatePitchArrayCus = () => {\n    const partLength = Math.floor(CanvasLength / 5);\n    const lastPartStart = partLength * 4;\n    const midValue = (inputValue[0] + inputValue[1]) / 2;\n    const updatedArray = new Array(CanvasLength).fill(inputValue[0], 0, partLength).fill(midValue, partLength, 2 * partLength).fill(inputValue[1], 2 * partLength, 3 * partLength).fill(midValue, 3 * partLength, 4 * partLength).fill(inputValue[0], lastPartStart, CanvasLength);\n    setPitchArrayCus(updatedArray);\n  };\n  useEffect(() => {\n    updatePitchArrayCus();\n  }, [inputValue]);\n\n  // +++++++++++++++++++++++++++++++++++++++++++++++++\n  // Hooks useEffect parts\n  // initialize get pitch function + pause + draw background\n  useCanvasInitializeGetPitch(config, setPitch, updateCanvasHeight, setPlayingPause, canvasRef, initialRange, showNotes);\n\n  // set canvas size for different resolutions\n  useCanvasAdjustHeight(canvasRef, setCanvasHeight);\n\n  // store current pitch\n  useCanvasUpdatePitch(isPlaying, pitch, updateBallY);\n\n  // update mouse text\n  useCanvasMouseText(canvasRef, mouseHeight, initialRange);\n\n  // change Notes and hz display\n  useCanvasChangeHzAndNotes(setShowNotes, showNotes, showNotesPar, canvasRef, initialRange, setNotesLabel, setFreqLabel, canvasHeight);\n\n  // retry\n  useCanvasRetry(isRetry, divisor, setPlayingPause, resetStatesFull);\n\n  // redraw background when hz or notes changed\n  useCanvasRedrawBackground(canvasRef, showNotesPar, initialRange);\n\n  // useEffect(() => {\n  //   const { notes, frequencies } = generateNotesAndFrequencies(initialRange[0],initialRange[1],canvasHeight);\n  //   setNotesLabel(notes);\n  //   setFreqLabel(frequencies);\n  // }, [showNotesPar, initialRange]);\n\n  // +++++++++++++++++++++++++++++++++++++++++++++++++\n  // Unique useEffect parts\n\n  // initialize max lyric and stair array\n  useEffect(() => {\n    setMaxLyricCount(5);\n    updatePitchArrayCus();\n  }, []);\n\n  // draw two curves\n  useEffect(() => {\n    const canvas = canvasRef.current;\n    if (canvas) {\n      const ctx = canvas.getContext('2d');\n      if (ctx) {\n        const textX = canvas.width - 100;\n        const textY = 20;\n        ctx.clearRect(0, 0, textX - 5, canvas.height);\n        ctx.clearRect(0, textY + 5, canvas.width, canvas.height - (textY + 5));\n        drawBackground(canvasRef, initialRange[1], initialRange[0], showNotesPar);\n\n        // stair \n        for (let i = 0 + offset; i < pitchArrayCus.length; i++) {\n          const mappedJsonValue = map(pitchArrayCus[i], initialRange[0], initialRange[1], size[0], 0);\n          // Set fill color based on condition\n          if (colorChangesFull[i]) {\n            ctx.fillStyle = closeVoiceColor;\n          } else {\n            ctx.fillStyle = targetVoiceColor;\n          }\n          // Draw a rectangle\n          ctx.fillRect(i, mappedJsonValue, rectWidth, rectWidth);\n        }\n        let temTxtShow = false;\n        if (txtShow === \"false\") {\n          temTxtShow = false;\n        } else {\n          temTxtShow = true;\n        }\n        if (temTxtShow) {\n          const fraction = size[1] / 5;\n          const heights = [inputValue[0], (inputValue[0] + inputValue[1]) / 2, inputValue[1], (inputValue[0] + inputValue[1]) / 2, inputValue[0]];\n          ctx.fillStyle = \"black\";\n          ctx.font = \"16px Arial\";\n          for (let j = 0; j <= 4; j++) {\n            let xPosition = fraction * (j + 1) - fraction / 2;\n            let yPosition = map(heights[j] + 5, initialRange[0], initialRange[1], size[0], 0);\n            ctx.fillText(syllablesString[playLyricCount][j], xPosition, yPosition);\n          }\n        }\n\n        // Draw the ball's historical positions\n        for (var i = 0; i < ballHistoryFull.length; i++) {\n          // for (var i = currentX; i > 0; i--) {\n          const mappedValue = map(ballHistoryFull[i], initialRange[0], initialRange[1], size[0], -1);\n          ctx.beginPath();\n          ctx.arc(i, mappedValue, 5, 0, 2 * Math.PI);\n          ctx.fillStyle = realVoiceColor;\n          ctx.fill();\n          ctx.closePath();\n        }\n        // Plot current value\n        ctx.beginPath();\n        ctx.arc(currentX * divisor, ballYCurr, 10, 0, 2 * Math.PI);\n        ctx.fillStyle = \"black\";\n        ctx.fill();\n        ctx.closePath();\n      }\n    }\n  }, [txtShow, pitchArrayCus, initialRange, ballHistoryFull, playLyricCount, showNotesPar]);\n\n  // next button\n  useEffect(() => {\n    setPlayingPause();\n    resetStatesFull();\n  }, [playLyricCount]);\n\n  // Update ball history\n  const updateBallHistoryFull = pitch => {\n    let tempHistoryFull = [...ballHistoryFull];\n    let ctxdiv = currentX * divisor;\n    let ballYtem = map(pitch, initialRange[0], initialRange[1], size[0], -1);\n    if (currentX < desiredLength - 1) {\n      setShouldDisabled(false);\n      tempHistoryFull[ctxdiv] = pitch;\n      setColorChangesFull(currentColors => {\n        const newColors = [...currentColors];\n        const mappedJsonValue = map(pitchArrayCus[ctxdiv], initialRange[0], initialRange[1], size[0], 0);\n        const difference = Math.abs(mappedJsonValue - ballYtem);\n        if (difference <= 50 && !isNaN(difference)) {\n          for (let j = ctxdiv - divisor; j <= ctxdiv + divisor && j < CanvasLength; j++) {\n            newColors[j] = true;\n          }\n        }\n        return newColors;\n      });\n    } else {\n      setShouldDisabled(true);\n      if (!shouldDisabled) {\n        setPlayingPause();\n      }\n    }\n    setCurrentX(currentX + 1);\n    setBallHistoryFull(tempHistoryFull);\n  };\n  useEffect(() => {\n    // Only update ballHistory at currentX position\n    if (isPlaying) {\n      if (pitch !== null) {\n        updateBallHistoryFull(pitch);\n      } else {\n        updateBallHistoryFull(0);\n      }\n    }\n  }, [pitch, isPlaying]);\n\n  // restart\n  useEffect(() => {\n    if (shouldDisabled && isPlaying) {\n      resetStatesFull();\n      setShouldDisabled(false);\n    }\n  }, [isPlaying]);\n  useEffect(() => {\n    console.log(notesLabel);\n  }, [showNotesPar]);\n  return /*#__PURE__*/_jsxDEV(Row, {\n    style: {\n      maxHeight: \"27vw\",\n      marginBottom: \"5vw\",\n      maxWidth: \"100vw\"\n    },\n    children: [/*#__PURE__*/_jsxDEV(Col, {\n      span: 1\n    }, void 0, false, {\n      fileName: _jsxFileName,\n      lineNumber: 295,\n      columnNumber: 7\n    }, this), /*#__PURE__*/_jsxDEV(Col, {\n      span: 22,\n      children: [/*#__PURE__*/_jsxDEV(\"div\", {\n        className: \"yAxisArea\",\n        style: {\n          height: canvasHeight\n        },\n        children: /*#__PURE__*/_jsxDEV(Row, {\n          style: {\n            height: canvasHeight\n          },\n          children: [/*#__PURE__*/_jsxDEV(Col, {\n            span: 8,\n            children: showNotesPar ? /*#__PURE__*/_jsxDEV(\"div\", {\n              style: {\n                height: canvasHeight\n              },\n              className: \"yAxisLabel\",\n              children: \"Pitch (Notes)\"\n            }, void 0, false, {\n              fileName: _jsxFileName,\n              lineNumber: 303,\n              columnNumber: 39\n            }, this) : /*#__PURE__*/_jsxDEV(\"div\", {\n              style: {\n                height: canvasHeight\n              },\n              className: \"yAxisLabel\",\n              children: \"Pitch (Hz)\"\n            }, void 0, false, {\n              fileName: _jsxFileName,\n              lineNumber: 304,\n              columnNumber: 39\n            }, this)\n          }, void 0, false, {\n            fileName: _jsxFileName,\n            lineNumber: 301,\n            columnNumber: 13\n          }, this), /*#__PURE__*/_jsxDEV(Col, {\n            span: 8,\n            children: /*#__PURE__*/_jsxDEV(\"div\", {\n              className: \"yAxisNumbers\",\n              style: {\n                height: canvasHeight * 1.039\n              },\n              children: showNotesPar ? (_notesLabel$map = notesLabel === null || notesLabel === void 0 ? void 0 : notesLabel.map((note, index) => /*#__PURE__*/_jsxDEV(\"div\", {\n                children: note\n              }, index, false, {\n                fileName: _jsxFileName,\n                lineNumber: 309,\n                columnNumber: 54\n              }, this))) !== null && _notesLabel$map !== void 0 ? _notesLabel$map : [] : (_freqLabel$map = freqLabel === null || freqLabel === void 0 ? void 0 : freqLabel.map((freq, index) => /*#__PURE__*/_jsxDEV(\"div\", {\n                children: freq\n              }, index, false, {\n                fileName: _jsxFileName,\n                lineNumber: 310,\n                columnNumber: 53\n              }, this))) !== null && _freqLabel$map !== void 0 ? _freqLabel$map : []\n            }, void 0, false, {\n              fileName: _jsxFileName,\n              lineNumber: 307,\n              columnNumber: 15\n            }, this)\n          }, void 0, false, {\n            fileName: _jsxFileName,\n            lineNumber: 306,\n            columnNumber: 13\n          }, this), /*#__PURE__*/_jsxDEV(Col, {\n            span: 8,\n            children: /*#__PURE__*/_jsxDEV(\"div\", {\n              className: \"yAxisLines\",\n              style: {\n                height: canvasHeight\n              },\n              children: (_freqLabel$map2 = freqLabel === null || freqLabel === void 0 ? void 0 : freqLabel.map((_, index) => /*#__PURE__*/_jsxDEV(\"div\", {}, void 0, false, {\n                fileName: _jsxFileName,\n                lineNumber: 316,\n                columnNumber: 19\n              }, this))) !== null && _freqLabel$map2 !== void 0 ? _freqLabel$map2 : []\n            }, void 0, false, {\n              fileName: _jsxFileName,\n              lineNumber: 314,\n              columnNumber: 15\n            }, this)\n          }, void 0, false, {\n            fileName: _jsxFileName,\n            lineNumber: 313,\n            columnNumber: 13\n          }, this)]\n        }, void 0, true, {\n          fileName: _jsxFileName,\n          lineNumber: 300,\n          columnNumber: 11\n        }, this)\n      }, void 0, false, {\n        fileName: _jsxFileName,\n        lineNumber: 299,\n        columnNumber: 9\n      }, this), /*#__PURE__*/_jsxDEV(\"div\", {\n        style: {\n          height: canvasHeight\n        },\n        children: [/*#__PURE__*/_jsxDEV(\"canvas\", {\n          ref: canvasRef,\n          onMouseMove: handleMouseMove,\n          id: \"pitchCanvas\",\n          width: size[1],\n          height: size[0],\n          style: {\n            border: '1px solid #000'\n          }\n        }, void 0, false, {\n          fileName: _jsxFileName,\n          lineNumber: 324,\n          columnNumber: 11\n        }, this), /*#__PURE__*/_jsxDEV(\"div\", {\n          style: {\n            position: 'absolute',\n            top: canvasHeight,\n            left: 0,\n            width: canvasHeight * 3.486,\n            display: 'flex',\n            justifyContent: 'space-between',\n            fontSize: '12px',\n            marginLeft: '3vw',\n            height: '25px'\n          },\n          children: [...Array(11)].map((_, index) => /*#__PURE__*/_jsxDEV(\"div\", {\n            style: {\n              position: 'relative'\n            },\n            children: [/*#__PURE__*/_jsxDEV(\"div\", {\n              className: \"timeMarkerLine\"\n            }, void 0, false, {\n              fileName: _jsxFileName,\n              lineNumber: 347,\n              columnNumber: 17\n            }, this), /*#__PURE__*/_jsxDEV(\"span\", {\n              className: \"timeMarkerNum\",\n              children: (15 / (divisor / 4) * (index / 10)).toFixed(1)\n            }, void 0, false, {\n              fileName: _jsxFileName,\n              lineNumber: 348,\n              columnNumber: 17\n            }, this)]\n          }, index, true, {\n            fileName: _jsxFileName,\n            lineNumber: 346,\n            columnNumber: 15\n          }, this))\n        }, void 0, false, {\n          fileName: _jsxFileName,\n          lineNumber: 332,\n          columnNumber: 11\n        }, this), /*#__PURE__*/_jsxDEV(\"div\", {\n          style: {\n            position: 'absolute',\n            top: canvasHeight * 1.12,\n            left: 0,\n            width: canvasHeight * 3.486,\n            display: 'flex',\n            justifyContent: 'center',\n            marginLeft: '3vw',\n            height: '50px'\n          },\n          className: \"XAxis\",\n          children: /*#__PURE__*/_jsxDEV(\"div\", {\n            children: \"Time (Seconds)\"\n          }, void 0, false, {\n            fileName: _jsxFileName,\n            lineNumber: 367,\n            columnNumber: 13\n          }, this)\n        }, void 0, false, {\n          fileName: _jsxFileName,\n          lineNumber: 354,\n          columnNumber: 11\n        }, this)]\n      }, void 0, true, {\n        fileName: _jsxFileName,\n        lineNumber: 323,\n        columnNumber: 9\n      }, this)]\n    }, void 0, true, {\n      fileName: _jsxFileName,\n      lineNumber: 297,\n      columnNumber: 7\n    }, this), /*#__PURE__*/_jsxDEV(Col, {\n      span: 1,\n      children: /*#__PURE__*/_jsxDEV(\"div\", {\n        children: /*#__PURE__*/_jsxDEV(Slider, {\n          vertical: true,\n          range: true,\n          min: initialRange[0],\n          max: initialRange[1],\n          style: {\n            marginTop: 0,\n            height: canvasHeight\n          },\n          onChange: onChange,\n          defaultValue: inputValue\n        }, void 0, false, {\n          fileName: _jsxFileName,\n          lineNumber: 375,\n          columnNumber: 11\n        }, this)\n      }, void 0, false, {\n        fileName: _jsxFileName,\n        lineNumber: 374,\n        columnNumber: 9\n      }, this)\n    }, void 0, false, {\n      fileName: _jsxFileName,\n      lineNumber: 373,\n      columnNumber: 7\n    }, this)]\n  }, void 0, true, {\n    fileName: _jsxFileName,\n    lineNumber: 294,\n    columnNumber: 5\n  }, this);\n};\n_s(Stair, \"527GxtGGb0ByOTdYGgNaBKGHicY=\", false, function () {\n  return [useCanvasHooks, useTemString, useCanvasInitializeGetPitch, useCanvasAdjustHeight, useCanvasUpdatePitch, useCanvasMouseText, useCanvasChangeHzAndNotes, useCanvasRetry, useCanvasRedrawBackground];\n});\n_c = Stair;\nexport default Stair;\nvar _c;\n$RefreshReg$(_c, \"Stair\");","map":{"version":3,"names":["React","useEffect","useState","map","drawBackground","Col","Row","Slider","useCanvasHooks","useTemString","useCanvasMouseText","useCanvasRetry","useCanvasUpdatePitch","useCanvasAdjustHeight","useCanvasInitializeGetPitch","useCanvasChangeHzAndNotes","useCanvasRedrawBackground","jsxDEV","_jsxDEV","Stair","setMaxLyricCount","initialRange","divisor","txtShow","isRetry","setPlayingPause","playLyricCount","config","COLORS","size","isPlaying","showNotesPar","setShowNotesPar","_s","_notesLabel$map","_freqLabel$map","_freqLabel$map2","pitch","setPitch","mouseHeight","setMouseHeight","realVoiceColor","targetVoiceColor","closeVoiceColor","ballYCurr","setBallYCurr","canvasRef","rectWidth","CanvasLength","canvasHeight","setCanvasHeight","showNotes","setShowNotes","offset","currentX","setCurrentX","initialcurrentX","notesLabel","setNotesLabel","freqLabel","setFreqLabel","updateBallY","updateCanvasHeight","handleMouseMove","syllablesString","inputValue","setInputValue","desiredLength","Math","floor","initialColorChangesFull","Array","fill","initialBallHistoryFull","NaN","colorChangesFull","setColorChangesFull","ballHistoryFull","setBallHistoryFull","resetStatesFull","initialPitchArrayCus","pitchArrayCus","setPitchArrayCus","shouldDisabled","setShouldDisabled","onChange","newValue","updatePitchArrayCus","partLength","lastPartStart","midValue","updatedArray","canvas","current","ctx","getContext","textX","width","textY","clearRect","height","i","length","mappedJsonValue","fillStyle","fillRect","temTxtShow","fraction","heights","font","j","xPosition","yPosition","fillText","mappedValue","beginPath","arc","PI","closePath","updateBallHistoryFull","tempHistoryFull","ctxdiv","ballYtem","currentColors","newColors","difference","abs","isNaN","console","log","style","maxHeight","marginBottom","maxWidth","children","span","fileName","_jsxFileName","lineNumber","columnNumber","className","note","index","freq","_","ref","onMouseMove","id","border","position","top","left","display","justifyContent","fontSize","marginLeft","toFixed","vertical","range","min","max","marginTop","defaultValue","_c","$RefreshReg$"],"sources":["D:/Project/UC_Trains_Voice/react-demo/src/Canvas/Stair.tsx"],"sourcesContent":["import React, { useContext, useEffect, useRef, useState } from 'react';\r\nimport { adjustCanvasScale, map, drawBackground, generateNotesAndFrequencies } from '../function/canvasDefault';\r\nimport { getPitch, IPitchDetectionConfig } from '../function/getPitch';\r\nimport { Col, Row, Slider } from 'antd';\r\n\r\nimport { CONFIG, COLORS } from '../types/configTypes'; // types\r\nimport { useCanvasHooks } from '../hooks/useCanvasHooks'; // variables and functions\r\nimport { useTemString } from '../hooks/useTemString';\r\n\r\nimport useCanvasMouseText from '../hooksUseEffect/useCanvasMouseText';\r\nimport useCanvasRetry from '../hooksUseEffect/useCanvasRetry';\r\nimport useCanvasUpdatePitch from '../hooksUseEffect/useCanvasUpdatePitch';\r\nimport useCanvasAdjustHeight from '../hooksUseEffect/useCanvasAdjustHeight';\r\nimport useCanvasInitializeGetPitch from '../hooksUseEffect/useCanvasInitializeGetPitch';\r\nimport useCanvasChangeHzAndNotes from '../hooksUseEffect/useCanvasChangeHzAndNotes';\r\nimport useCanvasRedrawBackground from '../hooksUseEffect/useCanvasRedrawBackground';\r\n// variables from Sample.tsx\r\ninterface StairProps {\r\n  size: number[];\r\n  config: CONFIG;\r\n  COLORS: COLORS;\r\n  isPlaying: boolean;\r\n  showNotesPar: boolean;\r\n  playLyricCount: number;\r\n  isRetry: boolean;\r\n  setPlayingPause: () => void;\r\n  txtShow: string;\r\n  divisor: number;\r\n  initialRange: number[];\r\n  setMaxLyricCount: (num: number) => void;\r\n  setShowNotesPar: (boo: boolean) => void;\r\n}\r\n\r\nconst Stair: React.FC<StairProps> = ({\r\n  setMaxLyricCount,\r\n  initialRange,\r\n  divisor,\r\n  txtShow,\r\n  isRetry,\r\n  setPlayingPause,\r\n  playLyricCount,\r\n  config,\r\n  COLORS,\r\n  size,\r\n  isPlaying,\r\n  showNotesPar,\r\n  setShowNotesPar,\r\n\r\n}) => {\r\n  const {\r\n    pitch,\r\n    setPitch,\r\n    mouseHeight,\r\n    setMouseHeight,\r\n    realVoiceColor,\r\n    targetVoiceColor,\r\n    closeVoiceColor,\r\n    ballYCurr,\r\n    setBallYCurr,\r\n    canvasRef,\r\n    rectWidth,\r\n    CanvasLength,\r\n    canvasHeight,\r\n    setCanvasHeight,\r\n    showNotes,\r\n    setShowNotes,\r\n    offset,\r\n    currentX,\r\n    setCurrentX,\r\n    initialcurrentX,\r\n    notesLabel,\r\n    setNotesLabel,\r\n    freqLabel,\r\n    setFreqLabel,\r\n\r\n    updateBallY,\r\n    updateCanvasHeight,\r\n    handleMouseMove,\r\n  } = useCanvasHooks(size, divisor, COLORS, initialRange);\r\n\r\n  const {\r\n    syllablesString,\r\n  } = useTemString();\r\n\r\n\r\n\r\n  const [inputValue, setInputValue] = useState<number[]>([110, 200]);\r\n  const desiredLength = Math.floor(size[1] / divisor);\r\n\r\n  // Initialization curve\r\n  const initialColorChangesFull = new Array(CanvasLength).fill(false);\r\n  const initialBallHistoryFull = new Array(CanvasLength).fill(NaN);\r\n  const [colorChangesFull, setColorChangesFull] = useState<boolean[]>(initialColorChangesFull);\r\n  const [ballHistoryFull, setBallHistoryFull] = useState<number[]>(initialBallHistoryFull);\r\n  const resetStatesFull = () => {\r\n    setColorChangesFull([...initialColorChangesFull]);\r\n    setBallHistoryFull([...initialBallHistoryFull]);\r\n    setCurrentX(initialcurrentX);\r\n  };\r\n  const initialPitchArrayCus = new Array(desiredLength).fill(NaN);\r\n  const [pitchArrayCus, setPitchArrayCus] = useState<number[]>(initialPitchArrayCus);\r\n  const [shouldDisabled, setShouldDisabled] = useState<boolean>(false);\r\n\r\n  // +++++++++++++++++++++++++++++++++++++++++++++++++\r\n  // Setting the stair curve\r\n  const onChange = (newValue: number[]) => {\r\n    setInputValue(newValue);\r\n    // setA(a+1);\r\n  };\r\n  const updatePitchArrayCus = () => {\r\n    const partLength = Math.floor(CanvasLength / 5);\r\n    const lastPartStart = partLength * 4;\r\n    const midValue = (inputValue[0] + inputValue[1]) / 2;\r\n\r\n    const updatedArray = new Array(CanvasLength)\r\n      .fill(inputValue[0], 0, partLength)\r\n      .fill(midValue, partLength, 2 * partLength)\r\n      .fill(inputValue[1], 2 * partLength, 3 * partLength)\r\n      .fill(midValue, 3 * partLength, 4 * partLength)\r\n      .fill(inputValue[0], lastPartStart, CanvasLength);\r\n\r\n    setPitchArrayCus(updatedArray);\r\n  }\r\n  useEffect(() => {\r\n    updatePitchArrayCus();\r\n  }, [inputValue]);\r\n\r\n\r\n  // +++++++++++++++++++++++++++++++++++++++++++++++++\r\n  // Hooks useEffect parts\r\n  // initialize get pitch function + pause + draw background\r\n  useCanvasInitializeGetPitch(config, setPitch, updateCanvasHeight, setPlayingPause, canvasRef, initialRange, showNotes);\r\n\r\n  // set canvas size for different resolutions\r\n  useCanvasAdjustHeight(canvasRef, setCanvasHeight);\r\n\r\n  // store current pitch\r\n  useCanvasUpdatePitch(isPlaying, pitch, updateBallY);\r\n\r\n  // update mouse text\r\n  useCanvasMouseText(canvasRef, mouseHeight, initialRange);\r\n\r\n  // change Notes and hz display\r\n  useCanvasChangeHzAndNotes(setShowNotes, showNotes, showNotesPar, canvasRef, initialRange, setNotesLabel, setFreqLabel, canvasHeight);\r\n\r\n  // retry\r\n  useCanvasRetry(isRetry, divisor, setPlayingPause, resetStatesFull);\r\n\r\n  // redraw background when hz or notes changed\r\n  useCanvasRedrawBackground(canvasRef, showNotesPar, initialRange);\r\n\r\n  // useEffect(() => {\r\n  //   const { notes, frequencies } = generateNotesAndFrequencies(initialRange[0],initialRange[1],canvasHeight);\r\n  //   setNotesLabel(notes);\r\n  //   setFreqLabel(frequencies);\r\n  // }, [showNotesPar, initialRange]);\r\n\r\n  // +++++++++++++++++++++++++++++++++++++++++++++++++\r\n  // Unique useEffect parts\r\n\r\n  // initialize max lyric and stair array\r\n  useEffect(() => {\r\n    setMaxLyricCount(5);\r\n    updatePitchArrayCus();\r\n  }, []);\r\n\r\n  // draw two curves\r\n  useEffect(() => {\r\n    const canvas = canvasRef.current;\r\n    if (canvas) {\r\n      const ctx = canvas.getContext('2d');\r\n      if (ctx) {\r\n        const textX = canvas.width - 100;\r\n        const textY = 20;\r\n        ctx.clearRect(0, 0, textX - 5, canvas.height);\r\n        ctx.clearRect(0, textY + 5, canvas.width, canvas.height - (textY + 5));\r\n\r\n        drawBackground(canvasRef, initialRange[1], initialRange[0], showNotesPar);\r\n\r\n        // stair \r\n        for (let i = 0 + offset; i < pitchArrayCus.length; i++) {\r\n          const mappedJsonValue = map(pitchArrayCus[i], initialRange[0], initialRange[1], size[0], 0);\r\n          // Set fill color based on condition\r\n          if (colorChangesFull[i]) {\r\n            ctx.fillStyle = closeVoiceColor;\r\n          } else {\r\n            ctx.fillStyle = targetVoiceColor;\r\n          }\r\n          // Draw a rectangle\r\n          ctx.fillRect(i, mappedJsonValue, rectWidth, rectWidth);\r\n        }\r\n\r\n        let temTxtShow = false;\r\n        if (txtShow === \"false\") {\r\n          temTxtShow = false;\r\n        } else {\r\n          temTxtShow = true;\r\n        }\r\n\r\n        if (temTxtShow) {\r\n          const fraction = size[1] / 5;\r\n          const heights = [inputValue[0], (inputValue[0] + inputValue[1]) / 2, inputValue[1], (inputValue[0] + inputValue[1]) / 2, inputValue[0]];\r\n          ctx.fillStyle = \"black\";\r\n          ctx.font = \"16px Arial\";\r\n          for (let j = 0; j <= 4; j++) {\r\n            let xPosition = fraction * (j + 1) - (fraction / 2);\r\n            let yPosition = map(heights[j] + 5, initialRange[0], initialRange[1], size[0], 0);\r\n            ctx.fillText(syllablesString[playLyricCount][j], xPosition, yPosition);\r\n          }\r\n        }\r\n\r\n        // Draw the ball's historical positions\r\n        for (var i = 0; i < ballHistoryFull.length; i++) {\r\n          // for (var i = currentX; i > 0; i--) {\r\n          const mappedValue = map(ballHistoryFull[i], initialRange[0], initialRange[1], size[0], -1);\r\n\r\n          ctx.beginPath();\r\n          ctx.arc(i, mappedValue, 5, 0, 2 * Math.PI);\r\n          ctx.fillStyle = realVoiceColor;\r\n          ctx.fill();\r\n          ctx.closePath();\r\n        }\r\n        // Plot current value\r\n        ctx.beginPath();\r\n        ctx.arc(currentX * divisor, ballYCurr, 10, 0, 2 * Math.PI);\r\n        ctx.fillStyle = \"black\";\r\n        ctx.fill();\r\n        ctx.closePath();\r\n\r\n      }\r\n    }\r\n  }, [txtShow, pitchArrayCus, initialRange, ballHistoryFull, playLyricCount, showNotesPar]);\r\n\r\n  // next button\r\n  useEffect(() => {\r\n    setPlayingPause();\r\n    resetStatesFull();\r\n  }, [playLyricCount])\r\n\r\n  // Update ball history\r\n  const updateBallHistoryFull = (pitch: number) => {\r\n    let tempHistoryFull = [...ballHistoryFull];\r\n    let ctxdiv = currentX * divisor;\r\n    let ballYtem = map(pitch, initialRange[0], initialRange[1], size[0], -1)\r\n\r\n    if (currentX < desiredLength - 1) {\r\n      setShouldDisabled(false);\r\n      tempHistoryFull[ctxdiv] = pitch;\r\n      setColorChangesFull(currentColors => {\r\n        const newColors = [...currentColors];\r\n        const mappedJsonValue = map(pitchArrayCus[ctxdiv], initialRange[0], initialRange[1], size[0], 0);\r\n        const difference = Math.abs(mappedJsonValue - ballYtem);\r\n        if (difference <= 50 && !isNaN(difference)) {\r\n          for (let j = ctxdiv - divisor; j <= ctxdiv + divisor && j < CanvasLength; j++) {\r\n            newColors[j] = true;\r\n          }\r\n        }\r\n        return newColors;\r\n      });\r\n\r\n    } else {\r\n      setShouldDisabled(true);\r\n      if (!shouldDisabled) {\r\n        setPlayingPause();\r\n      }\r\n    }\r\n    setCurrentX(currentX + 1);\r\n    setBallHistoryFull(tempHistoryFull);\r\n  };\r\n  useEffect(() => {\r\n    // Only update ballHistory at currentX position\r\n    if (isPlaying) {\r\n      if (pitch !== null) {\r\n        updateBallHistoryFull(pitch);\r\n      } else {\r\n        updateBallHistoryFull(0);\r\n      }\r\n    }\r\n  }, [pitch, isPlaying]);\r\n\r\n  // restart\r\n  useEffect(() => {\r\n    if (shouldDisabled && isPlaying) {\r\n      resetStatesFull();\r\n      setShouldDisabled(false);\r\n    }\r\n  }, [isPlaying]);\r\n\r\n  useEffect(() => {\r\n    console.log(notesLabel);\r\n  }, [showNotesPar]);\r\n\r\n  return (\r\n    <Row style={{ maxHeight: \"27vw\",marginBottom: \"5vw\", maxWidth: \"100vw\" }}>\r\n      <Col span={1}>\r\n      </Col>\r\n      <Col span={22}>\r\n\r\n        <div className=\"yAxisArea\" style={{ height: canvasHeight }}>\r\n          <Row style={{ height: canvasHeight }}>\r\n            <Col span={8}>\r\n            {showNotesPar\r\n                                    ? <div style={{ height: canvasHeight }} className=\"yAxisLabel\">Pitch (Notes)</div>\r\n                                    : <div style={{ height: canvasHeight }} className=\"yAxisLabel\">Pitch (Hz)</div>}\r\n            </Col>\r\n            <Col span={8}>\r\n              <div className=\"yAxisNumbers\" style={{ height: canvasHeight * 1.039 }}>\r\n                {showNotesPar\r\n                  ? notesLabel?.map((note, index) => <div key={index}>{note}</div>) ?? []\r\n                  : freqLabel?.map((freq, index) => <div key={index}>{freq}</div>) ?? []}\r\n              </div>\r\n            </Col>\r\n            <Col span={8}>\r\n              <div className=\"yAxisLines\" style={{ height: canvasHeight }}>\r\n                {freqLabel?.map((_, index) => (\r\n                  <div></div>\r\n                )) ?? []}\r\n              </div>\r\n            </Col>\r\n          </Row>\r\n        </div>\r\n        \r\n        <div style={{ height: canvasHeight }}>\r\n          <canvas\r\n            ref={canvasRef}\r\n            onMouseMove={handleMouseMove}\r\n            id=\"pitchCanvas\"\r\n            width={size[1]}\r\n            height={size[0]}\r\n            style={{ border: '1px solid #000' }}\r\n          ></canvas>\r\n          <div\r\n            style={{\r\n              position: 'absolute',\r\n              top: canvasHeight,\r\n              left: 0,\r\n              width: canvasHeight * 3.486,\r\n              display: 'flex',\r\n              justifyContent: 'space-between',\r\n              fontSize: '12px',\r\n              marginLeft: '3vw',\r\n              height: '25px',\r\n            }}\r\n          >\r\n            {[...Array(11)].map((_, index) => (\r\n              <div key={index} style={{ position: 'relative' }}>\r\n                <div className=\"timeMarkerLine\" />\r\n                <span className='timeMarkerNum'>\r\n                  {((15 / (divisor / 4)) * (index / 10)).toFixed(1)}\r\n                </span>\r\n              </div>\r\n            ))}\r\n          </div>\r\n          <div\r\n            style={{\r\n              position: 'absolute',\r\n              top: canvasHeight * (1.12),\r\n              left: 0,\r\n              width: canvasHeight * 3.486,\r\n              display: 'flex',\r\n              justifyContent: 'center',\r\n              marginLeft: '3vw',\r\n              height: '50px',\r\n            }}\r\n            className='XAxis'\r\n          >\r\n            <div>Time (Seconds)</div>\r\n\r\n          </div>\r\n\r\n        </div>\r\n      </Col>\r\n      <Col span={1}>\r\n        <div>\r\n          <Slider\r\n            vertical\r\n            range\r\n            min={initialRange[0]}\r\n            max={initialRange[1]}\r\n            style={{ marginTop: 0, height: canvasHeight }}\r\n            onChange={onChange}\r\n            defaultValue={inputValue} />\r\n        </div>\r\n      </Col>\r\n    </Row>\r\n  );\r\n}\r\n\r\nexport default Stair;"],"mappings":"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","ignoreList":[]},"metadata":{},"sourceType":"module","externalDependencies":[]}