lexys-labyrinth/index.html
Timothy Stiles 5c6cd01b39 Implement turn based mode
Seems to work mechanically though I haven't extensively stress tested it yet. Force floors work the way you'd want them to though (you're given control whenever you can make an input and not otherwise).
There are some graphical bugs with rewinding, but there were some without turn based mode anyway...
2020-09-26 22:10:42 +10:00

207 lines
10 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf8">
<title>Lexy's Labyrinth</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="shortcut icon" type="image/png" href="icon.png">
<script type="module" src="js/main.js"></script>
<meta name="og:type" content="website">
<meta name="og:image" content="https://c.eev.ee/lexys-labyrinth/og-preview.png">
<meta name="og:title" content="Lexy's Labyrinth">
<meta name="og:description" content="A (work in progress) reimplementation of Chip's Challenge 1 and 2, using entirely free assets.">
</head>
<body data-mode="splash">
<header id="header-main">
<img src="icon.png" alt="">
<h1>Lexy's Labyrinth</h1>
<p>— a game by <a href="https://eev.ee/">eevee</a></p>
<nav>
<button id="main-about" type="button">about</button>
<button id="main-help" type="button" disabled>help</button>
<button id="main-options" type="button" disabled>options</button>
</nav>
</header>
<header id="header-pack">
<h2 id="level-pack-name">Chip's Challenge Level Pack 1</h2>
<nav>
<button id="main-change-pack" type="button">Change pack</button>
<button id="player-edit" type="button">Edit</button>
<button id="editor-play" type="button">Test</button>
</nav>
</header>
<header id="header-level">
<h3 id="level-name">Level 1 — Key Pyramid</h3>
<nav>
<button id="main-prev-level" type="button"></button>
<button id="main-choose-level" type="button">Level select</button>
<button id="main-next-level" type="button"></button>
</nav>
</header>
<main id="splash">
<header>
<h1><img src="og-preview.png" alt="">Lexy's Labyrinth</h1>
</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>!</p>
<p>(This is a Chip's Challenge <em>emulator</em>, designed to be an accessible way to play community-made levels with free assets. It's 99% compatible with Chip's Challenge 1, and support for Chip's Challenge 2 is underway. But you can safely ignore all that and treat this as its own game.)</p>
<p>Please note that <em>levels themselves</em> may contain hints or lore referring to a guy named Chip collecting computer chips, even though you are clearly a fox named Lexy collecting hearts. Weird, right? Sorry for any confusion!</p>
<p>Pick a level pack to get started! You can also get more technical details or report bugs on <a href="https://github.com/eevee/lexys-labyrinth">GitHub</a>, find out more about Chip's Challenge via the <a href="https://bitbusters.club/">Bit Busters Club</a> fansite, or support this endeavor (and other things I do) via <a href="https://www.patreon.com/eevee">Patreon</a>!</p>
<!-- TODO i want to make clear this is a chip's challenge emulator without bogging people down too much about what that means -->
</section>
<section id="splash-stock-levels">
<h2>Just play something</h2>
<!-- populated by js -->
</section>
<section id="splash-upload-levels">
<h2>Other levels</h2>
<p>You can play <code>CHIPS.DAT</code> from the original Microsoft version, any custom levels you have lying around, or perhaps ones you found on the <a href="https://sets.bitbusters.club/">Bit Busters Club set list</a>!</p>
<!-- TODO explain how to find chips.dat or steam folder -->
<!-- TODO drag and drop? -->
<input id="splash-upload" type="file" accept=".dat,.ccl,.c2m,.ccs">
<button type="button" id="splash-upload-button" class="button-big">Open a local level<!-- TODO: <br>(or drag and drop a file into this window) --></button>
<p>Supports both the old Microsoft <code>CHIPS.DAT</code> format and the Steam <code>C2M</code> format.</p>
<p>Does <em>not</em> yet support the Steam <code>C2G</code> format, so tragically, the original Steam levels can only be played one at a time. This should be fixed soon!</p>
<!--
<p>If you own the Steam versions of <a href="https://store.steampowered.com/app/346850/Chips_Challenge_1/">Chip's Challenge 1</a> (<em>free!</em>) or <a href="https://store.steampowered.com/app/348300/Chips_Challenge_2/">Chip's Challenge 2</a> ($5 last I checked), you can play those too, even on Linux or Mac:</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.</li>
</ol>
-->
</section>
<section id="splash-your-levels">
<h2>Make your own (WIP lol)</h2>
<p>Please note that the level editor is <strong>extremely</strong> unfinished, and can't even save yet.</p>
<p><button type="button" id="splash-create-level" class="button-big">Create a level</button></p>
</section>
</main>
<main id="player" hidden>
<section class="-main-area">
<div class="level"><!-- level canvas and any overlays go here --></div>
<div class="overlay-message">
<h1 class="-top"></h1>
<div class="-middle"></div>
<p class="-bottom"></p>
<p class="-keyhint"></p>
</div>
<div class="message"></div>
<div class="chips">
<h3>Hearts</h3>
<output></output>
</div>
<div class="time">
<h3>Time</h3>
<output></output>
</div>
<div class="bonus">
<h3>Bonus</h3>
<output></output>
</div>
<div class="inventory"></div>
</section>
<div id="player-music">
<div id="player-music-left">
🎵 <a id="player-music-title">title</a> by <a id="player-music-author">author</a>
</div>
<div id="player-music-right">
<input id="player-music-volume" type="range" min="0" max="1" step="0.05" value="1">
<input id="player-music-unmute" type="checkbox" checked>
</div>
<audio loop preload="auto">
</div>
<div class="controls">
<div class="play-controls">
<button class="control-pause" type="button">Pause (p)</button>
<button class="control-restart" type="button">Restart</button>
<button class="control-undo" type="button">Undo</button>
<button class="control-rewind" type="button">Rewind (z)</button>
<input class="turn-based" type="checkbox">Turn-Based</input>
</div>
<div class="demo-controls">
<button class="demo-play" type="button">View replay</button>
<button class="demo-step-1" type="button">Step 1 tic</button>
<button class="demo-step-4" type="button">Step 1 move</button>
<div class="input"></div>
</div>
</div>
<!-- TODO debug panel?
- current tic
- list of actors, or currently pointed-to actor?
<div class="debug">
<button>« 4 tics</button>
<button>« 1 tic</button>
<button>1 tic »</button>
<button>4 tics »</button>
</div>
-->
</main>
<main id="editor" hidden>
<header>
<!-- TODO
- close
- export
- delete??
- zoom
also deal with levels vs level /packs/ somehow, not sure how that'll work (including downloading them, yeargh?)
-->
</header>
<div class="level"><!-- level canvas and any overlays go here --></div>
<div class="controls">
<button id="editor-share-url" type="button">Share?</button>
<!--
<p style>
Tip: Right click to color drop.<br>
Tip: Ctrl-click with terrain to replace only the current tile's terrain, rather than overwriting the whole tile.
</p>
<p>Layer: [all/auto] [terrain] [item] [actor] [overlay]</p>
<p>Actor direction: [north] [south] [east] [west]</p>
<p>[ ] Show connections</p>
<p>[ ] Toggle green objects</p>
<p>[ ] Show monster pathing</p>
<p>[ ] Show circuits???</p>
<pre>
Metadata:
xxx / yyy chips required
Time limit: [____]
Title: [__________]
Author: [__________]
map size
</pre>
-->
</div>
<div class="palette"></div>
<!-- TODO:
controls
- play!
- object palette
- choose direction
- choose layer to /modify/: terrain, item, creature, overlay
- stack (place item atop whatever terrain), or replace (placing a tile overwrites the whole cell)
[XXX mode that allows arbitrary stacking of objects?]
- level metadata
- change size
XXX how do i handle thin walls? treat specially, allow drawing/erasing them along edges instead of tiles? ehh then you can't control which tile they're in though... but the game seems to prefer south+east so maybe that works...
hotkeys
- mod a tile on the board: rotate a creature, alter thin walls??
- "pick up" a tile
cool stuff
- set chip count by hand, set extra ones automatically
-->
</main>
</body>
</html>