flipoff-split-flap-display: Скилл для создания ретро табло

--- name: flipoff-split-flap-display description: Expert skill for building, customizing, and embedding the FlipOff split-flap display emulator — a free, offline-capable web app that turns any browser/TV into a retro airport departure board. triggers: - add split flap display to my site - customize flipoff messages or quotes - embed retro flip board display - change flipoff grid size or colors - how do I use flipoff split flap emulator - add keyboard controls to flipoff - flipoff sound and animation configuration - turn TV into flip board display --- # FlipOff Split-Flap Display Emulator > Skill by [ara.so](https://ara.so) — Daily 2026 Skills collection. FlipOff is a pure vanilla HTML/CSS/JS web app that emulates classic mechanical split-flap (flip-board) airport displays. No frameworks, no npm, no build step — open `index.html` and you have a full-screen retro display with authentic scramble animations and clacking sounds. --- ## Installation ```bash git clone https://github.com/magnum6actual/flipoff.git cd flipoff # Option 1: Open directly open index.html # Option 2: Serve locally (recommended for audio) python3 -m http.server 8080 # Visit http://localhost:8080 ``` > **Audio note:** Browsers block autoplay. The user must click once to enable the Web Audio API context. After that, sound plays automatically on each message transition. --- ## File Structure ``` flipoff/ index.html — Single-page app entry point css/ reset.css — CSS reset layout.css — Header, hero, page layout board.css — Board container and accent bars tile.css — Tile styling and 3D flip animation responsive.css — Media queries (mobile → 4K) js/ main.js — Entry point, wires everything together Board.js — Grid manager, transition orchestration Tile.js — Per-tile animation logic SoundEngine.js — Web Audio API playback MessageRotator.js — Auto-rotate timer KeyboardController.js — Keyboard shortcut handling constants.js — All configuration lives here flapAudio.js — Base64-encoded audio data ``` --- ## Key Configuration — `js/constants.js` Everything you'd want to change lives in one file: ```js // js/constants.js (representative structure) export const GRID_COLS = 26; // Characters per row export const GRID_ROWS = 8; // Number of rows export const SCRAMBLE_DURATION = 600; // ms each tile scrambles before settling export const STAGGER_DELAY = 18; // ms between each tile starting its scramble export const AUTO_ROTATE_INTERVAL = 8000; // ms between auto-advancing messages export const SCRAMBLE_COLORS = [ '#FF6B35', '#F7C59F', '#EFEFD0', '#004E89', '#1A936F', '#C6E0F5' ]; export const ACCENT_COLORS = ['#FF6B35', '#004E89', '#1A936F']; export const MESSAGES = [ "HAVE A NICE DAY", "ALL FLIGHTS ON TIME", "WELCOME TO THE FUTURE", // Add your own here ]; ``` --- ## Adding Custom Messages Edit `MESSAGES` in `js/constants.js`. Each message is a plain string. The board wraps text across the grid automatically. ```js export const MESSAGES = [ "DEPARTING GATE 7", "YOUR COFFEE IS READY", "BUILD THINGS THAT MATTER", "FLIGHT AA 404 NOT FOUND", // max GRID_COLS * GRID_ROWS chars ]; ``` **Padding rules:** Messages shorter than the grid are padded with spaces. Messages longer than the grid are truncated. Keep messages at or under `GRID_COLS × GRID_ROWS` characters. --- ## Changing Grid Size ```js // Compact 16×4 ticker-style board export const GRID_COLS = 16; export const GRID_ROWS = 4; // Wide cinema board export const GRID_COLS = 40; export const GRID_ROWS = 6; // Tall info kiosk export const GRID_COLS = 20; export const GRID_ROWS = 12; ``` After changing grid dimensions, tiles re-render automatically on next page load. --- ## Keyboard Shortcuts | Key | Action | |-----|--------| | `Enter` / `Space` | Next message | | `Arrow Left` | Previous message | | `Arrow Right` | Next message | | `F` | Toggle fullscreen | | `M` | Toggle mute | | `Escape` | Exit fullscreen | --- ## Programmatic API ### Board ```js // Board.js exposes a class you can instantiate directly import Board from './js/Board.js'; const board = new Board(document.getElementById('board-container')); // Display a specific string board.setMessage('GATE CHANGE B12'); // Advance to next message in the rotation board.next(); // Go back board.previous(); ``` ### MessageRotator ```js import MessageRotator from './js/MessageRotator.js'; const rotator = new MessageRotator(board, messages, AUTO_ROTATE_INTERVAL); rotator.start(); // begin auto-advancing rotator.stop(); // pause rotation rotator.next(); // manual advance rotator.previous(); // manual back ``` ### SoundEngine ```js import SoundEngine from './js/SoundEngine.js'; const sound = new SoundEngine(); // Must call after a user gesture (click/keypress) await sound.init(); sound.play(); // play the flap transition sound sound.mute(); // silence sound.unmute(); sound.toggle(); // flip mute state ``` ### KeyboardController ```js import KeyboardController from './js/KeyboardController.js'; const kb = new KeyboardController({ onNext: () => rotator.next(), onPrevious: () => rotator.previous(), onFullscreen: () => toggleFullscreen(), onMute: () => sound.toggle(), }); kb.attach(); // start listening kb.detach(); // stop listening ``` --- ## Embedding FlipOff in Another Page ### As an iframe ```html <iframe src="/flipoff/index.html" width="1280" height="400" style="border:none; background:#000;" allowfullscreen ></iframe> ``` ### Inline embed (pull in just the board) ```html <!-- In your page --> <div id="flip-board"></div> <script type="module"> import Board from '/flipoff/js/Board.js'; import SoundEngine from '/flipoff/js/SoundEngine.js'; import { MESSAGES, AUTO_ROTATE_INTERVAL } from '/flipoff/js/constants.js'; const board = new Board(document.getElementById('flip-board')); const sound = new SoundEngine(); let idx = 0; board.setMessage(MESSAGES[idx]); document.addEventListener('click', async () => { await sound.init(); }, { once: true }); setInterval(() => { idx = (idx + 1) % MESSAGES.length; board.setMessage(MESSAGES[idx]); sound.play(); }, AUTO_ROTATE_INTERVAL); </script> ``` --- ## Custom Color Themes ```js // js/constants.js — dark blue terminal theme export const SCRAMBLE_COLORS = [ '#0D1B2A', '#1B2838', '#00FF41', '#003459', '#007EA7', '#00A8E8' ]; export const ACCENT_COLORS = ['#00FF41', '#007EA7', '#00A8E8']; ``` ```css /* css/board.css — override tile background */ .tile { background-color: #0D1B2A; color: #00FF41; border-color: #003459; } ``` --- ## Common Patterns ### Show real-time data (e.g., a flight API) ```js import Board from './js/Board.js'; import SoundEngine from './js/SoundEngine.js'; const board = new Board(document.getElementById('board')); const sound = new SoundEngine(); async function fetchAndDisplay() { const res = await fetch('/api/departures'); const data = await res.json(); const message = `${data.flight} ${data.destination} ${data.gate}`; board.setMessage(message.toUpperCase()); sound.play(); } document.addEventListener('click', () => sound.init(), { once: true }); setInterval(fetchAndDisplay, 30_000); fetchAndDisplay(); ``` ### Cycle through a custom message list ```js const promos = [ "SALE ENDS SUNDAY", "FREE SHIPPING OVER $50", "NEW ARRIVALS THIS WEEK", ]; let i = 0; setInterval(() => { board.setMessage(promos[i % promos.length]); sound.play(); i++; }, 5000); ``` ### React/Vue wrapper (import as a module) ```jsx // FlipBoard.jsx import { useEffect, useRef } from 'react'; import Board from '../flipoff/js/Board.js'; import { MESSAGES } from '../flipoff/js/constants.js'; export default function FlipBoard({ messages = MESSAGES, interval = 8000 }) { const containerRef = useRef(null); const boardRef = useRef(null); useEffect(() => { boardRef.current = new Board(containerRef.current); let idx = 0; boardRef.current.setMessage(messages[idx]); const timer = setInterval(() => { idx = (idx + 1) % messages.length; boardRef.current.setMessage(messages[idx]); }, interval); return () => clearInterval(timer); }, []); return <div ref={containerRef} className="flip-board-container" />; } ``` --- ## Troubleshooting | Problem | Fix | |---|---| | No sound | User must click/interact first; Web Audio requires a user gesture | | Sound works locally but not deployed | Ensure `flapAudio.js` (base64) is served; check MIME types | | Tiles don't animate | Verify CSS `tile.css` is loaded; check for JS console errors | | Grid overflows on small screens | Reduce `GRID_COLS`/`GRID_ROWS` in `constants.js` or add CSS `overflow: hidden` | | Fullscreen not working | `F` key calls `requestFullscreen()` — some browsers require the page to be focused | | Messages cut off | String length exceeds `GRID_COLS × GRID_ROWS`; shorten or increase grid size | | Audio blocked by CSP | Add `media-src 'self' blob: data:` to your Content-Security-Policy | | CORS error loading modules | Serve with a local server (`python3 -m http.server`), not `file://` | --- ## Tips for TV / Kiosk Deployment ```bash # Serve with a simple static server npx serve . # Node python3 -m http.server # Python # Auto-launch fullscreen in Chromium kiosk mode chromium-browser --kiosk --app=http://localhost:8080 # Hide cursor after idle (add to index.html) document.addEventListener('mousemove', () => { document.body.style.cursor = 'default'; clearTimeout(window._cursorTimer); window._cursorTimer = setTimeout(() => { document.body.style.cursor = 'none'; }, 3000); }); ```