I have a problem when deploying my project

[ahmed-s-fatahallah]

Hello, I have a mini project made with javascript and parcel as the bundler. It works fine when I run npm start on my PC, but when I deploy it on github pages or on netlify some code don't work specifically the code for detecting mouseup positions other code such as click listeners code and drag and drop code with mouse events listener and touch listenres work fine I don't know why I have tried to change the default: index.html to main: index.js in the package.json, but it doesn't build and I have tried to change the build command and the deploy command but no effect.

the full project code is in my github repo, and the project already deployed if you want to check anything:

https://github.com/ahmed-s-fatahallah/meteors-game/tree/gh-pages

project link:

https://ahmed-s-fatahallah.github.io/meteors-game/

It is supposed when you drop the meteor on any tile it reduces it's health (middle number) by 1 and change its border color but these effects don't happen

[mischnic]

It breaks in a minified production build because

        <div class="tiles-container">
          <div class="tile one"><span class="tile-text">3</span></div>
          <div class="tile two"><span class="tile-text">3</span></div>
          <div class="tile three"><span class="tile-text">3</span></div>
          <div class="tile four"><span class="tile-text">3</span></div>
          <div class="tile five middle"><span class="tile-text">4</span></div>
          <div class="tile six"><span class="tile-text">3</span></div>
          <div class="tile seven"><span class="tile-text">3</span></div>
          <div class="tile eight"><span class="tile-text">3</span></div>
          <div class="tile nine"><span class="tile-text">3</span></div>
        </div>

becomes (the classes are reordered by htmlnano)

        <div class="tiles-container">
          <div class="one tile"><span class="tile-text">3</span></div>
          <div class="tile two"><span class="tile-text">3</span></div>
          <div class="three tile"><span class="tile-text">3</span></div>
          <div class="four tile"><span class="tile-text">3</span></div>
          <div class="five middle tile"><span class="tile-text">4</span></div>
          <div class="six tile"><span class="tile-text">3</span></div>
          <div class="seven tile"><span class="tile-text">3</span></div>
          <div class="eight tile"><span class="tile-text">3</span></div>
          <div class="nine tile"><span class="tile-text">3</span></div>
        </div>

Which usually doesn't make a difference but somehow breaks your JS.

[ahmed-s-fatahallah]

It worked thanks aloooooooooooooot man, I always use element.classList.contains() to check for a class by JS but somehow I forgot 1 and used element.classList[0] that's why when the classes got reversed the code broke. Thanks again and I really appreciate your help and time, I have been asking around and wondering since yesterday.