Input conversion

README.md

@@ -8,53 +8,30 @@ Demo: <https://millidays.devmount.com>
 
 ## Get started
 
-### Recommended IDE Setup
-
-[VS Code](https://code.visualstudio.com/) + [Vue (Official)](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
-
-### Recommended Browser Setup
-
-- Chromium-based browsers (Chrome, Edge, Brave, etc.):
-  - [Vue.js devtools](https://chromewebstore.google.com/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd)
-  - [Turn on Custom Object Formatter in Chrome DevTools](http://bit.ly/object-formatters)
-- Firefox:
-  - [Vue.js devtools](https://addons.mozilla.org/en-US/firefox/addon/vue-js-devtools/)
-  - [Turn on Custom Object Formatter in Firefox DevTools](https://fxdx.dev/firefox-devtools-custom-object-formatters/)
-
-### Type Support for `.vue` Imports in TS
-
-TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) to make the TypeScript language service aware of `.vue` types.
-
-### Customize configuration
-
-See [Vite Configuration Reference](https://vite.dev/config/).
-
-### Project Setup
-
-```sh
+```bash
 pnpm install
 ```
 
-#### Compile and Hot-Reload for Development
+### Compile and Hot-Reload for Development
 
-```sh
+```bash
 pnpm dev
 ```
 
-#### Type-Check, Compile and Minify for Production
+### Type-Check, Compile and Minify for Production
 
-```sh
+```bash
 pnpm build
 ```
 
-#### Run Unit Tests with [Vitest](https://vitest.dev/)
+### Run Unit Tests with [Vitest](https://vitest.dev/)
 
-```sh
+```bash
 pnpm test:unit
 ```
 
-#### Lint with [ESLint](https://eslint.org/)
+### Lint with [ESLint](https://eslint.org/)
 
-```sh
+```bash
 pnpm lint
 ```

package.json

@@ -16,6 +16,7 @@
     "format": "oxfmt src/"
   },
   "dependencies": {
+    "@phosphor-icons/vue": "^2.2.1",
     "vue": "beta"
   },
   "devDependencies": {

src/App.vue

@@ -1,23 +1,32 @@
 <script setup lang="ts">
-import { onMounted, ref } from 'vue';
-import { fromDateParts, now, nowParts, toDate } from '@/lib/millidays';
-import AnalogClock from "@/components/AnalogClock.vue";
+import { computed, onMounted, ref } from 'vue';
+import { timeToBeatsParts, now, nowParts, beatsToTime, timeParts, beatsToTimeParts } from '@/lib/millidays';
 import { TimeMode } from './lib/clock';
+import { PhAt, PhClock } from "@phosphor-icons/vue";
+import AnalogClock from "@/components/AnalogClock.vue";
+import DotBeat from "@/components/DotBeat.vue";
+import DigitalTime from './components/DigitalTime.vue';
 
 const millidays = ref(['0', '0']);
 const localtime = ref(['0', '0', '0', '']);
 
 const millisecondsPerBeat = (24 * 60 * 60) / 1000;
 
-const timeParts = () => {
-  const t = new Date().toLocaleTimeString();
-  const [time, mode] = t.split(' ');
-  const parts = time?.split(':') ?? ['0', '0', '0'];
-  if (mode) {
-    parts.push(mode);
+const beats = ref<number>();
+const convertedBeats = computed(() => beatsToTimeParts(beats.value));
+
+const time = ref<string>();
+const convertedTime = computed(() => {
+  const d = new Date();
+  if (time.value) {
+    const [h, m] = time.value.split(':').map(v => v)
+    d.setHours(h ? parseInt(h) : 0);
+    d.setMinutes(m ? parseInt(m) : 0);
+    d.setSeconds(0);
+    d.setMilliseconds(0);
   }
-  return parts;
-};
+  return timeToBeatsParts(d);
+});
 
 onMounted(() => {
   setInterval(() => {
@@ -33,15 +42,12 @@ onMounted(() => {
     <!-- Millidays -->
     <section class="beats">
       <analog-clock title="Internet" :mode="TimeMode.Millidays" />
-      <h1>@<code>{{ millidays[0] }}</code>.<code>{{ millidays[1] }}</code></h1>
+      <h1><dot-beat :parts="millidays" /></h1>
     </section>
     <!-- Local time -->
     <section class="local">
       <analog-clock title="Local" :mode="TimeMode.Milliseconds" />
-      <h2>
-        <code>{{ localtime[0] }}</code>:<code>{{ localtime[1] }}</code>:<code>{{ localtime[2] }}</code>
-        <small>{{ localtime[3] ?? '' }}</small>
-      </h2>
+      <h2><digital-time :parts="localtime" /></h2>
     </section>
   </header>
 
@@ -105,31 +111,49 @@ onMounted(() => {
           </tr>
         </tbody>
       </table>
+
+      <div class="conversion">
+        <div>Try it out yourself:</div>
+        <div>
+          <div class="input">
+            <ph-at class="icon" :size="20" />
+            <input type="number" min="0" maxlength="3" v-model="beats" />
+          </div>
+          <span>&rarr;</span>
+          <digital-time class="result" v-if="beats" :parts="convertedBeats" />
+        </div>
+        <div>
+          <div class="input">
+            <ph-clock class="icon" :size="20" />
+            <input type="time" v-model="time" />
+          </div>
+          <span>&rarr;</span>
+          <dot-beat class="result" v-if="time" :parts="convertedTime" />
+        </div>
+      </div>
     </section>
     <section>
 
       <h2>Common local times</h2>
-      <p>These tables show common beats and times in 24-hour format converted to the local time of this browser.
+      <p>These tables show common beats and times converted to the local time of this browser.
       </p>
       <div class="common-times">
         <table cellspacing="0">
           <tbody>
             <tr v-for="h in Array.from(Array(24).keys())">
-              <td><code>{{ String(h).padStart(2, '0') }}:00</code></td>
+              <td class="text-right"><digital-time :parts="[String(h), '00']" /></td>
               <td>&rarr;</td>
-              <td>
-                @<code>{{ fromDateParts(new Date(2026, 3, 19, h + 1, 0))[0] }}</code>.<code>{{ fromDateParts(new Date(2026, 3, 19, h + 1, 0))[1] }}</code>
-              </td>
+              <td><dot-beat :parts="timeToBeatsParts(new Date(2026, 3, 19, h, 0))" /></td>
             </tr>
           </tbody>
         </table>
         <table cellspacing="0">
           <tbody>
             <tr v-for="b in Array.from({ length: 20 }, (_, i) => i * 50)">
-              <td>@<code>{{ String(b).padStart(3, '0') }}</code></td>
+              <td><dot-beat :parts="[String(b).padStart(3, '0')]" /></td>
               <td>&rarr;</td>
-              <td>
-                <code>{{ toDate(b).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", hour12: false }) }}</code>
+              <td class="text-right">
+                <digital-time :parts="beatsToTimeParts(b)" />
               </td>
             </tr>
           </tbody>
@@ -162,25 +186,25 @@ header {
     &.beats h1,
     &.local h2 {
       font-size: 5rem;
-
-      code {
-        font-weight: 900;
-      }
-
-      small {
-        font-size: .5em;
-        margin-inline-start: .5rem;
-      }
+      font-weight: 700;
     }
 
     &.beats h1 {
       color: var(--color-accent);
-      font-weight: 700;
     }
 
     &.local h2 {
       color: var(--color-heading);
       font-weight: 500;
+
+      :deep(code) {
+        font-weight: 700;
+      }
+
+      :deep(small) {
+        font-size: .5em;
+        margin-inline-start: .5rem;
+      }
     }
   }
 }
@@ -250,4 +274,29 @@ footer {
     padding-right: 2rem;
   }
 }
+
+.conversion {
+  padding: 1rem;
+  margin-top: 2rem;
+  border: 1px dashed var(--color-border);
+  border-radius: var(--border-radius);
+
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+
+  &>div {
+    display: flex;
+    gap: 1rem;
+    align-items: center;
+
+    input {
+      width: 12rem;
+    }
+
+    .result {
+      font-size: 1.5rem;
+    }
+  }
+}
 </style>

src/assets/main.css

@@ -2,24 +2,41 @@
 
 /* semantic color variables for this project */
 :root {
+  /* Colors */
   --color-background: #0C0C0C;
   --color-border: #481E14;
   --color-heading: #9B3922;
   --color-accent: #F2613F;
   --color-text: white;
+  --color-shadow: #00000088;
+  --color-outline: color-mix(in srgb, var(--color-accent) 35%, transparent);
+  --color-bg-accent: color-mix(in hsl, var(--color-accent) 80%, black);
 
+  /* Shadows */
+  --shadow-border: 0 0 0 1px inset;
+  --shadow-inset: 0 3px .25rem 0 inset;
+  --shadow-float: 0 .25rem .75rem -.4rem;
+
+  /* Fonts */
   --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
+
+  /* Transitions */
+  --transition-color: color .1s ease, border-color .1s ease, outline-color .1s ease, background-color .1s ease;
+  --transition-outline: outline-width .1s ease;
+
+  /* Borders */
+  --border-radius: .125rem;
 }
 
 *,
 *::before,
 *::after {
   box-sizing: border-box;
   margin: 0;
-  font-weight: 400;
 }
 
 body {
+  color-scheme: dark;
   min-height: 100vh;
   color: var(--color-text);
   background: var(--color-background);
@@ -50,3 +67,63 @@ a {
     color: var(--color-accent);
   }
 }
+
+input {
+  background-color: var(--color-shadow);
+  color: var(--color-text);
+  box-shadow:
+    var(--color-border) var(--shadow-border),
+    var(--color-shadow) var(--shadow-inset);
+  font-family: inherit;
+  transition: var(--transition-outline), var(--transition-color);
+  border: 0;
+  box-sizing: border-box;
+
+  &:hover:not(:disabled) {
+    box-shadow:
+      var(--color-accent) var(--shadow-border),
+      var(--color-shadow) var(--shadow-inset);
+  }
+
+  &:focus:not(:disabled), &:focus-within:not(:disabled) {
+    outline: 4px solid var(--color-outline);
+    box-shadow: var(--color-accent) var(--shadow-border);
+    z-index: 10;
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    background-color: var(--color-bg-muted);
+    box-shadow: none;
+  }
+}
+
+input[type="number"],
+input[type="time"],
+input[type="date"],
+input[type="datetime"],
+input[type="datetime-local"] {
+  border-radius: var(--border-radius);
+  padding: .75rem .5rem .75rem 1rem;
+  font-size: .875rem;
+}
+
+.input {
+  position: relative;
+
+  input {
+    flex-grow: 1;
+    padding-left: 2.25rem;
+  }
+
+  &>.icon {
+    position: absolute;
+    top: .625rem;
+    left: .625rem;
+    z-index: 15;
+  }
+}
+
+.text-right {
+  text-align: right;
+}