|
| 1 | +# 🎮 Atomic Arcade |
| 2 | + |
| 3 | +**Atomic Arcade** is a retro-inspired, fragment-powered micro-arcade built using the [TriFrost Atomic Runtime](https://trifrost.dev). |
| 4 | + |
| 5 | +It showcases zero-bundle, server-first game delivery, each game loads as a fragment when needed, no more, no less. |
| 6 | + |
| 7 | +> ⚡ No bundlers. No client routing. No hydration nightmares. Just fragments and fun. |
| 8 | +
|
| 9 | +--- |
| 10 | + |
| 11 | +## 🕹 Live Games |
| 12 | +- **Breakout**: Colorful paddle & brick action |
| 13 | +- **Tetris**: Classic falling blocks with smooth controls |
| 14 | +- **Snake**: A pixel-linked reptile quest, powered by SVG food and linked segment rendering |
| 15 | + |
| 16 | +--- |
| 17 | + |
| 18 | +## 🧬 Powered By: TriFrost Atomic |
| 19 | +Atomic Arcade is a practical demo of [TriFrost Atomic](https://www.trifrost.dev/docs/jsx-atomic)’s **runtime fragment model**, where: |
| 20 | +- Each game is a fully isolated fragment |
| 21 | +- No global JS bundles — fragments self-bootstrap |
| 22 | +- HTML, JS, and CSS are streamed and hydrated only when needed |
| 23 | +- Events are passed via pub/sub (`el.$publish(...)`) |
| 24 | +- Canvas rendering and component injection are fully controlled through runtime fragments |
| 25 | + |
| 26 | +--- |
| 27 | + |
| 28 | +## 💡 Features |
| 29 | +- ✨ Synthwave-inspired UI |
| 30 | +- 📦 Zero bundles — everything is dynamically streamed |
| 31 | +- 🧠 Component-level event logic (`Script` + `css`) |
| 32 | +- 🎨 Full canvas rendering (Tetris, Snake) |
| 33 | +- 🔊 Optional audio FX + music with `AudioPlayer` |
| 34 | +- ⚙️ Server-driven routing (`routes.ts`) |
| 35 | + |
| 36 | +--- |
| 37 | + |
| 38 | +## 🚀 Running Locally |
| 39 | +```bash |
| 40 | +# Clone and install |
| 41 | +git clone https://github.com/trifrost-js/example-atomic-arcade.git |
| 42 | +cd example-atomic-arcade |
| 43 | +npm install |
| 44 | + |
| 45 | +# Start dev server |
| 46 | +npm run dev |
| 47 | +``` |
| 48 | + |
| 49 | +--- |
| 50 | + |
| 51 | +## ❄️ Stay Frosty |
| 52 | +Atomic Arcade is a living demo of what’s possible when you rethink JS delivery from the ground up. No SPA assumptions. No bundler magic. Just fast, focused fragments. |
| 53 | + |
| 54 | +Built with ❤️ by the TriFrost team |
0 commit comments