upd placement

z1/frontend/src/components/PlacementBoard.css

@@ -17,22 +17,43 @@
   color: #333;
 }
 
-.ship-label {
-  font-size: 1.2rem;
+.controls {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+  justify-content: center;
+  margin-bottom: 1.5rem;
+}
+
+.control-group {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.ship-label,
+.orientation-label {
+  font-size: 1.1rem;
   margin-bottom: 0.5rem;
   color: #555;
-  display: block;
+  font-weight: 600;
+}
+
+.ship-select,
+.orientation-select {
+  font-size: 1.1rem;
+  padding: 0.6rem;
+  border: 1px solid #ccc;
+  border-radius: 6px;
+  background-color: #f9f9f9;
 }
 
 .ship-select {
-  font-size: 1.2rem;
-  padding: 0.6rem;
-  margin-bottom: 1.5rem;
-  border: 1px solid #ccc;
-  border-radius: 6px;
-  width: 100%;
-  max-width: 300px;
-  background-color: #f9f9f9;
+  width: 220px;
+}
+
+.orientation-select {
+  width: 150px;
 }
 
 .finish-button {

z1/frontend/src/components/PlacementBoard.jsx

@@ -13,6 +13,20 @@ function PlacementBoard({ playerName, onPlacementDone }) {
   const [ships, setShips] = useState([]);
   const [selectedShipType, setSelectedShipType] = useState('Battleship (4 cells)');
   const [shipCounts, setShipCounts] = useState({});
+  const [orientation, setOrientation] = useState('horizontal');
+
+  const isOverlap = (newShip) => {
+    for (const ship of ships) {
+      for (const cell of ship) {
+        for (const newCell of newShip) {
+          if (cell.row === newCell.row && cell.col === newCell.col) {
+            return true;
+          }
+        }
+      }
+    }
+    return false;
+  };
 
   const handleCellClick = (row, col) => {
     const shipData = SHIPS_LIMIT[selectedShipType];
@@ -27,14 +41,28 @@ function PlacementBoard({ playerName, onPlacementDone }) {
       return;
     }
 
-    if (col + shipData.size > 10) {
-      alert('Ship is out of bounds!');
-      return;
+    let newShip = [];
+    if (orientation === 'horizontal') {
+      if (col + shipData.size > 10) {
+        alert('Ship is out of bounds horizontally!');
+        return;
+      }
+      for (let i = 0; i < shipData.size; i++) {
+        newShip.push({ row, col: col + i });
+      }
+    } else {
+      if (row + shipData.size > 10) {
+        alert('Ship is out of bounds vertically!');
+        return;
+      }
+      for (let i = 0; i < shipData.size; i++) {
+        newShip.push({ row: row + i, col });
+      }
     }
 
-    const newShip = [];
-    for (let i = 0; i < shipData.size; i++) {
-      newShip.push({ row, col: col + i });
+    if (isOverlap(newShip)) {
+      alert('Ships cannot overlap!');
+      return;
     }
 
     setShips([...ships, newShip]);
@@ -45,6 +73,7 @@ function PlacementBoard({ playerName, onPlacementDone }) {
   };
 
   const handleDone = () => {
+ 
     if (
       Object.keys(SHIPS_LIMIT).some(
         (type) => (shipCounts[type] || 0) < SHIPS_LIMIT[type].max
@@ -60,18 +89,34 @@ function PlacementBoard({ playerName, onPlacementDone }) {
     <div className="placement-board">
       <h2>Ship Placement: {playerName}</h2>
 
-      <label className="ship-label">Select ship type:</label>
-      <select
-        className="ship-select"
-        onChange={(e) => setSelectedShipType(e.target.value)}
-        value={selectedShipType}
-      >
-        {Object.keys(SHIPS_LIMIT).map((ship, index) => (
-          <option key={index} value={ship}>
-            {ship} ({shipCounts[ship] || 0}/{SHIPS_LIMIT[ship].max})
-          </option>
-        ))}
-      </select>
+      <div className="controls">
+        <div className="control-group">
+          <label className="ship-label">Ship type:</label>
+          <select
+            className="ship-select"
+            onChange={(e) => setSelectedShipType(e.target.value)}
+            value={selectedShipType}
+          >
+            {Object.keys(SHIPS_LIMIT).map((ship, index) => (
+              <option key={index} value={ship}>
+                {ship} ({shipCounts[ship] || 0}/{SHIPS_LIMIT[ship].max})
+              </option>
+            ))}
+          </select>
+        </div>
+
+        <div className="control-group">
+          <label className="orientation-label">Orientation:</label>
+          <select
+            className="orientation-select"
+            onChange={(e) => setOrientation(e.target.value)}
+            value={orientation}
+          >
+            <option value="horizontal">Horizontal</option>
+            <option value="vertical">Vertical</option>
+          </select>
+        </div>
+      </div>
 
       <Board
         boardSize={10}