Next day timer

.vscode/settings.json

@@ -3,5 +3,6 @@
     "editor.codeActionsOnSave": {
         "source.fixAll.eslint": true
     },
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
+    "git.ignoreLimitWarning": true
 }

src/data/Day.vue

@@ -19,6 +19,7 @@
         <div class="doors"></div>
         <div class="date">Dec<br />{{ day }}</div>
         <div v-if="!canOpen" class="material-icons lock">lock</div>
+        <div v-if="main.day.value === day && !canOpen" class="timer">{{ formatTime(main.timeUntilNewDay.value, 0) }}</div> 
         <Notif v-if="canOpen" />
     </div>
 </template>
@@ -26,6 +27,7 @@
 <script setup lang="ts">
 import Notif from "components/Notif.vue";
 import Decimal from "util/bignum";
+import { formatTime } from "util/break_eternity";
 import { ProcessedComputable } from "util/computed";
 import type { Ref } from "vue";
 import { computed, unref } from "vue";
@@ -166,6 +168,22 @@ function tryUnlock() {
     width: 100%;
 }
 
+.timer {
+    position: absolute;
+    bottom: -12px;
+    left: 50%;
+    padding: 0 3px;
+    transform: translateX(-50%);
+    z-index: 3;
+    pointer-events: none;
+    user-select: none;
+    white-space: nowrap;
+    font-size: small;
+    border: 2px solid rgba(0, 0, 0, 0.125);
+    border-radius: var(--border-radius);
+    background: var(--locked);
+}
+
 .icon {
     pointer-events: none;
     background-size: contain;

src/data/projEntry.tsx

@@ -44,6 +44,7 @@ export interface Day extends VueFeature {
 
 export const main = createLayer("main", function (this: BaseLayer) {
     const day = persistent<number>(1);
+    const timeUntilNewDay = computed(() => (+new Date(new Date().getFullYear(), 11, day.value) - player.time) / 1000);
 
     const showLoreModal = ref<boolean>(false);
     const loreScene = ref<number>(-1);
@@ -354,6 +355,7 @@ export const main = createLayer("main", function (this: BaseLayer) {
         name: "Calendar",
         days,
         day,
+        timeUntilNewDay,
         loreScene,
         loreTitle,
         loreBody,
@@ -382,7 +384,7 @@ export const main = createLayer("main", function (this: BaseLayer) {
                             },
                             [[]] as Day[][]
                         )
-                        .map(days => renderRow(...days))}
+                        .map((days: Day[]) => renderRow(...days))}
                 </div>
             </>
         ))

src/util/break_eternity.ts

@@ -127,9 +127,10 @@ export function formatWhole(num: DecimalSource): string {
     return format(num, 0);
 }
 
-export function formatTime(seconds: DecimalSource): string {
+export function formatTime(seconds: DecimalSource, precision?: number): string {
+    if (precision == null) precision = projInfo.defaultDecimalsShown;
     if (Decimal.lt(seconds, 0)) {
-        return "-" + formatTime(Decimal.neg(seconds));
+        return "-" + formatTime(Decimal.neg(seconds), precision);
     }
     if (Decimal.gt(seconds, 2 ** 51)) {
         // integer precision limit
@@ -139,7 +140,7 @@ export function formatTime(seconds: DecimalSource): string {
     if (seconds < 60) {
         return format(seconds) + "s";
     } else if (seconds < 3600) {
-        return formatWhole(Math.floor(seconds / 60)) + "m " + format(seconds % 60) + "s";
+        return formatWhole(Math.floor(seconds / 60)) + "m " + format(seconds % 60, precision) + "s";
     } else if (seconds < 86400) {
         return (
             formatWhole(Math.floor(seconds / 3600)) +