import React, { useState, } from "react";
const Square = ({randomIndex, handelClick}) => {
const style = {
background: '#d2d2d2',
width: "150px",
height: "150px",
display: "inline-block"
};
const redStyle = {
background: 'red',
width: "150px",
height: "150px",
display: "inline-block"
}
return (
<div>
<table>
<td>
<tr>
<button onClick={() => handelClick(1)} style={randomIndex === 1 ? redStyle : style}></button>
</tr>
<tr>
<button onClick={() => handelClick(2)} style={randomIndex === 2 ? redStyle : style}></button>
</tr>
<tr>
<button onClick={() => handelClick(3)} style={randomIndex === 3 ? redStyle : style}></button>
</tr>
</td>
<td>
<tr>
<button onClick={() => handelClick(4)} style={randomIndex === 4 ? redStyle : style}></button>
</tr>
<tr>
<button onClick={() => handelClick(5)} style={randomIndex === 5 ? redStyle : style}></button>
</tr>
<tr>
<button onClick={() => handelClick(6)} style={randomIndex === 6 ? redStyle : style}></button>
</tr>
</td>
<td>
<tr>
<button onClick={() => handelClick(7)} style={randomIndex === 7 ? redStyle : style}></button>
</tr>
<tr>
<button onClick={() => handelClick(8)} style={randomIndex === 8 ? redStyle : style}></button>
</tr>
<tr>
<button onClick={() => handelClick(9)} style={randomIndex === 9 ? redStyle : style} />
</tr>
</td>
</table>
</div>
);
};
const App = () => {
const random = () => Math.floor(Math.random() * 10) + 1;
const [randomIndex, setRandomIndex] = useState(random());
const [score, setScore] = useState(0);
const newGame = () => {
//איך אני אומרת לו שהרבוע האקראי יצבע באדום?
setRandomIndex(random())
setScore(0);
};
const handelClick = (num) => {
setRandomIndex(random())
num === randomIndex ? setScore(score => score+5) : setScore(score => score-5)
}
return (
<div>
<div>score:{score} </div>
<Square randomIndex={randomIndex} handelClick={handelClick} />
<button text="new game" onClick={newGame} >
new Game
</button>
</div>
);
};
export default App;