Add CC2LP1; streamline the splash page, moving most of the text to the GitHub wiki
This commit is contained in:
Eevee (Evelyn Woods)
parent
1b48c291c9
commit
1b55e82061
62
index.html
62
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>
|
||||
<p>an unapproved Chip's Challenge emulator</p>
|
||||
<img src="og-preview.png" alt="">
|
||||
<h1>Lexy's Labyrinth</h1>
|
||||
<p>an unapproved Chip's Challenge 2 emulator</p>
|
||||
</header>
|
||||
<section id="splash-intro">
|
||||
<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>
|
||||
<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>
|
||||
</section>
|
||||
<section id="splash-links">
|
||||
<h2>More resources</h2>
|
||||
<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>
|
||||
<div id="splash-links">
|
||||
<a href="https://github.com/eevee/lexys-labyrinth/wiki">About</a>
|
||||
<a href="https://github.com/eevee/lexys-labyrinth/wiki/How-To-Play">How to play</a>
|
||||
<a href="https://github.com/eevee/lexys-labyrinth">Source code and more</a>
|
||||
<a href="https://patreon.com/eevee">Support on Patreon</a>
|
||||
</div>
|
||||
|
||||
<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>Other levels</h2>
|
||||
<p>You can load custom levels as well — CCL/DAT, C2G, or individual C2Ms (though scores aren't saved for those).</p>
|
||||
<!-- TODO zip files! -->
|
||||
<p>You can also drag and drop files or directories into this window.</p>
|
||||
<h2>More 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>
|
||||
<div class="button-row">
|
||||
<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>
|
||||
<ol class="normal-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>
|
||||
<li>Open the <code>data</code> folder, then <code>games</code>.</li>
|
||||
<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>
|
||||
</div>
|
||||
<ul class="played-pack-list" id="splash-other-pack-list">
|
||||
<!-- populated by js -->
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section id="splash-your-levels">
|
||||
<h2>Make your own (WIP lol)</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>
|
||||
<p><button type="button" id="splash-create-pack" class="button-big">New pack</button></p>
|
||||
<p><button type="button" id="splash-create-level" class="button-big">New scratch level<br>(won't be saved!)</button></p>
|
||||
<h2>Create</h2>
|
||||
<div class="button-row">
|
||||
<button type="button" id="splash-create-pack" class="button-big">New pack</button>
|
||||
<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>
|
||||
|
||||
14
js/main.js
14
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;
|
||||
|
||||
BIN
levels/CC2LP1.zip
Normal file
BIN
levels/CC2LP1.zip
Normal file
Binary file not shown.
101
style.css
101
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;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user