Online AlpLogo

A browser-based educational programming environment for teaching turtle graphics programming. Online AlpLogo features a custom Logo-like language interpreter with multi-language support and provides a complete IDE with code editor, canvas visualization, and debugging tools.

Features

• 🐢 Turtle Graphics: Classic turtle drawing with movement, pen control, colors, and shapes
• 🌍 Multi-Language Support: Write code in English, Azerbaijani, or Russian
• ✏️ Syntax Highlighting: Full support for all three languages in the code editor
• 🐛 Step Debugging: Execute code step-by-step with line highlighting
• ⚡ Multiple Execution Modes: Immediate, animated (with speed control), and step-by-step
• 📚 Built-in Examples: Sample programs to help learn the language
• 📖 Language Reference: Quick access to all commands and syntax
• 🎵 Audio Support: Music playback commands for interactive programs
• 🎯 Error Reporting: Clear error messages with line and column information

Supported Languages

The AlpLogo language supports three locales with full keyword and command mappings:

English	Azerbaijani	Russian
forward	irəli / ireli	вперед
backward	geri	назад
left	sola	налево
right	sağa / saga	направо
repeat	təkrarla / tekrarla	повтори
if	əgər / eger	если
variable	dəyişən / deyisen	переменная
subroutine	altproqram	подпрограмма

All commands normalize to English internally for execution.

Technology Stack

• Framework: Vue 3 with Composition API
• Language: TypeScript (strict mode)
• Build Tool: Vite 7.x
• State Management: Pinia 3.x
• Code Editor: CodeMirror 6
• Testing: Custom test runner with tsx

Getting Started

Prerequisites

• Node.js 18+
• npm or yarn

Installation

# Clone the repository
git clone https://github.com/yourusername/online-alplogo.git
cd online-alplogo

# Install dependencies
npm install

# Start development server
npm run dev

The development server will start at http://localhost:3000.

Build for Production

# Type-check and build
npm run build

# Preview production build
npm run preview

Available Commands

Command	Description
npm run dev	Start development server (port 3000)
npm run build	Type-check and build for production
npm run preview	Preview production build
npm test	Run parser tests

Project Structure

├── src/
│   ├── components/         # Vue single-file components
│   │   ├── canvas/        # TurtleCanvas - rendering component
│   │   ├── editor/        # CodeEditor, EditorToolbar, ErrorDisplay
│   │   ├── modals/        # HelpModal, ExamplesModal, LanguageReferenceModal
│   │   └── ui/            # AppHeader, Sidebar, SplitPane, StatusBar
│   ├── core/              # Language interpreter and parser
│   │   ├── ast/           # Abstract Syntax Tree type definitions
│   │   ├── interpreter/   # Interpreter, builtins, Environment
│   │   └── parser/        # Lexer, Parser, tokens, tests
│   ├── languages/         # Syntax highlighting definitions
│   │   ├── alplogo-codemirror.ts  # CodeMirror 6 highlighter
│   │   └── alplogo.ts             # Monaco legacy highlighter
│   ├── stores/            # Pinia state management
│   │   ├── editor.ts      # Code content and errors
│   │   ├── turtle.ts      # Canvas and turtle state
│   │   ├── execution.ts   # Execution control and debugging
│   │   └── modal.ts       # Modal visibility
│   ├── App.vue            # Root application component
│   └── main.ts            # Application entry point
├── public/                # Static assets
└── index.html             # HTML entry point

Example Programs

English

pendown
pencolor 4
penwidth 3

repeat 4 [
  forward 100
  right 90
]

write "Hello World"

Azerbaijani

qələmiendir
qələminrəngi 4
qələmineni 3

təkrarla 4 [
  irəli 100
  sağa 90
]

yaz "Salam Dünya"

Russian

пероопусти
цветпера 4
толщинапера 3

повтори 4 [
  вперед 100
  направо 90
]

пиши "Привет Мир"

Testing

The project includes a custom test suite for the parser:

# Run all parser tests
npm test

Tests cover:

• Command parsing in all three languages
• Control flow keywords (repeat, if, while, for)
• System values (turtleX, turtleY, screenW, screenH, random)
• Nested structures and subroutine definitions
• Comparison operators

Architecture

The AlpLogo language is processed through a traditional interpreter pipeline:

1. Lexer (src/core/parser/Lexer.ts): Tokenizes source code
2. Parser (src/core/parser/Parser.ts): Recursive descent parser generating an AST
3. Interpreter (src/core/interpreter/Interpreter.ts): Executes AST nodes with turtle graphics output

Execution Modes

• Immediate: Fast execution without delays
• Animated: Step-by-step visualization with configurable speed (1-100)
• Step: Debug mode - pauses after each statement, waits for user to step forward

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

MIT License - see LICENSE file for details

Acknowledgments

• Inspired by the original AlpLogo, Logo educational software
• Built with Vue.js, CodeMirror, and Vite