I am making a drag n drop sort of game where you match the logos with their corresponding name.
If user matches the logo with the name correctly than the field which you could drop the logo gets additional classes.
Like this:
if (isCorrectMatching) {
event.target.classList.add('dropped');
draggableElement.classList.add('dragged');
event.target.classList.add('dragged');
event.target.setAttribute('draggable', 'false');
draggableElement.setAttribute('draggable', 'false');
event.target.innerHTML = `<i class="fab fa-${draggableElementBrand}" style="color: ${draggableElement.style.color};"></i>`;
}
If every match is found user can go to next level , my problem is that these additional classes are staying there , how do I remove them ?
I am mapping them out like this:
<div className='containerItems'>
{draggableItems.map((x,i) => {
return (
<div className='draggable-items'>
<i
onDragStart={(e) => dragStart(e)}
className={`draggable fab fa-${x}`}
id={x}
draggable='true'
ref={draggableOnes.current[i]}
></i>
</div>
);
})}
</div>
{matchingPairs.map((x,i) => {
return (
<section className='matching-pairs'>
<div className='matching-pair'>
<span className='label'>{x}</span>
<span
className='droppable'
// ref={droppableOnes.current[i]}
onDragEnter={(e) => dragEnter(e)}
onDragOver={(e) => dragOver(e)}
onDragLeave={(e) => dragLeave(e)}
onDrop={(e) => drop(e)}
data-brand={x}
></span>
</div>
</section>
);
I can not seem to solve this one, like how do I remove all the classes that I’ve added when there was a correct matching.
I would like to remove basically everything that I’ve added in my if (isCorrectMatching) .
I’ve tried to use refs but it did not work. What is the way to go for this?