add confetti on result page of mathbox for max score

plabayo · Feb 8, 2024 · efd48ba · efd48ba
1 parent c5e75f9
commit efd48ba
Showing 1 changed file with 121 additions and 1 deletion.
diff --git a/site/1/mathbox.html b/site/1/mathbox.html
@@ -85,6 +85,17 @@
             margin: 20px auto;
             text-align: center;
         }
+
+        #confetti {
+            overflow-y: hidden;
+            overflow-x: hidden;
+            width: 100vw;
+            margin: 0;
+            height: 100vh;
+            position: absolute;
+            top: 0;
+            z-index: -1;
+        }
     </style>
 </head>
 
@@ -132,6 +143,7 @@ <h3 id="form-title"></h3>
         </div>
 
         <div id="page-result" hidden>
+            <canvas id="confetti"></canvas>
             <button class="button-reset">begin opnieuw ↩️</button>
             <div id="result" class="box">
             </div>
@@ -265,9 +277,15 @@ <h3 id="form-title"></h3>
                             document.getElementById("page-exercises").hidden = true;
                             document.getElementById("page-result").hidden = false;
 
+                            const score = window.mathBoxState.exerciseCount - window.mathBoxState.wrongExerciseCount;
+                            const total = window.mathBoxState.exerciseCount;
+
+                            // show confetti only at max score
+                            document.getElementById("confetti").style.height = score === total ? '100vh' : '0';
+
                             const feedback = document.getElementById("result");
                             feedback.innerHTML = `<h2>🎉 Proficiat, je hebt alle oefeningen gemaakt!<h2>`;
-                            feedback.innerHTML += `<h3>${window.mathBoxState.exerciseCount - window.mathBoxState.wrongExerciseCount} &sol; ${window.mathBoxState.exerciseCount}</h3>`;
+                            feedback.innerHTML += `<h3>${score} &sol; ${total}</h3>`;
                             if (window.mathBoxState.wrongExercises.length > 0) {
                                 if (window.mathBoxState.wrongExercises.length === 1) {
                                     feedback.innerHTML += `<p>Je hebt deze oefening fout gemaakt:</p>`;
@@ -351,6 +369,108 @@ <h3 id="form-title"></h3>
                     e.preventDefault();
                     validateAnswer();
                 });
+
+                // confetti
+
+                (() => {
+                    let W = window.innerWidth;
+                    let H = window.innerHeight;
+                    const canvas = document.getElementById('confetti');
+                    const context = canvas.getContext("2d");
+                    const maxConfettis = 25;
+                    const particles = [];
+
+                    const possibleColors = [
+                        "#ff7336",
+                        "#f9e038",
+                        "#02cca4",
+                        "#383082",
+                        "#fed3f5",
+                        "#b1245a",
+                        "#f2733f"
+                    ];
+
+                    function randomFromTo(from, to) {
+                        return Math.floor(Math.random() * (to - from + 1) + from);
+                    }
+
+                    function confettiParticle() {
+                        this.x = Math.random() * W; // x
+                        this.y = Math.random() * H - H; // y
+                        this.r = randomFromTo(11, 33); // radius
+                        this.d = Math.random() * maxConfettis + 11;
+                        this.color =
+                            possibleColors[Math.floor(Math.random() * possibleColors.length)];
+                        this.tilt = Math.floor(Math.random() * 33) - 11;
+                        this.tiltAngleIncremental = Math.random() * 0.07 + 0.05;
+                        this.tiltAngle = 0;
+
+                        this.draw = function () {
+                            context.beginPath();
+                            context.lineWidth = this.r / 2;
+                            context.strokeStyle = this.color;
+                            context.moveTo(this.x + this.tilt + this.r / 3, this.y);
+                            context.lineTo(this.x + this.tilt, this.y + this.tilt + this.r / 5);
+                            return context.stroke();
+                        };
+                    }
+
+                    function Draw() {
+                        const results = [];
+
+                        // Magical recursive functional love
+                        requestAnimationFrame(Draw);
+
+                        context.clearRect(0, 0, W, window.innerHeight);
+
+                        for (var i = 0; i < maxConfettis; i++) {
+                            results.push(particles[i].draw());
+                        }
+
+                        let particle = {};
+                        let remainingFlakes = 0;
+                        for (var i = 0; i < maxConfettis; i++) {
+                            particle = particles[i];
+
+                            particle.tiltAngle += particle.tiltAngleIncremental;
+                            particle.y += (Math.cos(particle.d) + 3 + particle.r / 2) / 2;
+                            particle.tilt = Math.sin(particle.tiltAngle - i / 3) * 15;
+
+                            if (particle.y <= H) remainingFlakes++;
+
+                            // If a confetti has fluttered out of view,
+                            // bring it back to above the viewport and let if re-fall.
+                            if (particle.x > W + 30 || particle.x < -30 || particle.y > H) {
+                                particle.x = Math.random() * W;
+                                particle.y = -30;
+                                particle.tilt = Math.floor(Math.random() * 10) - 20;
+                            }
+                        }
+
+                        return results;
+                    }
+
+                    window.addEventListener(
+                        "resize",
+                        function () {
+                            W = window.innerWidth;
+                            H = window.innerHeight;
+                            canvas.width = window.innerWidth;
+                            canvas.height = window.innerHeight;
+                        },
+                        false
+                    );
+
+                    // Push new confetti objects to `particles[]`
+                    for (var i = 0; i < maxConfettis; i++) {
+                        particles.push(new confettiParticle());
+                    }
+
+                    // Initialize
+                    canvas.width = W;
+                    canvas.height = H;
+                    Draw();
+                })();
             }
         </script>
     </main>