oxentescript
Version:
🌴 A Linguagem de Programação dos Baianos com Tokens Coloquiais Brasileiros + Syntax Highlighting Colorido!
489 lines (411 loc) • 18.2 kB
HTML
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>🌴 OxenteScript Online - Editor Web</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
padding: 20px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
}
.container {
max-width: 1200px;
margin: 0 auto;
background: white;
border-radius: 15px;
box-shadow: 0 20px 40px rgba(0,0,0,0.1);
overflow: hidden;
}
.header {
background: #2c3e50;
color: white;
padding: 20px;
text-align: center;
}
.header h1 {
margin: 0;
font-size: 2.5em;
}
.editor-container {
display: flex;
height: 70vh;
}
.input-section {
flex: 1;
border-right: 1px solid #ddd;
position: relative;
}
.output-section {
flex: 1;
}
.section-header {
background: #34495e;
color: white;
padding: 10px 20px;
font-weight: bold;
}
.editor-wrapper {
position: relative;
height: calc(100% - 100px);
}
#oxenteCode {
width: 100%;
height: 100%;
border: none;
padding: 20px;
font-family: 'Courier New', monospace;
font-size: 14px;
resize: none;
outline: none;
background: transparent;
color: transparent;
caret-color: #333;
position: relative;
z-index: 2;
}
#highlighted {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 20px;
font-family: 'Courier New', monospace;
font-size: 14px;
white-space: pre-wrap;
word-wrap: break-word;
overflow: hidden;
pointer-events: none;
z-index: 1;
line-height: 1.4;
box-sizing: border-box;
}
/* Cores dos tokens */
.token-baiano { color: #e74c3c; font-weight: bold; } /* Vermelho para tokens baianos */
.token-brasileiro { color: #27ae60; font-weight: bold; } /* Verde para tokens brasileiros */
.token-string { color: #f39c12; } /* Laranja para strings */
.token-number { color: #9b59b6; } /* Roxo para números */
.token-comment { color: #95a5a6; font-style: italic; } /* Cinza para comentários */
.token-operator { color: #3498db; font-weight: bold; } /* Azul para operadores */
.token-punctuation { color: #34495e; } /* Escuro para pontuação */
.controls {
padding: 15px 20px;
background: #ecf0f1;
border-top: 1px solid #ddd;
}
button {
background: #27ae60;
color: white;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
margin-right: 10px;
font-weight: bold;
}
button:hover {
background: #229954;
}
.output {
background: #2c3e50;
color: #2ecc71;
font-family: 'Courier New', monospace;
padding: 20px;
height: calc(100% - 40px);
overflow-y: auto;
white-space: pre-wrap;
}
.examples {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 10px;
margin: 10px 0;
}
.example-btn {
background: #3498db;
padding: 8px 12px;
font-size: 12px;
}
.example-btn:hover {
background: #2980b9;
}
.color-legend {
background: #f8f9fa;
padding: 10px;
margin: 10px 0;
border-radius: 5px;
font-size: 12px;
border-left: 4px solid #3498db;
}
.color-sample {
display: inline-block;
margin-right: 15px;
margin-bottom: 5px;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>🌴 OxenteScript Online</h1>
<p>A Linguagem de Programação dos Baianos - Agora com Syntax Highlighting! 🌈</p>
</div>
<div class="editor-container">
<div class="input-section">
<div class="section-header">💻 Editor OxenteScript com Cores</div>
<div class="editor-wrapper">
<div id="highlighted"></div>
<textarea id="oxenteCode" placeholder="Digite seu código OxenteScript aqui..." spellcheck="false">bora exemplo() {
falaai("🌴 Oxente! Bem-vindo ao OxenteScript!");
massa nome = "Baiano";
falaai("Olá,", nome);
laele (massa i = 1; i <= 3; i++) {
falaai("Contando:", i);
}
}
exemplo();</textarea>
</div>
<div class="controls">
<button onclick="executarCodigo()">🚀 Executar</button>
<button onclick="mostrarTokens()">📖 Ver Tokens</button>
<button onclick="limparEditor()">🗑️ Limpar</button>
</div>
<div class="color-legend">
🎨 <strong>Legenda de Cores:</strong><br>
<span class="color-sample"><span class="token-baiano">bora massa</span> - Tokens Baianos</span>
<span class="color-sample"><span class="token-brasileiro">botaAí fazAí</span> - Tokens Brasileiros</span>
<span class="color-sample"><span class="token-string">"strings"</span> - Strings</span>
<span class="color-sample"><span class="token-number">123</span> - Números</span>
<span class="color-sample"><span class="token-comment">// comentários</span> - Comentários</span>
</div>
<div class="examples">
<button class="example-btn" onclick="carregarExemplo('basico')">Exemplo Básico</button>
<button class="example-btn" onclick="carregarExemplo('brasileiros')">Tokens Brasileiros</button>
<button class="example-btn" onclick="carregarExemplo('calculadora')">Calculadora</button>
<button class="example-btn" onclick="carregarExemplo('misto')">Tokens Mistos</button>
</div>
</div>
<div class="output-section">
<div class="section-header">📟 Saída / Console</div>
<div id="output" class="output">🌴 OxenteScript Online carregado com Syntax Highlighting!
Clique em "Executar" para rodar seu código...
🌈 Agora com cores para melhor visualização:
• <span style="color: #e74c3c;">Tokens Baianos</span> (vermelho)
• <span style="color: #27ae60;">Tokens Brasileiros</span> (verde)
• <span style="color: #f39c12;">Strings</span> (laranja)
• <span style="color: #9b59b6;">Números</span> (roxo)</div>
</div>
</div>
</div>
<script>
// Transpilador OxenteScript simplificado para web
function transpilarOxenteScript(codigo) {
let js = codigo;
// Tokens Baianos (originais)
js = js.replace(/\bbora\b/g, 'function');
js = js.replace(/\bmassa\b/g, 'let');
js = js.replace(/\bfalaai\b/g, 'console.log');
js = js.replace(/\bseliga\b/g, 'if');
js = js.replace(/\bsenao\b/g, 'else');
js = js.replace(/\blaele\b/g, 'for');
js = js.replace(/\boxe\b/g, 'while');
js = js.replace(/\bvolta\b/g, 'return');
// Tokens Brasileiros (novos)
js = js.replace(/\bbotaAí\b/g, 'let');
js = js.replace(/\bbotaAi\b/g, 'let');
js = js.replace(/\béIssoMemo\b/g, 'const');
js = js.replace(/\bissoMemo\b/g, 'const');
js = js.replace(/\btantoFaz\b/g, 'var');
js = js.replace(/\bfazAí\b/g, 'function');
js = js.replace(/\bfazAi\b/g, 'function');
js = js.replace(/\btomaEssa\b/g, 'return');
js = js.replace(/\bseLiga\b/g, 'if');
js = js.replace(/\boxente\b/g, 'else');
js = js.replace(/\brepeteco\b/g, 'for');
js = js.replace(/\bateQuando\b/g, 'while');
js = js.replace(/\bfazLogo\b/g, 'do');
js = js.replace(/\bsomaLogo\b/g, '+');
js = js.replace(/\btiraAí\b/g, '-');
js = js.replace(/\btiraAi\b/g, '-');
js = js.replace(/\bmultiplica\b/g, '*');
js = js.replace(/\bparteMeio\b/g, '/');
return js;
}
// Syntax Highlighting
function highlightSyntax(code) {
let highlighted = code;
// Tokens Baianos (vermelho)
const tokensBaianos = ['bora', 'massa', 'falaai', 'seliga', 'senao', 'laele', 'oxe', 'volta'];
tokensBaianos.forEach(token => {
const regex = new RegExp(`\\b${token}\\b`, 'g');
highlighted = highlighted.replace(regex, `<span class="token-baiano">${token}</span>`);
});
// Tokens Brasileiros (verde)
const tokensBrasileiros = ['botaAí', 'botaAi', 'éIssoMemo', 'issoMemo', 'tantoFaz', 'fazAí', 'fazAi',
'tomaEssa', 'seLiga', 'oxente', 'repeteco', 'ateQuando', 'fazLogo',
'somaLogo', 'tiraAí', 'tiraAi', 'multiplica', 'parteMeio'];
tokensBrasileiros.forEach(token => {
const regex = new RegExp(`\\b${token}\\b`, 'g');
highlighted = highlighted.replace(regex, `<span class="token-brasileiro">${token}</span>`);
});
// Strings (laranja)
highlighted = highlighted.replace(/"([^"\\\\]|\\\\.)*"/g, '<span class="token-string">$&</span>');
highlighted = highlighted.replace(/'([^'\\\\]|\\\\.)*'/g, '<span class="token-string">$&</span>');
// Números (roxo)
highlighted = highlighted.replace(/\b\d+(\.\d+)?\b/g, '<span class="token-number">$&</span>');
// Comentários (cinza)
highlighted = highlighted.replace(/\/\/.*$/gm, '<span class="token-comment">$&</span>');
highlighted = highlighted.replace(/\/\*[\s\S]*?\*\//g, '<span class="token-comment">$&</span>');
// Operadores (azul)
highlighted = highlighted.replace(/[+\-*\/=<>!&|]+/g, '<span class="token-operator">$&</span>');
// Pontuação (escuro)
highlighted = highlighted.replace(/[{}();,\[\]]/g, '<span class="token-punctuation">$&</span>');
return highlighted;
}
function updateHighlighting() {
const code = document.getElementById('oxenteCode').value;
const highlighted = highlightSyntax(code);
document.getElementById('highlighted').innerHTML = highlighted;
}
// Atualizar highlighting em tempo real
document.getElementById('oxenteCode').addEventListener('input', updateHighlighting);
document.getElementById('oxenteCode').addEventListener('scroll', function() {
document.getElementById('highlighted').scrollTop = this.scrollTop;
document.getElementById('highlighted').scrollLeft = this.scrollLeft;
});
function executarCodigo() {
const codigo = document.getElementById('oxenteCode').value;
const output = document.getElementById('output');
try {
output.innerHTML = '🌴 Transpilando OxenteScript...\n\n';
const js = transpilarOxenteScript(codigo);
output.innerHTML += '✅ JavaScript gerado:\n<span style="color: #f39c12;">' + js + '</span>\n\n';
output.innerHTML += '🚀 Executando...\n\n';
// Capturar console.log
const originalLog = console.log;
let logs = [];
console.log = (...args) => {
logs.push(args.join(' '));
};
// Executar código
eval(js);
// Restaurar console.log
console.log = originalLog;
// Mostrar resultado
output.innerHTML += '📟 Saída:\n<span style="color: #2ecc71;">' + logs.join('\n') + '</span>\n\n🌴 Execução concluída!';
} catch (error) {
output.innerHTML += '<span style="color: #e74c3c;">❌ Erro: ' + error.message + '</span>';
}
}
function mostrarTokens() {
const output = document.getElementById('output');
output.innerHTML = `🌴 <span style="color: #f39c12;">TOKENS OXENTESCRIPT COM CORES</span>
🇧🇷 <span style="color: #e74c3c;">TOKENS BAIANOS (ORIGINAIS):</span>
• <span style="color: #e74c3c;">bora</span> = function (declarar função)
• <span style="color: #e74c3c;">massa</span> = let (declarar variável)
• <span style="color: #e74c3c;">falaai</span> = console.log (imprimir)
• <span style="color: #e74c3c;">seliga</span> = if (condicional se)
• <span style="color: #e74c3c;">senao</span> = else (condicional senão)
• <span style="color: #e74c3c;">laele</span> = for (loop for)
• <span style="color: #e74c3c;">oxe</span> = while (loop while)
• <span style="color: #e74c3c;">volta</span> = return (retornar)
🇧🇷 <span style="color: #27ae60;">TOKENS BRASILEIROS (NOVOS):</span>
• <span style="color: #27ae60;">botaAí/botaAi</span> = let (variável)
• <span style="color: #27ae60;">éIssoMemo/issoMemo</span> = const (constante)
• <span style="color: #27ae60;">tantoFaz</span> = var (variável var)
• <span style="color: #27ae60;">fazAí/fazAi</span> = function (função)
• <span style="color: #27ae60;">tomaEssa</span> = return (retornar)
• <span style="color: #27ae60;">seLiga</span> = if (se)
• <span style="color: #27ae60;">oxente</span> = else (senão)
• <span style="color: #27ae60;">repeteco</span> = for (repetir)
• <span style="color: #27ae60;">ateQuando</span> = while (enquanto)
• <span style="color: #27ae60;">fazLogo</span> = do (fazer)
🎨 <span style="color: #3498db;">OUTRAS CORES:</span>
• <span style="color: #f39c12;">Strings</span> (texto entre aspas)
• <span style="color: #9b59b6;">Números</span> (valores numéricos)
• <span style="color: #95a5a6;">Comentários</span> (// ou /* */)
• <span style="color: #3498db;">Operadores</span> (+, -, *, /, =, etc.)
`;
}
function limparEditor() {
document.getElementById('oxenteCode').value = '';
document.getElementById('highlighted').innerHTML = '';
document.getElementById('output').innerHTML = '🌴 Editor limpo! Digite seu código OxenteScript...';
}
function carregarExemplo(tipo) {
const editor = document.getElementById('oxenteCode');
const exemplos = {
basico: `bora exemplo() {
falaai("🌴 Oxente! Exemplo básico!");
massa nome = "Baiano";
falaai("Olá,", nome);
laele (massa i = 1; i <= 5; i++) {
falaai("Contando:", i);
}
}
exemplo();`,
brasileiros: `fazAí exemploColoquial() {
botaAí numero = 42;
issoMemo pi = 3.14159;
falaai("🇧🇷 Usando tokens brasileiros!");
falaai("Número:", numero);
falaai("Pi:", pi);
seLiga (numero > 40) {
falaai("Número grande!");
} oxente {
falaai("Número pequeno!");
}
tomaEssa numero somaLogo 10;
}
falaai("Resultado:", exemploColoquial());`,
calculadora: `bora calculadora() {
massa a = 15;
massa b = 8;
falaai("🧮 Calculadora Baiana!");
falaai("A =", a, "| B =", b);
falaai("Soma:", a + b);
falaai("Subtração:", a - b);
falaai("Multiplicação:", a * b);
falaai("Divisão:", a / b);
seliga (a > b) {
falaai("A é maior que B!");
} senao {
falaai("B é maior ou igual a A!");
}
}
calculadora();`,
misto: `// Misturando tokens baianos e brasileiros!
bora exemploMisto() {
massa idadeBaiano = 30;
botaAí nomeColoquial = "Maria";
falaai("🌴 Exemplo com tokens mistos!");
falaai("Nome:", nomeColoquial);
falaai("Idade:", idadeBaiano);
seliga (idadeBaiano >= 18) {
falaai(nomeColoquial, "é maior de idade!");
} oxente {
falaai(nomeColoquial, "é menor de idade!");
}
// Loop baiano com condição brasileira
laele (massa i = 1; i <= 3; i++) {
seLiga (i % 2 === 0) {
falaai("Par:", i);
} oxente {
falaai("Ímpar:", i);
}
}
}
exemploMisto();`
};
editor.value = exemplos[tipo] || exemplos.basico;
updateHighlighting();
}
// Inicializar highlighting
window.addEventListener('load', updateHighlighting);
</script>
</body>
</html>