feat(league): fix simultetris placement + some refactoring

public/views/mp/league.html

@@ -200,7 +200,7 @@
 				display: none;
 				position: absolute;
 				transform-origin: 50% 50%;
-				top: 150px;
+				top: 400px;
 				--offset: 341px;
 				right: var(--offset);
 			}
@@ -332,7 +332,7 @@
 			import CompetitionPlayer from '/views/CompetitionPlayer.js';
 			import Competition from '/views/competition.js';
 			import InvisibleMixin from '/views/InvisibleMixin.js';
-			import { easeOutElastic } from '/js/anim.js';
+			import { easeOutElastic, getRandomAngle } from '/js/anim.js';
 
 			const SHOW_SIMUL_TETRIS = /^[1-9]\d*$/.test(QueryString.get('simultris'));
 			const SIMUL_TETRIS_DELAY = SHOW_SIMUL_TETRIS
@@ -453,20 +453,19 @@
 							// clear all ongoing simul-tetris timers for this match
 							while (sync_timers.length) clearTimeout(sync_timers.pop());
 
+							const start_time = Date.now();
+							const scale_start = 0;
+							const duration = 750;
+
 							match_players.forEach(player => {
 								window.cancelAnimationFrame(player.animationId);
 
 								// show the simul-tetris sign
-								const scale_start = 0;
 								const scale_end = 0.85 + Math.random() * 0.1;
 								const scale_change = scale_end - scale_start;
-								const angle = -10 + Math.random() * 20;
-								const duration = 750;
+								const angle = getRandomAngle(2, 10);
 
 								player.dom.simul_tetris.style.display = 'inline';
-								player.dom.simul_tetris.style.transform = `scale(${scale_start}) rotate(${angle}deg)`;
-
-								const start_time = Date.now();
 
 								function step() {
 									const elapsed = Date.now() - start_time;
@@ -490,7 +489,7 @@
 									}
 								}
 
-								player.animationId = window.requestAnimationFrame(step);
+								step();
 							});
 						}
 					};