fix: bug with overlap cell and redisign game

.hintrc

@@ -0,0 +1,23 @@
+{
+  "extends": [
+    "development"
+  ],
+  "hints": {
+    "compat-api/css": [
+      "default",
+      {
+        "ignore": [
+          "user-select",
+          "-moz-appearance",
+          "backdrop-filter"
+        ]
+      }
+    ],
+    "axe/forms": [
+      "default",
+      {
+        "label": "off"
+      }
+    ]
+  }
+}

src/components/DialogFile.tsx

@@ -1,18 +1,19 @@
-import { useDispatch, useSelector } from 'react-redux';
+import { useAppDispatch, useAppSelector } from 'store/hooks';
 import React  from 'react';
 
 import { constState, letters } from 'store/game/state';
 import * as Game from 'store/game';
 import { LettersType } from 'lib/types';
+import Range from './Range';
 
 
 type EventTarget = React.ChangeEvent<HTMLInputElement> | React.MouseEvent<HTMLButtonElement>;
-const average = (array:number[]) => array.reduce((a, b) => a + b) / array.length;
 
 export default function () {
-  const state = useSelector(Game.getState);
-  const dispatch = useDispatch();
+  const state = useAppSelector(Game.getState);
+  const dispatch = useAppDispatch();
 
+
   function setFrequencyDates(arr:Array<number>) {
 
     if(arr.length > 0)
@@ -58,18 +59,43 @@ export default function () {
     dispatch(Game.actions.getRun(true));
   }
 
+  function setDifficultyFactor(value:number) {
+    dispatch(Game.actions.setDifficultyFactor(value));
+  }
+
+  function setMainLevel(value:number) {
+    dispatch(Game.actions.setMainLevel(value));
+  }
+
   return (
     <>
       {
         state.isRunning === false && 
         <div className="DialogFile">
           <div className="DialogFile_container">
+            <div className="right">
+              <Range
+                min={0.1}
+                max={1}
+                step={0.1}
+                startVal={state.difficultyFactor}
+                title='Сложность'
+                handler={setDifficultyFactor}
+              />
+              <div id='levelChanger'>
+                <h3>уровень</h3>
+                <input onInput={(e) => setMainLevel(+e.currentTarget.value)} min={1} type="number" placeholder='можно ввести уровень'  />
+              </div>
+            </div>
+
+
+            <div className="left">
               <label htmlFor="dialogFile">выберите музыку на ПК</label>
               <input id="dialogFile" type="file" onChange={closePopUp} accept="audio/*"/>
               <button data-key={"testMusic"} onClick={closePopUp}>
                 выбрать тестовую музыку
               </button>
-
+              
               {
                 constState.analyzer.isThereAudio() &&
                 <button data-key={"withCurrMusic"} onClick={closePopUp}>
@@ -99,7 +125,7 @@ export default function () {
                 }
               </div>
             </div>
-
+          </div>
           <div className="DialogFile_background"></div>
         </div>
       }

src/components/LowerPanel.tsx

@@ -7,8 +7,10 @@ import VolumeController from "./VolumeController";
 export default function () {
   return (
     <div className="LowerPanel">
-      <Level/>
-      <VolumeController/>
+      <div className="rightPanel">
+        <Level/>
+        <VolumeController/>
+      </div>
       <Score/>
       <Keyboard/>
       <Health/>

src/components/Range.tsx

@@ -0,0 +1,64 @@
+import { useEffect, useRef, useState } from "react"
+
+interface IProps {
+  title:string, 
+  min:number,
+  max:number,
+  step:number,
+  startVal?:number
+  handler: (value:number) => void
+}
+export default function ({title, min, max, step, startVal, handler}: IProps) {;
+  const refTrack = useRef<HTMLDivElement>(null);
+  const refThumb = useRef<HTMLSpanElement>(null);
+  const [value,setValue] = useState(startVal??min);
+
+  function formattingValue(min:number,max:number,percent:number) {
+    return +((max - min) * percent + min).toFixed(0);
+  }
+
+  function setSlip(thumb:HTMLSpanElement,track:HTMLDivElement) {
+    thumb.onmousedown = () => {
+      window.onmousemove = ({clientX}) => {
+        const trackRect = track.getBoundingClientRect();
+        let posX = clientX - trackRect.left + 50;
+        const percent = posX / track.offsetWidth;
+
+        if(posX % step < 1) {
+
+          if(percent >= 0 && percent <= 1) {
+            const val = formattingValue(min,max,percent);
+            thumb.style.left = percent*100-5+"%";
+            setValue(val);
+            handler(val);
+          }
+        }
+      }
+
+      window.onmouseup = () => {
+        window.onmousemove = null
+      }
+    }
+  }
+
+  useEffect(() => {
+    const track = refTrack.current;
+    const thumb = refThumb.current;
+
+    if(thumb !== null && track !== null) {
+      thumb.style.left = value*100-5+"%";
+      setSlip(thumb,track);
+    }
+  },[])
+
+  return (
+    <>
+      <div className="Range">
+        {title && <h3>{title}</h3>}
+        <div className="Range_track" ref={refTrack}>
+          <span className="Range_track_thumb" ref={refThumb}></span>
+        </div>
+      </div>
+    </>
+  )
+}

src/game/index.tsx

@@ -82,9 +82,9 @@ export default function () {
     <>
       <ErrorMobile/>
       <div className='Game'>
+        <canvas ref={refCanvas}></canvas>
         <FinishGame flag={state.isGameOver} restartGame={restartGame}/>
         <DialogFile/>
-        <canvas ref={refCanvas}></canvas>
         <LowerPanel/>
     </div>
     </>

src/game/logic.tsx

@@ -3,6 +3,9 @@ import { Cell } from 'lib/types';
 import { letters, constState } from 'store/game/state';
 import getRandomNumber from 'lib/getRandimNumber';
 
+
+const getX = (x:number) => -(x * constState.offsetX);
+
 export function getLetter(lang:string): string  {
 
   function getter(letters:Array<string>): string {
@@ -21,10 +24,13 @@ export function getCells (amount:number, lang:string): Cell[] {
 
   const positions = getStartedPositions(constState.rangeOfRandomCells);
   const centerOfCell = constState.sizeCell - constState.sizeCell / 4; // 80 -> 60
-
+
+  let prevPos = 0;
   return Array.from( new Array(amount) ).map((_, cellIndex) => {
+    prevPos = positions.getPosition(prevPos);
+
     return {
-      x: -(positions.getPosition() * constState.offsetX), 
+      x: getX(prevPos), 
       y: centerOfCell  + constState.offsetY * (cellIndex % 3),
       index:cellIndex, 
       letter:getLetter(lang), 
@@ -34,19 +40,40 @@ export function getCells (amount:number, lang:string): Cell[] {
 }
 
 export function resetCell (
+  cells: Cell[],
   cell:Cell, 
   lang: string
 ): Cell {
+  let minX = Infinity;
+  for (let i = 0; i < cells.length; i++) {
+    if (cells[i].x < minX) {
+      minX = cells[i].x;
+    }
+  }
+  cell.x = minX  - constState.offsetX;
 
-  cell.x = -constState.offsetX*constState.rangeOfRandomCells;
+  cells.forEach((c) => {
+    if(c.x > 0 && collides(c, cell)) {
+      c.x = cell.x - constState.offsetX;
+    }
+  })
+
   cell.letter = getLetter(lang);
   return cell;
 }
 
+function collides(cell1: Cell, cell2: Cell): boolean {
+  return (cell1.x <= cell2.x + constState.sizeCell &&
+          cell1.x + constState.sizeCell >= cell2.x &&
+          cell1.y <= cell2.y + constState.sizeCell &&
+          cell1.y + constState.sizeCell >= cell2.y);
+}
+
 function getStartedPositions (range: number): {getPosition:Function} {
+
   return {
-    getPosition: (): number  => {
-      const indItem = getRandomNumber(0, range-1);
+    getPosition: (prevPos:number): number  => {
+      const indItem = getRandomNumber(range-1, prevPos);
       range -= -1;
       return indItem;
     }

src/game/render/context2D.ts

@@ -33,9 +33,9 @@ export  function createCell(
   const textWidth = metrics.width;
   const textHeight = (metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent)/ 2;
 
-  const colorCell = getCSSProperty('--c_light900');
-  const colorBorder = getCSSProperty('--c_dark800');
-  const colorText = getCSSProperty('--c_dark900');
+  const colorCell = `rgb(${getCSSProperty('--c_light900')})`;
+  const colorBorder = `rgb(${getCSSProperty('--c_light800')})`;
+  const colorText = `rgb(${getCSSProperty('--c_dark900')})`;
 
 
   ctx.font = `600 ${constState.fontSize}px sans-serif`;