upd placement

This commit is contained in:
oleh 2025-03-15 13:29:46 +01:00
parent 9db8c417ed
commit acb97019b0
2 changed files with 95 additions and 29 deletions
z1/frontend/src/components

View File

@ -17,22 +17,43 @@
color: #333; color: #333;
} }
.ship-label { .controls {
font-size: 1.2rem; 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; margin-bottom: 0.5rem;
color: #555; 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 { .ship-select {
font-size: 1.2rem; width: 220px;
padding: 0.6rem; }
margin-bottom: 1.5rem;
border: 1px solid #ccc; .orientation-select {
border-radius: 6px; width: 150px;
width: 100%;
max-width: 300px;
background-color: #f9f9f9;
} }
.finish-button { .finish-button {

View File

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