I’m building a game with Phaser and React and I want that whenever the user opens the item menu (a grid with one div per item), if an item is selected, a secondary menu opens only on that div and not on the the rest. But I can’t get it to display only on the div I’m interacting with
BTW. I created a navigation system with the directional keys and some other buttons. When the user presses the “q” button, only one DIV should be selected. I’m using a useState and changing it from false to true every time the Q button is pressed. But this is opening the component on all elements and not only on the selected element :/
This is my code:
const InnerBox = ({
onDone,
}) => {
//handle selector menu
const [isSelectorOpen, setIsSelectorOpen] = useState(false);
useEffect(() => {
const handleKeyPressed = (e) => {
//To close the main menu if the e button is pressed
if (['Escape', 'KeyE'].includes(e.code) || e.target.id ==="eButtonX" ) {
onDone();
new Audio(closeMenu).play()
}
//To select all the boxes inside the grid and navigate within the keys
let menuElement= document.getElementsByClassName('menu-image')
if (!menuElement) return
//To iterate in each box inside the grid
for(var x=0; x<menuElement.length; x++) {
//To open each option in the main menu
if (['KeyQ', 'Enter'].includes(e.code) || e.target.id ==="qButtonX") {
//To open the selector option menu inside each individual box
if (menuElement[x].id === "items1") {
new Audio(openSubMenu).play();
setTimeout(() => {
setIsSelectorOpen(true)
}, 300);
}
//To keep the border menu item selected even when the button is pressed
return
}
menuElement[x].style.border = "solid 3px transparent";
}
}
window.addEventListener('keydown', handleKeyPressed);
window.addEventListener('pointerdown', handleKeyPressed);
return () => {
window.removeEventListener('keydown', handleKeyPressed);
window.removeEventListener('pointerdown', handleKeyPressed);
};
}, [onDone]);
return (
<>
<div id="innerMenuBar" style={{ position:'fixed', border: 'none', padding: 20, background:'#4c75fb', boxShadow: '0 5px 0 0 #24397D', borderRadius:5, outlineStyle:'none', left:'50%', top:'50%', transform: "translate(-50%, -50%)", zIndex:'2', marginBottom:'0', height:'70vh' }}>
<div id='innerMenu' className='menu-grid' style={{ overflow:'hidden', overflowY:'scroll', paddingRight:'10px' }}>
<div className="menu-item" style={{ border: 'solid 1px', position: 'relative'}}>
<img id="items1" className="menu-image" src={items} style={{ border: 'solid 3px'}}
onPointerOver={e => {
e.currentTarget.src = items2
e.target.style.border="solid 3px"
new Audio(moveMenu).play();}
}
onPointerLeave={e => {
e.currentTarget.src = items
e.target.style.border="solid transparent 3px"}
}
/>
{ isSelectorOpen ? <Selector /> : null }
</div>
<div className="menu-item" style={{ border: 'solid 1px', position: 'relative'}}>
<img id="items2" className="menu-image" src={items} style={{ border: 'solid transparent 3px'}}
onPointerOver={e => {
e.currentTarget.src = items2
e.target.style.border="solid 3px"
new Audio(moveMenu).play();}
}
onPointerLeave={e => {
e.currentTarget.src = items
e.target.style.border="solid transparent 3px"}
}
/>
{ isSelectorOpen ? <Selector /> : null }
</div>
</div>
<div className='innerMenu-description'>
<p> Description: Lorem Ipsu Lorem Ipsu</p>
</div>
</div>
</>
);
};
export default InnerBox;
