papagaio 0.4.2 → 0.5.0

package/index.html

@@ -4,421 +4,319 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>🦜 papagaio</title>
-    <style>
-        :root {
-            --bg-dark: #282828;
-            --bg: #3c3836;
-            --bg-light: #504945;
-            --fg: #ebdbb2;
-            --fg-dark: #a89984;
-            --green: #b8bb26;
-            --yellow: #fabd2f;
-            --blue: #83a598;
-            --red: #fb4934;
-            --orange: #fe8019;
-        }
-
-        * { margin: 0; padding: 0; box-sizing: border-box; }
-        
-        body { 
-            font-family: -apple-system, BlinkMacSystemFont, sans-serif; 
-            color: var(--fg); 
-            padding: 15px; 
-            min-height: 100vh;
-            overflow-x: hidden;
-            position: relative;
-        }
-        
-        /* Animated Reggae Background Stripes */
-        body::before {
-            content: '';
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background: 
-                linear-gradient(45deg, 
-                    #C03F31 0%, #C03F31 25%, 
-                    #F9DC5C 25%, #F9DC5C 50%, 
-                    #2D936C 50%, #2D936C 75%, 
-                    #0A100D 75%, #0A100D 100%);
-            background-size: 400% 400%;
-            animation: reggaeBackground 20s ease infinite;
-            z-index: -1;
-        }
-        
-        @keyframes reggaeBackground {
-            0% { background-position: 0% 50%; }
-            50% { background-position: 100% 50%; }
-            100% { background-position: 0% 50%; }
-        }
-        
-        .container {
-            max-width: 1100px;
-            margin: 0 auto;
-            background: var(--bg);
-            border-radius: 8px;
-            overflow: hidden;
-            height: 95vh;
-            display: flex;
-            flex-direction: column;
-            box-shadow: 0 5px 15px rgba(0,0,0,0.5);
-            opacity: 1;
-        }
-        
-        .header {
-            background: var(--bg-light);
-            padding: 12px 20px;
-            text-align: center;
-            position: relative;
-            border-bottom: 2px solid var(--yellow);
-            opacity: 1;
-        }
-        
-        .header h1 {
-            font-size: 22px;
-            font-weight: bold;
-        }
-        
-        .header::before, .header::after {
-            content: "🦜";
-            position: absolute;
-            top: 75%;
-            transform: translateY(-75%);
-            transition: all 0.5s ease;
-            scale: 2;
-        }
-        .header::before { left: 20px; }
-        .header::after { right: 20px; }
-        
-        .animate-parrot::before,
-        .animate-parrot::after {
-            animation: parrotSpin 0.25s ease-in-out;
-        }
-
-        @keyframes parrotSpin {
-            0% { transform: translateY(-75%) scale(1) rotate(0deg); }
-            10% { transform: translateY(-75%) scale(1.5) rotate(0deg); }
-            100% { transform: translateY(-75%) scale(1) rotate(360deg); }
-        }
-        
-        .main-controls {
-            display: flex;
-            gap: 10px;
-            padding: 12px 20px;
-            background: var(--bg-light);
-            border-bottom: 1px solid var(--bg);
-            justify-content: center;
-            flex-wrap: wrap;
-            opacity: 1;
-        }
-        
-        button {
-            padding: 8px 15px;
-            background: var(--bg);
-            color: var(--fg);
-            border: 1px solid var(--bg-light);
-            border-radius: 5px;
-            cursor: pointer;
-            font-weight: 600;
-            transition: all 0.2s;
-        }
-        
-        button:hover {
-            background: var(--yellow);
-            color: var(--bg-dark);
-        }
-        
-        .content {
-            display: flex;
-            flex: 1;
-            gap: 15px;
-            padding: 15px;
-            overflow: hidden;
-            opacity: 1;
-        }
-        
-        .panel {
-            flex: 1;
-            display: flex;
-            flex-direction: column;
-            background: var(--bg-dark);
-            border-radius: 5px;
-            overflow: hidden;
-            border: 1px solid var(--bg-light);
-            opacity: 1;
-        }
-        
-        .panel h2 {
-            padding: 10px 15px;
-            background: var(--bg-light);
-            font-size: 14px;
-            text-align: center;
-            font-weight: 600;
-        }
-        
-        textarea {
-            flex: 1;
-            padding: 15px;
-            border: none;
-            background: var(--bg-dark);
-            color: var(--fg);
-            resize: none;
-            font-family: 'Monaco', 'Menlo', monospace;
-            font-size: 14px;
-            line-height: 1.5;
-            opacity: 1;
-        }
-        
-        textarea:focus {
-            outline: 2px solid var(--blue);
-        }
-        
-        .footer {
-            padding: 12px 20px;
-            background: var(--bg-light);
-            border-top: 1px solid var(--bg);
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            position: relative;
-            opacity: 1;
-        }
-        
-        .footer::before {
-            content: "🌴🌿";
-            position: absolute;
-            bottom: 15%;
-            right: 2%;
-            opacity: 0.7;
-        }
-        
-        .footer-controls {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            flex-wrap: wrap;
-            gap: 10px;
-        }
-        
-        .footer-bottom {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .control-group {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .control-group label {
-            color: var(--fg);
-            font-size: 14px;
-            white-space: nowrap;
-            font-weight: 600;
-        }
-        
-        input[type="text"] {
-            background: var(--bg-dark);
-            border: 1px solid var(--bg-light);
-            color: var(--fg);
-            padding: 6px;
-            width: 40px;
-            text-align: center;
-            border-radius: 3px;
-        }
-        
-        .status {
-            background: var(--green);
-            color: var(--bg-dark);
-            padding: 6px 12px;
-            border-radius: 4px;
-            font-size: 14px;
-            font-weight: bold;
-        }
-        
-        .file-input { display: none; }
-        
-        @media (max-width: 768px) {
-            .content { flex-direction: column; }
-            .panel { min-height: 250px; }
-            .footer-controls, .footer-bottom { flex-direction: column; align-items: stretch; gap: 10px; }
-            .control-group { justify-content: center; }
-        }
-    </style>
 </head>
 <body>
-    <div class="container">
-        <div class="header" id="header">
-            <h1>papagaio</h1>
-            easy text preprocessor
-        </div>
-        
-        <div class="main-controls">
-            <button onclick="animateParrot(); loadFile()">📂 Load</button>
-            <button onclick="animateParrot(); processCode()">▶️ Process</button>
-            <button onclick="animateParrot(); downloadResult()">💾 Download</button>
-            <button onclick="animateParrot(); clearAll()">🗑️ Clear</button>
-            <input type="file" id="fileInput" class="file-input" onchange="handleFileSelect()">
-        </div>
-
-        <div class="content">
-            <div class="panel">
-                <h2>INPUT</h2>
-                <textarea id="input" placeholder="Enter your text here..."></textarea>
-            </div>
-            <div class="panel">
-                <h2>OUTPUT</h2>
-                <textarea id="output" placeholder="Output will appear here..." readonly></textarea>
-            </div>
-        </div>
-        
-        <div class="footer">
-            <div class="footer-controls">
-                <div class="control-group">
-                    <label>Delimiter:</label>
-                    <input id="openQuote" type="text" placeholder="{">
-                    <input id="closeQuote" type="text" placeholder="}">
-                    <button onclick="animateParrot(); applyQuotes()">Apply</button>
-                    <button onclick="animateParrot(); resetQuotes()">Reset</button>
-                </div>
-                
-                <div class="control-group">
-                    <label>Sigil:</label>
-                    <input id="sigilInput" type="text" placeholder="$">
-                    <button onclick="animateParrot(); applySigil()">Apply</button>
-                    <button onclick="animateParrot(); resetSigil()">Reset</button>
-                </div>
-            </div>
-            
-            <div class="footer-bottom">
-                <span id="status" class="status">READY</span>
-            </div>
-        </div>
+    
+    <h1>🦜 papagaio</h1>
+    <p>
+        easy yet powerful text preprocessor.
+    </p>
+    <hr>
+    <div>
+        <label for="sketchSelect">Current Sketch:</label>
+        <select id="sketchSelect" onchange="switchSketch()">
+            <option value="">-- Select Sketch --</option>
+        </select>
+        |
+        <button onclick="createNewSketch()">New Sketch</button>
+        <button onclick="renameCurrentSketch()">Rename</button>
+        <button onclick="deleteCurrentSketch()">Delete</button>
     </div>
+    <hr>
+    <div>
+        <label for="sketchSelect">Sketches:</label>
+        <button onclick="exportSketches()">Export</button>
+        <input type="file" id="importFileInput" onchange="importSketches(this.files[0])" accept=".json">
+    </div>
+    
+    <hr>
+    
+    <h3>INPUT</h3>
+    <textarea id="input" rows="15" cols="80" style="width: 70%; font-family: monospace;"></textarea>
+    
+    <br><br>
+    
+    <button onclick="processCode()">Process</button>
+    
+    <br><br>
+    
+    <h3>OUTPUT</h3>
+    <textarea id="output" rows="15" cols="80" style="width: 70%; font-family: monospace;" readonly></textarea>
 
-        <script type="module">
-            import { Papagaio } from './src/papagaio.js';
-
-            let processor = null;
+    <script type="module">
+        import { Papagaio } from './src/papagaio.js';
 
-            function initProcessor() {
-                processor = new Papagaio();
-                updateStatus('CORE LOADED');
+        class SketchesManager {
+            constructor() {
+                this.sketches = this.loadSketches();
+                this.currentSketchId = this.loadCurrentSketchId();
             }
 
-            window.addEventListener('load', initProcessor);
-
-            function animateParrot() {
-                const header = document.getElementById('header');
-                header.classList.add('animate-parrot');
-                setTimeout(() => header.classList.remove('animate-parrot'), 500);
+            loadSketches() {
+                try {
+                    const saved = localStorage.getItem('papagaio_sketches');
+                    return saved ? JSON.parse(saved) : {};
+                } catch {
+                    return {};
+                }
             }
 
-            function updateStatus(message) {
-                document.getElementById('status').textContent = message;
+            saveSketches() {
+                try {
+                    localStorage.setItem('papagaio_sketches', JSON.stringify(this.sketches));
+                } catch {}
             }
 
-            function processCode() {
+            loadCurrentSketchId() {
                 try {
-                    if (!processor) {
-                        updateStatus('CORE NOT LOADED');
-                        return;
-                    }
-                    updateStatus('PROCESSING...');
-                    const input = document.getElementById('input').value;
-                    const output = processor.process(input);
-                    document.getElementById('output').value = output;
-                    updateStatus('COMPLETED');
-                } catch (err) {
-                    document.getElementById('output').value = `Error: ${err.message}`;
-                    updateStatus('ERROR');
+                    return localStorage.getItem('papagaio_current_sketch');
+                } catch {
+                    return null;
                 }
             }
 
-            window.processCode = processCode;
-            window.animateParrot = animateParrot;
-            window.loadFile = loadFile;
-            window.handleFileSelect = handleFileSelect;
-            window.downloadResult = downloadResult;
-            window.clearAll = clearAll;
-            window.applyQuotes = applyQuotes;
-            window.resetQuotes = resetQuotes;
-            window.applySigil = applySigil;
-            window.resetSigil = resetSigil;
-
-            function loadFile() {
-                document.getElementById('fileInput').click();
+            setCurrentSketchId(id) {
+                this.currentSketchId = id;
+                try {
+                    localStorage.setItem('papagaio_current_sketch', id);
+                } catch {}
             }
 
-            function handleFileSelect() {
-                const file = document.getElementById('fileInput').files[0];
-                if (!file) return;
-                const reader = new FileReader();
-                reader.onload = e => {
-                    document.getElementById('input').value = e.target.result;
-                    updateStatus('FILE LOADED');
+            createSketch(name) {
+                const id = Date.now().toString();
+                this.sketches[id] = {
+                    id,
+                    name,
+                    input: '',
+                    createdAt: new Date().toLocaleString()
                 };
-                reader.readAsText(file);
+                this.saveSketches();
+                this.setCurrentSketchId(id);
+                return id;
+            }
+
+            getSketch(id) {
+                return this.sketches[id] || null;
             }
 
-            function downloadResult() {
-                const output = document.getElementById('output').value;
-                if (!output) return alert('Nothing to download!');
-                const blob = new Blob([output], { type: 'text/plain' });
-                const url = URL.createObjectURL(blob);
-                const a = document.createElement('a');
-                a.href = url;
-                a.download = 'output.txt';
-                a.click();
-                URL.revokeObjectURL(url);
-                updateStatus('DOWNLOAD COMPLETED');
+            updateSketch(id, data) {
+                if (this.sketches[id]) {
+                    Object.assign(this.sketches[id], data);
+                    this.saveSketches();
+                }
+            }
+
+            deleteSketch(id) {
+                delete this.sketches[id];
+                this.saveSketches();
+                if (this.currentSketchId === id) {
+                    const remaining = Object.keys(this.sketches);
+                    this.currentSketchId = remaining.length > 0 ? remaining[0] : null;
+                    if (this.currentSketchId) {
+                        this.setCurrentSketchId(this.currentSketchId);
+                    }
+                }
+            }
+
+            getAllSketches() {
+                return Object.values(this.sketches).sort((a, b) => 
+                    parseInt(b.id) - parseInt(a.id)
+                );
+            }
+
+            renameSketch(id, newName) {
+                if (this.sketches[id]) {
+                    this.sketches[id].name = newName;
+                    this.saveSketches();
+                }
             }
+        }
+
+        let processor = new Papagaio();
+        let sketchesManager;
 
-            function clearAll() {
-                document.getElementById('input').value = '';
+        window.addEventListener('load', () => {
+            sketchesManager = new SketchesManager();
+            loadOrCreateDefaultSketch();
+            populateSketchSelect();
+        });
+
+        function loadOrCreateDefaultSketch() {
+            let sketch = null;
+            if (sketchesManager.currentSketchId) {
+                sketch = sketchesManager.getSketch(sketchesManager.currentSketchId);
+            }
+            
+            if (!sketch) {
+                const allSketches = sketchesManager.getAllSketches();
+                if (allSketches.length > 0) {
+                    sketch = allSketches[0];
+                    sketchesManager.setCurrentSketchId(sketch.id);
+                } else {
+                    const id = sketchesManager.createSketch('Default');
+                    sketch = sketchesManager.getSketch(id);
+                }
+            }
+            
+            if (sketch) {
+                document.getElementById('input').value = sketch.input;
                 document.getElementById('output').value = '';
-                updateStatus('CLEARED');
             }
+        }
 
-            document.getElementById('input').addEventListener('keydown', e => {
-                if (e.ctrlKey && e.key === 'Enter') {
-                    animateParrot();
-                    processCode();
+        function saveCurrentSketch() {
+            if (sketchesManager.currentSketchId) {
+                sketchesManager.updateSketch(sketchesManager.currentSketchId, {
+                    input: document.getElementById('input').value
+                });
+            }
+        }
+
+        function populateSketchSelect() {
+            const select = document.getElementById('sketchSelect');
+            select.innerHTML = '<option value="">-- Select Sketch --</option>';
+            
+            const sketches = sketchesManager.getAllSketches();
+            sketches.forEach(sketch => {
+                const option = document.createElement('option');
+                option.value = sketch.id;
+                option.textContent = sketch.name;
+                if (sketch.id === sketchesManager.currentSketchId) {
+                    option.selected = true;
                 }
+                select.appendChild(option);
             });
+        }
 
-            function applyQuotes() {
-                const o = document.getElementById('openQuote').value;
-                const c = document.getElementById('closeQuote').value;
-                if (!o || !c) return alert('Enter both delimiters');
-                processor.changeDelimiters(o, c);
-                updateStatus('DELIMITERS APPLIED');
+        function switchSketch() {
+            const select = document.getElementById('sketchSelect');
+            const id = select.value;
+            
+            if (!id) return;
+            
+            saveCurrentSketch();
+            sketchesManager.setCurrentSketchId(id);
+            const sketch = sketchesManager.getSketch(id);
+            
+            if (sketch) {
+                document.getElementById('input').value = sketch.input;
+                document.getElementById('output').value = '';
             }
+        }
 
-            function resetQuotes() {
-                processor.changeDelimiters('{', '}');
-                document.getElementById('openQuote').value = '';
-                document.getElementById('closeQuote').value = '';
-                updateStatus('DELIMITERS RESET');
+        function createNewSketch() {
+            const name = prompt('Enter sketch name:');
+            if (!name || !name.trim()) {
+                alert('Please enter a valid sketch name');
+                return;
             }
+            
+            const id = sketchesManager.createSketch(name.trim());
+            populateSketchSelect();
+            
+            const sketch = sketchesManager.getSketch(id);
+            if (sketch) {
+                document.getElementById('input').value = sketch.input;
+                document.getElementById('output').value = '';
+            }
+        }
 
-            function applySigil() {
-                const s = document.getElementById('sigilInput').value;
-                if (!s) return alert('Enter a sigil');
-                processor.changeSigil(s);
-                updateStatus('SIGIL APPLIED');
+        function renameCurrentSketch() {
+            if (!sketchesManager.currentSketchId) {
+                alert('No sketch selected');
+                return;
+            }
+            
+            const sketch = sketchesManager.getSketch(sketchesManager.currentSketchId);
+            const newName = prompt('Enter new name:', sketch.name);
+            
+            if (!newName || !newName.trim()) {
+                alert('Please enter a valid name');
+                return;
             }
+            
+            sketchesManager.renameSketch(sketchesManager.currentSketchId, newName.trim());
+            populateSketchSelect();
+        }
 
-            function resetSigil() {
-                processor.changeSigil('$');
-                document.getElementById('sigilInput').value = '';
-                updateStatus('SIGIL RESET');
+        function deleteCurrentSketch() {
+            if (!sketchesManager.currentSketchId) {
+                alert('No sketch selected');
+                return;
             }
-        </script>
+            
+            const sketch = sketchesManager.getSketch(sketchesManager.currentSketchId);
+            
+            if (!confirm(`Are you sure you want to delete "${sketch.name}"? This action cannot be undone.`)) {
+                return;
+            }
+            
+            sketchesManager.deleteSketch(sketchesManager.currentSketchId);
+            loadOrCreateDefaultSketch();
+            populateSketchSelect();
+        }
+
+        function processCode() {
+            try {
+                const input = document.getElementById('input').value;
+                const output = processor.process(input);
+                document.getElementById('output').value = output;
+                saveCurrentSketch();
+            } catch (err) {
+                document.getElementById('output').value = `Error: ${err.message}`;
+            }
+        }
+
+        function exportSketches() {
+            const data = {
+                papagaio_sketches: localStorage.getItem('papagaio_sketches'),
+                papagaio_current_sketch: localStorage.getItem('papagaio_current_sketch')
+            };
+
+            const blob = new Blob([JSON.stringify(data, null, 2)], {
+                type: "application/json"
+            });
+
+            const a = document.createElement("a");
+            a.href = URL.createObjectURL(blob);
+            a.download = `papagaio_sketches_${Date.now()}.json`;
+            a.click();
+        }
+
+        function importSketches(file) {
+            if (!file) return;
+            
+            const reader = new FileReader();
+
+            reader.onload = () => {
+                try {
+                    const data = JSON.parse(reader.result);
+                    if (data.papagaio_sketches) {
+                        localStorage.setItem('papagaio_sketches', data.papagaio_sketches);
+                    }
+                    if (data.papagaio_current_sketch) {
+                        localStorage.setItem('papagaio_current_sketch', data.papagaio_current_sketch);
+                    }
+                    location.reload();
+                } catch (err) {
+                    alert('Error importing file: ' + err.message);
+                }
+            };
+
+            reader.readAsText(file);
+        }
+
+        setInterval(() => {
+            saveCurrentSketch();
+        }, 1000);
 
+        window.processCode = processCode;
+        window.switchSketch = switchSketch;
+        window.createNewSketch = createNewSketch;
+        window.renameCurrentSketch = renameCurrentSketch;
+        window.deleteCurrentSketch = deleteCurrentSketch;
+        window.exportSketches = exportSketches;
+        window.importSketches = importSketches;
+    </script>
 </body>
 </html>