New omnibar design (#14)

* First start on omnibar v2

* Animations went bork

* Fix animations

* Leaving animations for what they are now

* Arrows are getting better

* Better styling

* Improve display of milestones

* Update some fonts

* Some tracker fixes

* AAAAAAAAAAAAAAAA

* Improve handling of tracker urls

* Cleanup

* More cleanup

Author: duncte123

duncte123-framework_custom-config_20240525-1020.companionconfig

@@ -109,11 +109,11 @@ async function showNext(): Promise<void> {
       nodecg().log.debug('[Omnibar] Pin available, will show:', pin.type);
       const dashConfig = pin.type === 'Bid' ? {
         text: (item as Bids[0]).war ? 'Upcoming Bid War' : 'Upcoming Goal',
-        fontSize: 25,
+        fontSize: 34,
         top: 6,
       } : {
         text: 'Upcoming Milestone',
-        fontSize: 25,
+        fontSize: 34,
         top: 6,
       };
 
@@ -184,8 +184,8 @@ async function showNext(): Promise<void> {
           run,
           dash: {
             text: 'Up next',
-            top: 20,
-            fontSize: 37,
+            top: 13,
+            fontSize: 50,
           },
         },
       };
@@ -201,7 +201,7 @@ async function showNext(): Promise<void> {
           milestone,
           dash: {
             text: 'Upcoming Milestone',
-            fontSize: 25,
+            fontSize: 34,
             top: 6,
           },
         },
@@ -215,7 +215,7 @@ async function showNext(): Promise<void> {
           bid,
           dash: {
             text: bid.war ? 'Upcoming Bid War' : 'Upcoming Goal',
-            fontSize: 25,
+            fontSize: 34,
             top: 6,
           },
         },

src/extension/omnibar.ts

@@ -3,9 +3,11 @@ import needle from 'needle';
 import { eventInfo, getCookies } from '.';
 import { get as nodecg } from '../util/nodecg';
 import { bids } from '../util/replicants';
+import utils from './utils';
+
+const { trackerUrl } = utils;
 
 const eventConfig = nodecg().bundleConfig.event;
-const config = nodecg().bundleConfig.tracker;
 const { useTestData } = nodecg().bundleConfig;
 const refreshTime = 30 * 1000; // Get bids every 30s.
 
@@ -95,8 +97,8 @@ async function updateBids(): Promise<void> {
   try {
     const resp = await needle(
       'get',
-      `https://${config.address}/search/?event=${eventInfo[eventConfig.thisEvent - 1].id}`
-        + '&type=allbids&state=OPENED',
+      trackerUrl(`/search/?event=${eventInfo[eventConfig.thisEvent - 1].id}`
+        + '&type=allbids&state=OPENED'),
       {
         cookies: getCookies(),
       },

src/extension/tracker/bids.ts

@@ -3,9 +3,11 @@ import needle from 'needle';
 import { get as nodecg } from '../util/nodecg';
 import { donationsToRead } from '../util/replicants';
 import { eventInfo, getCookies } from './index';
+import utils from './utils';
+
+const { trackerUrl } = utils;
 
 const eventConfig = nodecg().bundleConfig.event;
-const config = nodecg().bundleConfig.tracker;
 const { useTestData } = nodecg().bundleConfig;
 const refreshTime = 10 * 1000; // Get donations every 10s.
 let updateTimeout: NodeJS.Timeout;
@@ -34,8 +36,8 @@ async function updateToReadDonations(): Promise<void> {
   try {
     const resp = await needle(
       'get',
-      `https://${config.address}/search/?event=${eventInfo[eventConfig.thisEvent - 1].id}`
-        + '&type=donation&feed=toread',
+      trackerUrl(`/search/?event=${eventInfo[eventConfig.thisEvent - 1].id}`
+        + '&type=donation&feed=toread'),
       {
         cookies: getCookies(),
       },
@@ -71,8 +73,8 @@ export async function markDonationAsRead(donationID: number): Promise<void> {
   try {
     const resp = await needle(
       'get',
-      `https://${config.address}/edit/?type=donation&id=${donationID}`
-        + '&readstate=READ&commentstate=APPROVED',
+      trackerUrl(`/edit/?type=donation&id=${donationID}`
+        + '&readstate=READ&commentstate=APPROVED'),
       {
         cookies: getCookies(),
       },

src/extension/tracker/donations.ts

@@ -8,6 +8,9 @@ import type { DeepWritable } from 'ts-essentials';
 import { get as nodecg } from '../util/nodecg';
 import { mq } from '../util/rabbitmq';
 import { donationTotal } from '../util/replicants';
+import utils from './utils';
+
+const { trackerUrl } = utils;
 
 export const eventInfo: Tracker.EventInfo[] = [];
 const eventConfig = nodecg().bundleConfig.event;
@@ -31,7 +34,7 @@ export function getCookies(): NeedleResponse['cookies'] {
 async function getEventIDFromShort(short: string): Promise<number> {
   const resp = await needle(
     'get',
-    `https://${config.address}/search/?short=${short}&type=event`,
+    trackerUrl(`/search/?short=${short}&type=event`),
     cookies,
   );
   if (!resp.body.length) {
@@ -47,7 +50,7 @@ async function updateDonationTotalFromAPI(init = false): Promise<void> {
   try {
     let total = 0;
     for (const event of eventInfo) {
-      const resp = await needle('get', `https://${config.address}/event/${event.id}?json`);
+      const resp = await needle('get', trackerUrl(`/event/${event.short}?json`));
       if (resp.statusCode === 200) {
         const eventTotal = resp.body.agg.amount ? parseFloat(resp.body.agg.amount) : 0;
         event.total = eventTotal;

src/extension/tracker/index.ts

@@ -3,8 +3,10 @@ import needle from 'needle';
 import { eventInfo, getCookies } from '.';
 import { get as nodecg } from '../util/nodecg';
 import { prizes } from '../util/replicants';
+import utils from './utils';
+
+const { trackerUrl } = utils;
 
-const config = nodecg().bundleConfig.tracker;
 const { useTestData } = nodecg().bundleConfig;
 const refreshTime = 60 * 1000; // Get prizes every 60s.
 
@@ -31,7 +33,7 @@ async function updatePrizes(): Promise<void> {
   try {
     const resp = await needle(
       'get',
-      `https://${config.address}/search/?event=${eventInfo[0].id}&type=prize&feed=current`,
+      trackerUrl(`/search/?event=${eventInfo[0].id}&type=prize&feed=current`),
       {
         cookies: getCookies(),
       },

src/extension/tracker/prizes.ts

@@ -0,0 +1,11 @@
+import { get as nodecg } from '@esa-layouts/util/nodecg';
+
+const config = nodecg().bundleConfig.tracker;
+
+function trackerUrl(path: string): string {
+  return `https://${config.address}/tracker${path}`;
+}
+
+export default {
+  trackerUrl,
+};

src/extension/tracker/utils.ts

@@ -2,10 +2,9 @@
   --bsg-color: #cf773b;
   --slide-color: #914e21;
   --text-color: white;
+  --main-bg-color: #404040;
   --bg-start: #303030;
   --bg-end: #212121;
-
-  --dash-left-width: 194px;
 }
 
 /* TODO: scss */

src/graphics/_misc/themes/bsg.theme.css

@@ -2,11 +2,12 @@
   <div
     class="Clock"
     :style="{
-      width: '90px',
-      'font-size': '35px',
+      width: '100%',
+      height: '100%',
     }"
   >
-    {{ time }}
+    <span>{{ time }}</span>
+    <span>{{ date }}</span>
   </div>
 </template>
 
@@ -20,9 +21,13 @@ dayjs.extend(timezone);
 @Component
 export default class extends Vue {
   time = '00:00';
+  date = '00/00/0000';
 
   setTime(): void {
-    this.time = dayjs().tz('Europe/Amsterdam').format('HH:mm');
+    const timer = dayjs().tz('Europe/Amsterdam');
+
+    this.time = timer.format('HH:mm').trim();
+    this.date = timer.format('DD/MM/YYYY').trim();
   }
 
   created(): void {
@@ -32,14 +37,24 @@ export default class extends Vue {
 }
 </script>
 
-<!-- TODO: move this to correct style sheet -->
-<style scoped>
+<style scoped lang="scss">
 .Clock {
-  flex-shrink: 3;
-  font-size: 35px;
-  /*width: 90px;*/
-  padding-left: 30px;
-  padding-top: 19px;
-  font-family: 'Goodlight'
+  font-variant-numeric: tabular-nums;
+  position: relative;
+  left: -15px;
+  text-align: center;
+  padding-top: 2px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  font-family: 'Bahnschrift';
+
+  span:first-child {
+    font-size: 40px;
+  }
+
+  span:nth-child(2) {
+    font-size: 20px;
+  }
 }
 </style>

src/graphics/omnibar/components/Clock.vue

@@ -106,9 +106,9 @@ export default class extends Vue {
     min-width: 0;
     flex: 1;
     padding-top: 2px;
-    margin-left: 12px;
+    margin-left: 0px;
     align-items: center;
-    font-family: 'Goodlight';
+    font-family: 'Bahnschrift', sans-serif;
   }
 
   .ticker-leave-active {

src/graphics/omnibar/components/Ticker.vue

@@ -7,22 +7,12 @@
       'white-space': 'nowrap',
     }"
   >
-<!--    <div
-      :style="{
-        'font-size': '30px',
-        'text-align': 'right',
-        'margin-left': '15px',
-        'line-height': '100%',
-      }"
-    >
-      Upcoming<br>Milestone
-    </div>-->
     <div
       :style="{
         position: 'relative',
         'flex-grow': 1,
         margin: '10px',
-        height: '60px',
+        height: '65px',
         'background-color': 'rgba(0, 0, 0, 0.3)',
       }"
     >

src/graphics/omnibar/components/Ticker/Milestone.vue

@@ -10,10 +10,10 @@
       'align-items': 'flex-start',
     }"
   >
-    <div :style="{ 'font-size': '20px' }">
+    <div :style="{ 'font-size': '25px' }">
       {{ when }}
     </div>
-    <div :style="{ 'font-size': '26px' }">
+    <div :style="{ 'font-size': '40px' }">
       <span v-if="getRunTotalPlayers(run) > 0">
         {{ formPlayerNamesStr(run) }}
         play<span v-if="getRunTotalPlayers(run) === 1">s</span> {{ run.game }}