Idle: After Midnight

Idle: After Midnight is a small browser-based idle / clicker game about working late, distractions, and slowly burning out.

You generate focus, earn money, upgrade your setup and try not to lose yourself to broken hardware, notifications, games, or a very persistent cat.

This project is intentionally minimalist and single-player only.

▶ Play on GitHub Pages

---

🎮 Gameplay Overview

• Work to generate focus
• Focus increases productivity over time
• Money comes from sustained productivity
• Health represents mental & physical condition
• Distractions interrupt or sabotage progress
• Sleep resets fatigue — but not always cleanly

Push too hard, ignore warning signs, or fail to rest properly and the game will end.

---

⚠️ Core Mechanics

Focus & Productivity

• Focus increases productivity but caps at 100 effectiveness
• Clicking work costs health
• Fatigue reduces gains

Distractions

Random events that alter gameplay:

• 🐱 Cat - reduces focus
• 💥 Broken PC - halts work completely
• 🎮 New Game - disables work
• 📱 Phone Notifications - drains stored focus

Sleep & Insomnia

• Staying awake too long increases insomnia
• Insomnia boosts short-term productivity
• Long-term effects include:
  • Faster distraction buildup
  • Health decay
  • Higher chance of game over

---

💀 Game Over

The game ends when health reaches zero.

Each ending reflects how you failed:

• Burnout
• System failure
• Disconnection
• Lost focus
• Catastrophe

There is no winning — only different endings.

---

🛠 Tech Stack

• HTML5
• CSS (modular, no framework)
• Vanilla JavaScript (ES modules)

No backend.
No build step.
No external libraries.

---

📁 Project Structure

Path	Type	Purpose
after-midnight/	Root	Project root
assets/css/base.css	CSS	Global resets & variables
assets/css/layout.css	CSS	Page structure & layout
assets/css/components.css	CSS	UI components (buttons, bars, stats)
assets/css/scene.css	CSS	Main scene & image handling
assets/css/effects.css	CSS	Animations & visual effects
assets/css/gameover.css	CSS	Game over screen styles
assets/css/debug.css	CSS	Debug overlay (optional)
assets/css/main.css	CSS	CSS entry point
assets/css/about.css	CSS	About page styles
assets/css/changelogs.css	CSS	Changelog page styles
assets/js/state.js	JS	Single source of truth (game state)
assets/js/game.js	JS	Core simulation loop
assets/js/actions.js	JS	Player interactions (work, sleep, coffee)
assets/js/distractions.js	JS	Event & distraction system
assets/js/insomnia.js	JS	Fatigue & insomnia logic
assets/js/ui.js	JS	Rendering, effects, overlays, game over UI
assets/js/main.js	JS	App bootstrap & loop
assets/scene/idle.png	Asset	Idle scene image
assets/scene/broken_pc.png	Asset	Broken PC scene image
assets/scene/cat.png	Asset	Cat event image
assets/scene/new_game.png	Asset	New game screen image
assets/scene/phone_notif.png	Asset	Phone notification image
index.html	HTML	Main game page
about.html	HTML	About page
changelogs.html	HTML	Version history
README.md	Doc	Project documentation

---

🚀 How to Run

Because this project uses ES modules, it must be served via HTTP. You can use python http.server or if you have xampp or any other webserver stack, you can put this in your www folder.

Quick local server:

python -m http.server 8000

Then open: http://127.0.0.1:8000 in your browser.

🧠 Architecture Overview

This project is intentionally built with strict separation of concerns to keep the codebase readable, debuggable, and scalable.

Core Philosophy

• State-driven: All game data lives in a single source of truth
• Pure logic vs UI: Game rules never touch the DOM
• Composable systems: Distractions, insomnia, actions are independent modules

JavaScript Architecture

File	Responsibility
state.js	Single source of truth for all game state and constants
game.js	Core simulation loop (ticks, production, health, death)
actions.js	Player-triggered actions (work, sleep, coffee, upgrades)
distractions.js	Event system (spawn, tick, resolve distractions)
insomnia.js	Fatigue & insomnia scaling (data-driven, no UI)
ui.js	Rendering, animations, overlays, game over screen
main.js	App bootstrap (wires everything together)

Rule

• game.js, distractions.js, and insomnia.js must never touch the DOM
• ui.js must never change game rules

This makes bugs easier to isolate and future features safer to add.

CSS Architecture

CSS is modularized by responsibility instead of size:

File	Purpose
base.css	Global resets, typography, safety rules
layout.css	Page structure & layout
components.css	Buttons, bars, stats, UI blocks
scene.css	Main visual panel & scene transitions
effects.css	Animations, shakes, overlays
gameover.css	Game over screen & transitions
debug.css	Debug-only visuals and overlays
about.css	About page styles
changelogs.css	Changelog page styles

This keeps styling predictable and avoids “CSS spaghetti”.

🐞 Debug Mode

The project includes debug tooling hooks designed to help balance and test gameplay without polluting core logic.

What Debug Mode Is For

• Balancing distraction frequency
• Observing insomnia scaling
• Verifying game-over triggers
• UI layout testing

Debug Capabilities (Current & Planned)

• Visual debug overlays (debug.css)
• Easy stat visibility (focus, health, insomnia level)
• Non-invasive logging (no gameplay logic altered)
• Debug tools are opt-in and should never affect normal gameplay.

Design Rule

Debug code:

• Lives outside core systems
• Is safe to remove without breaking the game
• Never changes win/lose conditions