Select a file from the repository tree to inspect its code.
docs/index.html
Copy Code
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>bhidu-lang v1.0.4 Documentation</title>
<meta name="description" content="Complete documentation reference for bhidu-lang. Mumbai's own toy programming language written in TypeScript, featuring variables, loops, scoping, and a CLI/REPL.">
<meta name="author" content="Ghost Compiler">
<meta name="robots" content="index,follow">
<meta name="theme-color" content="#8ee43f">
<meta name="application-name" content="Bhidu Lang Documentation">
<!-- Google Fonts Connection -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "TechArticle",
"headline": "bhidu-lang v1.0.4 Documentation",
"about": "Mumbai slang toy programming language written in TypeScript",
"author": {
"@type": "Organization",
"name": "Ghost Compiler"
},
"version": "1.0.4"
}
</script>
<!-- Embed extra custom styles for playground -->
<style>
.playground-container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 16px;
background: var(--soft);
margin: 24px 0;
box-shadow: var(--shadow);
}
@media (max-width: 900px) {
.playground-container {
grid-template-columns: 1fr;
}
}
.editor-pane, .terminal-pane {
display: flex;
flex-direction: column;
border-radius: var(--radius-sm);
overflow: hidden;
border: 1px solid var(--line);
background: #0f1015;
}
.pane-header {
background: rgba(255, 255, 255, 0.03);
padding: 10px 14px;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
display: flex;
justify-content: space-between;
align-items: center;
font-weight: 500;
font-size: 0.8rem;
color: #71717a;
}
.dot-indicators {
display: flex;
gap: 5px;
}
.dot {
width: 8px;
height: 8px;
border-radius: 50%;
}
.dot-red { background: #ff5f56; }
.dot-yellow { background: #ffbd2e; }
.dot-green { background: #27c93f; }
.code-editor {
padding: 16px;
font-family: 'JetBrains Mono', monospace;
font-size: 0.85rem;
color: #a9b2c3;
height: 280px;
overflow-y: auto;
white-space: pre-wrap;
}
.terminal-body {
background: #06070a;
padding: 16px;
font-family: 'JetBrains Mono', monospace;
font-size: 0.85rem;
color: #8ee43f;
height: 280px;
overflow-y: auto;
display: flex;
flex-direction: column;
justify-content: flex-start;
gap: 6px;
}
.terminal-line {
min-height: 1.2rem;
}
.terminal-input {
color: #ffb74d;
}
.playground-controls {
grid-column: 1 / -1;
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 12px;
border-top: 1px solid var(--line);
flex-wrap: wrap;
gap: 12px;
}
.selector-container {
display: flex;
align-items: center;
gap: 10px;
}
.selector-container label {
font-size: 0.85rem;
font-weight: 600;
color: var(--muted);
}
select {
background: var(--bg-grid);
border: 1px solid var(--line);
color: var(--text);
padding: 6px 12px;
border-radius: var(--radius-sm);
outline: none;
cursor: pointer;
font-family: inherit;
}
/* Code styling tags */
.token-keyword { color: #8ee43f; font-weight: 600; }
.token-string { color: #66bb6a; }
.token-number { color: #ffa726; }
.token-comment { color: #5c6370; font-style: italic; }
</style>
</head>
<body class="docs-page">
<header class="site-header docs-header">
<button id="mobileMenuBtn" class="mobile-menu-btn" aria-label="Toggle navigation">
<svg viewBox="0 0 24 24" width="20" height="20" stroke="currentColor" stroke-width="2.2" fill="none" stroke-linecap="round" stroke-linejoin="round">
<line x1="3" y1="12" x2="21" y2="12"></line>
<line x1="3" y1="6" x2="21" y2="6"></line>
<line x1="3" y1="18" x2="21" y2="18"></line>
</svg>
</button>
<a class="brand" href="#overview">
<img src="logo.png" alt="bhidu-lang logo">
<span>bhidu-lang</span>
</a>
<span class="version-pill">v1.0.4</span>
<div class="doc-search">
<input id="docSearch" type="search" placeholder="Search documentation">
</div>
<nav class="top-links">
<a href="#overview">Overview</a>
<a href="#installation">Install</a>
<a href="#syntax">Syntax</a>
<a href="#cli">CLI</a>
<a href="#repl">REPL</a>
<!-- Segmented Theme Switcher Control -->
<div class="theme-segmented-control" role="radiogroup" aria-label="Theme switcher">
<button class="theme-control-btn" data-theme-val="light" aria-label="Light Mode" title="Light Mode">
<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
</button>
<button class="theme-control-btn" data-theme-val="dark" aria-label="Dark Mode" title="Dark Mode">
<svg viewBox="0 0 24 24"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
</button>
<button class="theme-control-btn" data-theme-val="system" aria-label="System Mode" title="System Mode">
<svg viewBox="0 0 24 24"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect><line x1="8" y1="21" x2="16" y2="21"></line><line x1="12" y1="17" x2="12" y2="21"></line></svg>
</button>
</div>
</nav>
</header>
<!-- Overlay for mobile navigation drawer -->
<div class="sidebar-backdrop" id="sidebarBackdrop"></div>
<div class="docs-layout">
<aside class="docs-sidebar" id="docsSidebar" aria-label="Documentation navigation">
<div class="sidebar-header-mobile">
<span>Navigation</span>
<button id="closeSidebarBtn" class="close-sidebar-btn" aria-label="Close navigation">
<svg viewBox="0 0 24 24" width="18" height="18" stroke="currentColor" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round">
<line x1="18" y1="6" x2="6" y2="18"></line>
<line x1="6" y1="6" x2="18" y2="18"></line>
</svg>
</button>
</div>
<div class="sidebar-group">
<p>Start</p>
<a href="#overview">Overview</a>
<a href="#installation">Installation</a>
<a href="#playground">Playground</a>
</div>
<div class="sidebar-group">
<p>CLI & Tools</p>
<a href="#cli">CLI Reference</a>
<a href="#repl">Interactive REPL</a>
<a href="#web-framework">Web Framework</a>
<a href="#vscode-extension">VS Code Extension</a>
</div>
<div class="sidebar-group">
<p>Language Syntax</p>
<a href="#variables">Variables</a>
<a href="#control-flow">Control Flow</a>
<a href="#loops">Loops & Iteration</a>
<a href="#blocks">Naked Blocks</a>
</div>
<div class="sidebar-group">
<p>Reference</p>
<a href="#cheatsheet">Slang Dictionary</a>
<a href="#errors">Slang Errors</a>
</div>
</aside>
<main class="doc-article">
<section id="overview" data-title="Overview">
<p class="eyebrow">Documentation v1.0.4</p>
<h1>Overview</h1>
<p class="lead"><strong>bhidu-lang</strong> is a premium, feature-rich toy programming language written in TypeScript featuring Mumbai's own local slang (inspired by Jackie Shroff). Compile, run scripts, test environment scopes, and play with error messages, bole toh ekdum jhakaas! 🕶️</p>
<div class="callout">
<strong>Fully Type-Safe Compiler Engine.</strong>
Built in TypeScript with a custom sticky-regex Tokenizer, recursive-descent AST Parser, parent-linked Environment Scope resolver, and AST Evaluator.
</div>
</section>
<section id="installation" data-title="Installation">
<h2>Installation</h2>
<p>Install the compiler globally via NPM to make the command line tools available anywhere on your machine:</p>
<pre><code>npm install -g bhidu-lang</code></pre>
<div class="callout">
<strong>Bole toh update complete!</strong> Make sure you have Node.js (v18+) installed. Once the package is installed globally, the <code>bhidu</code> binary will be ready to execute from any folder in your terminal.
</div>
</section>
<section id="playground" data-title="Playground">
<h2>Interactive Simulator</h2>
<p>Select a script below, click <strong>"Chalao Code! 🚀"</strong>, and watch the simulated interpreter run your slang code node-by-node in the virtual console.</p>
<div class="playground-container">
<!-- virtual editor -->
<div class="editor-pane">
<div class="pane-header">
<div class="dot-indicators">
<span class="dot dot-red"></span>
<span class="dot dot-yellow"></span>
<span class="dot dot-green"></span>
</div>
<span>main.bhidu</span>
</div>
<div id="editor" class="code-editor"></div>
</div>
<!-- virtual terminal -->
<div class="terminal-pane">
<div class="pane-header">
<span>Virtual Console</span>
</div>
<div id="terminal" class="terminal-body">
<div class="terminal-line">Virtual terminal ready. Click "Chalao Code!"</div>
</div>
</div>
<!-- controls -->
<div class="playground-controls">
<div class="selector-container">
<label for="example-select">Choose Example:</label>
<select id="example-select" onchange="loadExample()">
<option value="hello">Hello Bhidu (Print)</option>
<option value="variables">Variables & Math</option>
<option value="condition">If-Else (Agar-Warna)</option>
<option value="loop">Loops & Break (Jab Tak)</option>
<option value="error">Slang Error Trigger</option>
</select>
</div>
<button class="run-btn" onclick="simulateCode()">Chalao Code! 🚀</button>
</div>
</div>
</section>
<section id="cli" data-title="CLI Reference">
<h2>CLI Reference & Commands</h2>
<p>The compiler binary is mapped globally to <code>bhidu</code> (or you can invoke it using <code>node dist/cli.js</code>). Here is the complete list of all commands available in the CLI:</p>
<table>
<thead>
<tr>
<th>Command Syntax</th>
<th>Description</th>
<th>Usage Example</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>bhidu run <file.bhidu></code></td>
<td>Execute a <code>.bhidu</code> script file directly in your terminal.</td>
<td><code>bhidu run test.bhidu</code></td>
</tr>
<tr>
<td><code>bhidu repl</code> or <code>bhidu</code></td>
<td>Start the interactive REPL shell to run statements line-by-line.</td>
<td><code>bhidu repl</code></td>
</tr>
<tr>
<td><code>bhidu ast <file.bhidu></code></td>
<td>Print the parsed Abstract Syntax Tree (AST) as structured JSON.</td>
<td><code>bhidu ast test.bhidu</code></td>
</tr>
<tr>
<td><code>bhidu hagde [project-name]</code></td>
<td>Scaffold a new project folder structure with <code>public/</code>, <code>components/</code>, <code>pages/</code>, and <code>index.bhidu</code>. Prompts if project name is omitted.</td>
<td><code>bhidu hagde my-web-app</code></td>
</tr>
<tr>
<td><code>bhidu shuru hoja [file.bhidu]</code></td>
<td>Starts the live-reloading Dev Server (default: <code>index.bhidu</code>) on port 3000 with static asset resolution from the <code>public/</code> folder.</td>
<td><code>bhidu shuru hoja</code></td>
</tr>
<tr>
<td><code>bhidu faad de [file.bhidu]</code></td>
<td>Compiles the application to production-ready static HTML in <code>out/index.html</code> and copies all files from <code>public/</code> to <code>out/</code>.</td>
<td><code>bhidu faad de</code></td>
</tr>
<tr>
<td><code>bhidu help</code></td>
<td>Display the helper menu with syntax templates.</td>
<td><code>bhidu help</code></td>
</tr>
</tbody>
</table>
</section>
<section id="repl" data-title="Interactive REPL">
<h2>Interactive REPL</h2>
<p>Start a live interactive session where you can type code statements line-by-line. The REPL preserves variables in a persistent scope environment across lines.</p>
<pre><code>$ bhidu repl
=========================================
Bhidu-Lang Interactive REPL v1.0.4
Sab chalta hai bhidu! Type '.exit' to exit.
=========================================
chalu kar bhidu
bhidu> bhidu ye hai x = 10;
bhidu> bhidu ye hai y = 20;
bhidu> bhidu bolta hai("x + y = " + (x + y));
x + y = 30
bhidu> .exit
khatam bhidu</code></pre>
<div class="callout">
<strong>Under the Hood.</strong>
Since the parser requires code to reside inside program boundaries, the REPL dynamically wraps each line with entry/exit headers (`chalu kar bhidu` / `khatam bhidu`) on the fly, then executes the AST nodes on a persistent global Environment reference.
</div>
</section>
<section id="web-framework" data-title="Web Framework">
<h2>Bhidu Web Framework</h2>
<p>Build and compile interactive web pages directly using <code>bhidu-lang</code>. It supports zero-config project scaffolding, asset pipeline serving, local hot-reloading dev server, reactive state updates, and static production bundling.</p>
<div class="callout">
<strong>1. Project Initialization & Scaffolding (bhidu hagde):</strong><br>
To create and initialize a new Bhidu web application, run:
<pre><code>bhidu hagde [project-name]</code></pre>
If you omit the project name, the CLI will interactively ask: <em>"bhidu is project ka naam kya rkhna h wo to bta"</em>. This command bootstraps a professional, ready-to-use directory structure:
<ul>
<li><code>public/</code>: For static assets (holds <code>logo.png</code> by default).</li>
<li><code>components/</code>: For modular, reusable components.</li>
<li><code>pages/</code>: For additional application subpages.</li>
<li><code>index.bhidu</code>: The entry point rendering a premium dark-themed layout.</li>
</ul>
</div>
<div class="callout">
<strong>2. Run Local Development Server (bhidu shuru hoja):</strong><br>
Start a hot-reloading web server to preview your application on <code>http://localhost:3000</code>:
<pre><code>bhidu shuru hoja [file.bhidu]</code></pre>
This server watches your code files for changes, automatically refreshes the browser page on save, compiles and bundles component CSS, and serves static files from the <code>public/</code> folder seamlessly.
</div>
<div class="callout">
<strong>3. Compile for Production (bhidu faad de):</strong><br>
Compile your dynamic Bhidu application into standalone static HTML and JS ready for deployment:
<pre><code>bhidu faad de [file.bhidu]</code></pre>
This transpiles your slang code to <code>out/index.html</code>, collects and bundles all styles, and copies the <code>public/</code> folder assets recursively to <code>out/</code>, making the build deployable to GitHub Pages, Netlify, Vercel, or any other static host.
</div>
<div class="callout">
<strong>⚡ Reactive State, Effects & Component CSS System:</strong>
<ul>
<li><strong>State Management:</strong> Variables declared with <code>bhidu ye hai</code> preserve their values across page renders. Use <code>bhiduSetState('name', value)</code> in your HTML event handlers (e.g. <code>onclick</code>) to update state and trigger automatic UI re-renders.</li>
<li><strong>Side Effects:</strong> Invoke side-effects reactively using <code>bhiduEffect(callback, dependencies)</code> inside your slang scripts.</li>
<li><strong>Component CSS System:</strong> Stylesheet (<code>.css</code>) files in your project folders (<code>public/</code>, <code>components/</code>, or <code>pages/</code>) are auto-bundled and injected into the HTML page's <code><head></code> without any manual import code.</li>
</ul>
</div>
</section>
<section id="vscode-extension" data-title="VS Code Extension">
<h2>VS Code IDE Extension</h2>
<p>Enhance your development experience with the dedicated VS Code extension for <code>bhidu-lang</code>. It supports syntax highlighting, document formatting, and real-time linter diagnostics.</p>
<div class="callout">
<strong>Features:</strong>
<ul>
<li><strong>Syntax Highlighting:</strong> Custom TextMate grammar mapping slang keywords to standard VS Code token classes.</li>
<li><strong>Document Formatting:</strong> Indents code lines automatically between block boundaries (brackets or entry/exit keywords).</li>
<li><strong>Diagnostics (Linter):</strong> Checks code dynamically on edit/save and highlights syntax errors with red squiggles, showing slang error messages.</li>
</ul>
</div>
<div class="callout">
<strong>Installation:</strong><br>
Run the following command in your terminal from the project root folder to install the prepackaged extension:
<pre><code>code --install-extension extension/bhidu-vscode-1.0.4.vsix</code></pre>
</div>
</section>
<section id="variables" data-title="Variables">
<h2>Variables & Reassignment</h2>
<p>Variables are declared using the <code>bhidu ye hai</code> keyword, followed by an assignment and a terminating semicolon (;) which is mandatory. Reassigning a variable does not require the declaration prefix.</p>
<pre><code>chalu kar bhidu
bhidu ye hai naam = "Jackie Shroff";
bhidu ye hai age = 69;
// Reassignment
age = 70;
bhidu bolta hai(naam + " is " + age + " years old.");
khatam bhidu</code></pre>
</section>
<section id="control-flow" data-title="Control Flow">
<h2>Control Flow (If-Else)</h2>
<p>Conditional branches are declared using <code>agar bhidu</code>, <code>warna agar bhidu</code>, and <code>warna bhidu</code>. Braces represent execution block scopes.</p>
<pre><code>chalu kar bhidu
bhidu ye hai speed = 120;
agar bhidu (speed > 100) {
bhidu bolta hai("Bohot bhaag raha hai bhidu!");
} warna agar bhidu (speed > 60) {
bhidu bolta hai("Sahi jaa raha hai!");
} warna bhidu {
bhidu bolta hai("Aadmi hai ki halwa, thoda chal!");
}
khatam bhidu</code></pre>
</section>
<section id="loops" data-title="Loops & Iteration">
<h2>Loops (While)</h2>
<p>Iterate using the while loop block: <code>jab tak bhidu</code>. Inside a loop block, control execution flow using <code>bas kar bhidu</code> (break) or <code>agli baar bhidu</code> (continue).</p>
<pre><code>chalu kar bhidu
bhidu ye hai counter = 0;
jab tak bhidu (counter < 10) {
counter = counter + 1;
agar bhidu (counter == 3) {
agli baar bhidu; // skip 3
}
agar bhidu (counter == 7) {
bas kar bhidu; // stop at 7
}
bhidu bolta hai(counter);
}
khatam bhidu</code></pre>
</section>
<section id="blocks" data-title="Naked Blocks">
<h2>Naked Blocks & Shadowing</h2>
<p>Curly braces <code>{ ... }</code> define local scoping. If you define a variable with the same name inside a nested block, it shadows the outer scope variable until execution leaves the block.</p>
<pre><code>chalu kar bhidu
bhidu ye hai a = 10;
{
bhidu ye hai a = 20;
bhidu bolta hai(a); // Prints 20
}
bhidu bolta hai(a); // Prints 10
khatam bhidu</code></pre>
</section>
<section id="cheatsheet" data-title="Slang Dictionary">
<h2>Slang Dictionary Reference</h2>
<p>Use this table to look up equivalents of standard keywords.</p>
<table>
<thead>
<tr>
<th>Slang Keyword</th>
<th>JS Equivalent</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>chalu kar bhidu</code></td>
<td>*(implicit)*</td>
<td>Program opening tag</td>
</tr>
<tr>
<td><code>khatam bhidu</code></td>
<td>*(implicit)*</td>
<td>Program closing tag</td>
</tr>
<tr>
<td><code>bhidu ye hai</code></td>
<td><code>let / var</code></td>
<td>Variable declaration</td>
</tr>
<tr>
<td><code>sahi bhidu</code></td>
<td><code>true</code></td>
<td>Boolean true</td>
</tr>
<tr>
<td><code>galat bhidu</code></td>
<td><code>false</code></td>
<td>Boolean false</td>
</tr>
<tr>
<td><code>khali bhidu</code></td>
<td><code>null</code></td>
<td>Null / Empty value</td>
</tr>
<tr>
<td><code>bhidu bolta hai(...)</code></td>
<td><code>console.log(...)</code></td>
<td>Prints to stdout console</td>
</tr>
<tr>
<td><code>agar bhidu(...)</code></td>
<td><code>if(...)</code></td>
<td>Conditional check</td>
</tr>
<tr>
<td><code>warna agar bhidu(...)</code></td>
<td><code>else if(...)</code></td>
<td>Alternate conditional check</td>
</tr>
<tr>
<td><code>warna bhidu</code></td>
<td><code>else</code></td>
<td>Fallback condition block</td>
</tr>
<tr>
<td><code>jab tak bhidu(...)</code></td>
<td><code>while(...)</code></td>
<td>While loop block</td>
</tr>
<tr>
<td><code>bas kar bhidu</code></td>
<td><code>break</code></td>
<td>Exit loop execution</td>
</tr>
<tr>
<td><code>agli baar bhidu</code></td>
<td><code>continue</code></td>
<td>Skip current loop cycle</td>
</tr>
</tbody>
</table>
</section>
<section id="errors" data-title="Slang Errors">
<h2>Slang Runtime & Syntax Errors</h2>
<p>Errors throw highly descriptive and localized messages in Mumbai slang to make debugging fun!</p>
<div class="callout">
<strong>Undeclared Variable:</strong><br>
<code>Kya re bhidu! Line 3 pe error: Ye 'x' variable kidhar se laya? Pehle declare toh kar ('bhidu ye hai x = ...')!</code>
</div>
<div class="callout">
<strong>Redeclared Variable:</strong><br>
<code>Kya re bhidu! Line 4 pe error: Ye 'a' variable pehle se bana chuka hai tu!</code>
</div>
<div class="callout">
<strong>Division by Zero:</strong><br>
<code>Kya re bhidu! Line 3 pe error: Zero (0) se divide kar raha hai? Dhandha bandh karwayega kya!</code>
</div>
<div class="callout">
<strong>Missing Entry / Exit Point:</strong><br>
<code>Abe bhidu! Khali file kyun diya? Code chalu karne ke liye 'chalu kar bhidu' likh pehle!</code><br>
<code>Kya re bhidu! Line 12 pe program khatam ho gaya par bandh nahi kiya? 'khatam bhidu' bolna padega!</code>
</div>
</section>
</main>
</div>
<script src="app.js"></script>
<!-- Interactive Simulator logic -->
<script>
const EXAMPLES = {
hello: {
code: `<span class="token-keyword">chalu kar bhidu</span>\n <span class="token-comment">// Apun ka pehla print script</span>\n <span class="token-keyword">bhidu bolta hai</span>(<span class="token-string">"Bole toh ekdum jhakaas!"</span>);\n<span class="token-keyword">khatam bhidu</span>`,
output: [
`<span class="terminal-input">bhidu run hello.bhidu</span>`,
`Bole toh ekdum jhakaas!`,
`[Process finished successfully]`
]
},
variables: {
code: `<span class="token-keyword">chalu kar bhidu</span>\n <span class="token-keyword">bhidu ye hai</span> a = <span class="token-number">10</span>;\n <span class="token-keyword">bhidu ye hai</span> b = <span class="token-number">20</span>;\n <span class="token-keyword">bhidu bolta hai</span>(a + b);\n <span class="token-keyword">bhidu bolta hai</span>(b - a);\n<span class="token-keyword">khatam bhidu</span>`,
output: [
`<span class="terminal-input">bhidu run variables.bhidu</span>`,
`30`,
`10`,
`[Process finished successfully]`
]
},
condition: {
code: `<span class="token-keyword">chalu kar bhidu</span>\n <span class="token-keyword">bhidu ye hai</span> age = <span class="token-number">18</span>;\n <span class="token-keyword">agar bhidu</span> (age >= <span class="token-number">18</span>) {\n <span class="token-keyword">bhidu bolta hai</span>(<span class="token-string">"License milega bhidu!"</span>);\n } <span class="token-keyword">warna bhidu</span> {\n <span class="token-keyword">bhidu bolta hai</span>(<span class="token-string">"Chhota hai re tu!"</span>);\n }\n<span class="token-keyword">khatam bhidu</span>`,
output: [
`<span class="terminal-input">bhidu run condition.bhidu</span>`,
`License milega bhidu!`,
`[Process finished successfully]`
]
},
loop: {
code: `<span class="token-keyword">chalu kar bhidu</span>\n <span class="token-keyword">bhidu ye hai</span> count = <span class="token-number">0</span>;\n <span class="token-keyword">jab tak bhidu</span> (count < <span class="token-number">4</span>) {\n count = count + <span class="token-number">1</span>;\n <span class="token-keyword">agar bhidu</span> (count == <span class="token-number">3</span>) {\n <span class="token-keyword">bhidu bolta hai</span>(<span class="token-string">"Apun half rasta pe hai!"</span>);\n <span class="token-keyword">agli baar bhidu</span>;\n }\n <span class="token-keyword">bhidu bolta hai</span>(count);\n }\n<span class="token-keyword">khatam bhidu</span>`,
output: [
`<span class="terminal-input">bhidu run loop.bhidu</span>`,
`1`,
`2`,
`Apun half rasta pe hai!`,
`4`,
`[Process finished successfully]`
]
},
error: {
code: `<span class="token-keyword">chalu kar bhidu</span>\n <span class="token-comment">// Division by zero will trigger slang error</span>\n <span class="token-keyword">bhidu ye hai</span> a = <span class="token-number">10</span> / <span class="token-number">0</span>;\n<span class="token-keyword">khatam bhidu</span>`,
output: [
`<span class="terminal-input">bhidu run error.bhidu</span>`,
`<span style="color: #f44336;">Kya re bhidu! Line 3 pe error: Zero (0) se divide kar raha hai? Dhandha bandh karwayega kya!</span>`,
`<span style="color: #f44336;">[Process failed with exit code 1]</span>`
]
}
};
const editorEl = document.getElementById("editor");
const terminalEl = document.getElementById("terminal");
const selectEl = document.getElementById("example-select");
function loadExample() {
const selected = selectEl.value;
const data = EXAMPLES[selected];
editorEl.innerHTML = data.code;
terminalEl.innerHTML = `<div class="terminal-line">Virtual terminal ready. Click "Chalao Code!"</div>`;
}
function simulateCode() {
const selected = selectEl.value;
const data = EXAMPLES[selected];
terminalEl.innerHTML = "";
let lineIndex = 0;
function printNextLine() {
if (lineIndex < data.output.length) {
const lineDiv = document.createElement("div");
lineDiv.className = "terminal-line";
lineDiv.innerHTML = data.output[lineIndex];
terminalEl.appendChild(lineDiv);
terminalEl.scrollTop = terminalEl.scrollHeight;
lineIndex++;
setTimeout(printNextLine, 500);
}
}
printNextLine();
}
window.onload = () => {
loadExample();
};
</script>
</body>
</html>
