From 3aec2b1fe6070c831ad32fc5258a67b4c44cd8d6 Mon Sep 17 00:00:00 2001 From: "Eevee (Evelyn Woods)" Date: Wed, 13 Jan 2021 21:49:01 -0700 Subject: [PATCH] Spruce up stock pack list with previews, progress bar --- js/game.js | 2 +- js/main.js | 44 ++++++++----- levels/previews/cc2lp1.png | Bin 0 -> 4004 bytes levels/previews/cclp1.png | Bin 0 -> 3376 bytes levels/previews/cclp3.png | Bin 0 -> 3317 bytes levels/previews/cclp4.png | Bin 0 -> 4453 bytes levels/previews/cclxp2.png | Bin 0 -> 3358 bytes levels/previews/lexys-lessons.png | Bin 0 -> 3745 bytes style.css | 105 ++++++++++++++++++++++-------- 9 files changed, 109 insertions(+), 42 deletions(-) create mode 100644 levels/previews/cc2lp1.png create mode 100644 levels/previews/cclp1.png create mode 100644 levels/previews/cclp3.png create mode 100644 levels/previews/cclp4.png create mode 100644 levels/previews/cclxp2.png create mode 100644 levels/previews/lexys-lessons.png diff --git a/js/game.js b/js/game.js index ebdd85b..a247f1e 100644 --- a/js/game.js +++ b/js/game.js @@ -2235,7 +2235,7 @@ export class Level extends LevelInterface { return null; } - let time = Math.ceil((this.time_remaining ?? 0) / 20); + let time = Math.ceil((this.time_remaining ?? 0) / TICS_PER_SECOND); return { time: time, abstime: this.tic_counter, diff --git a/js/main.js b/js/main.js index 41ebc2a..779f4ed 100644 --- a/js/main.js +++ b/js/main.js @@ -1941,35 +1941,41 @@ class Player extends PrimaryView { const BUILTIN_LEVEL_PACKS = [{ path: 'levels/lexys-lessons.zip', + preview: 'levels/previews/lexys-lessons.png', ident: "Lexy's Lessons", title: "Lexy's Lessons (WIP)", desc: "A set of beginner levels that introduces every mechanic in Chip's Challenge 2, made specifically for Lexy's Labyrinth!", }, { path: 'levels/CC2LP1.zip', + preview: 'levels/previews/cc2lp1.png', ident: 'Chips Challenge 2 Level Pack 1', title: "Chip's Challenge 2 Level Pack 1", desc: "Thoroughly demonstrates what Chip's Challenge 2 is capable of. Fair, but doesn't hold your hand; you'd better have at least a passing familiarity with the CC2 elements.", url: 'https://wiki.bitbusters.club/Chip%27s_Challenge_2_Level_Pack_1', }, { path: 'levels/CCLP1.ccl', + preview: 'levels/previews/cclp1.png', ident: 'cclp1', title: "Chip's Challenge Level Pack 1", desc: "Designed like a direct replacement for Chip's Challenge 1, with introductory levels for new players and a gentle difficulty curve.", url: 'https://wiki.bitbusters.club/Chip%27s_Challenge_Level_Pack_1', }, { path: 'levels/CCLP4.ccl', + preview: 'levels/previews/cclp4.png', ident: 'cclp4', title: "Chip's Challenge Level Pack 4", desc: "Moderately difficult, but not unfair.", url: 'https://wiki.bitbusters.club/Chip%27s_Challenge_Level_Pack_4', }, { path: 'levels/CCLXP2.ccl', + preview: 'levels/previews/cclxp2.png', ident: 'cclxp2', title: "Chip's Challenge Level Pack 2-X", desc: "The first community pack released, tricky and rough around the edges.", url: 'https://wiki.bitbusters.club/Chip%27s_Challenge_Level_Pack_2_(Lynx)', }, { path: 'levels/CCLP3.ccl', + preview: 'levels/previews/cclp3.png', ident: 'cclp3', title: "Chip's Challenge Level Pack 3", desc: "A tough challenge, by and for veteran players.", @@ -2253,7 +2259,12 @@ class Splash extends PrimaryView { button.disabled = true; } - let li = mk('li.--unplayed', {'data-ident': ident}, button); + let li = mk('li.--unplayed', {'data-ident': ident}); + if (packdef && packdef.preview) { + li.append(mk('img.-preview', {src: packdef.preview})); + } + li.append(button); + let forget_button = mk('button.-forget', {type: 'button'}, "Forget"); forget_button.addEventListener('click', ev => { new ConfirmOverlay(this.conductor, `Clear all your progress for ${title}? This can't be undone.`, () => { @@ -2268,6 +2279,13 @@ class Splash extends PrimaryView { } }).open(); }); + li.append(mk('div.-progress', + mk('div.-levels'), + mk('span.-score'), + mk('span.-time'), + forget_button, + )); + if (packdef) { let p = mk('p', packdef.desc); if (packdef.url) { @@ -2275,12 +2293,7 @@ class Splash extends PrimaryView { } li.append(p); } - li.append(mk('div.-progress', - mk('span.-score'), - mk('span.-time'), - mk('span.-levels'), - forget_button, - )); + this.played_pack_elements[ident] = li; return li; } @@ -2322,19 +2335,19 @@ class Splash extends PrimaryView { } progress.querySelector('.-score').textContent = score; - // This stuff isn't available in old saves + let level_el = progress.querySelector('.-levels'); if (packinfo.total_levels === undefined) { + // This stuff isn't available in old saves progress.querySelector('.-time').textContent = ""; progress.querySelector('.-levels').textContent = ""; } else { - // TODO not used: total_abstime, aidless_levels - progress.querySelector('.-time').textContent = util.format_duration(packinfo.total_time); + progress.querySelector('.-time').textContent = util.format_duration(packinfo.total_abstime / TICS_PER_SECOND, 2); let levels = `${packinfo.cleared_levels}/${packinfo.total_levels}`; - if (packinfo.cleared_levels === packinfo.total_levels) { - levels += '★'; - } - progress.querySelector('.-levels').textContent = levels; + levels = `cleared ${packinfo.cleared_levels} of ${packinfo.total_levels} levels, ${packinfo.aidless_levels}★ without aid`; + level_el.textContent = levels; + level_el.style.setProperty('--cleared', packinfo.cleared_levels / packinfo.total_levels); + level_el.style.setProperty('--aidless', packinfo.aidless_levels / packinfo.total_levels); } } @@ -3354,7 +3367,8 @@ class LevelBrowserOverlay extends DialogOverlay { // Main storage: // packs: // total_score -// total_time +// total_time -- FIXME this is nonsense lol, it's time left on the clock +// total_abstime // total_levels // cleared_levels // aidless_levels diff --git a/levels/previews/cc2lp1.png b/levels/previews/cc2lp1.png new file mode 100644 index 0000000000000000000000000000000000000000..7eccc3e09b62dca58351de5ed4cb073f1946ee28 GIT binary patch literal 4004 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 literal 0 HcmV?d00001 diff --git a/levels/previews/cclp3.png b/levels/previews/cclp3.png new file mode 100644 index 0000000000000000000000000000000000000000..bb4ee250f6461181ecf88a0b22b37390cf249abc GIT binary patch literal 3317 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 literal 0 HcmV?d00001 diff --git a/levels/previews/lexys-lessons.png b/levels/previews/lexys-lessons.png new file mode 100644 index 0000000000000000000000000000000000000000..81df4a5e744ae04781f2c6c447a9bb6a00089ba2 GIT binary patch literal 3745 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 button { - flex: 1; + margin: 0; } /* Overlay styling */ @@ -556,12 +559,12 @@ pre.stack-trace { "header header" "links links" "stock yours" - / 1fr 1fr + / 3fr minmax(18em, 1fr) ; gap: 1em; position: relative; - padding: 1em 10%; + padding: 1em 7.5%; margin: auto 0; overflow: auto; } @@ -701,21 +704,17 @@ pre.stack-trace { .played-pack-list { } -.played-pack-list > li { - margin-bottom: 1em; +#splash-stock-levels .played-pack-list { + display: grid; + grid: auto-flow auto / repeat(auto-fill, minmax(320px, 1fr)); /* 10x10 */ + gap: 1em; + margin: 1em 0; } -.played-pack-list p { - margin: 0 0.5em; - color: #e8e8e8; -} -.played-pack-list .-progress { - display: flex; - align-items: center; - gap: 0.5em; - text-align: right; -} -.played-pack-list > li.--unplayed .-progress { - display: none; +.played-pack-list .-preview { + display: block; + height: 320px; + margin: auto; + object-fit: none; } .played-pack-list > li > button { font-size: 1.25em; @@ -735,18 +734,72 @@ pre.stack-trace { .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 { - flex: 2; +.played-pack-list p { + color: #c0c0c0; + font-style: italic; } -.played-pack-list .-progress > button { - flex: 1; +.played-pack-list .-progress { + display: grid; + grid: + "levels levels levels" + "score time button" + / 2fr 2fr 1fr + ; + gap: 0.5em; + margin: 0.5em 0; + align-items: center; +} +.played-pack-list > li.--unplayed .-progress { + display: none; +} +.played-pack-list .-progress > .-levels { + grid-area: levels; + + position: relative; + z-index: 1; + padding: 0.25em; + border: 1px solid hsl(225, 25%, 40%); + text-shadow: 0 1px 1px black; + text-align: center; +} +.played-pack-list .-progress > .-levels::before, +.played-pack-list .-progress > .-levels::after { + content: ''; + position: absolute; + z-index: -1; + top: 0; + bottom: 0; + left: 0; +} +.played-pack-list .-progress > .-levels::before { + width: calc(var(--cleared) * 100%); + background: hsl(225, 25%, 30%); +} +.played-pack-list .-progress > .-levels::after { + width: calc(var(--aidless) * 100%); + background: hsl(225, 25%, 40%); +} +.played-pack-list .-progress > .-score { + grid-area: score; +} +.played-pack-list .-progress > .-time { + grid-area: time; +} +.played-pack-list .-progress > .-levels { + grid-area: levels; +} +.played-pack-list .-progress > .-score::before { + content: "Score: "; + color: #909090; +} +.played-pack-list .-progress > .-time::before { + content: "Time: "; + color: #909090; } .played-pack-list .-editor-status { display: flex; gap: 0.5em; - margin: 0 0.5em; + margin: 0.5em 0 1em; } .played-pack-list .-editor-status > .-level-count { flex: auto; @@ -1777,7 +1830,7 @@ body.--debug #player-debug { .editor-level-browser { display: grid; - grid: auto-flow auto / repeat(auto-fill, minmax(13em, 1fr)); /* 12em preview wdith + padding */ + grid: auto-flow auto / repeat(auto-fill, minmax(13em, 1fr)); /* 12em preview width + padding */ gap: 0.5em; width: 70vw; /* seems to go into the parent's right padding fsr, i guess because the scrollbar is there */