karel
Version:
Compilador y evaluador de Karel en javascript
824 lines (819 loc) • 26.7 kB
HTML
<html lang="es">
<head>
<meta charset="utf-8" />
<title>Karel.js</title>
<script
charset="utf-8"
src="lib/CodeMirror/lib/codemirror.js"
type="text/javascript"
></script>
<script
charset="utf-8"
src="lib/CodeMirror/addon/selection/active-line.js"
type="text/javascript"
></script>
<script
charset="utf-8"
src="lib/CodeMirror/addon/fold/foldcode.js"
type="text/javascript"
></script>
<script
charset="utf-8"
src="lib/CodeMirror/addon/fold/foldgutter.js"
type="text/javascript"
></script>
<script
charset="utf-8"
src="lib/CodeMirror/addon/fold/indent-fold.js"
type="text/javascript"
></script>
<script
charset="utf-8"
src="lib/CodeMirror/addon/mode/overlay.js"
type="text/javascript"
></script>
<script
charset="utf-8"
src="lib/jquery-1.12.0.min.js"
type="text/javascript"
></script>
<script
charset="utf-8"
src="js/jquery-electron-helper.js"
type="text/javascript"
></script>
<script
charset="utf-8"
src="lib/jquery.hammer.js"
type="text/javascript"
></script>
<script
charset="utf-8"
src="lib/jquery.sandbox.js"
type="text/javascript"
></script>
<script
charset="utf-8"
src="lib/bootstrap.min.js"
type="text/javascript"
></script>
<script
charset="utf-8"
src="lib/Split.js/split.js"
type="text/javascript"
></script>
<script charset="utf-8" src="js/syntax.js" type="text/javascript"></script>
<script charset="utf-8" src="js/karel.js" type="text/javascript"></script>
<script charset="utf-8" src="js/mundo.js" type="text/javascript"></script>
<script
charset="utf-8"
src="js/karelruby.js"
type="text/javascript"
></script>
<script
charset="utf-8"
src="js/kareljava.js"
type="text/javascript"
></script>
<script
charset="utf-8"
src="js/karelpascal.js"
type="text/javascript"
></script>
<script charset="utf-8" src="js/main.js" type="text/javascript"></script>
<link
href="lib/CodeMirror/lib/codemirror.css"
rel="stylesheet"
type="text/css"
/>
<link
href="lib/CodeMirror/addon/fold/foldgutter.css"
rel="stylesheet"
type="text/css"
/>
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link
href="css/bootstrap-responsive.min.css"
rel="stylesheet"
type="text/css"
/>
<!-- Themes -->
<link href="css/karel.css" rel="stylesheet" type="text/css" />
<link href="lib/CodeMirror/theme/3024-day.css" rel="stylesheet" />
<link href="lib/CodeMirror/theme/3024-night.css" rel="stylesheet" />
<link href="lib/CodeMirror/theme/abcdef.css" rel="stylesheet" />
<link href="lib/CodeMirror/theme/ambiance.css" rel="stylesheet" />
<link href="lib/CodeMirror/theme/base16-dark.css" rel="stylesheet" />
<link href="lib/CodeMirror/theme/bespin.css" rel="stylesheet" />
<link href="lib/CodeMirror/theme/base16-light.css" rel="stylesheet" />
<link href="lib/CodeMirror/theme/blackboard.css" rel="stylesheet" />
<link href="lib/CodeMirror/theme/cobalt.css" rel="stylesheet" />
<link href="lib/CodeMirror/theme/colorforth.css" rel="stylesheet" />
<link href="lib/CodeMirror/theme/dracula.css" rel="stylesheet" />
<link href="lib/CodeMirror/theme/eclipse.css" rel="stylesheet" />
<link href="lib/CodeMirror/theme/elegant.css" rel="stylesheet" />
<link href="lib/CodeMirror/theme/erlang-dark.css" rel="stylesheet" />
<link href="lib/CodeMirror/theme/hopscotch.css" rel="stylesheet" />
<link href="lib/CodeMirror/theme/icecoder.css" rel="stylesheet" />
<link href="lib/CodeMirror/theme/isotope.css" rel="stylesheet" />
<link href="lib/CodeMirror/theme/lesser-dark.css" rel="stylesheet" />
<link href="lib/CodeMirror/theme/liquibyte.css" rel="stylesheet" />
<link href="lib/CodeMirror/theme/material.css" rel="stylesheet" />
<link href="lib/CodeMirror/theme/mbo.css" rel="stylesheet" />
<link href="lib/CodeMirror/theme/mdn-like.css" rel="stylesheet" />
<link href="lib/CodeMirror/theme/midnight.css" rel="stylesheet" />
<link href="lib/CodeMirror/theme/monokai.css" rel="stylesheet" />
<link href="lib/CodeMirror/theme/neat.css" rel="stylesheet" />
<link href="lib/CodeMirror/theme/neo.css" rel="stylesheet" />
<link href="lib/CodeMirror/theme/night.css" rel="stylesheet" />
<link href="lib/CodeMirror/theme/paraiso-dark.css" rel="stylesheet" />
<link href="lib/CodeMirror/theme/paraiso-light.css" rel="stylesheet" />
<link href="lib/CodeMirror/theme/pastel-on-dark.css" rel="stylesheet" />
<link href="lib/CodeMirror/theme/railscasts.css" rel="stylesheet" />
<link href="lib/CodeMirror/theme/rubyblue.css" rel="stylesheet" />
<link href="lib/CodeMirror/theme/seti.css" rel="stylesheet" />
<link href="lib/CodeMirror/theme/solarized.css" rel="stylesheet" />
<link href="lib/CodeMirror/theme/the-matrix.css" rel="stylesheet" />
<link
href="lib/CodeMirror/theme/tomorrow-night-bright.css"
rel="stylesheet"
/>
<link
href="lib/CodeMirror/theme/tomorrow-night-eighties.css"
rel="stylesheet"
/>
<link href="lib/CodeMirror/theme/ttcn.css" rel="stylesheet" />
<link href="lib/CodeMirror/theme/twilight.css" rel="stylesheet" />
<link href="lib/CodeMirror/theme/vibrant-ink.css" rel="stylesheet" />
<link href="lib/CodeMirror/theme/xq-dark.css" rel="stylesheet" />
<link href="lib/CodeMirror/theme/xq-light.css" rel="stylesheet" />
<link href="lib/CodeMirror/theme/yeti.css" rel="stylesheet" />
<link href="lib/CodeMirror/theme/zenburn.css" rel="stylesheet" />
<style media="screen" type="text/css">
body {
overflow: hidden;
}
#splitter-container {
position: absolute;
top: 100px;
bottom: 0px;
left: 0px;
right: 0px;
z-index: 1;
}
#editor,
.CodeMirror {
margin: 0px;
width: 100%;
height: 100%;
font-family: Monaco, Menlo, 'Ubuntu Mono', Consolas, source-code-pro,
monospace;
font-size: 12px;
line-height: 15px;
}
.breakpoints {
width: 0.8em;
font-size: 0.5em;
}
.breakpoint {
color: #822;
font-size: 0.4em;
}
.cm-tab {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAMCAYAAAAkuj5RAAAAAXNSR0IArs4c6QAAAGFJREFUSMft1LsRQFAQheHPowAKoACx3IgEKtaEHujDjORSgWTH/ZOdnZOcM/sgk/kFFWY0qV8foQwS4MKBCS3qR6ixBJvElOobYAtivseIE120FaowJPN75GMu8j/LfMwNjh4HUpwg4LUAAAAASUVORK5CYII=);
background-position: right;
background-repeat: no-repeat;
}
.input-prepend {
margin-top: 10px;
}
#mensajes {
overflow-y: scroll;
padding: 0 10px 10px 10px;
}
#pila {
overflow-y: scroll;
padding: 0 10px 10px 10px;
}
pre.error-popup {
display: none;
position: absolute;
left: 3em;
top: 1em;
border: 1px solid #000;
background: #ff8;
width: 30em;
z-index: 10;
padding: 5px;
white-space: normal;
}
.error:hover .error-popup {
display: block;
}
.parse-error {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAYAAAC09K7GAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3QsEBjIX8OiuEwAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAAAgSURBVAjXPcixAQAwDMMgnP9/VrcyIgqVcGrIBh38rD25RQ/6x3pUhQAAAABJRU5ErkJggg==);
background-repeat: repeat-x;
background-position: 0 100%;
}
.karel-current-line {
background: rgba(255, 255, 0, 0.8);
}
.ace_gutter-cell.ace_breakpoint {
border-radius: 20px 0px 0px 20px;
box-shadow: 0px 0px 1px 1px red inset;
}
.dropdown {
z-index: 1000;
}
.gutter {
background-color: #eee;
background-repeat: no-repeat;
background-position: 50%;
}
.gutter.gutter-horizontal {
background-image: url('lib/Split.js/grips/vertical.png');
cursor: col-resize;
}
.gutter.gutter-vertical {
background-image: url('lib/Split.js/grips/horizontal.png');
cursor: row-resize;
}
.split {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
overflow-y: auto;
overflow-x: hidden;
}
.split.split-horizontal,
.gutter.gutter-horizontal {
height: 100%;
float: left;
}
@media (max-width: 1199px) {
.visible-lg {
display: none;
}
}
@media (max-width: 979px) {
.hidden-mobile {
display: none;
}
}
</style>
</head>
<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button
class="btn btn-navbar"
data-target=".nav-collapse"
data-toggle="collapse"
type="button"
>
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="#">Karel.js</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#"
>Mundo <strong class="caret"></strong
></a>
<ul class="dropdown-menu">
<li>
<a href="#" id="newworld"
><em class="icon-star"></em> Nuevo</a
>
</li>
<li>
<a href="#" id="worldload"
><em class="icon-folder-open"></em> Abrir .in</a
>
</li>
<li>
<a data-toggle="modal" href="#importar_modal"
><em class="icon-folder-open"></em> Importar MDO/KEC</a
>
</li>
<li class="divider"></li>
<li>
<a href="#" id="worldsave"
><em class="icon-download-alt"></em> Guardar .in</a
>
</li>
<li>
<a data-toggle="modal" href="#guardar_modal" id="save_out"
><em class="icon-download-alt"></em> Guardar .out</a
>
</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#"
>Código <strong class="caret"></strong
></a>
<ul class="dropdown-menu">
<li>
<a href="#" id="pascalsyntax"
><em class="icon-star"></em> Nuevo (Pascal)</a
>
</li>
<li>
<a href="#" id="javasyntax"
><em class="icon-star"></em> Nuevo (Java)</a
>
</li>
<li>
<a href="#" id="rubysyntax"
><em class="icon-star"></em> Nuevo (Ruby)</a
>
</li>
<li>
<a href="#" id="codeload"
><em class="icon-folder-open"></em> Abrir</a
>
</li>
<li class="divider"></li>
<li>
<a href="#" id="codesave"
><em class="icon-download-alt"></em> Guardar</a
>
</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#"
>Opciones <strong class="caret"></strong
></a>
<ul class="dropdown-menu">
<li>
<a href="#" id="theme"
><em class="icon-pencil"></em> Tema</a
>
</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#"
>Ayuda <strong class="caret"></strong
></a>
<ul class="dropdown-menu">
<li>
<a href="ayuda.html" target="_blank"
><em class="icon-book"></em> Manual y trucos</a
>
</li>
<li class="divider"></li>
<li>
<a data-toggle="modal" href="#acerca_de_modal"
><em class="icon-question-sign"></em> Acerca de</a
>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="container" style="margin-top: 50px;">
<div class="row">
<div class="span12 hidden-mobile">
<div class="btn-group">
<button
class="btn"
data-toggle="tooltip"
id="worldclean"
title="Regresar el mundo a su estado original"
>
<em class="icon-repeat"></em>
</button>
</div>
<div class="btn-group">
<button
class="btn"
data-toggle="tooltip"
id="compilar"
title="Compilar"
>
<em class="icon-th-large"></em>
</button>
<button
class="btn"
data-toggle="tooltip"
id="ejecutar"
title="Ejecutar"
>
<em class="icon-play"></em>
</button>
<button
class="btn"
data-toggle="tooltip"
id="paso"
title="Paso a paso"
>
<em class="icon-forward"></em>
</button>
<button
class="btn"
data-toggle="tooltip"
id="futuro"
title="Ver el futuro"
>
<em class="icon-eye-open"></em>
</button>
</div>
<div class="btn-group">
<button
class="btn"
data-toggle="tooltip"
id="go_home"
title="Volver a 1,1"
>
<em class="icon-home"></em>
</button>
<button
class="btn"
data-toggle="tooltip"
id="follow_karel"
title="Ve a donde esté Karel"
>
<em class="icon-arrow-up"></em>
</button>
<button
class="btn"
data-toggle="tooltip"
id="quitar_zumbadores"
title="Quitar zumbadores"
>
<em class="icon-minus-sign"></em>
</button>
</div>
<div class="btn-group">
<div class="input-prepend input-append">
<span
class="add-on"
title="El número de zumbadores en la mochila con los que inicia Karel"
>Mochila</span
>
<input class="span1" id="mochila" type="text" value="0" />
<button class="btn" id="inf_zumbadores">INF</button>
</div>
</div>
<div class="btn-group visible-lg">
<div class="input-prepend input-append">
<span
class="add-on"
title="El tiempo (en milisegundos) de espera entre pasos de Karel"
>Retraso</span
>
<input class="span1" id="retraso_txt" type="text" value="500" />
<button class="btn" id="retraso_minus">
<em class="icon-minus-sign"></em>
</button>
<button class="btn" id="retraso_plus">
<em class="icon-plus-sign"></em>
</button>
</div>
</div>
<div class="btn-group">
<div class="input-prepend input-append">
<span class="add-on" title="Número de filas">Filas</span>
<input class="span1" id="filas" type="text" value="100" />
<span class="add-on" title="Número de columnas">Columnas</span>
<input class="span1" id="columnas" type="text" value="100" />
</div>
</div>
<div class="btn-group">
<button
class="btn"
data-toggle="tooltip"
id="evaluacion"
title="Modificar condiciones del evaluador"
>
<span class="icon-ok"></span> Evaluador
</button>
</div>
</div>
</div>
</div>
<div id="splitter-container">
<div class="split split-horizontal" id="splitter-left-pane">
<div class="split content" id="splitter-left-top-pane">
<textarea id="editor">
iniciar-programa
inicia-ejecucion
{ TODO poner codigo aqui }
apagate;
termina-ejecucion
finalizar-programa</textarea
>
</div>
<div class="split content tabbable" id="splitter-left-bottom-pane">
<!-- Only required for left/right tabs -->
<ul class="nav nav-tabs">
<li>
<a data-toggle="tab" href="#pila">Pila</a>
</li>
<li class="active">
<a data-toggle="tab" href="#mensajes"
>Mensajes <span id="mensajes_cuenta"></span
></a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane" id="pila">
<table class="table table-striped table-hover"></table>
</div>
<div class="tab-pane active" id="mensajes"></div>
</div>
</div>
</div>
<div class="split split-horizontal" id="splitter-right-pane">
<canvas height="400" id="world" width="574"></canvas>
</div>
</div>
<div
class="dropdown clearfix"
id="wcontext_menu"
style="position: absolute; top: 150px; left: 700px; display: none;"
>
<ul
class="dropdown-menu"
style="display: block; position: static; margin-bottom: 5px;"
>
<li>
<a href="#" id="ctx_norte">Situar a karel al norte</a>
</li>
<li>
<a href="#" id="ctx_sur">Situar a karel al sur</a>
</li>
<li>
<a href="#" id="ctx_este">Situar a karel al este</a>
</li>
<li>
<a href="#" id="ctx_oeste">Situar a karel al oeste</a>
</li>
<li class="divider"></li>
<li>
<a href="#" id="n_zumbadores">N zumbadores</a>
</li>
<li>
<a href="#" id="inf_zumbadores_ctx">infinitos zumbadores</a>
</li>
<li>
<a href="#" id="cero_zumbadores">0 zumbadores</a>
</li>
<li class="divider"></li>
<li>
<a href="#" id="toggle_dump_cell">Desplegar casilla</a>
</li>
</ul>
</div>
<div
aria-hidden="true"
aria-labelledby="myModalLabel"
class="modal hide fade"
id="acerca_de_modal"
role="dialog"
tabindex="-1"
>
<div class="modal-header">
<button
aria-hidden="true"
class="close"
data-dismiss="modal"
type="button"
>
×
</button>
<h3 id="myModalLabel">Karel.js</h3>
</div>
<div class="modal-body">
<p><em>Karel escrito en javascript</em></p>
<p>Desarrollado por:</p>
<ul>
<li>alanboy</li>
<li>joemmanuel</li>
<li>lhchavez</li>
<li>
<a href="https://twitter.com/categulario" target="_blank"
>Categulario</a
>
</li>
<li>
<a href="https://twitter.com/pacharrin" target="_blank">Pacha</a>
</li>
</ul>
</div>
<div class="modal-footer">
<button aria-hidden="true" class="btn" data-dismiss="modal">
Cerrar
</button>
</div>
</div>
<div
aria-hidden="true"
aria-labelledby="guardarLabel"
class="modal hide fade"
id="guardar_modal"
role="dialog"
tabindex="-1"
>
<div class="modal-header">
<button
aria-hidden="true"
class="close"
data-dismiss="modal"
type="button"
>
×
</button>
<h3 id="guardarLabel">Guardar archivo</h3>
</div>
<div class="modal-body">
<pre id="guardar_salida"></pre>
</div>
<div class="modal-footer">
<a href="#" id="guardar_descargar">Descargar archivo</a>
<button aria-hidden="true" class="btn" data-dismiss="modal">
Cerrar
</button>
</div>
</div>
<div
aria-hidden="true"
aria-labelledby="importLabel"
class="modal hide fade"
id="importar_modal"
role="dialog"
tabindex="-1"
>
<div class="modal-header">
<button
aria-hidden="true"
class="close"
data-dismiss="modal"
type="button"
>
×
</button>
<h3 id="importLabel">Importar MDO/KEC</h3>
</div>
<div class="modal-body">
<form id="importar" name="importar">
<div class="form-group">
<label>MDO: <input id="importar_mdo" type="file" /></label>
<label>KEC: <input id="importar_kec" type="file" /></label>
</div>
</form>
</div>
<div class="modal-footer">
<input class="btn" type="submit" value="Importar" />
</div>
</div>
<div
aria-hidden="true"
aria-labelledby="importLabel"
class="modal hide fade"
id="prompt_modal"
role="dialog"
tabindex="-1"
>
<div class="modal-header">
<button
aria-hidden="true"
class="close"
data-dismiss="modal"
type="button"
>
×
</button>
<h4 class="modal-title">Mensaje</h4>
</div>
<div class="modal-body">
<form>
<div class="form-group group-value">
<label for="prompt-value"></label>
<input id="prompt-value" type="text" />
</div>
<div class="form-group group-select">
<label for="prompt-select"></label>
<select id="prompt-select"> </select>
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-primary" type="button">Aceptar</button>
</div>
</div>
<div
aria-hidden="true"
aria-labelledby="importLabel"
class="modal hide fade"
id="evaluacion_modal"
role="dialog"
tabindex="-1"
>
<div class="modal-header">
<button
aria-hidden="true"
class="close"
data-dismiss="modal"
type="button"
>
×
</button>
<h4 class="modal-title">Evaluación</h4>
</div>
<div class="modal-body">
<fieldset>
<h4>Despliega</h4>
<div class="btn-group" data-toggle="buttons-checkbox">
<button
class="btn"
id="posicion_karel"
title="La solución depende de la posición final de Karel"
>
Posición
</button>
<button
class="btn"
id="orientacion_karel"
title="La solución depende de la orientación final de Karel"
>
Orientación
</button>
<button
class="btn"
id="mochila_karel"
title="La solución depende del estado final de la mochila de Karel"
>
Mochila
</button>
<button
class="btn"
id="universo"
title="La solución va a hacer dump de todos los zumbadores del mundo"
>
Zumbadores
</button>
</div>
<h4>Cuenta instrucciones</h4>
<div class="btn-group" data-toggle="buttons-checkbox">
<button
class="btn"
id="dump_avanza"
title="La solución depende del número de instrucciones avanza"
>
Avanza
</button>
<button
class="btn"
id="dump_gira_izquierda"
title="La solución depende del número de instrucciones gira-izquierda"
>
Gira izquierda
</button>
<button
class="btn"
id="dump_coge_zumbador"
title="La solución depende del número de instrucciones coge-zumbador"
>
Coge zumbador
</button>
<button
class="btn"
id="dump_deja_zumbador"
title="La solución depende del número de instrucciones deja-zumbador"
>
Deja zumbador
</button>
</div>
</fieldset>
</div>
<div class="modal-footer">
<button aria-hidden="true" class="btn" data-dismiss="modal">
Cerrar
</button>
</div>
</div>
<script id="xmlMundo" type="application/x-karel-input">
<ejecucion>
<condiciones instruccionesMaximasAEjecutar="10000000" longitudStack="65000" />
<mundos>
<mundo nombre="mundo_0" ancho="100" alto="100">
</mundo>
</mundos>
<programas tipoEjecucion="CONTINUA" intruccionesCambioContexto="1" milisegundosParaPasoAutomatico="0">
<programa nombre="p1" ruta="{$2$}" mundoDeEjecucion="mundo_0" xKarel="1" yKarel="1" direccionKarel="NORTE" mochilaKarel="0" >
</programa>
</programas>
</ejecucion>
</script>
</body>
</html>