diff --git a/index.html b/index.html index ba0147a..a8a206b 100644 --- a/index.html +++ b/index.html @@ -92,52 +92,46 @@
-

Lexy's Labyrinth

-

an unapproved Chip's Challenge emulator

+ +

Lexy's Labyrinth

+

an unapproved Chip's Challenge 2 emulator

-
-

Welcome to Lexy's Labyrinth, an open source puzzle game that is curiously similar to — but legally distinct from! — the Atari classic Chip's Challenge. It's been lovingly crafted from scratch with completely new art, sounds, and music; it lets you undo your mistakes; and it's the only way to play Chip's Challenge 2 levels on Linux, Mac, or a phone!

-

Pick a level pack to get started! You can also load and play any levels you've got lying around, or brave the level editor and make one of your own.

-
-
diff --git a/js/main.js b/js/main.js index 0f6d6c9..701ab2e 100644 --- a/js/main.js +++ b/js/main.js @@ -1740,10 +1740,16 @@ class Player extends PrimaryView { const BUILTIN_LEVEL_PACKS = [{ + path: 'levels/CC2LP1.zip', + 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', ident: 'cclp1', title: "Chip's Challenge Level Pack 1", - desc: "Designed and recommended for new players, starting with gentle introductory levels. A prequel to the other packs.", + 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', @@ -1866,8 +1872,7 @@ class Splash extends PrimaryView { super(conductor, document.body.querySelector('main#splash')); // Populate the list of available level packs - let stock_pack_list = mk('ul.played-pack-list'); - document.querySelector('#splash-stock-levels').append(stock_pack_list); + let stock_pack_list = document.querySelector('#splash-stock-pack-list'); this.played_pack_elements = {}; let stock_pack_idents = new Set; for (let packdef of BUILTIN_LEVEL_PACKS) { @@ -1877,8 +1882,7 @@ class Splash extends PrimaryView { } // Populate the list of other packs you've played - this.custom_pack_list = mk('ul.played-pack-list'); - this.root.querySelector('#splash-upload-levels').append(this.custom_pack_list); + this.custom_pack_list = document.querySelector('#splash-other-pack-list'); for (let [ident, packinfo] of Object.entries(this.conductor.stash.packs)) { if (stock_pack_idents.has(ident)) continue; diff --git a/levels/CC2LP1.zip b/levels/CC2LP1.zip new file mode 100644 index 0000000..24233c5 Binary files /dev/null and b/levels/CC2LP1.zip differ diff --git a/style.css b/style.css index c504897..a127db7 100644 --- a/style.css +++ b/style.css @@ -16,7 +16,7 @@ body { background-size: 10%; color: #ececec; - --panel-bg-color: hsl(225, 10%, 20%); + --panel-bg-color: hsl(225, 10%, 15%); --button-bg-color: hsl(225, 10%, 25%); --button-bg-hover-color: hsl(225, 15%, 30%); --generic-bg-hover-on-white: hsl(225, 60%, 85%); @@ -46,7 +46,7 @@ button, font-family: inherit; color: white; background: var(--button-bg-color); - border: 1px solid hsl(225, 10%, 15%); + border: 1px solid hsl(225, 10%, 10%); box-shadow: inset 0 0 0 1px hsl(225, 10%, 33%), 0 1px 1px hsl(225, 10%, 10%); @@ -198,6 +198,15 @@ svg.svg-icon { 0 1px 1px hsl(225, 10%, 10%); } +.button-row { + display: flex; + gap: 0.5em; + align-items: stretch; +} +.button-row > button { + flex: 1; +} + /* Overlay styling */ .overlay { display: flex; @@ -555,25 +564,24 @@ pre.stack-trace { #splash { display: grid; grid: - "header header header" - "intro stock upload" - "links stock yours" - / 1fr 1fr 1fr - ; - grid: - "header header header" - "intro intro intro" - "stock upload yours" - "links upload yours" - / 1fr 1fr 1fr + "header header" + "links links" + "stock yours" + / 1fr 1fr ; gap: 1em; position: relative; padding: 1em 10%; - margin: auto; + margin: auto 0; overflow: auto; } +#splash::after { + /* Force some breathing room at the bottom of the scroll */ + content: ''; + display: block; + height: 2em; +} #splash > .drag-overlay { display: none; justify-content: center; @@ -597,17 +605,29 @@ pre.stack-trace { #splash > header { grid-area: header; + display: grid; + grid: + "image title" 2fr + "image tagline" 1fr + ; + gap: 0 2em; - text-align: center; -} -#splash > header img { - display: block; margin: auto; } +#splash > header img { + grid-area: image; + align-self: center; +} #splash > header h1 { - font-size: 3em; + grid-area: title; + align-self: end; + font-size: 4em; + margin: 0; } #splash > header p { + grid-area: tagline; + align-self: start; + font-size: 1.5em; margin: 0; font-style: italic; color: #909090; @@ -622,16 +642,18 @@ pre.stack-trace { background: var(--panel-bg-color); box-shadow: 0 0.25em 1em black; } +#splash-links { + grid-area: links; + font-size: 1.5em; + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 0 2em; +} #splash > #splash-intro { grid-area: intro; font-size: 20px; } -#splash > #splash-links { - grid-area: links; -} -#splash > #splash-links ul.normal-list li { - margin: 0.5em 0; -} #splash > #splash-stock-levels { grid-area: stock; } @@ -655,20 +677,29 @@ pre.stack-trace { /* 10% padding is way way too much */ padding: 1em; } + #splash::after { + /* This needs different handling in a flex container */ + flex: 0 0 0.5em; + height: auto; + } /* Shrink logo and title */ + #splash > header { + grid-template-rows: auto auto; + column-gap: 0.5em; + } #splash > header img { width: 48px; } #splash > header h1 { font-size: 2em; } - #splash-links { - /* Put this last I guess?? */ - order: 99; + #splash > header p { + font-size: 1em; } /* No need to boost the font size here */ - #splash > #splash-intro { + #splash > #splash-links { font-size: inherit; + column-gap: 1em; } } @@ -679,8 +710,7 @@ pre.stack-trace { margin-bottom: 1em; } .played-pack-list p { - font-size: 0.833em; - font-style: italic; + color: #e8e8e8; } .played-pack-list .-progress { display: flex; @@ -710,6 +740,15 @@ button.level-pack-button { padding: 0.5em; text-align: left; } +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%); +} +button.level-pack-button:enabled:hover { + background: hsl(225, 40%, 30%); +} button.level-pack-button h3 { grid-area: title; }