Epoch Express

A terrible date picker implemented as a 2D driving game where your score is an epoch timestamp that increases as you drive forward.

🚀 Quick Start

1. Open index.html in a web browser
2. Use arrow keys to drive: ↑ accelerate, ↓ brake (or reverse if enabled), ← → dodge
3. Output timestamp increases as you drive (or decreases in reverse)

📦 Web Component Usage

Drop this into any HTML page:

<script src="epoch-express.js"></script>
<epoch-express id="myDatePicker"></epoch-express>

JavaScript API

const picker = document.getElementById("myDatePicker");

// Get the selected date
const selectedDate = picker.value; // Returns a Date object

// Listen for date changes (fires every 0.5 seconds while driving)
picker.addEventListener("dateselected", (e) => {
  console.log("Date:", e.detail.date);
});

// Reset the game
picker.reset();

// Select current date programmatically (bypasses update interval)
picker.selectCurrentDate();

API Methods

• picker.value: Returns the current selected date as a Date object
• picker.reset(): Resets the game to timestamp 0
• picker.selectCurrentDate(): Immediately fires the dateselected event with the current timestamp, bypassing the update interval timer

Configuration Attributes

<epoch-express
  days-per-second="350"
  update-interval="500"
  car-color="#bada55"
  difficulty="normal"
  reverse="false"
>
</epoch-express>

Attribute Descriptions

• days-per-second (number): How many days pass per second of driving. Higher values = faster time progression. Default: 350
• update-interval (number): How often the 'dateselected' event fires in milliseconds. Lower values = more frequent updates. Default: 500
• car-color (string): Custom car color as a hex color code. Default: "#bada55"
• difficulty (string): Game difficulty level affecting obstacle spawn rate. Options: "easy", "normal", "hard". Default: "normal"
• reverse (boolean): Enable reverse driving. When true, ↓ key drives backward in time at 1/3 max speed. When false, ↓ key brakes. Default: false