add date.

src/lib/components/colors.sass

@@ -12,3 +12,9 @@ $color-entry10: hsl(240, 5%, 77%)
 $color-entry11: hsl(240, 5%, 84%)
 $color-entry12: hsl(240, 5%, 91%)
 $color-entry13: hsl(240, 5%, 98%)
+
+$opacity-entry4: 0.40
+$opacity-entry5: 0.60
+
+$color-green: hsl(120, 50%, 74%)
+$color-green-dark: hsl(120, 50%, 35%)

src/lib/components/frontpage/ItemLink.svelte

@@ -4,6 +4,7 @@
   import EntryAmounts from "../layout/EntryAmounts.svelte";
   import EntryButton from "../layout/EntryButton.svelte";
   import EntryCompletionIcon from "../layout/EntryCompletionIcon.svelte";
+import EntryDate from "../layout/EntryDate.svelte";
   import EntryDescription from "../layout/EntryDescription.svelte";
   import EntryName from "../layout/EntryName.svelte";
   import Icon from "../layout/Icon.svelte";
@@ -39,6 +40,11 @@
     <EntryCompletionIcon condition={!!item.acquireDate} />
     <EntryName subtitle={subtitle}>{item.name}</EntryName>
     {#if !compact}
+      {#if !!item.acquireDate}
+        <EntryDate green value={item.acquireDate} verb="Acquired" />
+      {:else}
+        <EntryDate value={item.createdDate} verb="Created" />
+      {/if}
       <EntryDescription>{item.description}</EntryDescription>
     {/if}
     <EntryAmounts values={amounts} />

src/lib/components/frontpage/SprintLink.svelte

@@ -14,6 +14,7 @@
   import RequirementLink from "./RequirementLink.svelte";
 import EntryButton from "../layout/EntryButton.svelte";
 import Icon from "../layout/Icon.svelte";
+import Status from "$lib/models/status";
 
   export let sprint: Sprint
   
@@ -49,7 +50,11 @@ import Icon from "../layout/Icon.svelte";
         break;
       }
       case "requirements": {
-        aggregate = calculateAggregate(sprint.requirements.map(r => r.stats).flat());
+        aggregate = calculateAggregate(sprint.requirements.map(r => (
+          r.status >= Status.Completed 
+          ? r.stats.map(s => ({...s, acquired: s.required}))
+          : r.stats
+        )).flat());
         break;
       }
       case "stats": {
@@ -113,7 +118,9 @@ import Icon from "../layout/Icon.svelte";
       {/if}
     {/each}
     {#each sprint.requirements as requirement (requirement.id)}
-      <RequirementLink compact boat={boat} requirement={requirement} />
+      {#if requirement.status < Status.Completed}
+        <RequirementLink compact boat={boat} requirement={requirement} />
+      {/if}
     {/each}
   </Entry>
 </a>

src/lib/components/layout/Entry.svelte

@@ -18,7 +18,7 @@
   }
   div.entry:hover {
     background-color: $color-entry2;
-    color: $color-entry13;
+    color: $color-entry11;
   }
 
   :global(div.entry div.entry) {

src/lib/components/layout/EntryAmounts.svelte

@@ -37,6 +37,6 @@
   }
 
   span.label {
-    color: $color-entry6;
+    opacity: $opacity-entry4;
   }
 </style>

src/lib/components/layout/EntryBgIcon.svelte

@@ -19,6 +19,6 @@
     margin-left: auto;
     background: none;
     pointer-events: none;
-    opacity: 0.10;
+    opacity: 0.05;
   }
 </style>

src/lib/components/layout/EntryDate.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+  import currentTime from "$lib/stores/currentTime";
+  export let value: Date | string;
+  export let green: boolean = false;
+  export let verb: string = "Created";
+
+  let dateStr = "";
+  let timeStr = "";
+
+  $: {
+    const date = (value instanceof Date) ? value : new Date(value);
+    const today = new Date($currentTime.getFullYear(), $currentTime.getMonth(), $currentTime.getDate(), 0, 0, 0, 0);
+    const thisYear = new Date($currentTime.getFullYear(), 0, 1, 0, 0, 0, 0);
+    const nextYear = new Date($currentTime.getFullYear()+1, 0, 1, 0, 0, 0, 0);
+    const offset = date.getTime() - today.getTime();
+
+    if (offset >= DAY * 2 || offset < DAY * -1) {
+      if (date < thisYear || date >= nextYear) {
+        dateStr = `${date.getDate()} ${MONTHS[date.getMonth()]} ${date.getFullYear()}`
+      } else {
+        dateStr = `${date.getDate()} ${MONTHS[date.getMonth()]}`
+      }
+    } else if (offset >= DAY * 1) {
+      dateStr = "tomrrow";
+    } else if (offset >= 0) {
+      dateStr = "today";
+    } else {
+      dateStr = "yesterday";
+    }
+
+    timeStr = `${pad(date.getHours())}:${pad(date.getMinutes())}`
+  }
+</script>
+
+<div class="date" class:green>
+  <span class="verb">{verb}</span>
+  <span class="value">{dateStr}</span>
+  <span class="verb">at</span>
+  <span class="value">{timeStr}</span>
+</div>
+
+<style lang="scss">
+  @import "../colors.sass";
+
+  div.date {
+    font-size: 0.75em;
+    font-weight: 600;
+
+    &.green {
+      color: $color-green;
+    }
+
+    > span.verb {
+      opacity: $opacity-entry4;
+    }
+    > span.value {
+      opacity: $opacity-entry5;
+    }
+  }
+</style>
+
+<script lang="ts" context="module">
+  const MONTHS = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+  const DAY = 86400000;
+
+  function pad(n: number) { return n > 10 ? n.toString() : `0${n}` };
+</script>

src/lib/components/layout/EntryName.svelte

@@ -17,14 +17,13 @@
 
   span.abbreviation {
     font-size: 1em;
-    color: $color-entry4;
+    opacity: $opacity-entry4;
   }
 
   @media screen and (max-width: 1500px) {
     span.abbreviation {
       display: block;
       font-size: 0.75em;
-      margin-bottom: 0.5em;
     }
   }
 </style>

src/lib/components/layout/EntryProgress.svelte

@@ -198,10 +198,17 @@
       &.green { background-color: #8ef88e; opacity: 0.8; }
       &.red { background-color: hsl(0, 95%, 70%); opacity: 0.8; }
       &.off {opacity: 0.30; }
+
+      @media (-webkit-min-device-pixel-ratio: 1.3) {
+        border-width: 0.5px;
+      }
+      @media (-webkit-min-device-pixel-ratio: 1.8) {
+        border-width: 0.25px;
+      }
     }
   }
 
   span.ackreq {
-    color: $color-entry4;
+    opacity: $opacity-entry4;
   }
 </style>

src/lib/models/item.ts

@@ -7,6 +7,7 @@ export default interface Item {
   name: string
   description: string
   acquireDate?: string
+  createdDate: string
   stats: StatProgressEntry[]
 }
 

src/routes/index.svelte

@@ -1,11 +1,6 @@
 <script lang="ts" context="module">
   import type { LoadInput } from "@sveltejs/kit/types/internal";
 
-  const TIPS = [
-    "Ctrl-click items and requirements in your suggestions to log it.",
-    "Suggestions are incomplete, go into scopes or sprints to view all you need to do.",
-  ]
-  
   export async function load({ url, fetch }: LoadInput ) {
 		const res = await fetch("indexdata.json");
 
@@ -13,7 +8,6 @@
 			return {
 				props: {
           ...await res.json(),
-          tip: TIPS[Math.floor(Math.random() * TIPS.length)]
         }
 			};
 		}
@@ -40,7 +34,6 @@
   export let items: StandaloneItem[] = [];
   export let requirements: StandaloneRequirement[] = [];
   export let sprints: StandaloneSprint[] = [];
-  export let tip: string;
 </script>
 
 <div class="header-wrapper">
@@ -59,7 +52,6 @@
     <div class="row">
       <h2>Today</h2>
       <p>When you mark an item as aquired today, it will appear here.</p>
-      <p>TIP: {tip}</p>
     </div>
   </div>
   <div class="column">

src/routes/indexdata.json.ts

@@ -21,6 +21,7 @@ export const get: RequestHandler = async({}) => {
       name: "Table", 
       description: "A table for the Redrock rec-room.",
       acquireDate: "2022-03-14T00:00:00Z",
+      createdDate: new Date(Date.now() - 3623511).toISOString(),
       stats: [
         {id: 1, name: "Asset", weight: 0.2, required: 1, acquired: 1},
         {id: 2, name: "Complexity", weight: 1, required: 3, acquired: 5},
@@ -35,6 +36,7 @@ export const get: RequestHandler = async({}) => {
       id: 2, scope: scopes[0], 
       name: "Datapad Set", 
       description: "I need one, at least, but more is better.",
+      createdDate: new Date(Date.now() - 3623511).toISOString(),
       stats: [
         {id: 1, name: "Asset", weight: 0.2, required: 1, acquired: 0},
         {id: 2, name: "Complexity", weight: 1, required: 3, acquired: 0},
@@ -50,6 +52,7 @@ export const get: RequestHandler = async({}) => {
       id: 3, scope: scopes[1],
       name: "Enila/Renala: Technicalities", 
       description: "Renala is answering Leah's concern and takes the shift at the Respite.",
+      createdDate: new Date(Date.now() - 3623511).toISOString(),
       stats: [
         {id: 1, name: "Story", weight: 3, required: 1, acquired: 0},
         {id: 2, name: "Story Word", weight: 0.002, required: 500, acquired: 0},
@@ -89,7 +92,7 @@ export const get: RequestHandler = async({}) => {
         name: "Background Stories",
         status: Status.Active
       },
-      status: Status.Active,
+      status: Status.Completed,
       stats: [
         {id: 1, name: "Story", weight: 3, required: 10, acquired: 3},
         {id: 2, name: "Story Word", weight: 0.002, required: 5000, acquired: 2173},