add some descriptins

.editorconfig

@@ -0,0 +1,5 @@
+# .editorconfig
+root = true
+[*]
+indent_style = space
+indent_size = 2

.gitignore

@@ -16,6 +16,7 @@ dist-ssr
 .vscode/*
 !.vscode/extensions.json
 .idea
+.fleet
 .DS_Store
 *.suo
 *.ntvs*

src/App.tsx

@@ -1,11 +1,7 @@
-import { useState } from 'react';
-
 import './styles/main.less';
 import {Game} from './components/game';
 
 const App = () => {
-  const [count, setCount] = useState<Number>(0)
-
   return (
     <div className='main'>
       <Game />

src/components/button/ButtonGroup.tsx

@@ -7,6 +7,7 @@ interface ButtonGroupProps {
 
 export interface ButtonDefinition {
   text: string|JSX.Element;
+  title?: string;
   onClick: React.MouseEventHandler<HTMLButtonElement>;
   cssProps: CSSProperties;
   buttonProps?: React.ButtonHTMLAttributes<HTMLButtonElement>
@@ -20,6 +21,7 @@ const ButtonGroup = ({buttons, buttonStyleProps}: ButtonGroupProps) => {
           <button
             key={index}
             onClick={btn.onClick}
+            title={btn.title}
             style={{
               ...buttonStyleProps,
               ...btn.cssProps

src/components/game/Cell.tsx

@@ -7,10 +7,6 @@ interface CellProps {
   updateCell: (newVal: boolean, position: number) => void
 }
 
-const defaultClasses: string[] = [
-  'cell'
-];
-
 let currentDragValue = true;
 
 const Cell = ({value, position, updateCell}: CellProps) => {
@@ -32,6 +28,7 @@ const Cell = ({value, position, updateCell}: CellProps) => {
 
   return (
     <div
+      // style={{width: '50px', height:'50px'}}
       className={cellClasses}
       draggable={false}
       onMouseDown={handleCellMouseDown}

src/components/game/ControlPanel.tsx

@@ -1,76 +0,0 @@
-import {ButtonDefinition, ButtonGroup} from '../button';
-import {
-  AiOutlineClear,
-  BsFillPlayFill,
-  BsFillStopFill,
-  CiSettings,
-  IoAdd,
-  IoRemove,
-  TbArrowsRandom
-} from 'react-icons/all';
-import React, {useCallback, useMemo} from 'react';
-import {GameOptions, GameState} from './Game';
-
-interface ControlPanelProps {
-  gameOptions: GameOptions;
-  handleStart: React.MouseEventHandler<HTMLButtonElement>;
-  handleStop: React.MouseEventHandler<HTMLButtonElement>;
-  handleRandomFill: React.MouseEventHandler<HTMLButtonElement>;
-  handleClear: React.MouseEventHandler<HTMLButtonElement>;
-  handleUpdateSpeed: (newVal: number) => void;
-}
-
-const ControlPanel = ({
-                        gameOptions,
-                        handleStart,
-                        handleStop,
-                        handleRandomFill,
-                        handleClear,
-                        handleUpdateSpeed
-}: ControlPanelProps) => {
-  const controlButtons: ButtonDefinition[] = useMemo(() => [
-    {text: <BsFillPlayFill />, onClick: handleStart, cssProps: {}, buttonProps: {disabled: gameOptions.gameState === GameState.Running}},
-    {text: <BsFillStopFill />, onClick: handleStop, cssProps: {}, buttonProps: {disabled: gameOptions.gameState === GameState.Stopped}},
-    {text: <TbArrowsRandom />, onClick: handleRandomFill, cssProps: {}},
-    {text: <AiOutlineClear />, onClick: handleClear, cssProps: {}}
-  ], [handleStart, handleStop, handleRandomFill, handleClear, gameOptions]);
-
-  const handleSpeedChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
-    const value = event.target.value;
-    handleUpdateSpeed(Number(value));
-  }, [handleUpdateSpeed]);
-
-  const handleSpeedUp = useCallback((event: React.MouseEvent<HTMLButtonElement>) => {
-    const newVal = gameOptions.speed + 100;
-    handleUpdateSpeed(newVal);
-  }, [handleUpdateSpeed, gameOptions]);
-
-  const handleSpeedDown = useCallback((event: React.MouseEvent<HTMLButtonElement>) => {
-    const newVal = gameOptions.speed - 100;
-    handleUpdateSpeed(newVal);
-  }, [handleUpdateSpeed, gameOptions]);
-
-  return (
-    <div className='control-panel'>
-      <ButtonGroup
-        buttons={controlButtons}
-        buttonStyleProps={{
-          width: '50px'
-        }}
-      />
-
-      <div className='speed-selector'>
-        <button onClick={handleSpeedUp}><IoAdd /></button>
-        <input
-          value={gameOptions.speed}
-          onChange={handleSpeedChange}
-        />
-        <button onClick={handleSpeedDown}><IoRemove /></button>
-      </div>
-
-      <button><CiSettings/></button>
-    </div>
-  );
-}
-
-export default ControlPanel;

src/components/game/Game.tsx

@@ -2,7 +2,7 @@ import CellContainer from './CellContainer';
 import {useCallback, useEffect, useRef, useState} from 'react';
 
 import '../../styles/game.less';
-import ControlPanel from './ControlPanel';
+import {ControlPanel} from './controlPanel';
 
 interface GameProps {
 
@@ -33,7 +33,7 @@ const defaultGameOptions: GameOptions = {
   gameState: GameState.Stopped,
   width: 25,
   height: 25,
-  speed: 1000,
+  speed: 200,
   minSpeed: 10,
   randomizerDensity: 0.3,
   gameRules: {

src/components/game/controlPanel/ControlElement.tsx

@@ -0,0 +1,22 @@
+import * as React from "react";
+
+interface ControlElementProps {
+  title?: string;
+  children?: React.ReactNode;
+  alignment?: 'start'|'center'|'end';
+}
+
+const ControlElement = ({title, children, alignment = 'start'}: ControlElementProps) => {
+  return (
+    <div className='control-element' style={{alignItems: alignment}}>
+      <div>
+        {title}
+      </div>
+      <div>
+        {children}
+      </div>
+    </div>
+  );
+}
+
+export default ControlElement;

src/components/game/controlPanel/ControlPanel.tsx

@@ -0,0 +1,62 @@
+import {ButtonDefinition, ButtonGroup} from '../../button';
+import {
+  AiOutlineClear,
+  BsFillPlayFill,
+  BsFillStopFill,
+  CiSettings,
+  TbArrowsRandom
+} from 'react-icons/all';
+import React, {useMemo} from 'react';
+import {GameOptions, GameState} from '../Game';
+import SpeedSelector from "./SpeedSelector";
+import ControlElement from "./ControlElement";
+
+interface ControlPanelProps {
+  gameOptions: GameOptions;
+  handleStart: React.MouseEventHandler<HTMLButtonElement>;
+  handleStop: React.MouseEventHandler<HTMLButtonElement>;
+  handleRandomFill: React.MouseEventHandler<HTMLButtonElement>;
+  handleClear: React.MouseEventHandler<HTMLButtonElement>;
+  handleUpdateSpeed: (newVal: number) => void;
+}
+
+const ControlPanel = ({
+                        gameOptions,
+                        handleStart,
+                        handleStop,
+                        handleRandomFill,
+                        handleClear,
+                        handleUpdateSpeed
+}: ControlPanelProps) => {
+  const controlButtons: ButtonDefinition[] = useMemo(() => [
+    {text: <BsFillPlayFill />, title: 'Start', onClick: handleStart, cssProps: {}, buttonProps: {disabled: gameOptions.gameState === GameState.Running}},
+    {text: <BsFillStopFill />, title: 'Stop', onClick: handleStop, cssProps: {}, buttonProps: {disabled: gameOptions.gameState === GameState.Stopped}},
+    {text: <TbArrowsRandom />, title: 'Randomize Cells', onClick: handleRandomFill, cssProps: {}},
+    {text: <AiOutlineClear />, title: 'Clear Cells', onClick: handleClear, cssProps: {}}
+  ], [handleStart, handleStop, handleRandomFill, handleClear, gameOptions]);
+  return (
+    <div className='control-panel'>
+      <ControlElement title='Actions'>
+        <ButtonGroup
+          buttons={controlButtons}
+          buttonStyleProps={{
+            width: '50px'
+          }}
+        />
+      </ControlElement>
+
+      <ControlElement title='Change Speed'>
+        <SpeedSelector
+          handleUpdateSpeed={handleUpdateSpeed}
+          speed={gameOptions.speed}
+        />
+      </ControlElement>
+
+      <ControlElement>
+        <button><CiSettings/></button>
+      </ControlElement>
+    </div>
+  );
+}
+
+export default ControlPanel;

src/components/game/controlPanel/SpeedSelector.tsx

@@ -0,0 +1,37 @@
+import React, { useCallback } from "react";
+import {IoAdd, IoRemove} from "react-icons/all";
+
+interface SpeedSelectorProps {
+  handleUpdateSpeed: (newVal: number) => void;
+  speed: number;
+}
+
+const SpeedSelector = ({handleUpdateSpeed, speed}: SpeedSelectorProps) => {
+  const handleSpeedChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
+    const value = event.target.value;
+    handleUpdateSpeed(Number(value));
+    }, [handleUpdateSpeed]);
+
+  const handleSpeedUp = useCallback((event: React.MouseEvent<HTMLButtonElement>) => {
+    const newVal = speed + 100;
+    handleUpdateSpeed(newVal);
+    }, [handleUpdateSpeed, speed]);
+
+  const handleSpeedDown = useCallback((event: React.MouseEvent<HTMLButtonElement>) => {
+    const newVal = speed - 100;
+    handleUpdateSpeed(newVal);
+    }, [handleUpdateSpeed, speed]);
+
+  return (
+    <div className='speed-selector'>
+      <button onClick={handleSpeedUp}><IoAdd /></button>
+      <input
+        value={speed}
+        onChange={handleSpeedChange}
+      />
+      <button onClick={handleSpeedDown}><IoRemove /></button>
+    </div>
+  );
+}
+
+export default SpeedSelector;

src/components/game/controlPanel/index.ts

@@ -0,0 +1 @@
+export {default as ControlPanel} from './ControlPanel';

src/styles/game.less

@@ -12,6 +12,14 @@
     display: flex;
     justify-content: space-between;
     margin-bottom: 1rem;
+
+    .control-element {
+      display: flex;
+      flex-direction: column;
+      gap: 5px;
+
+      justify-content: end;
+    }
   }
 
   .speed-selector {
@@ -38,7 +46,6 @@
       border: 1px solid @col-dark-light;
       width: 100%;
       height: 100%;
-      //pointer-events: none;
 
       user-select: none;
 

src/styles/main.less

@@ -11,8 +11,7 @@ body {
 
 
   .main {
-    height: 100vh;
+    min-height: 100vh;
-    width: 100%;
 
     display: flex;
     justify-content: center;