clicking adds to the board now

client/src/App.css

@@ -14,7 +14,7 @@
 }
 
 .App-header {
-  background-color: #282c34;
+  background-color: #bcbcbc;
   min-height: 100vh;
   display: flex;
   flex-direction: column;

client/src/App.js

@@ -13,6 +13,21 @@ function App() {
       <header className="App-header">
 
       <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', padding: '20px' }}>
+      <div style={{
+        boxShadow: '0 4px 8px 0 rgba(0,0,0,0.2)',
+        transition: '0.3s',
+        width: `${boardWidth}px`, // Dynamically set width
+        height: `100px`, 
+        margin: '10px',
+        position: 'relative',
+        overflow: 'hidden',
+        borderRadius: '10px', // Rounded corners
+      }}>
+        <div>
+          
+        </div>
+      </div>
+
       <div style={{
         boxShadow: '0 4px 8px 0 rgba(0,0,0,0.2)',
         transition: '0.3s',

client/src/GameBoard.js

 import React, { useState, useEffect, useRef, useCallback } from 'react';
 
 const GameBoard = () => {
-  const [camera, setCamera] = useState({ x: 0, y: 0 });
+  const [camera, setCamera] = useState({ x: 0, y: 0 }); // camera pos is at the top right corner! good to keep in mind
   const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
   const gameBoardRef = useRef(null);
   const dragStartRef = useRef({ x: 0, y: 0 });
@@ -12,8 +12,10 @@ const GameBoard = () => {
   const [isDragging, setIsDragging] = useState(false);
   const [clickPositions, setClickPositions] = useState([]);
 
+  const [boardState, setBoardState] = useState([]); // this is supposed to be integer values corresponding to the cells
 
-  const cellSize = 65;
+
+  const cellSize = 65; // make variable at some point
 
   // Update dimensions based on the parent container
   const updateDimensions = useCallback(() => {
@@ -67,6 +69,7 @@ const GameBoard = () => {
         if (clickX >= 0 && clickX <= gameBoardRect.width && clickY >= 0 && clickY <= gameBoardRect.height) {
             setClickedAt({ x: clickX + camera.x, y: clickY + camera.y });
             setClickPositions(oldPositions => [...oldPositions, { x: clickX + camera.x, y: clickY + camera.y }]); // add the camera as like a translation bruh
+            addToBoard(clickX + camera.x, clickY + camera.y);
         }
     }
     setIsMouseDown(false);
@@ -83,6 +86,17 @@ const GameBoard = () => {
     };
   }, [isMouseDown, isDragging]);
 
+  function addToBoard(x, y) {
+    // Get pos on the board when clicking!
+    var floor = Math.floor;
+    var boardPosX = floor(Number(x/cellSize));
+    var boardPosY = floor(Number(y/cellSize));
+
+    console.log(boardPosX, boardPosY);
+    setBoardState(oldState => [...oldState, { x: boardPosX, y: boardPosY }])
+
+  }
+
   // Adjusted render function to use component dimensions
   const renderGameBoard = () => {
     const startCol = Math.floor(camera.x / cellSize);
@@ -102,7 +116,10 @@ const GameBoard = () => {
       <svg width={dimensions.width} height={dimensions.height} style={{ display: 'block' }}>
         {lines}
         {clickPositions.map((pos, index) => (
-        <circle key={index} cx={pos.x - camera.x} cy={pos.y - camera.y} r="10" fill="red" />
+        <circle key={index} cx={pos.x - camera.x} cy={pos.y - camera.y} r="5" fill="red" />
+      ))}
+      {boardState.map((pos, index) => (
+        <circle key={index} cx={pos.x * cellSize + cellSize/2 - camera.x} cy={pos.y * cellSize + cellSize/2 - camera.y} r="10" fill="blue" />
       ))}
       </svg>
     );