Fix fall manager

src/FallManager.css

+@-webkit-keyframes falling {
+
+    0% {
+        -webkit-transform:
+                translate3d(300,0,0)
+                rotate(0deg);
+    }
+
+    100% {
+        -webkit-transform:
+                translate3d(-350px,700px,0)
+                rotate(90deg);
+        opacity: 0;
+    }
+}
+
+.falling {
+    animation: falling 5s infinite
+}
\ No newline at end of file

src/FallManager.js

+import './FallManager.css'
+
 class FallManager {
-    maxheight
 
-    constructor(maxheight) {
-        console.log('L\'alterzza massima è  ' + maxheight)
-        this.maxheight = maxheight
-        window.maxheight = maxheight
+    fallings = []
+    maxHeight = 0
+
+    constructor() {
+        window.onresize = () => {
+            this.maxHeight = document.documentElement.scrollHeight
+        }
+        this.maxHeight = document.documentElement.scrollHeight
     }
 
     tick() {
-        this.setFallable()
-        this.fall()
-
+        this.fallings.forEach(a => {
+            const rect = a.element.getBoundingClientRect()
+            a.top+= 2 + Math.round(Math.random() * 4);
+            a.ticks--;
+            a.clonedElement.style = `z-index: 10000; position: absolute; top: ${a.top}px; left: ${rect.left + window.scrollX}px;
+            width: ${a.element.offsetWidth}px; height: ${a.element.offsetHeight}; opacity: ${a.ticks > 50 ? (a.ticks - 50)/50 : 1}`
+            if (a.ticks === 0) {
+                a.clonedElement.remove()
+            }
+            if (a.top < 0 || a.top > this.maxHeight - 100) {
+                a.ticks = 0
+                a.clonedElement.remove()
+            }
+        })
+        this.fallings = this.fallings.filter(a => a.ticks !== 0)
+        if (Math.round(Math.random() * 50) === 25) {
+            const elements = Array.from(document.querySelectorAll('.real-usable'))
+            const element = elements[Math.round(Math.random() * elements.length)]
+            const clonedElement = element.cloneNode(true)
+            document.getElementById('game-container').appendChild(clonedElement)
+            console.log(element)
+            const rect = element.getBoundingClientRect()
+            const falling = {
+                element,
+                clonedElement,
+                ticks: 100 + Math.round(Math.random() * 50),
+                top: rect.top + window.scrollY
+            }
+            element.style = 'opacity: 0'
+            clonedElement.style = `z-index: 100000; position: absolute; top: ${falling.top}px; left: ${rect.left + window.scrollX}px;
+            width: ${element.offsetWidth}px; height: ${element.offsetHeight}; opacity: 1`
+            clonedElement.classList.remove('real-usable')
+            element.classList.remove('real-usable')
+            element.classList.remove('usable')
+            clonedElement.classList.add('falling')
+            this.fallings.push(falling)
+        }
+        /*this.setFallable()
+        this.fall()*/
     }
 
     fall() {

src/Game.js

@@ -58,8 +58,7 @@ class Game {
                 }
             }
         }*/
-        
-        //this.fallmanager = new FallManager(document.documentElement.scrollHeight);
+
         this.homeFinder = new HomeFinder()
         this.goal = this.homeFinder.selectGoal(true)
         const oldOnclick = this.goal.onclick
@@ -88,6 +87,7 @@ class Game {
             behavior: 'smooth'
         });
         setTimeout(() => {
+            this.fallmanager = new FallManager();
             this.pageParser = new PageParser(this)
             this.character = new Character(this)
             this.multiplayer = new Multiplayer(this)
@@ -96,7 +96,7 @@ class Game {
             this.ticker.add(this.gameFinishChecker)
             this.ticker.add(this.UIManager)
             this.UIManager.startTimer()
-            //this.ticker.add(this.fallmanager)
+            this.ticker.add(this.fallmanager)
         }, this.delayBeforeStart)
 
         this.playSound(this.bgmusic)

src/Projectile.css

@@ -5,10 +5,12 @@
     background: #ffbc24;
     border: 6px solid pink;
     position: absolute;
+    z-index: 5000
 }
 
 .game-explosion {
     width: 100px;
     height: 100px;
     position: absolute;
+    z-index: 5000
 }
\ No newline at end of file