bad-apple-console 1.0.0

package/README.md

@@ -0,0 +1,88 @@
+# Bad Apple! Console Player
+
+Play the Bad Apple! music video inside Chrome DevTools at 30fps.
+
+No canvas. No runtime image loading. No flashing. Just 6,572 pre-computed frames played seamlessly through `console.log` CSS backgrounds.
+
+---
+
+## Installation
+
+```bash
+npm install bad-apple-console
+```
+
+Or drop the files onto any static host:
+
+```html
+<script type="module" src="./index.js"></script>
+```
+
+---
+
+## Usage
+
+Import the player in your project:
+
+```js
+import { startPlayback } from 'bad-apple-console';
+
+// Playback starts automatically when DevTools is opened.
+// Or call it manually:
+startPlayback();
+```
+
+Open Chrome DevTools (`F12` or `Cmd+Option+J`) and the video will start automatically.
+
+---
+
+## How It Works
+
+1. **Pre-build step** (`build.js`): All 6,572 PNG frames are resized to 120x90, converted to base64, and the exact `console.log('%c ', ...)` CSS strings are pre-computed into `frames.js`.
+2. **Zero runtime overhead**: At playback, the browser simply cycles through pre-loaded strings. No `Image`, no `Canvas`, no base64 conversion, no CORS.
+3. **Smooth 30fps**: `requestAnimationFrame` with elapsed-time tracking ensures exact frame timing.
+4. **Console-only trigger**: The player detects DevTools opening via window dimension changes and the `console.profile()` timing trick. Playback does **not** start from clicks or keystrokes.
+5. **No flashing**: Frames scroll through console history instead of replacing each other, avoiding the nausea-inducing `console.clear()` strobe effect.
+6. **Scaled display**: The 120x90 frames are displayed at 480x360 via CSS padding so they fill the console width.
+
+---
+
+## DevTools Detection
+
+The player uses two methods to detect when Chrome DevTools is opened:
+
+- **Window dimension check**: Compares `window.outerWidth` vs `window.innerWidth`. When DevTools is docked, the viewport shrinks.
+- **`console.profile()` timing trick**: DevTools instrumentation slows down `console.profile()` measurably. If the call takes >100ms, DevTools is active.
+
+If detection fails (e.g., undocked DevTools on a separate monitor), refreshing the page with DevTools already open will trigger playback immediately.
+
+---
+
+## Building from Source
+
+If you want to regenerate `frames.js` from your own frame sequence:
+
+1. Place your numbered PNG frames (`output_0001.png`, `output_0002.png`, ...) in the project directory.
+2. Install dependencies:
+   ```bash
+   npm install
+   ```
+3. Run the build:
+   ```bash
+   npm run build
+   ```
+
+The build script uses `jimp` to resize, base64-encode, and pre-compute CSS strings for every frame. It outputs a single `frames.js` module.
+
+---
+
+## File Sizes
+
+- `frames.js`: ~31 MB (6,572 pre-computed frames at 120x90)
+- Source PNGs: ~133 MB (not included in npm package)
+
+---
+
+## License
+
+MIT

package/build.js

@@ -0,0 +1,59 @@
+import { Jimp } from 'jimp';
+import { readdir, writeFile } from 'fs/promises';
+import { join } from 'path';
+
+const FRAME_DIR = '/Users/samuelebertocco/Desktop/bad apple ';
+const OUTPUT_FILE = '/Users/samuelebertocco/Desktop/bad apple /frames.js';
+const TARGET_WIDTH = 120;
+const TARGET_HEIGHT = 90;
+
+async function build() {
+  const files = await readdir(FRAME_DIR);
+  const pngFiles = files
+    .filter(f => f.match(/^output_\d+\.png$/))
+    .sort((a, b) => {
+      const numA = parseInt(a.match(/\d+/)[0], 10);
+      const numB = parseInt(b.match(/\d+/)[0], 10);
+      return numA - numB;
+    });
+
+  console.log(`Found ${pngFiles.length} frames`);
+
+  const frames = [];
+  
+  for (let i = 0; i < pngFiles.length; i++) {
+    const file = pngFiles[i];
+    const image = await Jimp.read(join(FRAME_DIR, file));
+    
+    // Force resize to exactly 120x90
+    image.resize({ w: TARGET_WIDTH, h: TARGET_HEIGHT });
+    
+    // Get base64 PNG data URL
+    const base64 = await image.getBase64('image/png');
+    
+    // Pre-compute the exact console.log CSS string
+    const style = [
+      'font-size: 1px;',
+      `padding: ${TARGET_HEIGHT / 2}px ${TARGET_WIDTH / 2}px;`,
+      `background: url(${base64}) no-repeat;`,
+      'background-size: contain;',
+      'color: transparent;'
+    ].join(' ');
+    
+    frames.push(style);
+    
+    if ((i + 1) % 500 === 0 || i === pngFiles.length - 1) {
+      console.log(`Processed ${i + 1}/${pngFiles.length} frames`);
+    }
+  }
+
+  // Write frames as a JS module
+  const lines = frames.map(f => `  "${f}"`);
+  const output = `export const FRAMES = [\n${lines.join(',\n')}\n];\nexport const TOTAL_FRAMES = ${frames.length};\n`;
+  
+  await writeFile(OUTPUT_FILE, output);
+  
+  console.log(`Done! Wrote ${frames.length} pre-computed frames to ${OUTPUT_FILE}`);
+}
+
+build().catch(console.error);