I want to create a simple game that allows users to pick a card, and reveal if the player has won a price or not. I want when the user clicks the card, to reveal a message if they won or not, but make sure that after one card is clicked, all buttons are disabled and the player cannot click/reveal the other 2 components/card message. 1. I cannot get the button to disable the other buttons when its clicked. 2. I'm struggling to make sure that the winning card is different each time. Here's my code
CSS:
.cards{
background-color: red;
display: flex;
justify-content: center;
align-items: center;
height: 20vh;
}
[class*=cardDisplay]{
height: 80%;
display: flex;
align-items: center;
justify-content: center;
width: 200px;
background: black;
color: white;
margin: auto;
}
[class*=card-content]{
display: none;
}
[class*=card-content-2]{
display: block;
}
React
function Card({className, children}) {
const [styling, setStyling] = useState("card-content");
const handleClick = (e) => {
setStyling("card-content-2")
e.target.setAttribute('disabled', 'disabled')
};
return (
<div className={`cardDisplay ${className}`} >
<p className={styling}>{children}</p>
<button type="button" onClick={handleClick}>
Click
</button>
</div>
);
};
function Game() {
return (
<div className="cards">
<Card className="card-1" children="win" onClick/>
<Card className="card-2" children="Sorry, no win"/>
<Card className="card-3" children="Sorry, no win"/>
</div>
);
}
You need to use state that holds the information whether or not all cards should be disabled. Then, pass a function to the card, that flips this state.
function Game() {
const [cardsDisabled, setCardsDisabled] = useState(false);
const disableAllCards = () => setCardsDisabled(true);
return (
<div className="cards">
<Card className="card-1"
children="win"
isDisabled={cardsDisabled}
disableAllCards={disableAllCards}/>
<Card className="card-2"
children="Sorry, no win"
isDisabled={cardsDisabled}
disableAllCards={disableAllCards}/>
<Card className="card-3"
children="Sorry, no win"
isDisabled={cardsDisabled}
disableAllCards={disableAllCards}/>
</div>
);
}
function Card({className, isDisabled, disableAllCards, children}) {
const [styling, setStyling] = useState("card-content");
const handleClick = (e) => {
disableAllCards();
};
return (
<div className={`cardDisplay ${className}`} >
<p className={styling}>{children}</p>
<button type="button"
disabled={isDisabled}
onClick={handleClick}>
Click
</button>
</div>
);
};
You can then select the disabled property in CSS by using card:disabled {...}.