Add basic button control (no functionality)

package-lock.json

@@ -10,7 +10,8 @@
       "dependencies": {
         "classnames": "^2.3.2",
         "react": "^18.2.0",
-        "react-dom": "^18.2.0"
+        "react-dom": "^18.2.0",
+        "react-icons": "^4.6.0"
       },
       "devDependencies": {
         "@types/react": "^18.0.17",
@@ -1455,6 +1456,14 @@
         "react": "^18.2.0"
       }
     },
+    "node_modules/react-icons": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.6.0.tgz",
+      "integrity": "sha512-rR/L9m9340yO8yv1QT1QurxWQvWpbNHqVX0fzMln2HEb9TEIrQRGsqiNFQfiv9/JEUbyHmHPlNTB2LWm2Ttz0g==",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-refresh": {
       "version": "0.14.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.0.tgz",
@@ -2620,6 +2629,12 @@
         "scheduler": "^0.23.0"
       }
     },
+    "react-icons": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.6.0.tgz",
+      "integrity": "sha512-rR/L9m9340yO8yv1QT1QurxWQvWpbNHqVX0fzMln2HEb9TEIrQRGsqiNFQfiv9/JEUbyHmHPlNTB2LWm2Ttz0g==",
+      "requires": {}
+    },
     "react-refresh": {
       "version": "0.14.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.0.tgz",

package.json

@@ -11,7 +11,8 @@
   "dependencies": {
     "classnames": "^2.3.2",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-icons": "^4.6.0"
   },
   "devDependencies": {
     "@types/react": "^18.0.17",

src/components/button/ButtonGroup.tsx

@@ -0,0 +1,35 @@
+import React, {CSSProperties} from 'react';
+
+interface ButtonGroupProps {
+  buttons: ButtonDefinition[];
+  buttonStyleProps: CSSProperties;
+}
+
+export interface ButtonDefinition {
+  text: string|JSX.Element;
+  onClick: React.MouseEventHandler<HTMLButtonElement>;
+  cssProps: CSSProperties;
+}
+
+const ButtonGroup = ({buttons, buttonStyleProps}: ButtonGroupProps) => {
+  return (
+    <div className='button-group'>
+      {
+        buttons.map(((btn, index) => (
+          <button
+            key={index}
+            onClick={btn.onClick}
+            style={{
+              ...buttonStyleProps,
+              ...btn.cssProps
+            }}
+          >
+            <>{btn.text}</>
+          </button>
+        )))
+      }
+    </div>
+  );
+}
+
+export default ButtonGroup;

src/components/button/index.tsx

@@ -0,0 +1,2 @@
+export {default as ButtonGroup} from './ButtonGroup';
+export type { ButtonDefinition } from './ButtonGroup';

src/components/game/Cell.tsx

@@ -33,9 +33,9 @@ const Cell = ({value, position, updateCell}: CellProps) => {
   return (
     <div
       className={cellClasses}
+      draggable={false}
       onMouseDown={handleCellMouseDown}
-      // onMouseEnter={handleCellMouseEnter}
-      onMouseOver={handleCellMouseOver}
+      onMouseEnter={handleCellMouseOver}
     />
   )
 }

src/components/game/ControlPanel.tsx

@@ -0,0 +1,38 @@
+import {ButtonDefinition, ButtonGroup} from '../button';
+import {AiOutlineClear, BsFillPlayFill, BsFillStopFill, CiSettings, TbArrowsRandom} from 'react-icons/all';
+import React, {useMemo} from 'react';
+
+interface ControlPanelProps {
+  handleStart: React.MouseEventHandler<HTMLButtonElement>;
+  handleStop: React.MouseEventHandler<HTMLButtonElement>;
+  handleRandomFill: React.MouseEventHandler<HTMLButtonElement>;
+  handleClear: React.MouseEventHandler<HTMLButtonElement>;
+}
+
+const ControlPanel = ({
+                        handleStart,
+                        handleStop,
+                        handleRandomFill,
+                        handleClear
+}: ControlPanelProps) => {
+  const controlButtons: ButtonDefinition[] = useMemo(() => [
+    {text: <BsFillPlayFill />, onClick: handleStart, cssProps: {}},
+    {text: <BsFillStopFill />, onClick: handleStop, cssProps: {}},
+    {text: <TbArrowsRandom />, onClick: handleRandomFill, cssProps: {}},
+    {text: <AiOutlineClear />, onClick: handleClear, cssProps: {}}
+  ], [handleStart, handleStop, handleRandomFill, handleClear]);
+
+  return (
+    <div className='control-panel'>
+      <ButtonGroup
+        buttons={controlButtons}
+        buttonStyleProps={{
+          width: '50px'
+        }}
+      />
+      <button><CiSettings/></button>
+    </div>
+  );
+}
+
+export default ControlPanel;

src/components/game/Game.tsx

@@ -2,6 +2,7 @@ import CellContainer from './CellContainer';
 import {useCallback, useEffect, useState} from 'react';
 
 import '../../styles/game.less';
+import ControlPanel from './ControlPanel';
 
 interface GameProps {
 
@@ -41,6 +42,12 @@ const Game = ({}: GameProps) => {
 
   return (
     <div className='game-container'>
+      <ControlPanel
+        handleStart={() => {}}
+        handleStop={() => {}}
+        handleRandomFill={() => {}}
+        handleClear={() => {}}
+      />
       <CellContainer
         cells={cells}
         width={gameOptions.width}

src/styles/colors.less

@@ -1,4 +1,4 @@
 @col-dark: #171717;
 @col-dark-light: #444444;
-@col-primary: #DA0037;
+@col-primary: #da005e;
 @col-light: #EDEDED;

src/styles/game.less

@@ -1,20 +1,30 @@
 @import 'colors';
 
 .game-container {
-  min-width: 1000px;
-  min-height: 1000px;
-
   display: flex;
+  flex-direction: column;
+
+  .control-panel {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 1rem;
+  }
 
   .cell-container {
     flex-grow: 1;
     display: grid;
 
+    min-width: 500px;
+    min-height: 500px;
+
     .cell {
       background: @col-dark;
       border: 1px solid @col-dark-light;
       width: 100%;
       height: 100%;
+      //pointer-events: none;
+
+      user-select: none;
 
       &.active {
         background: @col-primary;

src/styles/main.less

@@ -19,3 +19,13 @@ body {
     align-items: center;
   }
 }
+
+button {
+  display: inline-flex;
+  padding: 7px 10px;
+  margin: 0;
+  font-size: 20px;
+
+  align-content: center;
+  justify-content: center;
+}