upd placement
This commit is contained in:
parent
9db8c417ed
commit
acb97019b0
z1/frontend/src/components
@ -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 {
|
||||||
|
@ -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}
|
||||||
|
Loading…
Reference in New Issue
Block a user