Added an "About" screen. Laid down some TypeScript infrastructure and…

… moved a little bit of the code over to it.

.gitignore

@@ -1,3 +1,6 @@
 php/includes/config_mysqlConnection_live.php
 tools/build/artifacts/**/*.*
-tools/build/temp/**/*.*
+tools/build/temp/**/*.*
+src.typeScript/**/*.map
+src.typeScript/**/*.js
+node_modules

.vscode/tasks.json

@@ -23,7 +23,7 @@
             "problemMatcher": []
         },
         {
-            "label": "build",
+            "label": "create release",
             "type": "process",
             "command": "${config:php.executablePath}",
             "args": [

README.md

@@ -23,6 +23,9 @@ Prerequisites
     - Add the following extensions following the configuration guides of each:
         - [PHP Intellisense](https://marketplace.visualstudio.com/items?itemName=felixfbecker.php-intellisense)
         - [PHP Debug](https://marketplace.visualstudio.com/items?itemName=felixfbecker.php-debug)
+- TypeScript compiler
+    - Ensure you have [Node](https://nodejs.org/) installed.
+    - `npm install-g typescript `
 - MySQL (Optional)
     - It's possible to test the simulator without a database setup as it's only needed for functionality such as authentication and reading/saving user data. Due to no immediate need, I haven't yet taken the time to work out how get the database up and running again on my machine along with documenting the process. In theory MariaDB should also be a viable option. I have included below a dump of the SQL Schema from MySQL workbench.
 
@@ -134,6 +137,14 @@ Prerequisites
             ```
         </details>
 
+Compiling the code
+---
+
+Compile artifacts and the `node_modules` folder are in the `.gitignore` file, so even if the webserver is set up, the project will not run until the following two steps have been performed:
+
+- `npm -i` in your console. Required by TypeScript files which are using @types packages.
+- Running the a `tsc` task against the code's `tsconfig.ts`. The easiest way to do this in VS Code is to press `Ctrl+Shift+B` and then select `tsc: watch - tsconfig.json`. This will perform an immediate compile of all the files and then watches the files to automatically recompile them any time they change.
+
 Running the Website
 ---
 

package.json

@@ -0,0 +1,23 @@
+{
+  "name": "mc_rss",
+  "version": "1.0.0",
+  "description": "Mordritch's JavaScript Redstone Simulator\r ===",
+  "main": "index.js",
+  "dependencies": {
+    "@types/jquery": "^1.10.31"
+  },
+  "devDependencies": {},
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/JonathanLydall/JavaScript-Redstone-Simulator.git"
+  },
+  "author": "Jonathan Lydall",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/JonathanLydall/JavaScript-Redstone-Simulator/issues"
+  },
+  "homepage": "https://github.com/JonathanLydall/JavaScript-Redstone-Simulator#readme"
+}

php/includes/class_localization.php

@@ -38,6 +38,13 @@ private static function _init() {
 		foreach ($languagesFile as $languageLine)
 		{
 			$langArray = mb_split("=", $languageLine);
+
+			// We don't yet have a way to change the locale file used,
+			// so until we do, let's skip generating them
+			if ($langArray[0] != "en_US") {
+				continue;
+			}
+
 			self::$languages[$langArray[0]] = $langArray[1];
 		}
 	}

resources/locales/en_US.txt

@@ -192,6 +192,8 @@ options.toolbars.count=Number of toolbars
 document.info.prompt.title=Schematic Information
 document.filesize=File size at the time of the last save:
 
+helpAboutModal.title=About
+
 document.new.prompt.title=New Schematic
 document.new.prompt.content=Any unsaved content will be lost, are you sure you want to create a new schematic?
 
@@ -265,8 +267,8 @@ toolbar.top.tooltips.input.title=Input Bindings
 toolbar.top.tooltips.input.description=Change keyboard and mouse shortcuts here.
 toolbar.top.tooltips.toolbars.title=Edit Tools / Materials
 toolbar.top.tooltips.toolbars.description=Use this screen to add or remove tools and/or materials from the side toolbar.\n\nClick and drag icons to place them in the toolbar slots. 
-toolbar.top.tooltips.help.title=Help Screen
-toolbar.top.tooltips.help.description=
+toolbar.top.tooltips.helpAbout.title=About Screen
+toolbar.top.tooltips.helpAbout.description=
 toolbar.top.tooltips.fileNew.title=New Schematic
 toolbar.top.tooltips.fileNew.description=Creates a new blank schematic.
 toolbar.top.tooltips.fileOpen.title=Open Schematic
@@ -342,6 +344,7 @@ shortcuts.toolbar.top.schematicDownload=Download Saved Copy
 shortcuts.toolbar.top.viewPortsSplitHorizontally=Split View Ports Horizontally
 shortcuts.toolbar.top.viewPortsSplitVertically=Split View Ports Vertically
 shortcuts.toolbar.top.documentRotate=Rotate Schematic
+shortcuts.toolbar.top.helpAbout=About Screen
 
 shortcuts.toolbar.top.editSelect=Select
 shortcuts.toolbar.top.editCopy=Copy Selection

src.typeScript/gui/full/modal.ts

@@ -0,0 +1,219 @@
+/*
+ * JavaScript Redstone Simulator
+ * Copyright (C) 2012  Jonathan Lydall (Email: [email protected])
+ * 
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU General Public License
+ * as published by the Free Software Foundation; either version 2
+ * of the License, or (at your option) any later version.
+ * 
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ * 
+ * You should have received a copy of the GNU General Public License
+ * along with this program; if not, write to the Free Software
+ * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA. 
+ * 
+ */
+
+namespace com.mordritch.mcSim {
+	export class guiFullModal {
+		domId: string;
+		jqDomId: string;
+		localizer: localization;
+		eventBindings: { [index: string]: Function[] } = {};
+		isShowing: boolean = false;
+		modalDomIdCounter: number = 0;
+		domClass: string = "panel";
+		defaultButton: string = "";
+		loadingIcon: string = '<img src="images/loading1.gif" alt="">';
+
+		constructor(
+			private gui: gui,
+			private makeClosedButtonDefault: boolean
+		) {
+			if ($("#modalBackground").length == 0) {
+				$('body').append('<div id="modalBackground"></div>');
+				$("#modalBackground").hide().disableSelection();
+			}
+
+			this.domId = 'domId_'+com.mordritch.mcSim.domIdCounter++;
+			this.jqDomId = '#' + this.domId;
+			this.localizer = gui.localization;
+
+			var html =
+				'<div class="guiFullModal ' + this.domClass + '" id="'+this.domId+'" style="display: none;">' +
+					'<div class="guiModal_innerContent"></div>' +
+					'<span class="guiModal_Feedback"></span>' +
+					'<span class="guiModal_Buttons"></span>' +
+				'</div>' +
+				'';
+			$('body').append(html);
+
+			this.addButton(this.localizer.getString('button.text.cancel'), 'guiModal_closeButton', () => this.hide(), makeClosedButtonDefault);
+		}
+
+		/**
+		 * Change the CSS class that is applied to the modal, for example, one style would make it a large modal, another could make it a much smaller modal.
+		 * 'prompt' makes a small prompt box
+		 * 'panel' makes it the general "options" type of modal, this is the default
+		 *  
+		 */
+		setDomClass(domClass: string): void {
+			$(this.jqDomId).removeClass(this.domClass);
+			this.domClass = domClass;
+			$(this.jqDomId).addClass(this.domClass);
+		}
+
+		setContent(html: string): void {
+			$(this.jqDomId+' .guiModal_innerContent').html(html);
+		};
+
+		setFeedbackText(html: string): void {
+			$(this.jqDomId+' .guiModal_Feedback').html(html);
+		};
+
+		setCloseButtonText(html: string): void {
+			$(this.jqDomId+' .guiModal_closeButton').html(html);
+		};
+
+		/**
+		 * Adds an extra button to the bottom area of the modal, to the left of the cancel button
+		 * 
+		 * @param	{String}	label				The display label for the button
+		 * @param	{String}	classAttribute		Optional additional class attribute for the button
+		 * @param	{Function}	onActivateFunction	A function bound to when it's clicked on or has enter/space hit while focussed
+		 * @param	{Function}	isDefault			Automatically recieves focus when shown
+		 */
+		addButton(
+			param1: string | { label: string, classAttribute?: string, onActivateFunction: Function, isDefault?: boolean },
+			classAttributeParameter?: string,
+			onActivateFunctionParameter?: Function,
+			isDefaultParameter?: boolean
+		): void {
+			if (!param1)
+				throw new Error("param1 is mandatory");
+
+			//New method uses a jquery like method to receive paramaters via objects, however, this is backwards compatiable too
+			var label: string;
+			var onActivateFunction: Function;
+			var classAttribute: string | undefined;
+			var isDefault: boolean | undefined;
+
+			if (typeof param1 == "object") {
+				label = param1.label;
+				onActivateFunction = param1.onActivateFunction;
+				classAttribute = param1.classAttribute || '';
+				isDefault = param1.isDefault || false;
+			}
+			else {
+				if (!onActivateFunctionParameter)
+					throw new Error("onActivateFunction is mandatory");
+				label = param1;
+				onActivateFunction = onActivateFunctionParameter;
+				classAttribute = classAttributeParameter;
+				isDefault = isDefaultParameter;
+			}
+
+
+			var domId = 'modal_button_' + this.domId +'_'+ this.modalDomIdCounter++;
+			var html = '<span id="' + domId + '" role="button" tabindex="0" class="button '+classAttribute+'">'+label+'</span>';
+			if (isDefault) this.defaultButton = domId;
+			$(this.jqDomId+' .guiModal_Buttons').prepend(html);
+			$('#'+domId).bind('click keyup', (e) => {
+				if ($(e.delegateTarget).hasClass('disabled')) return;
+
+				if (
+					(e.type == "keyup" && (e.which == 13 || e.which == 32)) ||
+					(e.type == "click" && e.which == 1)
+				) onActivateFunction();
+			});
+		}
+
+		toggleShown(): void {
+			if (this.isShowing) {
+				this.hide();
+			}
+			else {
+				this.show();
+			}
+		}
+
+		show(): void {
+			$('#modalBackground').show();
+			if (this.isShowing) return; //already showing, return
+			this.isShowing = true;
+			$(this.jqDomId).css('display','block');
+			$(document).bind('keyup.' + this.domId, {t: this}, function(e) {
+				if (e.which == 27) { //27 "Escape" key on keyboard. 
+					e.data.t.hide();
+				}
+			});
+
+			if (this.defaultButton != "") $('#'+this.defaultButton).focus();
+
+			this.gui.pauseBindings();
+			this.triggerEvent('show');
+
+			this.gui.ticker.pause();
+		}
+
+		hide(): void {
+			$('#modalBackground').hide();
+			if (!this.isShowing) return; //already hidden, return
+			this.isShowing = false;
+			$(this.jqDomId).css('display','none');
+			$(document).unbind('keyup.' + this.domId);
+			this.gui.resumeBindings();
+			this.triggerEvent('hide');
+			this.gui.ticker.resume();
+		}
+
+		/**
+		 * Allows callback bindings
+		 * 
+		 * For example, a callback could be called when the modal is shown or hidden.
+		 */
+		bind(eventName: string, callbackFunction: Function): void {
+			if (typeof this.eventBindings[eventName] == "undefined") {
+				this.eventBindings[eventName] = [];
+			}
+
+			this.eventBindings[eventName].push(callbackFunction);
+		}
+
+		/**
+		 * Used within the modal to trigger events so any bound callbacks are called.
+		 */
+		triggerEvent(eventName: string): void {
+			if (typeof this.eventBindings[eventName] != "undefined") {
+				for (var i in this.eventBindings[eventName]) {
+					this.eventBindings[eventName][i]();
+				}
+			}
+		}
+
+		disableControls(): void {
+			$(this.jqDomId + ' .button').addClass("disabled");
+			$(this.jqDomId + ' input').attr("disabled", "disabled");
+
+		}
+
+		startWaitingForServer(message: string): void {
+			this.disableControls();
+			this.setFeedbackText('<img src="images/loading1.gif" alt=""> ' + message);
+		}
+
+		enableControls(): void {
+			$(this.jqDomId + ' .button').removeClass("disabled");
+			$(this.jqDomId + ' input').removeAttr("disabled");
+		}
+
+		stopWaitingForServer(): void {
+			this.enableControls();
+			this.setFeedbackText('');
+		}
+	}
+}

src.typeScript/gui_FullApp.d.ts

@@ -0,0 +1,8 @@
+declare namespace com.mordritch.mcSim {
+	export class gui {
+		localization: localization;
+		pauseBindings(): void;
+		ticker: ticker;
+		resumeBindings(): void;
+	}
+}

src.typeScript/helpAboutModal.ts

@@ -0,0 +1,27 @@
+namespace com.mordritch.mcSim {
+    export class helpAboutModal {
+        private modal: guiFullModal;
+        private L10n: localization;
+
+        constructor(gui: gui) {
+            this.L10n = gui.localization;
+
+            this.modal = new guiFullModal(gui, false);
+            // this.modal.addButton({
+            //     label: this.L10n.getString("button.text.ok"),
+            //     onActivateFunction: () => {
+            //         this.modal.hide();
+            //     }});
+        }
+
+        show(): void {
+            this.modal.setContent(
+                '<div class="documentInfo standardForm">' +
+                    '<p><b>'+this.L10n.getString("helpAboutModal.title")+'</b></p>' +
+                    '<p>Created by Jonathan Lydall (Mordritch)</p>' +
+                '</div>'
+            );
+            this.modal.show();
+        }
+    }
+}

src.typeScript/localization.d.ts

@@ -0,0 +1,5 @@
+declare namespace com.mordritch.mcSim {
+	export class localization {
+		getString(resourceName: string): string;
+	}
+}

src.typeScript/main.d.ts

@@ -0,0 +1,5 @@
+declare namespace com.mordritch {
+	export class mcSim {
+		static domIdCounter: number;
+	}
+}