| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>AS Scripting | Empyrion Reforged Nexus</title> |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
| <script src="https://unpkg.com/feather-icons"></script> |
| <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script> |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/codemirror.min.js"></script> |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/mode/clike/clike.min.js"></script> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/codemirror.min.css"> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/theme/dracula.min.css"> |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Exo+2:wght@300;600&display=swap'); |
| :root { |
| --space-blue: #0a192f; |
| --star-yellow: #f8e16c; |
| --nebula-purple: #7b2d8f; |
| --planet-teal: #6bd6e1; |
| --danger-red: #e63946; |
| } |
| body { |
| font-family: 'Exo 2', sans-serif; |
| overflow-x: hidden; |
| } |
| .title-font { |
| font-family: 'Orbitron', sans-serif; |
| } |
| .gradient-bg { |
| background: linear-gradient(135deg, var(--space-blue) 0%, #172a45 100%); |
| } |
| .active-tab { |
| border-bottom: 3px solid var(--planet-teal); |
| color: white; |
| } |
| .terminal-box { |
| background: rgba(10, 25, 47, 0.7); |
| border: 1px solid rgba(123, 45, 143, 0.5); |
| box-shadow: 0 0 15px rgba(123, 45, 143, 0.3); |
| } |
| .CodeMirror { |
| height: 400px !important; |
| font-family: 'Courier New', monospace; |
| font-size: 14px; |
| border-radius: 4px; |
| } |
| .function-chip { |
| background: rgba(123, 45, 143, 0.3); |
| border: 1px solid rgba(123, 45, 143, 0.5); |
| } |
| </style> |
| </head> |
| <body class="gradient-bg text-gray-200 min-h-screen"> |
| <div id="vanta-bg"></div> |
| |
| <div class="container mx-auto px-4 relative z-10"> |
| |
| <header class="py-6 flex flex-col md:flex-row justify-between items-center border-b border-nebula-purple/30"> |
| <div class="flex items-center space-x-3 mb-4 md:mb-0"> |
| <i data-feather="globe" class="text-planet-teal w-10 h-10"></i> |
| <h1 class="title-font text-2xl md:text-3xl bg-clip-text text-transparent bg-gradient-to-r from-planet-teal to-star-yellow"> |
| ASCRIBE SCRIPTING HELPER |
| </h1> |
| </div> |
| <nav class="flex space-x-1"> |
| <button class="px-4 py-2 rounded-t-lg bg-space-blue/30 hover:bg-space-blue/50 transition-colors duration-300"> |
| <i data-feather="compass" class="inline mr-2"></i> Navigator |
| </button> |
| <button class="px-4 py-2 rounded-t-lg bg-space-blue/30 hover:bg-space-blue/50 transition-colors duration-300"> |
| <i data-feather="monitor" class="inline mr-2"></i> LCD Editor |
| </button> |
| <button class="px-4 py-2 rounded-t-lg bg-space-blue/50 hover:bg-space-blue/70 transition-colors duration-300 active-tab"> |
| <i data-feather="code" class="inline mr-2"></i> AS Scripting |
| </button> |
| <button class="px-4 py-2 rounded-t-lg bg-space-blue/30 hover:bg-space-blue/50 transition-colors duration-300"> |
| <i data-feather="book-open" class="inline mr-2"></i> Strategies |
| </button> |
| </nav> |
| </header> |
|
|
| |
| <main class="my-8 grid grid-cols-1 lg:grid-cols-3 gap-6"> |
| |
| <div class="lg:col-span-2 terminal-box rounded-lg p-6"> |
| <div class="flex justify-between items-center mb-6"> |
| <h2 class="title-font text-xl text-planet-teal"> |
| <i data-feather="terminal" class="inline mr-2"></i> Script Editor |
| </h2> |
| <div class="flex space-x-2"> |
| <button class="icon-btn px-3 py-1 rounded bg-nebula-purple/30 hover:bg-nebula-purple/50"> |
| <i data-feather="save" class="mr-1"></i> Save |
| </button> |
| <button class="icon-btn px-3 py-1 rounded bg-nebula-purple/30 hover:bg-nebula-purple/50"> |
| <i data-feather="play" class="mr-1"></i> Run |
| </button> |
| <button class="icon-btn px-3 py-1 rounded bg-nebula-purple/30 hover:bg-nebula-purple/50"> |
| <i data-feather="share-2" class="mr-1"></i> Export |
| </button> |
| </div> |
| </div> |
|
|
| <div class="mb-4"> |
| <label class="block text-sm text-star-yellow mb-1">Script Name</label> |
| <input type="text" class="w-full bg-space-blue/70 border border-nebula-purple/50 rounded px-3 py-2 focus:outline-none focus:ring-1 focus:ring-planet-teal" placeholder="e.g. Auto Mining Script" value="Shield Management"> |
| </div> |
|
|
| <textarea id="code-editor">// ASTIC Script Example for Empyrion |
| // Handlebars-style templating with ASTIC-specific extensions |
|
|
| {{!-- Main template with ship status --}} |
| {{#ship}} |
| {{#if isActive}} |
| <template name="ShipStatus"> |
| <container name="MainPanel" size="100%,100%"> |
| {{!-- Header with ship name --}} |
| <panel pos="0,0" size="100%,50" color="0,0,0,200"> |
| <text pos="10,10" size="300,30" color="0,255,255" fontsize="24"> |
| {{name}} - {{class}} Class |
| </text> |
| <text pos="320,10" size="200,30" color="{{#if (gte fuel 0.3)}}0,255,0{{else}}255,100,0{{/if}}" fontsize="20"> |
| Fuel: {{percent fuel}}% |
| </text> |
| </panel> |
|
|
| {{!-- Status indicators --}} |
| <panel pos="10,60" size="300,200" color="20,20,20,200"> |
| {{#each systems}} |
| <indicator |
| pos="10,{{multiply @index 30}}" |
| size="280,25" |
| label="{{name}}" |
| value="{{percent health}}" |
| colors="0,255,0:255,255,0:255,0,0" |
| thresholds="60,30" |
| /> |
| {{/each}} |
| </panel> |
|
|
| {{!-- Navigation section --}} |
| {{#if navigation}} |
| <panel pos="320,60" size="400,150" color="20,20,20,200"> |
| <text pos="10,10" size="380,30" color="255,255,0" fontsize="20"> |
| Navigation: {{navigation.target}} |
| </text> |
| <progressbar |
| pos="10,50" |
| size="380,20" |
| value="{{navigation.progress}}" |
| color="0,150,255" |
| /> |
| <text pos="10,80" size="380,20" color="200,200,200" fontsize="16"> |
| Distance: {{formatDistance navigation.distance}} |
| </text> |
| {{#if navigation.warning}} |
| <text pos="10,110" size="380,20" color="255,100,0" fontsize="16"> |
| Warning: {{navigation.warning}} |
| </text> |
| {{/if}} |
| </panel> |
| {{/if}} |
|
|
| {{!-- Custom actions --}} |
| <panel pos="10,270" size="710,80" color="20,20,20,200"> |
| {{#each actions}} |
| <button |
| pos="{{multiply @index 140}},10" |
| size="130,60" |
| label="{{label}}" |
| command="{{command}}" |
| {{#unless enabled}}disabled="true"{{/unless}} |
| /> |
| {{/each}} |
| </panel> |
| </container> |
| </template> |
| {{else}} |
| <text pos="50%,50%" anchor="0.5,0.5" color="255,0,0" fontsize="24"> |
| SHIP OFFLINE |
| </text> |
| {{/if}} |
| {{/ship}} |
|
|
| {{!-- ASTIC Helper Functions --}} |
| {{#*inline "percent"}} |
| {{math (multiply (divide value 1) 100) 0}} |
| {{/inline}} |
|
|
| {{#*inline "formatDistance"}} |
| {{#if (gte value 1000000)}} |
| {{math (divide value 1000000) 2}} M km |
| {{else if (gte value 1000)}} |
| {{math (divide value 1000) 1}} K km |
| {{else}} |
| {{value}} km |
| {{/if}} |
| {{/inline}}</textarea> |
|
|
| <div class="mt-4 flex space-x-3"> |
| <button class="px-4 py-2 rounded bg-nebula-purple hover:bg-nebula-purple/90 transition-colors flex items-center"> |
| <i data-feather="check" class="mr-2"></i> Validate ASTIC |
| </button> |
| <button class="px-4 py-2 rounded bg-space-blue/70 hover:bg-space-blue/90 transition-colors flex items-center"> |
| <i data-feather="eye" class="mr-2"></i> Preview LCD |
| </button> |
| <button class="px-4 py-2 rounded bg-space-blue/70 hover:bg-space-blue/90 transition-colors flex items-center"> |
| <i data-feather="download" class="mr-2"></i> Export to BP |
| </button> |
| </div> |
|
|
| <div class="mt-6 terminal-box rounded p-4"> |
| <div class="flex items-center text-sm text-star-yellow mb-2"> |
| <i data-feather="activity" class="mr-2"></i> ASTIC Preview |
| </div> |
| <div class="bg-black/50 p-3 rounded font-mono text-xs h-32 overflow-y-auto"> |
| <div class="text-green-400">> ASTIC template validated (23 elements)</div> |
| <div class="text-gray-400">> Found 1 template container: "ShipStatus"</div> |
| <div class="text-gray-400">> Detected 3 custom helpers: percent, formatDistance</div> |
| <div class="text-gray-400">> 4 conditional blocks processed</div> |
| <div class="text-planet-teal">> Ready for LCD deployment</div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="terminal-box rounded-lg p-6"> |
| <div class="flex justify-between items-center mb-6"> |
| <h2 class="title-font text-xl text-star-yellow"> |
| <i data-feather="book" class="inline mr-2"></i> AScript Reference |
| </h2> |
| <div class="flex space-x-2"> |
| <button class="icon-btn p-2 rounded bg-space-blue/50 hover:bg-space-blue/70"> |
| <i data-feather="search"></i> |
| </button> |
| </div> |
| </div> |
|
|
| <div class="mb-6"> |
| <h3 class="text-sm text-star-yellow mb-2">Common Functions</h3> |
| <div class="grid grid-cols-1 gap-2"> |
| <div class="function-chip px-3 py-2 rounded text-sm cursor-pointer hover:bg-nebula-purple/50"> |
| <div class="font-bold">GetBlock()</div> |
| <div class="text-xs text-gray-400">Retrieves a block by name</div> |
| </div> |
| <div class="function-chip px-3 py-2 rounded text-sm cursor-pointer hover:bg-nebula-purple/50"> |
| <div class="font-bold">Echo()</div> |
| <div class="text-xs text-gray-400">Outputs text to console</div> |
| </div> |
| <div class="function-chip px-3 py-2 rounded text-sm cursor-pointer hover:bg-nebula-purple/50"> |
| <div class="font-bold">SetValue()</div> |
| <div class="text-xs text-gray-400">Sets a property value</div> |
| </div> |
| <div class="function-chip px-3 py-2 rounded text-sm cursor-pointer hover:bg-nebula-purple/50"> |
| <div class="font-bold">GetInventory()</div> |
| <div class="text-xs text-gray-400">Accesses inventory items</div> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="mb-6"> |
| <h3 class="text-sm text-star-yellow mb-2">ASTIC-Specific Helpers</h3> |
| <div class="grid grid-cols-1 gap-2"> |
| <div class="function-chip px-3 py-2 rounded text-sm cursor-pointer hover:bg-nebula-purple/50"> |
| <div class="font-bold">{{math}}</div> |
| <div class="text-xs text-gray-400">Perform calculations: {{math a '+' b}}</div> |
| </div> |
| <div class="function-chip px-3 py-2 rounded text-sm cursor-pointer hover:bg-nebula-purple/50"> |
| <div class="font-bold">{{#if}}</div> |
| <div class="text-xs text-gray-400">Conditional blocks with comparisons</div> |
| </div> |
| <div class="function-chip px-3 py-2 rounded text-sm cursor-pointer hover:bg-nebula-purple/50"> |
| <div class="font-bold">{{#each}}</div> |
| <div class="text-xs text-gray-400">Loop through arrays/objects</div> |
| </div> |
| <div class="function-chip px-3 py-2 rounded text-sm cursor-pointer hover:bg-nebula-purple/50"> |
| <div class="font-bold">{{#*inline}}</div> |
| <div class="text-xs text-gray-400">Create reusable partial templates</div> |
| </div> |
| </div> |
| </div> |
|
|
| <div> |
| <h3 class="text-sm text-star-yellow mb-2">ASTIC Templates</h3> |
| <div class="space-y-2"> |
| <div class="flex items-center justify-between bg-space-blue/50 px-3 py-2 rounded text-sm cursor-pointer hover:bg-space-blue/70"> |
| <span>Ship Status Dashboard</span> |
| <i data-feather="chevron-right" class="w-4 h-4"></i> |
| </div> |
| <div class="flex items-center justify-between bg-space-blue/50 px-3 py-2 rounded text-sm cursor-pointer hover:bg-space-blue/70"> |
| <span>Cargo Management</span> |
| <i data-feather="chevron-right" class="w-4 h-4"></i> |
| </div> |
| <div class="flex items-center justify-between bg-space-blue/50 px-3 py-2 rounded text-sm cursor-pointer hover:bg-space-blue/70"> |
| <span>Factory Control Panel</span> |
| <i data-feather="chevron-right" class="w-4 h-4"></i> |
| </div> |
| <div class="flex items-center justify-between bg-space-blue/50 px-3 py-2 rounded text-sm cursor-pointer hover:bg-space-blue/70"> |
| <span>Navigation Waypoints</span> |
| <i data-feather="chevron-right" class="w-4 h-4"></i> |
| </div> |
| </div> |
| </div> |
| </div> |
| </main> |
|
|
| |
| <footer class="py-3 border-t border-nebula-purple/30 text-xs text-gray-400 flex justify-between items-center"> |
| <div>Empyrion Reforged Nexus v1.0.0</div> |
| <div class="flex items-center space-x-4"> |
| <div class="flex items-center space-x-1"> |
| <div class="w-2 h-2 rounded-full bg-green-500 animate-pulse"></div> |
| <span>API Connected</span> |
| </div> |
| <div>Editing: Shield Management.as</div> |
| <button class="text-planet-teal hover:text-star-yellow transition-colors"> |
| <i data-feather="refresh-cw" class="w-4 h-4"></i> |
| </button> |
| </div> |
| </footer> |
| </div> |
|
|
| <script> |
| |
| VANTA.NET({ |
| el: "#vanta-bg", |
| mouseControls: true, |
| touchControls: true, |
| gyroControls: false, |
| minHeight: 200.00, |
| minWidth: 200.00, |
| scale: 1.00, |
| scaleMobile: 1.00, |
| color: 0x7b2d8f, |
| backgroundColor: 0xa192f, |
| points: 12.00, |
| maxDistance: 22.00, |
| spacing: 17.00 |
| }); |
| |
| document.addEventListener('DOMContentLoaded', () => { |
| feather.replace(); |
| |
| var editor = CodeMirror.fromTextArea(document.getElementById('code-editor'), { |
| mode: { |
| name: 'handlebars', |
| base: 'text/html', |
| helperLanguages: ['javascript'] |
| }, |
| theme: 'dracula', |
| lineNumbers: true, |
| indentUnit: 2, |
| tabSize: 2, |
| extraKeys: { |
| "Ctrl-Space": "autocomplete", |
| "'>'": function(cm) { |
| cm.replaceSelection('}}'); |
| }, |
| "'{'": function(cm) { |
| cm.replaceSelection('{{'); |
| } |
| } |
| }); |
| |
| |
| editor.setSize('100%', '400px'); |
| }); |
| </script> |
| </body> |
| </html> |
|
|
