Remove update timeout

Also fix some css

Author: duncte123

src/dashboard/checklist/main.vue

@@ -3,7 +3,7 @@
     <v-btn
       class="mt-1"
       @click="sendUncheckAll">
-      Uncheck all
+      Reset
     </v-btn>
     <h2 class="mt-2">Checklist</h2>
 <!--    <div class="multiselect with-transition" :class="{-->

src/extension/tracker/index.ts

@@ -290,6 +290,14 @@ async function setup(): Promise<void> {
     require('./bids').setup();
     require('./prizes').setup();
     require('./donations').setup();
+
+    // Update the donation total to a random number while testing
+    if (useTestData) {
+      setInterval(() => {
+        donationTotal.value += Math.random() * 1000;
+        nodecg().sendMessage('donationTotalUpdated', { total: donationTotal.value });
+      }, 10 * 1000);
+    }
     /* eslint-enable */
   } catch (err) {
     nodecg().log.warn('[Tracker] Error setting up');

src/graphics/omnibar/components/Ticker/Bid/Goal.vue

@@ -7,16 +7,6 @@
       'align-items': 'center',
     }"
   >
-<!--    <div
-      :style="{
-        'font-size': '20px',
-        'text-align': 'right',
-        'margin-left': '15px',
-        'line-height': '150%',
-      }"
-    >
-      Upcoming<br>Goal
-    </div>-->
     <div
       :style="{
         position: 'relative',
@@ -47,7 +37,7 @@
           'box-sizing': 'border-box',
         }"
       >
-        <div :style="{ width: '30%' }">
+        <div :style="{ width: '30%', 'font-size': '0px', }">
           <span class="BarText" :style="{ 'font-size': '20px' }">
             <span
               v-if="bid.goal <= bid.total"
@@ -74,6 +64,7 @@
           :style="{
             width: '30%',
             'text-align': 'right',
+            'font-size': '0px',
           }"
         >
           <span class="BarText" :style="{ 'font-size': '25px' }">

src/graphics/omnibar/components/Ticker/Bid/War-1v1.vue

@@ -60,6 +60,7 @@
           padding: '0 10px',
           'box-sizing': 'border-box',
           'z-index': 1,
+          'font-size': '0px',
         }"
       >
         <div>

src/graphics/omnibar/components/Ticker/Bid/War-Other.vue

@@ -7,16 +7,6 @@
       'align-items': 'center',
     }"
   >
-<!--    <div
-      :style="{
-        'font-size': '20px',
-        'text-align': 'right',
-        'margin-left': '15px',
-        'line-height': '150%',
-      }"
-    >
-      Upcoming<br>Bid War
-    </div>-->
     <div
       :style="{
         'flex-grow': 1,
@@ -34,7 +24,6 @@
           'flex-direction': 'column',
           'font-size': '20px',
           'text-align': 'center',
-          'background-color': 'rgba(0, 0, 0, 0.3)',
           padding: '0 10px',
           'white-space': 'nowrap',
           'line-height': '150%',
@@ -59,8 +48,6 @@
           overflow: 'hidden',
           display: 'flex',
           'align-items': 'center',
-          'background-color': 'rgba(0, 0, 0, 0.3)',
-          'font-size': '20px',
         }"
       >
         <div

src/graphics/omnibar/components/Total.vue

@@ -18,14 +18,15 @@
     <div :style="{
       position: 'absolute',
       top: '10px',
-      left: '20px',
+      left: '180px',
       'z-index': 99999999999,
     }">
       <div
         v-if="alertList[0]"
         :style="{
               'z-index': 1,
               opacity: showAlert ? 1 : 0,
+              // opacity: 1,
               transition: 'opacity 0.5s',
           }"
         class="Flex coin-thing"
@@ -61,7 +62,6 @@ import { round } from 'lodash';
 
 @Component
 export default class extends Vue {
-  // @Ref('SFX') sfx!: HTMLAudioElement;
   theme = nodecg.bundleConfig.event.theme;
   total = 0;
   playingAlerts = false;
@@ -109,7 +109,6 @@ export default class extends Vue {
     );
     if (amount && amount > 0 && showAlert) {
       nodecg.sendMessage('omnibarPlaySound', { amount });
-      // await this.sfx.play();
       await new Promise((res) => {
         setTimeout(res, 500);
       });
@@ -152,25 +151,20 @@ export default class extends Vue {
   async created(): Promise<void> {
     this.total = this.rawTotal;
     nodecg.listenFor('donationTotalUpdated', (data: { total: number }) => {
-      // If after 10s this hasn't been cleared by a new donation, update the total with it.
-      this.donationTotalTimeout = window.setTimeout(() => {
-        nodecg.sendMessage('donationAlertsLogging', 'donationTotalTimeout triggered');
-        // Double check if the total really needs updating.
-        // Also, only queue if alerts are not already
-        // (the play system will check the final total at the end anyway).
-        const completeTotal = round(data.total + this.additionalDonationsAmount, 2);
-        if (!this.playingAlerts && completeTotal !== this.total) {
-          nodecg.sendMessage(
-            'donationAlertsLogging',
-            'donationTotalTimeout decided we should push a new total as an alert',
-          );
-          this.alertList.push({
-            total: completeTotal,
-            showAlert: false,
-          });
-          if (!this.playingAlerts) this.playNextAlert(true);
-        }
-      }, 10 * 1000);
+      const completeTotal = round(data.total + this.additionalDonationsAmount, 2);
+      if (!this.playingAlerts && completeTotal !== this.total) {
+        nodecg.sendMessage(
+          'donationAlertsLogging',
+          'donationTotalTimeout decided we should push a new total as an alert',
+        );
+        this.alertList.push({
+          total: completeTotal,
+          // @ts-expect-error this works so shrug
+          amount: (completeTotal - this.total).toFixed(2),
+          showAlert: true,
+        });
+        if (!this.playingAlerts) this.playNextAlert(true);
+      }
     });
     nodecg.listenFor('newDonation', (data: { amount: number }) => {
       clearTimeout(this.donationTotalTimeout);
@@ -202,17 +196,16 @@ export default class extends Vue {
   font-variant-numeric: tabular-nums;
   font-size: 40px;
   font-weight: 500;
-  text-align: left;
-  float: right;
-  height: 82px;
+  text-align: center;
+  //height: 82px;
 
-  padding-left: 40px;
-  padding-right: 40px;
+  padding-left: 45px;
+  padding-right: 45px;
 
   background: var(--bsg-color);
 
   --arrow-setting: 50px;
-  clip-path: polygon(100% 0%, 85% 50%, 100% 100%,
+  clip-path: polygon(100% 0%, 80% 50%, 100% 100%,
     var(--arrow-setting) 100%, 10% 50%, var(--arrow-setting) 0%);
 }
 
@@ -228,14 +221,14 @@ export default class extends Vue {
 
 /* Each character in the total is in a span; setting width so the numbers appear monospaced. */
 #Total > span {
-  font-variant-numeric: tabular-nums;
+  width: 0.50em;
   color: white;
-  padding-top: 14px;
+  padding-top: 18px;
   display: inline-block;
   text-align: center;
   background: var(--bsg-color);
+  //background: cornflowerblue;
   position: relative;
-  font-size: 50px;
 }
 
 #Total > .Comma {

src/graphics/omnibar/main.vue

@@ -65,12 +65,14 @@ export default class extends Vue {
 
   updateInfoWidth(newTotal: number): void {
     if (newTotal < 1000) {
-      this.infoWidth = '1045px';
+      // this.infoWidth = '1045px';
+      this.infoWidth = '1070px';
       return;
     }
 
     if (newTotal < 10000) {
-      this.infoWidth = '1015px';
+      // this.infoWidth = '1015px';
+      this.infoWidth = '1040px';
       return;
     }
 
@@ -248,7 +250,7 @@ html, body {
 
     .dash {
       position: absolute;
-      right: 170px;
+      right: 160px;
       //min-width: 50px;
       height: 82px;
       top: 0;
@@ -270,7 +272,7 @@ html, body {
     .after_right_box {
       position: absolute;
       --color: var(--dark-arrow-default);
-      right: 120px;
+      right: 115px;
     }
   }
 }