Add CC2LP1; streamline the splash page, moving most of the text to the GitHub wiki

index.html

@@ -92,52 +92,46 @@
     <main id="splash" hidden>
         <div class="drag-overlay"></div>
         <header>
-            <h1><img src="og-preview.png" alt="">Lexy's Labyrinth</h1>
+            <img src="og-preview.png" alt="">
-            <p>an unapproved Chip's Challenge emulator</p>
+            <h1>Lexy's Labyrinth</h1>
+            <p>an unapproved Chip's Challenge 2 emulator</p>
         </header>
-        <section id="splash-intro">
+        <div id="splash-links">
-            <p><strong>Welcome</strong> to Lexy's Labyrinth, an open source puzzle game that is curiously similar to — but legally distinct from! — the Atari classic <a href="https://en.wikipedia.org/wiki/Chip%27s_Challenge">Chip's Challenge</a>.  It's been lovingly crafted from scratch with completely new art, sounds, and music; it lets you undo your mistakes; and it's the <em>only</em> way to play Chip's Challenge 2 levels on Linux, Mac, or a phone!</p>
+            <a href="https://github.com/eevee/lexys-labyrinth/wiki">About</a>
-            <p>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.</p>
+            <a href="https://github.com/eevee/lexys-labyrinth/wiki/How-To-Play">How to play</a>
-        </section>
+            <a href="https://github.com/eevee/lexys-labyrinth">Source code and more</a>
-        <section id="splash-links">
+            <a href="https://patreon.com/eevee">Support on Patreon</a>
-            <h2>More resources</h2>
+        </div>
-            <ul class="normal-list">
-                <li><a href="https://github.com/eevee/lexys-labyrinth/wiki/How-To-Play">How to play</a></li>
-                <li><a href="https://github.com/eevee/lexys-labyrinth">Source code and project details on GitHub</a></li>
-                <li><a href="https://patreon.com/eevee">Support this project (and others) on my Patreon</a></li>
-                <li><a href="https://bitbusters.club/">Bit Busters Club</a>, a fansite with an extensive <a href="https://wiki.bitbusters.club/Main_Page">wiki</a>, vastly more <a href="https://sets.bitbusters.club/">community levels</a>, speedrun records, and more</li>
-                <li><a href="https://store.steampowered.com/app/346850/Chips_Challenge_1/">Chip's Challenge 1</a> (free) and <a href="https://store.steampowered.com/app/348300/Chips_Challenge_2/">Chip's Challenge 2</a> ($5) on Steam</li>
-                <li><a href="http://www.niffler.co.uk/">Niffler</a>, the current publisher of Chip's Challenge and its spiritual sequel <a href="https://store.steampowered.com/app/262590/Chucks_Challenge_3D_2020/">Chuck's Challenge 3D</a></li>
-            </ul>
-        </section>
 
         <section id="splash-stock-levels">
-            <h2>Play community levels</h2>
+            <h2>Play</h2>
+            <ul class="played-pack-list" id="splash-stock-pack-list">
                 <!-- populated by js -->
-        </section>
+            </ul>
+            <div class="button-row">
+                <button type="button" class="button-big" disabled>More levels</button>
+                <button type="button" class="button-big" disabled>Other saved scores</button>
+            </div>
 
-        <section id="splash-upload-levels">
+            <h2>More levels</h2>
-            <h2>Other levels</h2>
+            <p>Supports CCL/DAT, C2G, C2M, and ZIP; drag and drop; and both custom and official levels.  <a href="https://github.com/eevee/lexys-labyrinth/wiki/Loading-Levels">More details</a></p>
-            <p>You can load custom levels as well — CCL/DAT, C2G, or individual C2Ms (though scores aren't saved for those).</p>
+            <div class="button-row">
-            <!-- TODO zip files! -->
-            <p>You can also drag and drop files or directories into this window.</p>
                 <input id="splash-upload-file" type="file" accept=".dat,.ccl,.c2m,.ccs" multiple>
                 <input id="splash-upload-dir" type="file" webkitdirectory>
                 <button type="button" id="splash-upload-file-button" class="button-big">Load files</button>
                 <button type="button" id="splash-upload-dir-button" class="button-big">Load directory</button>
-            <p>To play the original levels, you can load <code>CHIPS.DAT</code> from the ancient Microsoft port, or load the Steam levels as follows:</p>
+            </div>
-            <ol class="normal-list">
+            <ul class="played-pack-list" id="splash-other-pack-list">
-                <li>Right-click the game in Steam and choose <em>Properties</em>.  On the <em>Local Files</em> tab, click <em>Browse local files</em>.</li>
+                <!-- populated by js -->
-                <li>Open the <code>data</code> folder, then <code>games</code>.</li>
+            </ul>
-                <li>You should see either a <code>cc1</code> or <code>cc2</code> folder.  Drag it into this window, or load it with the button above.</li>
-            </ol>
         </section>
 
         <section id="splash-your-levels">
-            <h2>Make your own (WIP lol)</h2>
+            <h2>Create</h2>
-            <p>Please note that the level editor is <strong>very</strong> unfinished, and doesn't even have undo yet.  It may eat your work!  Beware!</p>
+            <div class="button-row">
-            <p><button type="button" id="splash-create-pack" class="button-big">New pack</button></p>
+                <button type="button" id="splash-create-pack" class="button-big">New pack</button>
-            <p><button type="button" id="splash-create-level" class="button-big">New scratch level<br>(won't be saved!)</button></p>
+                <button type="button" id="splash-create-level" class="button-big">New scratch level<br>(won't be saved!)</button>
+            </div>
         </section>
     </main>
     <main id="player" hidden>

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');
+        let stock_pack_list = document.querySelector('#splash-stock-pack-list');
-        document.querySelector('#splash-stock-levels').append(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.custom_pack_list = document.querySelector('#splash-other-pack-list');
-        this.root.querySelector('#splash-upload-levels').append(this.custom_pack_list);
         for (let [ident, packinfo] of Object.entries(this.conductor.stash.packs)) {
             if (stock_pack_idents.has(ident))
                 continue;

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"
+        "header header"
-        "intro  stock   upload"
+        "links  links"
-        "links  stock   yours"
+        "stock  yours"
-        / 1fr 1fr 1fr
+        / 1fr 1fr
-    ;
-    grid:
-        "header header  header"
-        "intro  intro   intro"
-        "stock  upload  yours"
-        "links  upload  yours"
-        / 1fr 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 {
+    #splash > header p {
-        /* Put this last I guess?? */
+        font-size: 1em;
-        order: 99;
     }
     /* 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;
+    color: #e8e8e8;
-    font-style: italic;
 }
 .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;
 }