diff --git a/js/main.js b/js/main.js index 2150121..0a886b7 100644 --- a/js/main.js +++ b/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'}, - mk('h3', pack.title), - // TODO whether it's yours or not? - // TODO number of levels? + let li = mk('li'); + let button = mk('button.button-big', {type: 'button'}, pack.title); + let modified = new Date(pack.last_modified); + 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'}, - mk('h3', title)); + let button = mk('button.button-big', {type: 'button'}, title); if (packdef) { button.addEventListener('click', ev => { this.conductor.fetch_pack(packdef.path, packdef.title); diff --git a/style.css b/style.css index 474eab3..d35af06 100644 --- a/style.css +++ b/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 { - display: grid; - grid: - "title score" - "desc desc" - / 1fr min-content - ; - - padding: 0.5em; - text-align: left; +.played-pack-list .-editor-status { + display: flex; + gap: 0.5em; + margin: 0 0.5em; } -button.level-pack-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 .-editor-status > .-level-count { + flex: auto; } -button.level-pack-button:enabled:hover { - background: hsl(225, 40%, 30%); -} -button.level-pack-button h3 { - grid-area: title; -} -button.level-pack-button .-score { - grid-area: score; - font-style: italic; - color: #c0c0c0; +.played-pack-list .-editor-status > .-timestamp { + flex: auto; 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 {