af135wu/zkt25
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Finalize merge: keep local Karel-Simulator files in Exam/

Browse Source
This commit is contained in:
Andriy Frolov 2025-05-11 00:08:40 +02:00
parent 0f01b7a129
commit 402a8d7698
11 changed files with 0 additions and 1064 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
Dockerfile
View File

@ -1,15 +0,0 @@
# Dockerfile
FROM nginx:alpine
# Remove default content
RUN rm -rf /usr/share/nginx/html/*
# Copy your simulator files
COPY . /usr/share/nginx/html
# Expose port 80
EXPOSE 80
# Run Nginx in foreground
CMD ["nginx", "-g", "daemon off;"]

6
disable-maintenance.sh
View File

@ -1,6 +0,0 @@
#!/usr/bin/env bash
set -e
# deploy the real site back
netlify deploy --prod --dir=. \
--message="✅ Live site ON"

14
docker-compose.yml
View File

@ -1,14 +0,0 @@
services:
simulator:
build: .
image: karel-simulator
container_name: karel-simulator
ports:
- "8080:80"
restart: unless-stopped
redis:
image: redis:alpine
container_name: karel-redis
restart: unless-stopped

6
enable-maintenance.sh
View File

@ -1,6 +0,0 @@
#!/usr/bin/env bash
set -e
# deploy the maintenance folder
netlify deploy --prod --dir=maintenance \
--message="⚙️ Maintenance page ON"

849
index.html
View File

@ -1,849 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Karel Simulator</title>
<style>
:root {
--bg: #121212;
--surface: #1e1e1e;
--border: #2a2a2a;
--text: #e0e0e0;
--accent: #0f0;
--wall: #d32f2f;
--hover: rgba(255,255,255,0.05);
--radius: 4px;
}
*,*::before,*::after{box-sizing:border-box;}
body {
margin:0;padding:20px;
background:var(--bg);
color:var(--text);
font-family:monospace;
line-height:1.4;
}
h1,h2,p,label{color:var(--text);}
#container,#mapEditorContainer {
display:flex;gap:20px;
}
#leftPane,#mapEditorControls{flex:1;max-width:600px;}
#rightPane,#editorMap{flex:1;}
#editor,#console,#editorMap,#map {
width:100%;
background:var(--surface);
border:1px solid var(--border);
border-radius:var(--radius);
padding:12px;
margin-bottom:20px;
white-space:pre;
color:var(--text);
font-family:monospace;
overflow:auto;
}
#editor{height:200px;}
#console{height:150px;color:var(--accent);white-space:pre-wrap;}
button,input[type="number"],select {
background:var(--surface);
border:1px solid var(--border);
border-radius:var(--radius);
color:var(--text);
padding:8px 16px;
font:inherit;
cursor:pointer;
transition:background 0.2s;
margin-right:10px;
}
button:hover,input[type="number"]:hover,select:hover {
background:var(--hover);
}
button:active{background:var(--border);}
input[type="file"]{
background:none;border:none;color:var(--text);
}
#map{
background:var(--surface);
border:1px solid var(--border);
color:var(--text);
}
#status{display:flex;gap:20px;margin-top:10px;}
.status-card{
background:var(--surface);
border:1px solid var(--border);
border-radius:var(--radius);
padding:8px 12px;
display:flex;align-items:center;
}
.status-card .label{color:var(--accent);margin-right:6px;}
.map-border{color:var(--accent);}
.cell-content{color:var(--accent);}
.wall-border{color:var(--wall);}
/* Editor spacing */
#mapEditorControls{display:flex;flex-direction:column;gap:16px;}
#mapEditorControls h2{margin-bottom:0;}
#mapEditorControls > label,
#mapEditorControls > input[type="number"],
#mapEditorControls > select,
#mapEditorControls > button {
margin:4px 0;
}
.edit-mode-group {
display:flex;
flex-direction:column;
gap:8px;
}
.clickable-wall{
display:inline-block;
transition:background 0.2s;
cursor:pointer;
}
.clickable-wall:hover{
background:var(--hover);
}
</style>
</head>
<body>
<h1>Karel Simulator</h1>
<!-- Main Simulator View -->
<div id="container">
<div id="leftPane">
<p>
Write your Karel program below. Parentheses &amp; semicolons mandatory.
If you’re ever unsure how to use the Simulator,
<a href="manual.html" target="_blank" style="color:var(--accent);text-decoration:underline;">
consult the manual
</a>.
</p>
<textarea id="editor">// Example:
if (frontIsBlocked()) {
turnLeft();
} else {
move();
}
</textarea>
<button id="runButton">Compile &amp; Run</button>
<button id="stopButton">Stop</button>
<button id="editMapButton">Edit Map</button>
<h2>Console Output:</h2>
<div id="console"></div>
<h2>Upload Map File:</h2>
<input type="file" id="mapFileInput" accept=".txt,.kw"/>
<button id="uploadMapButton">Upload Map</button>
</div>
<div id="rightPane">
<h2>Karel Map:</h2>
<div id="map"></div>
<div id="status"></div>
</div>
</div>
<!-- Manual Map Editor -->
<div id="mapEditorContainer" style="display:none;">
<div id="mapEditorControls">
<h2>Manual Map Editor</h2>
<label>
Width:
<input type="number" id="editWidth" min="3" value="10"/>
</label>
<label>
Height:
<input type="number" id="editHeight" min="3" value="10"/>
</label>
<button id="generateMapButton">Generate Map</button>
<div class="edit-mode-group">
<label><input type="radio" name="editMode" value="wall" checked/> Toggle Wall</label>
<label><input type="radio" name="editMode" value="beeper"/> Beeper (click to add, Ctrl+click to remove)</label>
<label><input type="radio" name="editMode" value="karel"/> Set Karel</label>
</div>
<label>
Karel Dir:
<select id="karelDirSelect">
<option value="north">North</option>
<option value="east">East</option>
<option value="south">South</option>
<option value="west">West</option>
</select>
</label>
<!-- NEW: Beeper Bag Count -->
<label>
Beeper Bag:
<input type="number" id="beeperBagInput" min="0" max="99" value="0"/>
</label>
<button id="importEditorMapButton">Import to Simulator</button>
<button id="discardEditorMapButton">Discard Changes</button>
</div>
<div id="editorMap"></div>
</div>
<script>
// ───────── Globals & State ─────────
let uploadedMapData = null,
currentWorld, currentKarel,
editorMapData = null,
STEP_DELAY = 300,
stopRequested = false,
editMode = 'wall';
function log(msg){
document.getElementById('console').textContent += msg + '\n';
}
function sleep(ms){
return new Promise(r=>setTimeout(r,ms));
}
/**********************************************************************
* 1. LEXER
**********************************************************************/
class Token { constructor(type,value){ this.type=type; this.value=value; } }
const TokenType={ IDENTIFIER:'IDENTIFIER',KEYWORD:'KEYWORD',SYMBOL:'SYMBOL',EOF:'EOF' };
const keywords=new Set(['if','else','while']);
class Lexer {
constructor(input){ this.input=input; this.pos=0; }
skipWhitespace(){
while(this.pos<this.input.length && /\s/.test(this.input[this.pos]))
this.pos++;
}
nextToken(){
this.skipWhitespace();
if(this.pos>=this.input.length) return new Token(TokenType.EOF,'');
const ch=this.input[this.pos];
if(/[A-Za-z_]/.test(ch)){
let start=this.pos;
while(this.pos<this.input.length && /[A-Za-z0-9_]/.test(this.input[this.pos]))
this.pos++;
const w=this.input.slice(start,this.pos);
return new Token(keywords.has(w)?TokenType.KEYWORD:TokenType.IDENTIFIER,w);
}
if('(){};'.includes(ch)){
this.pos++;
return new Token(TokenType.SYMBOL,ch);
}
this.pos++;
return this.nextToken();
}
tokenize(){
const tokens=[];
let tok;
do{ tok=this.nextToken(); tokens.push(tok); }
while(tok.type!==TokenType.EOF);
return tokens;
}
}
/**********************************************************************
* 2. PARSER
**********************************************************************/
class ProgramNode{ constructor(stmts){ this.statements=stmts; } }
class ExpressionStatement{ constructor(expr){ this.expr=expr; } }
class IfStatement{ constructor(cond,thenB,elseB){
this.condition=cond; this.thenBlock=thenB; this.elseBlock=elseB;
}}
class WhileStatement{ constructor(cond,blk){ this.condition=cond; this.block=blk; } }
class BlockStatement{ constructor(stmts){ this.statements=stmts; } }
class FunctionCall{ constructor(name){ this.name=name; } }
class Parser {
constructor(tokens){ this.tokens=tokens; this.pos=0; }
cur(){ return this.tokens[this.pos]; }
eat(type,val=null){
const t=this.cur();
if(t.type!==type||(val&&t.value!==val))
throw new Error(`Unexpected token: ${t.value}`);
this.pos++;
return t;
}
parseProgram(){
const stmts=[];
while(this.cur().type!==TokenType.EOF){
stmts.push(this.parseStatement());
}
return new ProgramNode(stmts);
}
parseStatement(){
const t=this.cur();
if(t.type===TokenType.KEYWORD&&t.value==='if') return this.parseIf();
if(t.type===TokenType.KEYWORD&&t.value==='while') return this.parseWhile();
if(t.type===TokenType.SYMBOL&&t.value==='{') return this.parseBlock();
const expr=this.parseExpression();
this.eat(TokenType.SYMBOL,';');
return new ExpressionStatement(expr);
}
parseIf(){
this.eat(TokenType.KEYWORD,'if');
this.eat(TokenType.SYMBOL,'(');
const cond=this.parseExpression();
this.eat(TokenType.SYMBOL,')');
const thenB=this.parseStatement();
let elseB=null;
if(this.cur().type===TokenType.KEYWORD&&this.cur().value==='else'){
this.eat(TokenType.KEYWORD,'else');
elseB=this.parseStatement();
}
return new IfStatement(cond,thenB,elseB);
}
parseWhile(){
this.eat(TokenType.KEYWORD,'while');
this.eat(TokenType.SYMBOL,'(');
const cond=this.parseExpression();
this.eat(TokenType.SYMBOL,')');
const blk=this.parseStatement();
return new WhileStatement(cond,blk);
}
parseBlock(){
this.eat(TokenType.SYMBOL,'{');
const stmts=[];
while(!(this.cur().type===TokenType.SYMBOL&&this.cur().value==='}')){
stmts.push(this.parseStatement());
}
this.eat(TokenType.SYMBOL,'}');
return new BlockStatement(stmts);
}
parseExpression(){ return this.parseFunctionCall(); }
parseFunctionCall(){
const name=this.eat(TokenType.IDENTIFIER).value;
this.eat(TokenType.SYMBOL,'(');
this.eat(TokenType.SYMBOL,')');
return new FunctionCall(name);
}
}
/**********************************************************************
* 3. INTERPRETER (async + stop)
**********************************************************************/
async function executeProgramAsync(prog,ctx){
for(const stmt of prog.statements){
if(stopRequested) throw new Error("Execution stopped by user");
await executeStatementAsync(stmt,ctx);
}
}
async function executeStatementAsync(stmt,ctx){
if(stopRequested) throw new Error("Execution stopped by user");
if(stmt instanceof ExpressionStatement){
await evaluateExpressionAsync(stmt.expr,ctx);
} else if(stmt instanceof IfStatement){
if(await evaluateExpressionAsync(stmt.condition,ctx)){
await executeStatementAsync(stmt.thenBlock,ctx);
} else if(stmt.elseBlock){
await executeStatementAsync(stmt.elseBlock,ctx);
}
} else if(stmt instanceof WhileStatement){
while(await evaluateExpressionAsync(stmt.condition,ctx)){
if(stopRequested) throw new Error("Execution stopped by user");
await executeStatementAsync(stmt.block,ctx);
}
} else if(stmt instanceof BlockStatement){
for(const s of stmt.statements){
if(stopRequested) throw new Error("Execution stopped by user");
await executeStatementAsync(s,ctx);
}
}
}
async function evaluateExpressionAsync(expr,ctx){
if(stopRequested) throw new Error("Execution stopped by user");
if(expr instanceof FunctionCall){
const res = executeFunction(expr.name,ctx.karel);
if(['move','turnLeft','pickBeeper','putBeeper'].includes(expr.name)){
renderWorld(currentWorld,currentKarel);
await sleep(STEP_DELAY);
}
return res;
}
throw new Error('Unknown expression');
}
/**********************************************************************
* 4. WORLD & KAREL
**********************************************************************/
const DIRECTIONS={NORTH:0,EAST:1,SOUTH:2,WEST:3},
DIRECTION_SYMBOLS=['↑','→','↓','←'];
class World {
constructor(w,h){
this.width=w; this.height=h;
this.grid=[]; this.walls=[];
for(let x=0;x<w;x++){
this.grid[x]=[]; this.walls[x]=[];
for(let y=0;y<h;y++){
this.grid[x][y]=0;
this.walls[x][y]={north:false,east:false,south:false,west:false};
}
}
}
isWithinBounds(x,y){return x>=0&&x<this.width&&y>=0&&y<this.height;}
getBeeperCount(x,y){return this.isWithinBounds(x,y)?this.grid[x][y]:0;}
addBeeper(x,y){if(this.isWithinBounds(x,y))this.grid[x][y]++;}
removeBeeper(x,y){
if(this.isWithinBounds(x,y)&&this.grid[x][y]>0){this.grid[x][y]--;return true;}
return false;
}
}
class Karel {
constructor(world,x,y,dir){
this.world=world;this.x=x;this.y=y;this.direction=dir;this.beeperBag=0;
}
frontIsClear(){
const side=['north','east','south','west'][this.direction];
if(this.world.walls[this.x][this.y][side])return false;
const [nx,ny]=this.nextPosition(this.direction);
return this.world.isWithinBounds(nx,ny);
}
frontIsBlocked(){return !this.frontIsClear();}
leftIsClear(){
const d=(this.direction+3)%4,side=['north','east','south','west'][d];
if(this.world.walls[this.x][this.y][side])return false;
const [nx,ny]=this.nextPosition(d);
return this.world.isWithinBounds(nx,ny);
}
leftIsBlocked(){return !this.leftIsClear();}
rightIsClear(){
const d=(this.direction+1)%4,side=['north','east','south','west'][d];
if(this.world.walls[this.x][this.y][side])return false;
const [nx,ny]=this.nextPosition(d);
return this.world.isWithinBounds(nx,ny);
}
rightIsBlocked(){return !this.rightIsClear();}
nextToABeeper(){return this.world.getBeeperCount(this.x,this.y)>0;}
notNextToABeeper(){return !this.nextToABeeper();}
facingNorth(){return this.direction===DIRECTIONS.NORTH;}
notFacingNorth(){return !this.facingNorth();}
facingSouth(){return this.direction===DIRECTIONS.SOUTH;}
notFacingSouth(){return !this.facingSouth();}
facingEast(){return this.direction===DIRECTIONS.EAST;}
notFacingEast(){return !this.facingEast();}
facingWest(){return this.direction===DIRECTIONS.WEST;}
notFacingWest(){return !this.facingWest();}
anyBeepersInBeeperBag(){return this.beeperBag>0;}
noBeepersInBeeperBag(){return this.beeperBag===0;}
nextPosition(dir){
let nx=this.x,ny=this.y;
if(dir===DIRECTIONS.NORTH)ny++;
if(dir===DIRECTIONS.EAST) nx++;
if(dir===DIRECTIONS.SOUTH)ny--;
if(dir===DIRECTIONS.WEST) nx--;
return [nx,ny];
}
move(){
if(this.frontIsClear()){
[this.x,this.y]=this.nextPosition(this.direction);
log(`Moved to (${this.x}, ${this.y})`);
} else {
log("Cannot move; wall ahead.");
}
}
turnLeft(){
this.direction=(this.direction+3)%4;
log("Turned left. Now facing "+DIRECTION_SYMBOLS[this.direction]);
}
pickBeeper(){
if(this.world.getBeeperCount(this.x,this.y)>0){
this.world.removeBeeper(this.x,this.y);
this.beeperBag++;
log(`Picked up a beeper. Bag: ${this.beeperBag}`);
} else {
log("No beeper to pick up.");
}
}
putBeeper(){
if(this.beeperBag>0){
this.world.addBeeper(this.x,this.y);
this.beeperBag--;
log(`Placed a beeper. Bag: ${this.beeperBag}`);
} else {
log("No beeper in bag.");
}
}
}
/**********************************************************************
* 5. FUNCTION MAPPING
**********************************************************************/
function executeFunction(name,karel){
switch(name){
case 'move':return karel.move();
case 'turnLeft':return karel.turnLeft();
case 'pickBeeper':return karel.pickBeeper();
case 'putBeeper':return karel.putBeeper();
case 'frontIsClear':return karel.frontIsClear();
case 'frontIsBlocked':return karel.frontIsBlocked();
case 'leftIsClear':return karel.leftIsClear();
case 'leftIsBlocked':return karel.leftIsBlocked();
case 'rightIsClear':return karel.rightIsClear();
case 'rightIsBlocked':return karel.rightIsBlocked();
case 'nextToABeeper':return karel.nextToABeeper();
case 'notNextToABeeper':return karel.notNextToABeeper();
case 'facingNorth':return karel.facingNorth();
case 'notFacingNorth':return karel.notFacingNorth();
case 'facingSouth':return karel.facingSouth();
case 'notFacingSouth':return karel.notFacingSouth();
case 'facingEast':return karel.facingEast();
case 'notFacingEast':return karel.notFacingEast();
case 'facingWest':return karel.facingWest();
case 'notFacingWest':return karel.notFacingWest();
case 'anyBeepersInBeeperBag':return karel.anyBeepersInBeeperBag();
case 'noBeepersInBeeperBag':return karel.noBeepersInBeeperBag();
}
throw new Error(`Unknown function: ${name}`);
}
const context={karel:null,callFunction:n=>executeFunction(n,context.karel)};
/**********************************************************************
* 6. WORLD RENDERING
**********************************************************************/
function renderWorld(world,karel){
currentWorld=world;currentKarel=karel;
const w=world.width,h=world.height,total=w*4+1;
let out='';
// top
for(let i=0;i<total;i++){
out+= (i===0||i===total-1)
? '<span class="map-border">+</span>'
: '<span class="map-border">-</span>';
}
out+='<br>';
// rows
for(let y=h-1;y>=0;y--){
let row='';
for(let x=0;x<w;x++){
if(x===0) row+='<span class="map-border">|</span>';
else if(world.walls[x-1][y].east) row+='<span class="wall-border">|</span>';
else row+=' ';
let c='.';
if(karel.x===x&&karel.y===y) c=DIRECTION_SYMBOLS[karel.direction];
else {
const bc=world.getBeeperCount(x,y);
if(bc>0) c=bc<10?''+bc:'?';
}
row+=`<span class="cell-content"> ${c} </span>`;
}
row+='<span class="map-border">|</span><br>';
out+=row;
if(y>0){
let div='';
for(let x=0;x<w;x++){
if(x===0) div+='<span class="map-border">+</span>';
else div+=' ';
div+= world.walls[x][y].south
? '<span class="wall-border">---</span>'
: '<span class="map-border"> </span>';
}
div+='<span class="map-border">+</span><br>';
out+=div;
}
}
// bottom
let bot='';
for(let i=0;i<total;i++){
bot+= (i===0||i===total-1)
? '<span class="map-border">+</span>'
: '<span class="map-border">-</span>';
}
bot+='<br>';
out+=bot;
document.getElementById('map').innerHTML=out;
document.getElementById('status').innerHTML=
`<div class="status-card"><span class="label">Position:</span><span class="value">(${karel.x}, ${karel.y})</span></div>`+
`<div class="status-card"><span class="label">Beepers in Bag:</span><span class="value">${karel.beeperBag}</span></div>`;
}
/**********************************************************************
* 7. MANUAL MAP EDITOR
**********************************************************************/
function showMain(){
document.getElementById('container').style.display='flex';
document.getElementById('mapEditorContainer').style.display='none';
}
function showEditor(){
document.getElementById('container').style.display='none';
document.getElementById('mapEditorContainer').style.display='flex';
// sync mode
document.querySelectorAll('input[name="editMode"]').forEach(radio=>{
radio.addEventListener('change',()=>{editMode=radio.value;});
});
const md = uploadedMapData || {
width:3,height:3,
walls:[],beepers:[],
karelX:0,karelY:0,
karelDir:'east',karelBag:0
};
document.getElementById('editWidth').value=md.width;
document.getElementById('editHeight').value=md.height;
document.getElementById('karelDirSelect').value=md.karelDir;
// beeper bag input
const bagInput=document.getElementById('beeperBagInput');
bagInput.value=md.karelBag;
bagInput.onchange=()=>{
let v=parseInt(bagInput.value,10);
if(isNaN(v)||v<0)v=0;
if(v>99)v=99;
bagInput.value=v;
editorMapData.karelBag=v;
};
editorMapData=JSON.parse(JSON.stringify(md));
renderEditorMap();
}
function renderEditorMap(){
const w=editorMapData.width,h=editorMapData.height,total=w*4+1;
let out='';
// top border
for(let i=0;i<total;i++){
const ch=(i===0||i===total-1)?'+':'-';
out+=`<span class="map-border editor-border">${ch}</span>`;
}
out+='<br>';
// rows & toggles
for(let y=h-1;y>=0;y--){
let row='';
for(let x=0;x<w;x++){
if(x===0){
row+='<span class="map-border">|</span>';
} else {
const hasV=editorMapData.walls.some(wl=>wl.x===x-1&&wl.y===y&&wl.direction==='east');
row+=`<span class="clickable-wall ${hasV?'wall-border':'map-border'}"`
+` data-x="${x-1}" data-y="${y}" data-dir="east">`
+`${hasV?'|':' '}</span>`;
}
let c='.';
const bp=editorMapData.beepers.find(b=>b.x===x&&b.y===y);
if(bp)c=bp.count.toString();
if(editorMapData.karelX===x&&editorMapData.karelY===y){
c={'north':'↑','east':'→','south':'↓','west':'←'}[editorMapData.karelDir];
}
row+=`<span class="cell-content" data-x="${x}" data-y="${y}"> ${c} </span>`;
}
row+='<span class="map-border">|</span><br>';
out+=row;
if(y>0){
let div='';
for(let x=0;x<w;x++){
if(x===0)div+='<span class="map-border">+</span>';
else div+=' ';
const hasH=editorMapData.walls.some(wl=>wl.x===x&&wl.y===y&&wl.direction==='south');
div+=`<span class="clickable-wall ${hasH?'wall-border':'map-border'}"`
+` data-x="${x}" data-y="${y}" data-dir="south">`
+`${hasH?'---':' '}</span>`;
}
div+='<span class="map-border">+</span><br>';
out+=div;
}
}
// bottom border
for(let i=0;i<total;i++){
const ch=(i===0||i===total-1)?'+':'-';
out+=`<span class="map-border editor-border">${ch}</span>`;
}
out+='<br>';
document.getElementById('editorMap').innerHTML=out;
// bind wall toggles
document.querySelectorAll('#editorMap .clickable-wall').forEach(el=>{
el.onclick=()=>{
if(editMode!=='wall')return;
const x=+el.dataset.x,y=+el.dataset.y,d=el.dataset.dir;
const idx=editorMapData.walls.findIndex(wl=>wl.x===x&&wl.y===y&&wl.direction===d);
if(idx>=0)editorMapData.walls.splice(idx,1);
else editorMapData.walls.push({x,y,direction:d});
renderEditorMap();
};
});
// bind cell clicks
document.querySelectorAll('#editorMap .cell-content').forEach(el=>{
el.onclick=ev=>{
const x=+el.dataset.x,y=+el.dataset.y;
if(editMode==='wall'){
const d=document.getElementById('karelDirSelect').value;
const idx=editorMapData.walls.findIndex(wl=>wl.x===x&&wl.y===y&&wl.direction===d);
if(idx>=0)editorMapData.walls.splice(idx,1);
else editorMapData.walls.push({x,y,direction:d});
} else if(editMode==='beeper'){
let b=editorMapData.beepers.find(b=>b.x===x&&b.y===y);
if(ev.ctrlKey){
if(b){b.count--; if(b.count<=0)editorMapData.beepers=editorMapData.beepers.filter(z=>z!==b);}
} else {
if(!b)editorMapData.beepers.push({x,y,count:1});
else b.count++;
}
} else if(editMode==='karel'){
editorMapData.karelX=x;
editorMapData.karelY=y;
editorMapData.karelDir=document.getElementById('karelDirSelect').value;
}
renderEditorMap();
};
});
}
// Editor buttons
document.getElementById('editMapButton').onclick=showEditor;
document.getElementById('discardEditorMapButton').onclick=showMain;
document.getElementById('generateMapButton').onclick=()=>{
let w=parseInt(document.getElementById('editWidth').value,10),
h=parseInt(document.getElementById('editHeight').value,10);
if(isNaN(w)||w<3)w=3;
if(isNaN(h)||h<3)h=3;
document.getElementById('editWidth').value=w;
document.getElementById('editHeight').value=h;
editorMapData={
width:w,height:h,
walls:[],beepers:[],
karelX:0,karelY:0,
karelDir:document.getElementById('karelDirSelect').value,
karelBag:0
};
// reset bag input too
document.getElementById('beeperBagInput').value=0;
renderEditorMap();
};
// Import from editor
document.getElementById('importEditorMapButton').onclick=()=>{
uploadedMapData=JSON.parse(JSON.stringify(editorMapData));
const md=uploadedMapData, world=new World(md.width,md.height);
md.walls.forEach(w=>{
world.walls[w.x][w.y][w.direction]=true;
if(w.direction==='east'&&w.x+1<world.width)world.walls[w.x+1][w.y].west=true;
if(w.direction==='south'&&w.y-1>=0)world.walls[w.x][w.y-1].north=true;
});
md.beepers.forEach(b=>{for(let i=0;i<b.count;i++)world.addBeeper(b.x,b.y);});
const dirNum={north:1,east:2,south:3,west:4}[md.karelDir]-1;
const karel=new Karel(world,md.karelX,md.karelY,dirNum);
karel.beeperBag=md.karelBag;
currentWorld=world;currentKarel=karel;context.karel=karel;
renderWorld(world,karel);
showMain();
};
// Upload map file
document.getElementById('uploadMapButton').onclick=()=>{
const inp=document.getElementById('mapFileInput');
if(!inp.files.length){alert('Select a file.');return;}
const file=inp.files[0],ext=file.name.slice(file.name.lastIndexOf('.')).toLowerCase();
if(!['.txt','.kw'].includes(ext)){alert('Only .txt/.kw allowed.');return;}
const reader=new FileReader();
reader.onload=e=>{
try{
const md=parseMapFile(e.target.result);
uploadedMapData=md;
const world=new World(md.width,md.height);
md.walls.forEach(w=>{
world.walls[w.x][w.y][w.direction]=true;
if(w.direction==='east'&&w.x+1<world.width)world.walls[w.x+1][w.y].west=true;
if(w.direction==='south'&&w.y-1>=0)world.walls[w.x][w.y-1].north=true;
});
md.beepers.forEach(b=>{for(let i=0;i<b.count;i++)world.addBeeper(b.x,b.y);});
const dirNum={north:1,east:2,south:3,west:4}[md.karelDir]-1;
const karel=new Karel(world,md.karelX,md.karelY,dirNum);
karel.beeperBag=md.karelBag;
currentWorld=world;currentKarel=karel;context.karel=karel;
renderWorld(world,karel);
log('Map uploaded.');
}catch(err){
alert('Error parsing map: '+err.message);
}
};
reader.readAsText(file);
};
// Stop button
document.getElementById('stopButton').onclick=()=>{
stopRequested=true;
log('⏹ Execution stopped by user.');
};
/**********************************************************************
* 8. COMPILE & RUN
**********************************************************************/
document.getElementById('runButton').onclick=async()=>{
stopRequested=false;
document.getElementById('console').textContent='';
// build world & karel
let world,karel;
if(uploadedMapData){
const md=uploadedMapData;
world=new World(md.width,md.height);
md.walls.forEach(w=>{
world.walls[w.x][w.y][w.direction]=true;
if(w.direction==='east'&&w.x+1<world.width)world.walls[w.x+1][w.y].west=true;
if(w.direction==='south'&&w.y-1>=0)world.walls[w.x][w.y-1].north=true;
});
md.beepers.forEach(b=>{for(let i=0;i<b.count;i++)world.addBeeper(b.x,b.y);});
const dirNum={north:1,east:2,south:3,west:4}[md.karelDir]-1;
karel=new Karel(world,md.karelX,md.karelY,dirNum);
karel.beeperBag=md.karelBag;
} else {
world=new World(10,10);
karel=new Karel(world,0,0,DIRECTIONS.EAST);
}
currentWorld=world;currentKarel=karel;context.karel=karel;
renderWorld(world,karel);
// compile
log('=== Compilation ===');
let tokens,prog;
try{
tokens=new Lexer(document.getElementById('editor').value).tokenize();
prog=new Parser(tokens).parseProgram();
log('✅ Compilation successful.');
}catch(e){
return log(`⛔ Compilation error: ${e.message}`);
}
// execute
log('=== Execution ===');
try{
await executeProgramAsync(prog,context);
if(!stopRequested) log('✅ Execution complete.');
}catch(e){
if(e.message!=='Execution stopped by user'){
log(`⛔ Runtime error: ${e.message}`);
}
}
};
// Map-file parser (unchanged) ...
function parseMapFile(txt){
const lines=txt.split(/\r?\n/).map(l=>l.trim()).filter(l=>l);
if(!lines.length)throw new Error('File is empty.');
const hdr=lines[0].split(/\s+/);
if(hdr.length!==6)throw new Error('Header must have 6 tokens.');
const w=parseInt(hdr[0],10),h=parseInt(hdr[1],10),
x=parseInt(hdr[2],10)-1,y=parseInt(hdr[3],10)-1,
dir=hdr[4].toUpperCase(),bag=parseInt(hdr[5],10);
if([w,h,x+1,y+1,bag].some(n=>isNaN(n)))throw new Error('Invalid header.');
if(!['N','E','S','W'].includes(dir))throw new Error('Dir must be N/E/S/W.');
const mapDir={'N':'north','E':'east','S':'south','W':'west'};
const md={width:w,height:h,karelX:x,karelY:y,
karelDir:mapDir[dir],karelBag:bag,
walls:[],beepers:[]};
lines.slice(1).forEach((l,i)=>{
const p=l.split(/\s+/),t=p[0].toUpperCase();
if(t==='W'){
if(p.length!==4)throw new Error(`Line ${i+2}: W needs 4 tokens.`);
let xx=parseInt(p[1],10)-1,yy=parseInt(p[2],10)-1,d=p[3].toUpperCase();
if(isNaN(xx)||isNaN(yy)||!['N','E','S','W'].includes(d))
throw new Error(`Line ${i+2}: invalid wall.`);
if(d==='N'&&yy+1<h) md.walls.push({x:xx,y:yy+1,direction:'south'});
else if(d==='S') md.walls.push({x:xx,y:yy,direction:'south'});
else if(d==='E') md.walls.push({x:xx,y:yy,direction:'east'});
else if(d==='W'&&xx-1>=0)md.walls.push({x:xx-1,y:yy,direction:'east'});
}
else if(t==='B'){
if(p.length!==4)throw new Error(`Line ${i+2}: B needs 4 tokens.`);
let xx=parseInt(p[1],10)-1,yy=parseInt(p[2],10)-1,
c =parseInt(p[3],10);
if(isNaN(xx)||isNaN(yy)||isNaN(c))
throw new Error(`Line ${i+2}: invalid beeper.`);
md.beepers.push({x:xx,y:yy,count:c});
}
else throw new Error(`Line ${i+2}: must start W or B.`);
});
return md;
}
</script>
</body>
</html>

10
maintenance/index.html
View File

@ -1,10 +0,0 @@
<!-- maintenance/index.html -->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"/><title>Down for Maintenance</title></head>
<body style="text-align:center;padding:5em;font-family:sans-serif;">
<h1>⚙️ Site Under Maintenance</h1>
<p>We’ll be back shortly. Thank you for your patience!</p>
</body>
</html>

106
manual.html
View File

@ -1,106 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Karel Simulator — User Manual</title>
<style>
body {
background: #121212;
color: #e0e0e0;
font-family: monospace;
padding: 20px;
max-width: 800px;
margin: auto;
line-height: 1.4;
}
h1,h2 { color: #0f0; }
a { color: #0f0; text-decoration: none; }
a:hover { text-decoration: underline; }
code { background: #1e1e1e; padding: 2px 4px; border-radius: 3px; }
pre { background: #1e1e1e; padding: 10px; border-radius: 4px; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; margin: 10px 0; }
th, td { border: 1px solid #2a2a2a; padding: 6px; text-align: left; }
th { background: #1e1e1e; }
</style>
</head>
<body>
<h1>Karel the Robot – Quick-Start User Guide</h1>
<h2>1. What Is Karel?</h2>
<p>
Karel lives in a 2-D grid (“world”) of square cells.
He can face North/East/South/West, move one cell at a time,
pick up or put down “beepers,” and detect walls.
</p>
<h2>2. Simulator Interface</h2>
<ul>
<li><strong>Code Editor</strong>: Write your program here.</li>
<li><strong>Compile &amp; Run</strong>: Lex, parse, and execute step-by-step.</li>
<li><strong>Stop</strong>: Immediately halt execution (for infinite loops).</li>
<li><strong>Console</strong>: Logs moves, errors, and debug messages.</li>
<li><strong>Upload Map</strong>: Load a <code>.txt</code> or <code>.kw</code> world file.</li>
<li><strong>Map View</strong>: ASCII display of walls (red), beepers, and Karel (green).</li>
<li><strong>Manual Editor</strong>: Draw your own world, then import it.</li>
</ul>
<h2>3. Syntax Essentials</h2>
<ul>
<li>Every statement ends with a semicolon <code>;</code>.</li>
<li>Every command or condition <strong>must</strong> have parentheses <code>()</code>.</li>
<li>Use <code>if (…){…} [else{…}]</code> and <code>while (…){…}</code>.</li>
<li>Comments begin with <code>//</code>.</li>
</ul>
<h2>4. Built-in Commands</h2>
<h3>Movement</h3>
<table>
<tr><th>Command</th><th>Effect</th></tr>
<tr><td><code>move()</code></td><td>Step forward if no wall ahead.</td></tr>
<tr><td><code>turnLeft()</code></td><td>Rotate 90° counter-clockwise.</td></tr>
</table>
<h3>Beeper Handling</h3>
<table>
<tr><th>Command</th><th>Effect</th></tr>
<tr><td><code>pickBeeper()</code></td><td>Pick one beeper from current cell.</td></tr>
<tr><td><code>putBeeper()</code></td><td>Place one beeper into current cell.</td></tr>
</table>
<h3>Sensors &amp; Conditions</h3>
<table>
<tr><th>Condition</th><th>True When…</th></tr>
<tr><td><code>frontIsClear()</code></td><td>No wall immediately in front.</td></tr>
<tr><td><code>frontIsBlocked()</code></td><td>Wall immediately in front.</td></tr>
<tr><td><code>leftIsClear()</code></td><td>No wall on Karel’s left.</td></tr>
<tr><td><code>leftIsBlocked()</code></td><td>Wall on Karel’s left.</td></tr>
<tr><td><code>rightIsClear()</code></td><td>No wall on Karel’s right.</td></tr>
<tr><td><code>rightIsBlocked()</code></td><td>Wall on Karel’s right.</td></tr>
<tr><td><code>nextToABeeper()</code></td><td>One or more beepers in this cell.</td></tr>
<tr><td><code>notNextToABeeper()</code></td><td>No beepers in this cell.</td></tr>
<tr><td><code>facingNorth()</code>, <code>facingEast()</code>, …</td>
<td>Karel’s orientation matches the named direction.</td></tr>
<tr><td><code>anyBeepersInBeeperBag()</code></td><td>Bag contains ≥ 1 beeper.</td></tr>
<tr><td><code>noBeepersInBeeperBag()</code></td><td>Bag is empty.</td></tr>
</table>
<h2>5. Example</h2>
<pre><code>while ( notNextToABeeper() ) {
move();
}
pickBeeper();
turnLeft();
move();
putBeeper();</code></pre>
<h2>6. Tips</h2>
<ul>
<li>Sketch Karel’s path on graph paper first.</li>
<li>Always check <code>frontIsClear()</code> before <code>move()</code>.</li>
<li>Use the <strong>Stop</strong> button to escape accidental infinite loops.</li>
<li>Combine <code>if</code> and <code>while</code> for complex behaviors.</li>
</ul>
<p><a href="index.html" style="color:#0f0;">← Back to Simulator</a></p>
</body>
</html>

9
prepare-app.sh
View File

@ -1,9 +0,0 @@
#!/usr/bin/env bash
set -e
# Name for the Docker image
IMAGE_NAME="karel-simulator"
echo "🔨 Building Docker image '$IMAGE_NAME'..."
docker build -t "${IMAGE_NAME}" .
echo "✅ Image '${IMAGE_NAME}' built."

24
remove-app.sh
View File

@ -1,24 +0,0 @@
#!/usr/bin/env bash
set -e
IMAGE_NAME="karel-simulator"
CONTAINER_NAME="karel-simulator"
# Stop & remove the container if it exists
if docker ps -a --format '{{.Names}}' | grep -q "^${CONTAINER_NAME}\$"; then
echo "🗑️ Removing container '${CONTAINER_NAME}'..."
docker rm -f "${CONTAINER_NAME}"
echo "✅ Container removed."
else
echo "ℹ️ No container named '${CONTAINER_NAME}' to remove."
fi
# Remove the image if it exists
if docker images -q "${IMAGE_NAME}" >/dev/null; then
echo "🗑️ Removing image '${IMAGE_NAME}'..."
docker rmi "${IMAGE_NAME}"
echo "✅ Image removed."
else
echo "ℹ️ No image named '${IMAGE_NAME}' to remove."
fi

20
start-app.sh
View File

@ -1,20 +0,0 @@
#!/usr/bin/env bash
set -e
# 1) Clean up any existing containers (manual or compose)
for NAME in karel-simulator karel-redis; do
if docker ps -a --format '{{.Names}}' | grep -q "^${NAME}\$"; then
echo "🛑 Removing existing container '${NAME}'..."
docker rm -f "${NAME}" >/dev/null 2>&1 || true
fi
done
# 2) (Re)start both services in detached mode
echo "🚀 Starting multi-container application..."
docker compose up -d
# 3) Status
echo "✅ All containers are up:"
docker ps --filter "name=karel" --format " • {{.Names}} ({{.Image}}) → {{.Ports}}"
echo ""
echo "🌐 Simulator: http://localhost:8080/"

5
stop-app.sh
View File

@ -1,5 +0,0 @@
#!/usr/bin/env bash
set -e
echo "⏹ Shutting down all containers..."
docker-compose down
echo "✅ Stopped."