Show time and level count in the splash's list of editor packs
This commit is contained in:
Eevee (Evelyn Woods)
parent
a2ec070a32
commit
6a6a3a212e
44
js/main.js
44
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);
|
||||
|
||||
58
style.css
58
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 {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user