leif/lexys-labyrinth
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
c8343f1a23
lexys-labyrinth/index.html
Eevee (Evelyn Woods) 81c7f97d72 Improve behavior on mobile 
- Hide the key hints in portrait mode

- Make auto-scaling more robust; it now handles when the player root is
  wider than the actual play area, it better understands the inventory
  behavior in portrait mode, and it recognizes when it needs to shrink;
  with these changes, the game actually fills the screen on both Firefox
  and Chrome on my phone!

- Replace the text buttons with SVG icons

- Add a little more contrast to button edges

- Fix alignment of the heart/time/score counters in portrait mode

- Detect movement based on where the touch is relative to the level
  viewport, not the entire play area (oof)
2020-11-03 13:50:34 -07:00

255 lines
13 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!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.">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
</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">
<svg class="svg-icon" viewBox="0 0 16 16" title="previous"><path d="M14,1 2,8 14,14 z"></svg>
</button>
<button id="main-choose-level" type="button">Level select</button>
<button id="main-next-level" type="button">
<svg class="svg-icon" viewBox="0 0 16 16" title="next"><path d="M2,1 14,8 2,14 z"></svg>
</button>
</nav>
</header>
<main id="splash">
<div class="drag-overlay"></div>
<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>Load and play any levels you have on hand — both the original levels and any custom ones, perhaps ones you found on the <a href="https://sets.bitbusters.club/">Bit Busters Club set list</a>. Supports CCL/DAT, C2G, and 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>
<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>If you still have the original Microsoft "BOWEP" game lying around, you can play the Chip's Challenge 1 levels by loading <code>CHIPS.DAT</code>.</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, or load it with the button above.</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">
<svg class="svg-icon" viewBox="0 0 16 16" title="pause"><path d="M2,1 h4 v14 h-4 z M10,1 h4 v14 h-4 z"></svg>
<span class="keyhint">(p)</span></button>
<button class="control-restart" type="button">
<svg class="svg-icon" viewBox="0 0 16 16" title="restart"><path d="M13,13 A 7,7 270 1,1 13,3 L15,1 15,7 9,7 11,5 A 4,4 270 1,0 11,11 z"></svg>
</button>
<button class="control-undo" type="button">
<svg class="svg-icon" viewBox="0 0 16 16" title="undo"><path d="M6,5 6,2 1,7 6,12 6,9 A 10,10 60 0,1 15,12 A 10,10 90 0,0 6,5"></svg>
</button>
<button class="control-rewind" type="button">
<svg class="svg-icon" viewBox="0 0 16 16" title="rewind"><path d="M1,8 7,2 7,14 z M9,8 15,2 15,14 z"></svg>
<span class="keyhint">(z)</span></button>
<label><input class="control-turn-based" type="checkbox"> Turn-based mode</label>
</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>
<div id="player-debug">
<p>Play time: A tics, B moves, C seconds</p>
<p>
<button>« 4 tics</button>
<button>« 1 tic</button>
<button>1 tic »</button>
<button>4 tics »</button>
</p>
<p>Speed: 6× (0.5 frame), 3× (1 frame), 2× (???), 1.5× (2 frames), 1× (3 frames), ½× (6 frames), ⅓× (9 frames), ¼× (12 frames)</p>
<p>Viewport: 9/10, 12, 16, 24, 32, map size</p>
<p><input type="checkbox"> Show actor info</p>
<p><input type="checkbox"> Show actor bounding boxes</p>
<p><input type="checkbox"> Freeze time for everything else</p>
<p><input type="checkbox"> Immortal / intangible?</p>
<p><input type="checkbox"> Ignore collisions</p>
<p><input type="checkbox"> Levitate</p>
<p><input type="checkbox"> Stop clock</p> <!-- TODO toggle clock like the ingame tile? -->
<p>Give item: <img src="icons/tool-bg-selected.png"> (Click inventory to destroy items)</p>
<p>
<button>Green button</button>
<button>Blue button</button>
</p>
<!-- TODO?
- inspect with mouse
- list of actors, or currently pointed-to actor?
- activate something manually?
- click a button ingame?
- pan viewport (like editor)
- show connections, directions, other editor features
- look under anything
-->
</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>
<nav class="controls">
<div id="editor-toolbar">
<!-- tools go here -->
</div>
<div class="-buttons">
<button id="editor-share-url" type="button">Share?</button>
<button id="editor-toggle-green" type="button">Toggle green objects</button>
</div>
<div id="editor-tool-help">
<strong>Pencil</strong> — <span>Select a tile and draw with the left mouse button. Erase with the right mouse button.</span>
</div>
<!--
<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>
-->
</nav>
<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>
Reference in New Issue View Git Blame Copy Permalink