Merge pull request #4 from ILW8/main

add cancel transition button

Author: shdewz

mappool/index.html

@@ -30,6 +30,7 @@
             <div id="autoAdvanceTimer" class="control-label">
                 <span id="autoAdvanceTimerLabel"></span> <span id="autoAdvanceTimerTime"></span>
             </div>
+            <div id="cancelAdvanceButton" class="button control-item" onclick="cancelAdvance()">Cancel transition</div>
 
             <br/><br/>
 

mappool/index.js

@@ -32,9 +32,11 @@ let autoadvance_button = document.getElementById('autoAdvanceButton');
 autoadvance_button.style.backgroundColor = '#fc9f9f';  // default to off
 
 let autoadvance_timer_container = document.getElementById('autoAdvanceTimer');
+let autoadvance_cancel_transition = document.getElementById('cancelAdvanceButton');
 let autoadvance_timer_label = document.getElementById('autoAdvanceTimerLabel');
 let autoadvance_timer_time = new CountUp('autoAdvanceTimerTime', 10, 0, 1, 10, {useEasing: false, suffix: 's'});
 autoadvance_timer_container.style.opacity = '0';
+autoadvance_cancel_transition.style.opacity = '0';
 
 let enableAutoAdvance = false;
 let sceneTransitionTimeoutID;
@@ -219,13 +221,16 @@ const pickMap = (bm, teamName, color) => {
     if (enableAutoAdvance) {
         // idempotent on pick color (none/red/blue). Consider making it idempotent on pick state? (not picked/picked)
         if (selectedMapsTransitionTimeout[bm.beatmapID]?.color !== color) {
+            cancelAdvance();
             clearTimeout(selectedMapsTransitionTimeout[bm.beatmapID]?.timeoutId)
-            selectedMapsTransitionTimeout[bm.beatmapID] = {
-                color: color,
-                timeoutId: setTimeout(() => {
+            const newTimeoutId = setTimeout(() => {
                     obsSetCurrentScene(gameplay_scene_name);
                     autoadvance_timer_container.style.opacity = '0';
-                }, pick_to_transition_delay_ms)
+                    autoadvance_cancel_transition.style.opacity = '0';
+                }, pick_to_transition_delay_ms);
+            selectedMapsTransitionTimeout[bm.beatmapID] = {
+                color: color,
+                timeoutId: newTimeoutId
             };
 
             autoadvance_timer_time = new CountUp('autoAdvanceTimerTime',
@@ -234,6 +239,14 @@ const pickMap = (bm, teamName, color) => {
             autoadvance_timer_time.start();
             autoadvance_timer_container.style.opacity = '1';
             autoadvance_timer_label.textContent = `Switching to ${gameplay_scene_name} in`;
+            autoadvance_cancel_transition.style.opacity = '1';
+
+
+            cancelAdvance = () => {
+                clearTimeout(newTimeoutId);
+                autoadvance_timer_container.style.opacity = '0';
+                autoadvance_cancel_transition.style.opacity = '0';
+            }
         }
     }
 }
@@ -287,6 +300,10 @@ const switchAutoAdvance = () => {
     }
 }
 
+var cancelAdvance = () => {
+    // do nothing at first, wait to have a cancel action assigned to it
+}
+
 const TourneyState = {
     'Initialising': 0,
     'Idle': 1,