Code export
The game can show you the algorithm you built as real code. The code icon in the top-right of the program area (and the "Export as code" link on the win modal) opens the export modal.
The feature
- Three language tabs, each with an IDE-style tab: C, Python and
JavaScript (
algorithm.c,algorithm.py,algorithm.js). - A language badge with each language's brand colours (
LanguageLogo.tsx), line numbers, a monospace preview with syntax token colours, and a Copy button. - The exported code is always your current program, exactly as it is in the sequence zone.
The generator
features/level/export-algorithm.ts is the pure generator, shared by the
modal and its tests. It maps blocks to language statements:
| Block | C / JavaScript | Python |
|---|---|---|
move-forward | move_forward(); / moveForward(); | move_forward() |
turn-left/right | turn_left(); ... | turn_left() |
for | for (int i = 1; i <= n; i++) { / let i | for i in range(1, n + 1): |
while | while (!target_reached()) { | while not target_reached(): |
if | if (path_ahead()) { ... } else { ... } | if path_ahead(): ... else: ... |
switch | an if / else if / else chain | if / elif / else |
A switch exports as an if-else chain because that is the honest
translation: each branch is a path condition, and default becomes the
final else. Empty Python bodies get a pass, because Python requires one.
while exports as "while the target is not reached", which is exactly what
the block means.
Symbol naming follows each language's convention: snake_case in C and
Python, camelCase in JavaScript. Nested loops are labelled i, j, k
(and k beyond), with the same letters shown in the block UI
(lib/loopLetter.ts), so the code and the blocks never disagree about which
loop is which.
The formatting rules
The formatting is a deliberate contract, locked by tests:
- A container (
for,while,if,switch) is set off by one blank line from what precedes or follows it at the same level. - Leaves stay adjacent to each other, no blank lines.
- Bodies are never padded inside; a structure nested as the first or last thing in a body sits flush with it.
- Indentation is four spaces.
The result reads like a human wrote it, not like a printer dumped a tree.
Where the pieces live
ExportModal.tsx renders the modal; the win modal's
Outcome modal link opens it on top;
export-algorithm.test.ts locks the formatting contract for all three
languages.
Next: Accessibility.