Show time and level count in the splash's list of editor packs

js/main.js

@@ -2082,6 +2082,7 @@ class Splash extends PrimaryView {
         // Editor interface
         // (this has to be handled here because we need to examine the editor,
         // which hasn't yet been created in our constructor)
+        // FIXME add a new one when creating a new pack; update and reorder when saving
         // Bind to "create" buttons
         this.root.querySelector('#splash-create-pack').addEventListener('click', ev => {
             this.conductor.editor.create_pack();
@@ -2094,26 +2095,53 @@ class Splash extends PrimaryView {
         let pack_keys = Object.keys(packs);
         pack_keys.sort((a, b) => packs[b].last_modified - packs[a].last_modified);
         let editor_section = this.root.querySelector('#splash-your-levels');
-        let editor_list = editor_section;
+        let editor_list = mk('ul.played-pack-list');
+        editor_section.append(editor_list);
+        let next_midnight = new Date;
+        if (next_midnight.getHours() >= 4) {
+            next_midnight.setDate(next_midnight.getDate() + 1);
+        }
+        next_midnight.setHours(4);
+        next_midnight.setMinutes(0);
+        next_midnight.setSeconds(0);
+        next_midnight.setMilliseconds(0);
         for (let key of pack_keys) {
             let pack = packs[key];
-            let button = mk('button.button-big.level-pack-button', {type: 'button'},
+            let li = mk('li');
-                mk('h3', pack.title),
+            let button = mk('button.button-big', {type: 'button'}, pack.title);
-                // TODO whether it's yours or not?
+            let modified = new Date(pack.last_modified);
-                // TODO number of levels?
+            let days_ago = Math.floor((next_midnight - modified) / (1000 * 60 * 60 * 24));
+            let timestamp_text;
+            if (days_ago === 0) {
+                timestamp_text = "today";
+            }
+            else if (days_ago === 1) {
+                timestamp_text = "yesterday";
+            }
+            else if (days_ago <= 12) {
+                timestamp_text = `${days_ago} days ago`;
+            }
+            else {
+                timestamp_text = modified.toISOString().split('T')[0];
+            }
+            li.append(
+                button,
+                mk('div.-editor-status',
+                    mk('div.-level-count', pack.level_count === 1 ? "1 level" : `${pack.level_count} levels`),
+                    mk('div.-timestamp', "edited " + timestamp_text),
+                ),
             );
             // TODO make a container so this can be 1 event
             button.addEventListener('click', ev => {
                 this.conductor.editor.load_editor_pack(key);
             });
-            editor_list.append(button);
+            editor_list.append(li);
         }
     }
 
     _create_pack_element(ident, packdef = null) {
         let title = packdef ? packdef.title : ident;
-        let button = mk('button.button-big.level-pack-button', {type: 'button'},
+        let button = mk('button.button-big', {type: 'button'}, title);
-            mk('h3', title));
         if (packdef) {
             button.addEventListener('click', ev => {
                 this.conductor.fetch_pack(packdef.path, packdef.title);

style.css

@@ -703,6 +703,7 @@ pre.stack-trace {
     margin-bottom: 1em;
 }
 .played-pack-list p {
+    margin: 0 0.5em;
     color: #e8e8e8;
 }
 .played-pack-list .-progress {
@@ -714,6 +715,24 @@ pre.stack-trace {
 .played-pack-list > li.--unplayed .-progress {
     display: none;
 }
+.played-pack-list > li > button {
+    font-size: 1.25em;
+    padding: 0.5em;
+    margin: 0.25em 0;
+    text-transform: none;
+    text-align: left;
+    /* this also forces the button to be 1 line of text high even for empty title */
+    white-space: pre-wrap;
+}
+.played-pack-list > li > button:enabled {
+    background: hsl(225, 30%, 25%);
+    box-shadow:
+        inset 0 0 0 1px hsl(225, 30%, 33%),
+        0 1px 1px hsl(225, 10%, 10%);
+}
+.played-pack-list > li > button:enabled:hover {
+    background: hsl(225, 40%, 30%);
+}
 .played-pack-list .-progress > .-score,
 .played-pack-list .-progress > .-time,
 .played-pack-list .-progress > .-levels {
@@ -722,41 +741,18 @@ pre.stack-trace {
 .played-pack-list .-progress > button {
     flex: 1;
 }
-button.level-pack-button {
+.played-pack-list .-editor-status {
-    display: grid;
+    display: flex;
-    grid:
+    gap: 0.5em;
-        "title  score"
+    margin: 0 0.5em;
-        "desc   desc"
-        / 1fr min-content
-    ;
-
-    padding: 0.5em;
-    text-align: left;
 }
-button.level-pack-button:enabled {
+.played-pack-list .-editor-status > .-level-count {
-    background: hsl(225, 30%, 25%);
+    flex: auto;
-    box-shadow:
-        inset 0 0 0 1px hsl(225, 30%, 33%),
-        0 1px 1px hsl(225, 10%, 10%);
 }
-button.level-pack-button:enabled:hover {
+.played-pack-list .-editor-status > .-timestamp {
-    background: hsl(225, 40%, 30%);
+    flex: auto;
-}
-button.level-pack-button h3 {
-    grid-area: title;
-}
-button.level-pack-button .-score {
-    grid-area: score;
-    font-style: italic;
-    color: #c0c0c0;
     text-align: right;
 }
-button.level-pack-button p {
-    grid-area: desc;
-    font-size: 0.833em;
-    font-style: italic;
-    color: #c0c0c0;
-}
 
 /* "Bulk test" button, only available in debug mode */
 #main-test-pack {