From 951a12e7b8bdc78023fbd2d11efaab4f613d6eb2 Mon Sep 17 00:00:00 2001
From: Matt Isenhower <matt@isenhower.com>
Date: Fri, 22 Nov 2024 14:03:12 -0800
Subject: [PATCH] Improve time display for upcoming Salmon Run shifts

---
 src/common/time.js                                | 13 +++++++++----
 src/components/salmonrun/ExpandedSalmonRunRow.vue |  4 ++--
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/src/common/time.js b/src/common/time.js
index 1f3f779..6ae63be 100644
--- a/src/common/time.js
+++ b/src/common/time.js
@@ -51,13 +51,18 @@ export function formatShortDuration(value) {
   const { t } = useI18n();
   let { negative, days, hours, minutes, seconds } = getDurationParts(value);
 
+  days = days && t('time.days', days);
+  hours = hours && t('time.hours', hours);
+  minutes = minutes && t('time.minutes', { n: minutes }, minutes);
+  seconds = t('time.seconds', { n: seconds }, seconds);
+
   if (days)
-    return t('time.days', { n: `${negative}${days}` }, days);
+    return hours ? `${negative}${days} ${hours}` : `${negative}${days}`;
   if (hours)
-    return t('time.hours', { n: `${negative}${hours}` }, hours);
+    return `${negative}${hours}`;
   if (minutes)
-    return t('time.minutes', { n: `${negative}${minutes}` }, minutes);
-  return t('time.seconds', { n: `${negative}${seconds}` }, seconds);
+    return `${negative}${minutes}`;
+  return `${negative}${seconds}`;
 }
 
 export function formatShortDurationFromNow(value) {
diff --git a/src/components/salmonrun/ExpandedSalmonRunRow.vue b/src/components/salmonrun/ExpandedSalmonRunRow.vue
index 6c37780..9ba5567 100644
--- a/src/components/salmonrun/ExpandedSalmonRunRow.vue
+++ b/src/components/salmonrun/ExpandedSalmonRunRow.vue
@@ -14,7 +14,7 @@
 
         <div v-if="time.isUpcoming(schedule.startTime)" class="inline-block">
           {{ $t('salmonrun.opens') }}
-          {{ $t('time.in', { time: formatDurationHoursFromNow(schedule.startTime, true) }) }}
+          {{ $t('time.in', { time: formatShortDurationFromNow(schedule.startTime, true, true) }) }}
         </div>
         <div v-else class="inline-block">
           {{ $t('time.remaining', { time: formatDurationHoursFromNow(schedule.endTime) }) }}
@@ -57,7 +57,7 @@ import KingSalmonid from './KingSalmonid.vue';
 import SalmonRunWeapons from './SalmonRunWeapons.vue';
 import { useTimeStore } from '@/stores/time.mjs';
 import StageImage from '@/components/StageImage.vue';
-import { formatDurationFromNow, formatDurationHoursFromNow } from '@/common/time';
+import { formatDurationFromNow, formatDurationHoursFromNow, formatShortDurationFromNow } from '@/common/time';
 
 defineProps({
   schedule: Object,