Support decimal numbers in editor

Author: RolandR

_css/editor.css

@@ -38,6 +38,11 @@
 	font-weight: bold;
 }
 
+.e-decimal{
+	color: #00BBDD;
+	font-weight: bold;
+}
+
 .e-valid-char{
 	color: #AA00FF;
 	font-weight: bold;

_css/periphery.css

@@ -2,12 +2,16 @@
 	Styles for periphery device related stuff.
 */
 
-#octalDisplay{
+#octalDisplay, #joystick{
 	width: 121px;
 	margin-top: 5px;
 	margin-left: 5px;
 }
 
+#octJoystick{
+	display: inline-block;
+}
+
 #octalDisplay .displayContainer{
 	background-color: #000000;
 	margin: 5px auto;
@@ -23,6 +27,10 @@
 	background-image: url(../_media/sevensegment.png);
 }
 
+#joystick .joystickContainer{
+	margin: 5px 5px;
+}
+
 #dotMatrix{
 	width: 246px;
 	margin-top: 5px;

_js/Assembler.js

@@ -59,6 +59,12 @@ var Assembler = new function(){
 				if(lines[i][l].substring(0, 1) == "#"){
 					lines[i][l] = binToOct(lines[i][l].substring(1, lines[i][l].length));
 				}
+
+				// Values ending with . are decimal.
+				// Translate them to octal
+				if(lines[i][l].substring(lines[i][l].length-1, lines[i][l].length) == "."){
+					lines[i][l] = decToOct(lines[i][l].substring(0, lines[i][l].length-1));
+				}
 
 				// Remove emtpy entries
 				if(lines[i][l] == ""){

_js/Editor.js

@@ -79,6 +79,8 @@ function Editor(
 				}
 			} else if(fragment.substring(0, 1) == "#"){	// Binary value
 				code[c] = '<span class="e-binary" title="Octal: '+binToOct(fragment)+'">'+fragment+"</span>";
+				} else if(fragment.substring(fragment.length-1, fragment.length) == "."){	// Decimal value
+				code[c] = '<span class="e-decimal" title="Octal: '+binToOct(fragment)+'">'+fragment+"</span>";
 			} else if(/^([0-7]*)$/.test(fragment) === true && fragment.length > 0){	// Octal value
 				code[c] = '<span class="e-octal" title="Binary: '+octToBin(fragment)+'">'+fragment+"</span>";
 			}

index.html

@@ -320,13 +320,29 @@ <h2>Memory</h2>
 				<table id="ramtable" class="memtable">
 					<tbody id="ramtbody"></tbody>
 				</table>
-			</div><br /><div id="octalDisplay" class="panel">
+			</div><br /><div id="octJoystick"><div id="octalDisplay" class="panel">
 				<h2 title="Device Address: 020">Oct Display</h2>
 				<div class="displayContainer">
 					<div class="displaySegment" id="displaySegment0"></div><div class="displaySegment" id="displaySegment1"></div><div class="displaySegment" id="displaySegment2"></div>
 				</div>
 				<span class="peripheryDocs" onclick="Control.showPopup('octalDisplayInfoPopup');">Docs</span>
-			</div><div id="dotMatrix" class="panel">
+			</div><br /><div id="joystick" class="panel">
+				<h2 title="Device Address: 050">Joystick</h2>
+				<div class="joystickContainer">
+					<table>
+						<tr>
+							<td></td><td><button>^</button></td><td></td>
+						</tr>
+						<tr>
+							<td><button>&lt;</button></td><td><button>o</button></td><td><button>&gt;</button></td>
+						</tr>
+						<tr>
+							<td></td><td><button>v</button></td><td></td>
+						</tr>
+					</table>
+				</div>
+				<span class="peripheryDocs" onclick="Control.showPopup('dotMatrixInfoPopup');">Docs</span>
+			</div></div><div id="dotMatrix" class="panel">
 				<h2 title="Device Addresses: 030 - 034">Dot Matrix</h2>
 				<div class="dotMatrixContainer">
 					<canvas id="dotMatrixCanvas" height="160" width="160"></canvas>