From 7856d6f5e8945cad0ec074de03d01bb92ff92609 Mon Sep 17 00:00:00 2001
From: ducdat0507 <62660527+ducdat0507@users.noreply.github.com>
Date: Tue, 6 Dec 2022 23:38:35 +0700
Subject: [PATCH] Next day timer

---
 .vscode/settings.json      |  3 ++-
 src/data/Day.vue           | 18 ++++++++++++++++++
 src/data/projEntry.tsx     |  4 +++-
 src/util/break_eternity.ts |  7 ++++---
 4 files changed, 27 insertions(+), 5 deletions(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index b2f13b3..b7343cc 100644
--- a/.vscode/settings.json
+++ b/.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
 }
\ No newline at end of file
diff --git a/src/data/Day.vue b/src/data/Day.vue
index 2c9f8c4..be67df2 100644
--- a/src/data/Day.vue
+++ b/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;
diff --git a/src/data/projEntry.tsx b/src/data/projEntry.tsx
index 5bff4ff..9d1dd85 100644
--- a/src/data/projEntry.tsx
+++ b/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>
             </>
         ))
diff --git a/src/util/break_eternity.ts b/src/util/break_eternity.ts
index 21ad435..f54f5e3 100644
--- a/src/util/break_eternity.ts
+++ b/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)) +