🚗 Epoch Express - A Terrible Date Picker

The worst way to select a date - now as a driving game!

This is a genuine web component that you can use in your own projects! Simply include the JavaScript file and use the custom element in your HTML.

Quick Start:

<!-- Include the component -->
<script src="epoch-express.js"></script>

<!-- Use it anywhere in your HTML -->
<epoch-express />

<!-- Listen for date selection -->
<script>
  const picker = document.querySelector('epoch-express');
  picker.addEventListener('dateselected', (e) => {
    console.log('Selected date:', e.detail.date);
  });
</script>

Selected Date:

No date selected yet. Start driving to see the timestamp increase!

Live Configuration:

Days per Second: Higher = faster time progression

Update Interval (ms): How often events fire

Car Color: Customize your car

Difficulty: Obstacle spawn rate

Enable Reverse:

Allow driving backward in time

Web Component API:

// Get the selected date
const date = document.getElementById('datePicker').value;

// Listen for date changes (fires every 0.5 seconds while driving)
datePicker.addEventListener('dateselected', (e) => {
  console.log('Selected date:', e.detail.date);
  console.log('Timestamp:', e.detail.timestamp);
});

// Reset the game
datePicker.reset();

// Select current date immediately (bypasses update interval)
datePicker.selectCurrentDate();

Configuration Options:

<epoch-express
  days-per-second="350"
  update-interval="500"
  car-color="#bada55"
  difficulty="normal"
></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. Currently unused, reserved for future features. Default: "normal"