integrate editor

Author: Schnark

editor.js

@@ -29,10 +29,13 @@ function Editor (mapStr) {
 }
 
 Editor.isValid = function (map) {
+	//Checks for external data only
 	map = map.split('\n');
+	//height
 	if (map.length > 10) {
 		return false;
 	}
+	//width
 	if (map[0].length === 0 || map[0].length > 10) {
 		return false;
 	}
@@ -44,13 +47,27 @@ Editor.isValid = function (map) {
 		return false;
 	}
 	map = map.join('');
+	//only allowed elements
 	if (/[^a-eA-Ev<>^# ]/.test(map)) {
 		return false;
 	}
+	//Checks for both internal and external data
+	//exactly one starting point
 	if (map.replace(/[^v<>^]/g, '').length !== 1) {
 		return false;
 	}
-	//TODO
+	//at least one item
+	if (!/[a-e]/.test(map)) {
+		return false;
+	}
+	//items and targets match
+	if (
+		map.replace(/[^a-e]/g, '').split('').sort().join('') !==
+		map.replace(/[^A-E]/g, '').split('').sort().join('').toLowerCase()
+	) {
+		return false;
+	}
+	//accept anything else (even if it might be unsolvable)
 	return true;
 };
 
@@ -79,7 +96,7 @@ Editor.prototype.show = function (level) {
 Editor.prototype.hide = function () {
 	this.unbind();
 	this.editorArea.hidden = true;
-	this.runArea.hidden = true;
+	this.runArea.hidden = false;
 };
 
 Editor.prototype.getStr = function () {

game.js

@@ -1,7 +1,6 @@
-var codeInput, editor, soundCheckbox, levels;
+var codeInput, editor, soundCheckbox, levels, bonus;
 
 codeInput = new CodeInput();
-editor = new Editor(' ');
 
 soundCheckbox = document.getElementById('sound-checkbox');
 
@@ -29,16 +28,22 @@ levels = [
 	]}
 ];
 
-/*
+
 if (location.hash) {
-	levels.push({
+	bonus = decodeURIComponent(location.hash.slice(1));
+	if (!Editor.isValid(bonus)) {
+		bonus = false;
+	}
+}
+
+if (bonus) {
+	levels.splice(-1, 0, {
 		title: 'Bonus', levels: [
-			{title: 'Bonus', map: decodeURIComponent(location.hash.slice(1))} //TODO
+			{title: 'Bonus', map: bonus}
 		]
 	});
 }
-*/
-
+editor = new Editor(bonus || ' ');
 levels = new LevelCollection(levels);
 
 levels.init();

index.html

@@ -124,15 +124,14 @@ <h1 id="title"></h1>
 <div id="level-menu">
 </div>
 <div id="level-wrapper" hidden>
-<div id="map"></div>
 <div id="editor-area" hidden>
+Size: <input id="width-input" type="number" min="1" max="10">x<input id="height-input" type="number" min="1" max="10">
 <div id="radio-input"></div>
 <button id="done-button">Run level</button>
-<input id="width-input" type="number" min="1" max="10">x<input id="height-input" type="number" min="1" max="10">
 </div>
+<div id="map"></div>
 <div id="run-area">
 <div id="code"></div>
-<div id="error"></div>
 <button id="insert-go" data-key="_" class="button"></button>
 <button id="insert-left" data-key="&lt;" class="button"></button>
 <button id="insert-right" data-key="&gt;" class="button"></button>
@@ -150,6 +149,7 @@ <h1 id="title"></h1>
 <button id="cancel-button" class="button"><svg class="cancel"><use xlink:href="#cancel"/></svg></button>
 <button id="reset-button" class="button"><svg class="reset"><use xlink:href="#reset"/></svg></button>
 <input id="pause-input" type="range" min="0" max="10" value="3">
+<div id="error"></div>
 </div>
 </div>
 <footer>

info.js

@@ -1,7 +1,7 @@
 var info, data = [
-	'<p>Welcome! Your task is to programm a robot to run offline. You enter the code, and once you start the bot, you can no longer change it. You have to collect some items and drop them in special places.</p>',
-	'<p>Use the virtual keyboard to enter the code for the bot. You have to ' + display.symbol('code-up') + ' take the item, ' + display.symbol('code-go') + ' advance one step, and ' + display.symbol('code-down') + ' drop it.</p><p>Then ' + display.symbol('go') + ' run the code. If the bot crashes, you have to ' + display.symbol('reset') + ' reset it. Use the slider to regulate its speed.</p>',
-	'<p>You can also turn the bot and repeat parts of the code. For example ' + display.symbol('code-4') + display.symbol('code-right') + display.symbol('code-repeat') + ' will turn the bot four times clockwise, after which everything will be the same. To enter this code, use the ' + display.symbol('code-repeat') + ' key, increment using the + key, and insert the code to repeat in the middle.</p>',
+	'<p>Welcome! Your task is to programm a robot to run <b>offline</b>. You enter the code, and once you start the bot, you can no longer change it. You have to collect some items and drop them in special places.</p>',
+	'<p>Use the virtual keyboard to enter the code for the bot. You have to <kbd>' + display.symbol('code-up') + '</kbd> take the item, <kbd>' + display.symbol('code-go') + '</kbd> advance one step, and <kbd>' + display.symbol('code-down') + '</kbd> drop it.</p><p>Then <kbd>' + display.symbol('go') + '</kbd> run the code. If the bot crashes, you have to <kbd>' + display.symbol('reset') + '</kbd> reset it. Use the slider to regulate its speed.</p>',
+	'<p>You can also turn the bot and repeat parts of the code. For example <kbd>' + display.symbol('code-4') + display.symbol('code-right') + display.symbol('code-repeat') + '</kbd> will turn the bot four times clockwise, after which everything will be the same. To enter this code, use the <kbd>' + display.symbol('code-repeat') + '</kbd> key, increment using the <kbd>' + display.symbol('plus') + '</kbd> key, and insert the code to repeat in the middle (use <kbd>' + display.symbol('left') + display.symbol('right') + '</kbd> to move the cursor).</p>',
 	'This time, you have two items and two targets. Note that the bot can only carry one item at a time.</p>'
 ];
 

level-collection.js

@@ -66,7 +66,7 @@ LevelCollection.prototype.buildMenu = function () {
 		}
 		return '<h2>' + group.title + '</h2>' + group.levels.map(function (level, j) {
 			var best, symbol, id;
-			if (group.editor) {
+			if (!level.map) {
 				symbol = '';
 			} else if (solved < level.req || 0) {
 				symbol = 'lock';
@@ -88,7 +88,7 @@ LevelCollection.prototype.buildMenu = function () {
 			if (symbol === 'lock') {
 				id = 'disabled';
 			} else {
-				id = group.editor ? 'data-id="editor"' : 'data-id="' + i + '|' + j + '"';
+				id = level.map ? 'data-id="' + i + '|' + j + '"' : 'data-id="editor"';
 			}
 			return '<button ' + id + '>' + level.title + (symbol ? ' ' + display.symbol(symbol) : '') + '</button>';
 		}.bind(this)).join('');
@@ -133,10 +133,16 @@ LevelCollection.prototype.showEditor = function () {
 	var level = new Level(false, false, function (result, callback) {
 		callback();
 		if (result !== -1) {
-			//TODO
 			console.log(JSON.stringify(result));
-			this.show();
+			location = '#' + encodeURIComponent(result);
+			this.levelGroups[this.levelGroups.length - 1].levels[1] = {
+				title: 'New level',
+				map: result,
+				hash: generateHash(result)
+			};
+			this.buildMenu();
 		}
+		this.show();
 	}.bind(this));
 	this.menuArea.hidden = true;
 	level.showEditor();

level.js

@@ -71,7 +71,7 @@ Level.prototype.onStart = function () {
 		this.resetButton.disabled = false;
 		this.abortButton.disabled = false;
 		if (done) {
-			this.end(input.length); //TODO
+			this.end(input.length);
 		}
 	}.bind(this));
 	this.onUpdatePause();

map.js

@@ -22,7 +22,7 @@ Map.prototype.setType = function (x, y, type) {
 };
 
 Map.prototype.allDone = function () {
-	return !/[A-Z]/.test(this.grid.map(function (line) {
+	return !/[A-E]/.test(this.grid.map(function (line) {
 		return line.join('');
 	}).join(''));
 };

robot.js

@@ -48,7 +48,7 @@ Robot.prototype.take = function () {
 	}
 	pos = this.getNextPos();
 	type = this.map.getType(pos[0], pos[1]);
-	if (['a', 'b', 'c'].indexOf(type) === -1) {
+	if (['a', 'b', 'c', 'd', 'e'].indexOf(type) === -1) {
 		throw new Error('Nothing to take!');
 	}
 	this.item = type;
@@ -63,12 +63,12 @@ Robot.prototype.drop = function () {
 	}
 	pos = this.getNextPos();
 	type = this.map.getType(pos[0], pos[1]);
-	if (type !== this.item.toUpperCase()) {
+	if (type !== ' ' && type !== this.item.toUpperCase()) {
 		throw new Error('Can\'t drop it here!');
 	}
+	this.map.setType(pos[0], pos[1], type === ' ' ? this.item : '*');
 	this.item = '';
-	this.map.setType(pos[0], pos[1], '*');
-	sound.play('drop');
+	sound.play(type === ' ' ? 'drop' : 'drop-final');
 };
 
 Robot.prototype.step = function () {

style.css

@@ -1,10 +1,56 @@
+/*General*/
 html,
 body {
 	font-family: sans-serif;
 	margin: 0;
 	padding: 0;
 }
 
+#wrapper {
+	min-width: 20rem;
+	max-width: 45rem;
+	margin: auto;
+}
+
+header {
+	background-color: #48a;
+	color: white;
+	height: 3rem;
+}
+
+header button {
+	float: left;
+}
+
+header h1 {
+	margin: 0 3rem;
+	font-size: 150%;
+	line-height: 2;
+}
+
+header > span {
+	float: right;
+	padding-right: 1em;
+}
+
+#sound-checkbox {
+	display: none;
+}
+
+#sound-checkbox:checked ~ label .off {
+	display: none;
+}
+
+#sound-checkbox:not(:checked) ~ label .on {
+	display: none;
+}
+
+#level-menu,
+#level-wrapper {
+	margin: 0.5rem;
+}
+
+/*SVG*/
 svg {
 	width: 1.5rem;
 	height: 1.5rem;
@@ -47,6 +93,7 @@ svg.code-down {
 	color: blue;
 }
 
+/*Buttons*/
 .button:not([hidden]) {
 	display: inline-block;
 	border: thin solid;
@@ -69,67 +116,14 @@ svg.code-down {
 	color: #aaa;
 }
 
-#pause-input {
-	display: inline-block;
-	margin: 0.05em;
-	height: 3rem;
-	width: 6.1rem;
-	-moz-box-sizing: border-box;
-	box-sizing: border-box;
-	vertical-align: top;
-}
-
-#wrapper {
-	min-width: 20rem;
-	max-width: 45rem;
-	margin: auto;
-}
-
-header {
-	background-color: #48a;
-	color: white;
-	height: 3rem;
-}
-
 header .button:not([hidden]) {
 	border: none;
 	margin: 0;
 	background-color: transparent;
 	color: #fff;
 }
 
-header button {
-	float: left;
-}
-
-header h1 {
-	margin: 0 3rem;
-	font-size: 150%;
-	line-height: 2;
-}
-
-header > span {
-	float: right;
-	padding-right: 1em;
-}
-
-#sound-checkbox {
-	display: none;
-}
-
-#sound-checkbox:checked ~ label .off {
-	display: none;
-}
-
-#sound-checkbox:not(:checked) ~ label .on {
-	display: none;
-}
-
-#level-menu,
-#level-wrapper {
-	margin: 0.5rem;
-}
-
+/*Level Selection*/
 #level-menu button {
 	font-weight: bold;
 	margin: 0.5rem;
@@ -155,6 +149,7 @@ header > span {
 	right: 0;
 }
 
+/*Level Screen*/
 #map table {
 	margin: auto;
 	border-collapse: collapse;
@@ -180,11 +175,22 @@ header > span {
 	color: red;
 }
 
-footer {
-	background-color: black;
-	color: white;
+#pause-input {
+	display: inline-block;
+	margin: 0.05em;
+	height: 3rem;
+	width: 6.1rem;
+	-moz-box-sizing: border-box;
+	box-sizing: border-box;
+	vertical-align: top;
 }
 
+/*Level Editor*/
+input[type="number"] {
+	width: 2em;
+}
+
+/*Infobox*/
 #overlay {
 	background: rgba(100, 100, 100, .5);
 	position: fixed;
@@ -224,4 +230,10 @@ footer {
 
 #info-box {
 	padding: 0.5em;
+}
+
+/*Temporary*/
+footer {
+	background-color: black;
+	color: white;
 }