# 6502 Studio ## About This App A developer tool for writing and learning 6502 assembly code with syntax highlighting and interactive opcode reference ## Specification # 6502 Assembly Code Editor & Highlighter Create a polished, retro-themed code editor for 6502 assembly language using CodeMirror 6, with full syntax highlighting, an interactive opcode reference table, and a distinctly 8-bit aesthetic that pays homage to the golden age of computing. ## App Type **React Web App** — This is a text-editor-centric tool with interactive UI panels, state management for editor content, and a reference table with filtering/sorting. React + CodeMirror 6 is the ideal combo. ## Overall Theme & Aesthetic - **Retro computing vibe**: Think Apple II / Commodore 64 terminal aesthetics, but modernized - **Dark background** with a phosphor-green or amber terminal glow option - **Monospace font throughout** — use `"IBM Plex Mono"`, `"Fira Code"`, or `"Source Code Pro"` from Google Fonts - **CRT scanline overlay effect** (subtle, toggleable) on the editor for extra retro flair - **Color palette**: Deep charcoal (#1a1a2e) background, with neon accent colors for syntax categories that match the opcode table's color coding scheme ## UI Layout ### Top Header Bar - App title: **"6502 Studio"** with a small pixel-art microchip icon (emoji or SVG) - Subtitle: *"The MOS Technology 6502 Assembly Editor"* - A toggle switch for **"CRT Mode"** (adds subtle scanline CSS effect) - A dropdown to select **color theme**: "Phosphor Green", "Amber Terminal", "C64 Blue", or "Modern Dark" ### Main Content — Split Panel Layout Use a resizable two-panel layout (left: editor, right: reference), with a drag handle between them. Default split: 60% editor / 40% reference. #### Left Panel: CodeMirror 6 Code Editor A full CodeMirror 6 editor instance with a **custom 6502 assembly language mode** that provides: ##### Syntax Highlighting Categories (color-coded to match the opcode table) 1. **Misc/Control Instructions** (styled in grey/silver): `BRK`, `NOP`, `RTI`, `RTS`, `PHP`, `PLP`, `PHA`, `PLA` 2. **Jumps/Branches/Calls** (styled in teal/cyan): `JMP`, `JSR`, `BPL`, `BMI`, `BVC`, `BVS`, `BCC`, `BCS`, `BNE`, `BEQ` 3. **Load/Store/Transfer Instructions** (styled in blue/purple): `LDA`, `LDX`, `LDY`, `STA`, `STX`, `STY`, `TAX`, `TAY`, `TXA`, `TYA`, `TXS`, `TSX` 4. **Arithmetic/Logical Instructions** (styled in green): `ADC`, `SBC`, `AND`, `ORA`, `EOR`, `CMP`, `CPX`, `CPY`, `BIT`, `INC`, `INX`, `INY`, `DEC`, `DEX`, `DEY`, `CLC`, `SEC`, `CLI`, `SEI`, `CLV`, `CLD`, `SED` 5. **Shift/Rotation Instructions** (styled in orange/gold): `ASL`, `LSR`, `ROL`, `ROR` 6. **Additional token types to highlight**: - **Labels** (e.g., `loop:`, `start:`) — bright white or yellow, bold - **Directives/pseudo-ops** (e.g., `.org`, `.byte`, `.word`, `.text`, `.define`) — magenta/pink - **Hex numbers** (`$FF`, `$1A2B`) — light orange - **Binary numbers** (`%10110011`) — light cyan - **Decimal numbers** (`#42`, `255`) — light yellow - **Immediate mode prefix** (`#`) — highlighted as operator - **Comments** (`;` to end of line) — dim grey/muted green - **Strings** (`"hello"`) — salmon/coral - **Registers** (A, X, Y when used as operands) — distinct bright color - **Addressing mode punctuation** — parentheses for indirect `(`, `)`, commas — subtle highlight ##### Editor Features - **Line numbers** with retro styling - **Active line highlight** (subtle glow) - **Bracket matching** for indirect addressing parentheses - **Auto-indentation** - **Hover tooltips**: When hovering over any recognized mnemonic, show a tooltip with: - Full instruction name (e.g., "ORA — Logical Inclusive OR") - Available addressing modes and their opcodes - Bytes, cycles, and flags affected - **Gutter icons**: Show small colored dots in the gutter matching the instruction category color - **Ctrl+S / Cmd+S** saves to localStorage - **Pre-loaded example program**: Start with a classic 6502 program (e.g., a simple "hello world" that writes to screen memory, or a Fibonacci sequence calculator) with comments explaining each section #### Right Panel: Interactive Opcode Reference Table A faithful reproduction of the 6502 opcode matrix from the user's data, rendered as an interactive HTML table. ##### Table Structure - **16×16 grid** (rows 0x–Fx, columns x0–xF) exactly matching the provided opcode layout - Each **populated cell** shows: - **Mnemonic** + addressing mode (e.g., `ORA (a8,X)`) - **Byte count** and **cycle count** (smaller text below) - **Flags affected** shown as `NZCIDV` with affected flags highlighted, unaffected shown as dashes - **Empty cells** (illegal/undocumented opcodes) shown with a darker/hatched background and the hex opcode in dim text - **Cell background colors** match the 5 instruction categories from the legend: - Grey for Misc/Control - Teal/Cyan for Jumps/Branches - Blue/Purple for Load/Store/Transfer - Green for Arithmetic/Logical - Orange/Gold for Shift/Rotation ##### Table Interactivity - **Click a cell** → highlights ALL cells with the same base mnemonic (e.g., clicking any `ORA` cell highlights all `ORA` variants) and scrolls/focuses the editor to any occurrence of that mnemonic - **Hover a cell** → shows a larger tooltip popup with full details: opcode hex value, full description, addressing mode explanation, byte count, cycle count with notes about page-crossing penalties, and flags affected with explanations - **Search/filter bar** above the table: type a mnemonic name to highlight matching cells and dim all others - **Category filter buttons** (5 buttons matching the legend colors): toggle visibility of instruction categories - **Legend** below the table showing the 5 color categories with labels, exactly as provided in the spec ##### Notation Guide Panel Below the table, a small collapsible panel explaining: - `a8` = 8-bit (zero page) address - `a16` = 16-bit absolute address - `d8` = 8-bit immediate data - `r8` = 8-bit relative offset (for branches) - `+` after cycle count = extra cycle on page boundary crossing - `+/2` = branch taken/not taken cycle variance - Flag notation: `N`=Negative, `Z`=Zero, `C`=Carry, `I`=Interrupt, `D`=Decimal, `V`=Overflow ### Bottom Status Bar - Current **cursor position** (line:column) - **Byte count estimate** (sum up the byte lengths of recognized instructions) - **Instruction count** (number of valid 6502 instructions in the editor) - Current instruction under cursor with its **opcode hex value, bytes, and cycles** ## Functionality ### Core Features 1. **Full CodeMirror 6 integration** with custom 6502 language support (StreamLanguage or Lezer-based) 2. **localStorage persistence** — auto-save editor content every few seconds; restore on reload 3. **Cross-referencing** between editor and opcode table: clicking a mnemonic in the table highlights it in the editor and vice versa 4. **Export options**: "Copy to Clipboard" and "Download as .asm" buttons in the editor toolbar 5. **Multiple example programs** selectable from a dropdown (e.g., "Fibonacci", "Hello World", "Snake Game Skeleton", "Sorting Algorithm") ### Editor Toolbar A slim toolbar above the editor with: - **File operations**: New, Open (.asm file), Save/Download - **Example programs** dropdown - **Font size** adjuster (+/-) - **Minimap toggle** ## Responsive Design - On screens < 900px, stack panels vertically (editor on top, reference table below) with tab switching between them - On desktop, maintain the side-by-side split layout - The opcode table should be horizontally scrollable on smaller screens with sticky row/column headers ## Footer - Small, unobtrusive footer with: - "Built with 🍓 and love for the 6502" - Link: `Remix on Berrry` - "MOS 6502 — The chip that started a revolution (1975)" ## About Berrry Berrry transforms your social media content into interactive web applications. Share a Twitter/X post or Reddit comment, and our AI creates a custom web app hosted at your own subdomain. **Visit**: https://berrry.app Transform your social media ideas into real web applications today.