Added Mobile Layout and comments

out/css/pc.css

@@ -1,14 +1,4 @@
 /* COLORS  */
-.pc .addressbus {
-  background-color: var(--color-addressbus);
-  color: var(--color-addressbus-text);
-}
-
-.pc .databus {
-  background-color: var(--color-databus);
-  color: var(--color-databus-text);
-}
-
 .pc .ram {
   background-color: var(--color-ram);
   color: var(--color-ram-text);
@@ -201,6 +191,7 @@
 
 .pc .scroller table .num {
   text-align: right;
+  white-space: nowrap;
 }
 
 .pc .scroller table td:first-child,
@@ -240,11 +231,11 @@ th.address {
 }
 
 .pc input[type=number].instruction {
-  width: 5em !important;
+  width: 4em !important;
 }
 
 .pc input[type=number].address {
-  width: 7em !important;
+  width: 5em !important;
 }
 
 
@@ -313,7 +304,7 @@ th.address {
   width: 100%;
 }
 
-.pc .ram input[type=number] {
+.pc .ram input {
   background-color: var(--color-table-ram-select);
   color: var(--color-table-ram-select-text);
   border-color: var(--color-table-ram-select-border);
@@ -329,6 +320,21 @@ th.address {
   border-color: var(--color-table-ram-select-border);
 }
 
+.pc .ram .ram-entry:last-child {
+  margin-right: 0 !important;
+}
+
+.pc .ram .comment {
+  padding: 12px 5px;
+}
+
+.pc .ram .comment input{
+  border: none;
+  margin: 0;
+  font-size: .8em;
+  width: 10em;
+}
+
 
 /* CONTROL UNIT */
 
@@ -416,7 +422,6 @@ th.address {
   margin: 0;
   padding: .75em .5em;
 }
-
 .pc .databus .label,
 .pc .addressbus .label {
   /* position: absolute; */
@@ -438,10 +443,16 @@ th.address {
 
 .pc .addressbus {
   margin-bottom: 1em;
+
+  background-color: var(--color-addressbus);
+  color: var(--color-addressbus-text);
 }
 
 .pc .databus {
   margin-top: 2em;
+
+  background-color: var(--color-databus);
+  color: var(--color-databus-text);
 }
 
 /* ARROWS */
@@ -458,7 +469,12 @@ th.address {
   height: 5rem;
 
   /* transform: rotate(90deg) translate(1.5rem, 2.5rem) ; */
-  transform: translate(0, 3rem);
+  --transformation: translate(0, 3rem);
+  transform: var(--transformation);
+  -moz-transform: var(--transformation);
+  -webkit-transform: var(--transformation);
+  -o-transform: var(--transformation);
+
   z-index: 100;
 
   font-size: 0.5em;
@@ -472,11 +488,20 @@ th.address {
 
 .pc .arrow.up {
   left: 75%;
-  transform: rotate(180deg) translate(0, -4.5rem);
+  --transformation: rotate(180deg) translate(0, -4.5rem);
+  transform: var(--transformation);
+  -moz-transform: var(--transformation);
+  -webkit-transform: var(--transformation);
+  -o-transform: var(--transformation);
 }
 .pc .arrow.up > :nth-child(1){
   /* transform: rotate(90deg) translate(0rem, 2rem); */
-  transform: rotate(180deg);
+  --transformation: rotate(180deg);
+
+  transform: var(--transformation);
+  -moz-transform: var(--transformation);
+  -webkit-transform: var(--transformation);
+  -o-transform: var(--transformation);
 }
 
 .pc .arrow.up.arrow2 {
@@ -503,6 +528,8 @@ th.address {
 
   white-space: normal;
   height: min-content;
+
+  z-index: 10;
 }
 
 .pc .arrow > :nth-child(1) *{
@@ -587,3 +614,122 @@ th.address {
   cursor: pointer;
 }
 
+
+
+@media(max-width: 1000px){
+  .pc{
+    grid-template-rows: auto max-content auto;
+    justify-items: center; 
+  }
+
+  .pc .section {
+    grid-column: 2;
+    width: 100%;
+
+    min-height: 25rem;
+    max-height: 50rem;
+  }
+
+  .pc .grid-fullwidth.grid-addressbus,
+  .pc .grid-fullwidth.grid-databus {
+    --width: 5rem;
+    --text-height: 35rem;
+    --margin-side: 2rem;
+
+    width: var(--width);
+    box-sizing: border-box;
+    grid-row: 2 / span 3;
+
+    position: relative;
+    padding-bottom: var(--text-height);
+  }
+
+  .pc .grid-fullwidth.grid-addressbus {
+    grid-column: 1;
+
+    background-color: var(--color-addressbus);
+    color: var(--color-addressbus-text);
+
+    justify-self: flex-end;
+    margin-right: var(--margin-side);
+  }
+  .pc .grid-fullwidth.grid-databus {
+    grid-column: 3;
+
+    background-color: var(--color-databus);
+    color: var(--color-databus-text);
+
+    justify-self: flex-start;
+    margin-left: var(--margin-side);
+  }
+
+
+
+  .pc .grid-fullwidth.grid-addressbus > *,
+  .pc .grid-fullwidth.grid-databus > * {
+    position: sticky;
+    top: 0;
+    left: 0;
+    margin: 0;
+    box-sizing: border-box;
+
+    height: var(--width);
+    width: var(--text-height);
+
+    --transformation: rotate(-90deg) translate( calc(var(--width) / 2 - 50%), calc( 50% - var(--text-height) / 2));
+    transform: var(--transformation);
+    -moz-transform: var(--transformation);
+    -webkit-transform: var(--transformation);
+    -o-transform: var(--transformation);
+
+    background-color: transparent;
+  }
+
+  .pc .controls.grid-fullwidth {
+    grid-column: 1 / span 3;
+  }
+
+
+  .pc .arrow.down{
+    left: inherit;
+    right: 0;
+    bottom: 25%;
+    --transformation: rotate(-90deg) translate(0, 1rem);
+  }
+  .pc .arrow.down > :nth-child(1) {
+    --transformation: rotate(90deg);
+
+    transform: var(--transformation);
+    -moz-transform: var(--transformation);
+    -webkit-transform: var(--transformation);
+    -o-transform: var(--transformation);
+  }
+
+  .pc .arrow.up{
+    left: inherit;
+    right: 0;
+    top: 25%;
+    --transformation: rotate(90deg) translate(0, -2.5rem);
+  }
+  .pc .arrow.up > :nth-child(1) {
+    --transformation: rotate(-90deg);
+  }
+
+  .pc .arrow.top {
+    right: inherit;
+    left: -4.5rem !important;
+    top: 25%;
+  }
+
+  .pc .arrow.arrow2{
+    top: 75%;
+  }
+
+
+
+
+  .pc .alu {
+    text-align: center;
+  }
+
+}

out/examples-list.json

@@ -8,7 +8,7 @@
 		  		"enabled": 1
 			},
 			{
-				"title": "Add 2 numbers(placeholder)",
+				"title": "Add 2 numbers",
 				"version": "0.1",
 				"url": "examples/adding.json",
 				"enabled": 1

out/index.html

@@ -10,7 +10,7 @@
 
     <!-- Mobile Specific Metas
   –––––––––––––––––––––––––––––––––––––––––––––––––– -->
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
 
     <!-- CSS
   –––––––––––––––––––––––––––––––––––––––––––––––––– -->

out/js/elm.js

@@ -4939,22 +4939,22 @@ var $elm$core$Array$builderToArray = F2(
 		if (!builder.b) {
 			return A4(
 				$elm$core$Array$Array_elm_builtin,
-				$elm$core$Elm$JsArray$length(builder.d),
+				$elm$core$Elm$JsArray$length(builder.e),
 				$elm$core$Array$shiftStep,
 				$elm$core$Elm$JsArray$empty,
-				builder.d);
+				builder.e);
 		} else {
 			var treeLen = builder.b * $elm$core$Array$branchFactor;
 			var depth = $elm$core$Basics$floor(
 				A2($elm$core$Basics$logBase, $elm$core$Array$branchFactor, treeLen - 1));
-			var correctNodeList = reverseNodeList ? $elm$core$List$reverse(builder.e) : builder.e;
+			var correctNodeList = reverseNodeList ? $elm$core$List$reverse(builder.f) : builder.f;
 			var tree = A2($elm$core$Array$treeFromBuilder, correctNodeList, builder.b);
 			return A4(
 				$elm$core$Array$Array_elm_builtin,
-				$elm$core$Elm$JsArray$length(builder.d) + treeLen,
+				$elm$core$Elm$JsArray$length(builder.e) + treeLen,
 				A2($elm$core$Basics$max, 5, depth * $elm$core$Array$shiftStep),
 				tree,
-				builder.d);
+				builder.e);
 		}
 	});
 var $elm$core$Basics$idiv = _Basics_idiv;
@@ -4967,7 +4967,7 @@ var $elm$core$Array$initializeHelp = F5(
 				return A2(
 					$elm$core$Array$builderToArray,
 					false,
-					{e: nodeList, b: (len / $elm$core$Array$branchFactor) | 0, d: tail});
+					{f: nodeList, b: (len / $elm$core$Array$branchFactor) | 0, e: tail});
 			} else {
 				var leaf = $elm$core$Array$Leaf(
 					A3($elm$core$Elm$JsArray$initialize, $elm$core$Array$branchFactor, fromIndex, fn));
@@ -5320,10 +5320,22 @@ var $author$project$Main$Model = F7(
 var $author$project$Main$Waiting = {$: 1};
 var $author$project$Main$PC = F7(
 	function (ram, dataBus, addressBus, instructionReg, programmCounter, uCounter, accumulator) {
-		return {m: accumulator, r: addressBus, s: dataBus, k: instructionReg, u: programmCounter, f: ram, l: uCounter};
+		return {m: accumulator, r: addressBus, s: dataBus, k: instructionReg, u: programmCounter, c: ram, l: uCounter};
 	});
 var $author$project$Main$initialRam = _List_fromArray(
-	[100005, 300000, 200005, 400000, 0, 5, 0, 0, 0, 0, 0]);
+	[
+		_Utils_Tuple2(100005, 'LoadA #005'),
+		_Utils_Tuple2(300000, 'IncA'),
+		_Utils_Tuple2(200005, 'StoreA #005'),
+		_Utils_Tuple2(400000, 'JMP #000'),
+		_Utils_Tuple2(0, ''),
+		_Utils_Tuple2(5, 'val'),
+		_Utils_Tuple2(0, ''),
+		_Utils_Tuple2(0, ''),
+		_Utils_Tuple2(0, ''),
+		_Utils_Tuple2(0, ''),
+		_Utils_Tuple2(0, '')
+	]);
 var $author$project$Main$initialPC = A7($author$project$Main$PC, $author$project$Main$initialRam, 0, 0, 0, 0, 0, 0);
 var $author$project$Main$ActAccumulator2DataBus = 0;
 var $author$project$Main$ActAccumulatorIncrement = 2;
@@ -5348,7 +5360,7 @@ var $author$project$Main$init = function (flags) {
 		$elm$core$Platform$Cmd$none);
 };
 var $author$project$Main$MsgLocalSessionRecieve = function (a) {
-	return {$: 18, a: a};
+	return {$: 19, a: a};
 };
 var $elm$json$Json$Decode$string = _Json_decodeString;
 var $author$project$Main$localStorageRecieve = _Platform_incomingPort('localStorageRecieve', $elm$json$Json$Decode$string);
@@ -5556,16 +5568,47 @@ var $author$project$Main$changeAt = F4(
 				A2($elm$core$List$cons, newVal, after));
 		}
 	});
-var $author$project$Main$changeAtInt = F3(
+var $elm$core$List$head = function (list) {
+	if (list.b) {
+		var x = list.a;
+		var xs = list.b;
+		return $elm$core$Maybe$Just(x);
+	} else {
+		return $elm$core$Maybe$Nothing;
+	}
+};
+var $author$project$Main$valueAt = F2(
+	function (n, l) {
+		return $elm$core$List$head(
+			A2($elm$core$List$drop, n, l));
+	});
+var $author$project$Main$valueAtRam = F2(
+	function (n, l) {
+		var _v0 = A2($author$project$Main$valueAt, n, l);
+		if (!_v0.$) {
+			var a = _v0.a;
+			return a;
+		} else {
+			return _Utils_Tuple2(0, '');
+		}
+	});
+var $author$project$Main$changeAtRam = F3(
 	function (pos, newVal, list) {
-		return A4($author$project$Main$changeAt, pos, newVal, 0, list);
+		var _v0 = A2($author$project$Main$valueAtRam, pos, list);
+		var comment = _v0.b;
+		return A4(
+			$author$project$Main$changeAt,
+			pos,
+			_Utils_Tuple2(newVal, comment),
+			_Utils_Tuple2(0, ''),
+			list);
 	});
 var $author$project$Main$changeAtUCode = F3(
 	function (pos, newVal, list) {
 		return A4($author$project$Main$changeAt, pos, newVal, 14, list);
 	});
 var $author$project$Main$MsgLoadExampleArrived = function (a) {
-	return {$: 22, a: a};
+	return {$: 23, a: a};
 };
 var $elm$json$Json$Decode$decodeString = _Json_runOnString;
 var $elm$http$Http$BadStatus_ = F2(
@@ -6356,10 +6399,15 @@ var $elm$http$Http$get = function (r) {
 };
 var $elm$json$Json$Decode$bool = _Json_decodeBool;
 var $elm$json$Json$Decode$field = _Json_decodeField;
+var $elm$json$Json$Decode$index = _Json_decodeIndex;
 var $elm$json$Json$Decode$int = _Json_decodeInt;
 var $elm$json$Json$Decode$list = _Json_decodeList;
 var $elm$json$Json$Decode$map3 = _Json_map3;
 var $elm$json$Json$Decode$map7 = _Json_map7;
+var $elm$core$Tuple$pair = F2(
+	function (a, b) {
+		return _Utils_Tuple2(a, b);
+	});
 var $elm$core$List$filter = F2(
 	function (isGood, list) {
 		return A3(
@@ -6371,15 +6419,6 @@ var $elm$core$List$filter = F2(
 			_List_Nil,
 			list);
 	});
-var $elm$core$List$head = function (list) {
-	if (list.b) {
-		var x = list.a;
-		var xs = list.b;
-		return $elm$core$Maybe$Just(x);
-	} else {
-		return $elm$core$Maybe$Nothing;
-	}
-};
 var $elm$core$Tuple$second = function (_v0) {
 	var y = _v0.b;
 	return y;
@@ -6429,7 +6468,16 @@ var $elm$core$Maybe$withDefault = F2(
 			return _default;
 		}
 	});
-var $author$project$Main$modelDecoder = A4(
+var $author$project$Main$modelDecoder = function () {
+	var tuple2Decoder = F2(
+		function (enc1, enc2) {
+			return A3(
+				$elm$json$Json$Decode$map2,
+				$elm$core$Tuple$pair,
+				A2($elm$json$Json$Decode$index, 0, enc1),
+				A2($elm$json$Json$Decode$index, 1, enc2));
+		});
+	return A4(
 		$elm$json$Json$Decode$map3,
 		F3(
 			function (a, b, c) {
@@ -6444,7 +6492,8 @@ var $author$project$Main$modelDecoder = A4(
 				A2(
 					$elm$json$Json$Decode$field,
 					'ram',
-				$elm$json$Json$Decode$list($elm$json$Json$Decode$int)),
+					$elm$json$Json$Decode$list(
+						A2(tuple2Decoder, $elm$json$Json$Decode$int, $elm$json$Json$Decode$string))),
 				A2($elm$json$Json$Decode$field, 'dataBus', $elm$json$Json$Decode$int),
 				A2($elm$json$Json$Decode$field, 'addressBus', $elm$json$Json$Decode$int),
 				A2($elm$json$Json$Decode$field, 'instructionReg', $elm$json$Json$Decode$int),
@@ -6465,6 +6514,7 @@ var $author$project$Main$modelDecoder = A4(
 					},
 					$elm$json$Json$Decode$string))),
 		A2($elm$json$Json$Decode$field, 'autoscroll', $elm$json$Json$Decode$bool));
+}();
 var $author$project$Main$cmdLoadExampleSing = F2(
 	function (model, example) {
 		return $elm$http$Http$get(
@@ -6474,7 +6524,7 @@ var $author$project$Main$cmdLoadExampleSing = F2(
 			});
 	});
 var $author$project$Main$MsgExamplesArrived = function (a) {
-	return {$: 23, a: a};
+	return {$: 24, a: a};
 };
 var $author$project$Main$Example = F4(
 	function (title, version, url, enabled) {
@@ -6519,7 +6569,7 @@ var $elm$json$Json$Encode$list = F2(
 				_Json_emptyArray(0),
 				entries));
 	});
-var $author$project$Main$modelVersion = 1;
+var $author$project$Main$modelVersion = 2;
 var $elm$json$Json$Encode$object = function (pairs) {
 	return _Json_wrap(
 		A3(
@@ -6551,6 +6601,19 @@ var $author$project$Main$uAction2String = function (action) {
 	}
 };
 var $author$project$Main$encodeModel = function (model) {
+	var tuple2Encoder = F3(
+		function (enc1, enc2, _v0) {
+			var val1 = _v0.a;
+			var val2 = _v0.b;
+			return A2(
+				$elm$json$Json$Encode$list,
+				$elm$core$Basics$identity,
+				_List_fromArray(
+					[
+						enc1(val1),
+						enc2(val2)
+					]));
+		});
 	return A2(
 		$elm$json$Json$Encode$encode,
 		0,
@@ -6585,7 +6648,10 @@ var $author$project$Main$encodeModel = function (model) {
 								$elm$json$Json$Encode$int(model.a.m)),
 								_Utils_Tuple2(
 								'ram',
-								A2($elm$json$Json$Encode$list, $elm$json$Json$Encode$int, model.a.f))
+								A2(
+									$elm$json$Json$Encode$list,
+									A2(tuple2Encoder, $elm$json$Json$Encode$int, $elm$json$Json$Encode$string),
+									model.a.c))
 							]))),
 					_Utils_Tuple2(
 					'uCode',
@@ -6651,10 +6717,10 @@ var $author$project$Main$actDataBus2InstructionReg = function (pc) {
 		{k: pc.s});
 };
 var $author$project$Main$actDataBus2Ram = function (pc) {
-	var newRam = A3($author$project$Main$changeAtInt, pc.r, pc.s, pc.f);
+	var newRam = A3($author$project$Main$changeAtRam, pc.r, pc.s, pc.c);
 	return _Utils_update(
 		pc,
-		{f: newRam});
+		{c: newRam});
 };
 var $author$project$Main$seperateInstructionsEntry = function (i) {
 	var instruction = (i / 100000) | 0;
@@ -6706,24 +6772,9 @@ var $author$project$Main$actProgrammCounterIncrement = function (pc) {
 		pc,
 		{u: pc.u + 1});
 };
-var $author$project$Main$valueAt = F2(
-	function (n, l) {
-		return $elm$core$List$head(
-			A2($elm$core$List$drop, n, l));
-	});
-var $author$project$Main$valueAtInt = F2(
-	function (n, l) {
-		var _v0 = A2($author$project$Main$valueAt, n, l);
-		if (!_v0.$) {
-			var a = _v0.a;
-			return a;
-		} else {
-			return 0;
-		}
-	});
 var $author$project$Main$actRam2DataBus = function (pc) {
 	var ab = pc.r;
-	var db = A2($author$project$Main$valueAtInt, ab, pc.f);
+	var db = A2($author$project$Main$valueAtRam, ab, pc.c).a;
 	return _Utils_update(
 		pc,
 		{s: db});
@@ -6864,7 +6915,7 @@ var $author$project$Main$update = F2(
 					{
 						a: _Utils_update(
 							$author$project$Main$initialPC,
-							{f: model.a.f})
+							{c: model.a.c})
 					});
 				return _Utils_Tuple2(
 					new_model,
@@ -6888,13 +6939,13 @@ var $author$project$Main$update = F2(
 					var _int = _v1.a;
 					var old_pc = model.a;
 					var _v2 = $author$project$Main$seperateInstructionsEntry(
-						A2($author$project$Main$valueAtInt, addr, model.a.f));
+						A2($author$project$Main$valueAtRam, addr, model.a.c).a);
 					var inst = _v2.a;
 					var new_val = (inst * 100000) + _int;
 					var new_pc = _Utils_update(
 						old_pc,
 						{
-							f: A3($author$project$Main$changeAtInt, addr, new_val, old_pc.f)
+							c: A3($author$project$Main$changeAtRam, addr, new_val, old_pc.c)
 						});
 					return updateModel(
 						_Utils_update(
@@ -6911,13 +6962,13 @@ var $author$project$Main$update = F2(
 					var _int = _v3.a;
 					var old_pc = model.a;
 					var _v4 = $author$project$Main$seperateInstructionsEntry(
-						A2($author$project$Main$valueAtInt, addr, model.a.f));
+						A2($author$project$Main$valueAtRam, addr, model.a.c).a);
 					var address = _v4.b;
 					var new_val = (_int * 100000) + address;
 					var new_pc = _Utils_update(
 						old_pc,
 						{
-							f: A3($author$project$Main$changeAtInt, addr, new_val, old_pc.f)
+							c: A3($author$project$Main$changeAtRam, addr, new_val, old_pc.c)
 						});
 					return updateModel(
 						_Utils_update(
@@ -6931,21 +6982,43 @@ var $author$project$Main$update = F2(
 				var new_pc = _Utils_update(
 					old_pc,
 					{
-						f: _Utils_ap(
+						c: _Utils_ap(
-							old_pc.f,
+							old_pc.c,
 							_List_fromArray(
-								[0]))
+								[
+									_Utils_Tuple2(0, '')
+								]))
 					});
 				return updateModel(
 					_Utils_update(
 						model,
 						{a: new_pc}));
 			case 8:
+				var addr = msg.a;
+				var str = msg.b;
+				var old_pc = model.a;
+				var _v5 = A2($author$project$Main$valueAtRam, addr, model.a.c);
+				var val = _v5.a;
+				var new_pc = _Utils_update(
+					old_pc,
+					{
+						c: A4(
+							$author$project$Main$changeAt,
+							addr,
+							_Utils_Tuple2(val, str),
+							_Utils_Tuple2(0, ''),
+							old_pc.c)
+					});
+				return updateModel(
+					_Utils_update(
+						model,
+						{a: new_pc}));
+			case 9:
 				var addr = msg.a;
 				var may_action = msg.b;
-				var _v5 = $author$project$Main$string2uAction(may_action);
+				var _v6 = $author$project$Main$string2uAction(may_action);
-				if (!_v5.$) {
+				if (!_v6.$) {
-					var action = _v5.a;
+					var action = _v6.a;
 					var newCode = A3($author$project$Main$changeAtUCode, addr, action, model.q);
 					return updateModel(
 						_Utils_update(
@@ -6954,24 +7027,23 @@ var $author$project$Main$update = F2(
 				} else {
 					return _Utils_Tuple2(model, $elm$core$Platform$Cmd$none);
 				}
-			case 9:
+			case 10:
 				return updateModel(
 					_Utils_update(
 						model,
 						{
 							q: _Utils_ap(
 								model.q,
-								_List_fromArray(
+								A2($elm$core$List$repeat, 10, 14))
-									[14]))
 						}));
-			case 10:
+			case 11:
 				var text = msg.a;
-				var _v6 = $elm$core$String$toInt(text);
+				var _v7 = $elm$core$String$toInt(text);
-				if (!_v6.$) {
+				if (!_v7.$) {
-					var _int = _v6.a;
+					var _int = _v7.a;
 					var old_pc = model.a;
-					var _v7 = $author$project$Main$seperateInstructionsEntry(old_pc.k);
+					var _v8 = $author$project$Main$seperateInstructionsEntry(old_pc.k);
-					var instr = _v7.a;
+					var instr = _v8.a;
 					var new_pc = _Utils_update(
 						old_pc,
 						{k: (instr * 100000) + _int});
@@ -6982,14 +7054,14 @@ var $author$project$Main$update = F2(
 				} else {
 					return _Utils_Tuple2(model, $elm$core$Platform$Cmd$none);
 				}
-			case 11:
+			case 12:
 				var text = msg.a;
-				var _v8 = $elm$core$String$toInt(text);
+				var _v9 = $elm$core$String$toInt(text);
-				if (!_v8.$) {
+				if (!_v9.$) {
-					var _int = _v8.a;
+					var _int = _v9.a;
 					var old_pc = model.a;
-					var _v9 = $author$project$Main$seperateInstructionsEntry(old_pc.k);
+					var _v10 = $author$project$Main$seperateInstructionsEntry(old_pc.k);
-					var addr = _v9.b;
+					var addr = _v10.b;
 					var new_pc = _Utils_update(
 						old_pc,
 						{k: (_int * 100000) + addr});
@@ -7000,11 +7072,11 @@ var $author$project$Main$update = F2(
 				} else {
 					return _Utils_Tuple2(model, $elm$core$Platform$Cmd$none);
 				}
-			case 13:
+			case 14:
 				var text = msg.a;
-				var _v10 = $elm$core$String$toInt(text);
+				var _v11 = $elm$core$String$toInt(text);
-				if (!_v10.$) {
+				if (!_v11.$) {
-					var _int = _v10.a;
+					var _int = _v11.a;
 					var old_pc = model.a;
 					var new_pc = _Utils_update(
 						old_pc,
@@ -7016,24 +7088,7 @@ var $author$project$Main$update = F2(
 				} else {
 					return _Utils_Tuple2(model, $elm$core$Platform$Cmd$none);
 				}
-			case 12:
+			case 13:
-				var text = msg.a;
-				var _v11 = $elm$core$String$toInt(text);
-				if (!_v11.$) {
-					var _int = _v11.a;
-					var old_pc = model.a;
-					var new_pc = _Utils_update(
-						old_pc,
-						{l: _int});
-					return _Utils_Tuple2(
-						_Utils_update(
-							model,
-							{a: new_pc}),
-						$author$project$Main$cmdSenduUpdate(model));
-				} else {
-					return _Utils_Tuple2(model, $elm$core$Platform$Cmd$none);
-				}
-			case 14:
 				var text = msg.a;
 				var _v12 = $elm$core$String$toInt(text);
 				if (!_v12.$) {
@@ -7041,7 +7096,7 @@ var $author$project$Main$update = F2(
 					var old_pc = model.a;
 					var new_pc = _Utils_update(
 						old_pc,
-						{r: _int});
+						{l: _int});
 					return _Utils_Tuple2(
 						_Utils_update(
 							model,
@@ -7058,11 +7113,12 @@ var $author$project$Main$update = F2(
 					var old_pc = model.a;
 					var new_pc = _Utils_update(
 						old_pc,
-						{s: _int});
+						{r: _int});
-					return updateModel(
+					return _Utils_Tuple2(
 						_Utils_update(
 							model,
-							{a: new_pc}));
+							{a: new_pc}),
+						$author$project$Main$cmdSenduUpdate(model));
 				} else {
 					return _Utils_Tuple2(model, $elm$core$Platform$Cmd$none);
 				}
@@ -7072,6 +7128,22 @@ var $author$project$Main$update = F2(
 				if (!_v14.$) {
 					var _int = _v14.a;
 					var old_pc = model.a;
+					var new_pc = _Utils_update(
+						old_pc,
+						{s: _int});
+					return updateModel(
+						_Utils_update(
+							model,
+							{a: new_pc}));
+				} else {
+					return _Utils_Tuple2(model, $elm$core$Platform$Cmd$none);
+				}
+			case 17:
+				var text = msg.a;
+				var _v15 = $elm$core$String$toInt(text);
+				if (!_v15.$) {
+					var _int = _v15.a;
+					var old_pc = model.a;
 					var new_pc = _Utils_update(
 						old_pc,
 						{m: _int});
@@ -7096,15 +7168,15 @@ var $author$project$Main$update = F2(
 						new_model,
 						$author$project$Main$cmdSenduUpdate(new_model));
 				}
-			case 17:
+			case 18:
 				return _Utils_Tuple2(
 					model,
 					$author$project$Main$cmdUpdateLocalStorage(model));
-			case 18:
+			case 19:
 				var message_in = msg.a;
-				var _v15 = A2($author$project$Main$decodeModel, model, message_in);
+				var _v16 = A2($author$project$Main$decodeModel, model, message_in);
-				if (!_v15.$) {
+				if (!_v16.$) {
-					var new_model = _v15.a;
+					var new_model = _v16.a;
 					return _Utils_Tuple2(
 						_Utils_update(
 							new_model,
@@ -7113,7 +7185,7 @@ var $author$project$Main$update = F2(
 				} else {
 					return _Utils_Tuple2(model, $elm$core$Platform$Cmd$none);
 				}
-			case 19:
+			case 20:
 				return model.G ? _Utils_Tuple2(
 					_Utils_update(
 						model,
@@ -7123,13 +7195,13 @@ var $author$project$Main$update = F2(
 						model,
 						{G: true}),
 					$author$project$Main$cmdLoadExamples(model));
-			case 20:
-				return _Utils_Tuple2(model, $elm$core$Platform$Cmd$none);
 			case 21:
+				return _Utils_Tuple2(model, $elm$core$Platform$Cmd$none);
+			case 22:
 				var i = msg.a;
-				var _v16 = A2($author$project$Main$valueAt, i, model.H);
+				var _v17 = A2($author$project$Main$valueAt, i, model.H);
-				if (!_v16.$) {
+				if (!_v17.$) {
-					var example = _v16.a;
+					var example = _v17.a;
 					return _Utils_Tuple2(
 						_Utils_update(
 							model,
@@ -7138,7 +7210,7 @@ var $author$project$Main$update = F2(
 				} else {
 					return _Utils_Tuple2(model, $elm$core$Platform$Cmd$none);
 				}
-			case 22:
+			case 23:
 				var result = msg.a;
 				if (!result.$) {
 					var new_model = result.a;
@@ -7184,7 +7256,7 @@ var $elm$html$Html$Lazy$lazy = $elm$virtual_dom$VirtualDom$lazy;
 var $author$project$Main$MsgAutoscrollUpdate = {$: 3};
 var $author$project$Main$MsgInstructionStep = {$: 1};
 var $author$project$Main$MsgReset = {$: 2};
-var $author$project$Main$MsgToggleLoadExample = {$: 19};
+var $author$project$Main$MsgToggleLoadExample = {$: 20};
 var $author$project$Main$MsgUCycleStep = {$: 0};
 var $elm$html$Html$button = _VirtualDom_node('button');
 var $elm$html$Html$Attributes$boolProperty = F2(
@@ -7239,7 +7311,7 @@ var $elm$virtual_dom$VirtualDom$text = _VirtualDom_text;
 var $elm$html$Html$text = $elm$virtual_dom$VirtualDom$text;
 var $elm$html$Html$Attributes$type_ = $elm$html$Html$Attributes$stringProperty('type');
 var $author$project$Main$MsgEditAddressBus = function (a) {
-	return {$: 14, a: a};
+	return {$: 15, a: a};
 };
 var $elm$core$String$fromList = _String_fromList;
 var $author$project$Main$addLeadingZero = F2(
@@ -7342,7 +7414,7 @@ var $author$project$Main$viewAddressBus = function (model) {
 			]));
 };
 var $author$project$Main$MsgAluEdit = function (a) {
-	return {$: 16, a: a};
+	return {$: 17, a: a};
 };
 var $author$project$Main$MsgManualStep = function (a) {
 	return {$: 4, a: a};
@@ -7490,31 +7562,27 @@ var $author$project$Main$viewAlu = function (model) {
 			]));
 };
 var $author$project$Main$MsgCuInstrRegEditAddr = function (a) {
-	return {$: 10, a: a};
-};
-var $author$project$Main$MsgCuInstrRegEditInstr = function (a) {
 	return {$: 11, a: a};
 };
+var $author$project$Main$MsgCuInstrRegEditInstr = function (a) {
+	return {$: 12, a: a};
+};
 var $author$project$Main$MsgCuProgCounterEdit = function (a) {
-	return {$: 13, a: a};
+	return {$: 14, a: a};
 };
 var $author$project$Main$MsgCuUCounterEdit = function (a) {
-	return {$: 12, a: a};
+	return {$: 13, a: a};
 };
 var $elm$html$Html$table = _VirtualDom_node('table');
 var $elm$html$Html$th = _VirtualDom_node('th');
 var $elm$html$Html$thead = _VirtualDom_node('thead');
 var $elm$html$Html$tr = _VirtualDom_node('tr');
-var $author$project$Main$MsgCuAddBelow = {$: 9};
+var $author$project$Main$MsgCuAddBelow = {$: 10};
-var $elm$core$Tuple$pair = F2(
-	function (a, b) {
-		return _Utils_Tuple2(a, b);
-	});
 var $elm$html$Html$tbody = _VirtualDom_node('tbody');
 var $elm$html$Html$td = _VirtualDom_node('td');
 var $author$project$Main$MsgCuEditAction = F2(
 	function (a, b) {
-		return {$: 8, a: a, b: b};
+		return {$: 9, a: a, b: b};
 	});
 var $elm$html$Html$option = _VirtualDom_node('option');
 var $elm$html$Html$select = _VirtualDom_node('select');
@@ -7957,7 +8025,7 @@ var $author$project$Main$viewCu = function (model) {
 			]));
 };
 var $author$project$Main$MsgEditDataBus = function (a) {
-	return {$: 15, a: a};
+	return {$: 16, a: a};
 };
 var $author$project$Main$viewDataBus = function (model) {
 	return A2(
@@ -7998,7 +8066,7 @@ var $author$project$Main$viewDataBus = function (model) {
 };
 var $elm$core$Basics$not = _Basics_not;
 var $author$project$Main$MsgLoadExample = function (a) {
-	return {$: 21, a: a};
+	return {$: 22, a: a};
 };
 var $author$project$Main$viewExamplesEntrys = function (model) {
 	var entry2html = function (_v1) {
@@ -8154,17 +8222,23 @@ var $author$project$Main$MsgRamEditAddress = F2(
 	function (a, b) {
 		return {$: 5, a: a, b: b};
 	});
+var $author$project$Main$MsgRamEditComment = F2(
+	function (a, b) {
+		return {$: 8, a: a, b: b};
+	});
 var $author$project$Main$MsgRamEditInstr = F2(
 	function (a, b) {
 		return {$: 6, a: a, b: b};
 	});
 var $author$project$Main$viewRamContent = function (model) {
 	var ram2table = function (entry) {
-		var val = entry.b;
 		var id = entry.a;
-		var _v0 = $author$project$Main$seperateInstructionsEntry(val);
+		var _v0 = entry.b;
-		var instruction = _v0.a;
+		var val = _v0.a;
-		var address = _v0.b;
+		var comment = _v0.b;
+		var _v1 = $author$project$Main$seperateInstructionsEntry(val);
+		var instruction = _v1.a;
+		var address = _v1.b;
 		return A2(
 			$elm$html$Html$tr,
 			_List_fromArray(
@@ -8224,10 +8298,29 @@ var $author$project$Main$viewRamContent = function (model) {
 									$elm$html$Html$Attributes$class('address')
 								]),
 							_List_Nil)
+						])),
+					A2(
+					$elm$html$Html$td,
+					_List_fromArray(
+						[
+							$elm$html$Html$Attributes$class('comment')
+						]),
+					_List_fromArray(
+						[
+							A2(
+							$elm$html$Html$input,
+							_List_fromArray(
+								[
+									$elm$html$Html$Attributes$type_('text'),
+									$elm$html$Html$Attributes$value(comment),
+									$elm$html$Html$Events$onInput(
+									$author$project$Main$MsgRamEditComment(id))
+								]),
+							_List_Nil)
 						]))
 				]));
 	};
-	var indexedRam = A2($elm$core$List$indexedMap, $elm$core$Tuple$pair, model.a.f);
+	var indexedRam = A2($elm$core$List$indexedMap, $elm$core$Tuple$pair, model.a.c);
 	return A2(
 		$elm$html$Html$tbody,
 		_List_Nil,
@@ -8256,7 +8349,8 @@ var $author$project$Main$viewRamContent = function (model) {
 										[
 											$elm$html$Html$text('Add Entry')
 										]))
-								]))
+								])),
+							A2($elm$html$Html$td, _List_Nil, _List_Nil)
 						]))
 				])));
 };
@@ -8338,6 +8432,13 @@ var $author$project$Main$viewRam = function (model) {
 												_List_fromArray(
 													[
 														$elm$html$Html$text('Value')
+													])),
+												A2(
+												$elm$html$Html$th,
+												_List_Nil,
+												_List_fromArray(
+													[
+														$elm$html$Html$text('Comment')
 													]))
 											]))
 									])),
@@ -8507,7 +8608,8 @@ var $author$project$Main$viewPC = function (model) {
 				$elm$html$Html$div,
 				_List_fromArray(
 					[
-						$elm$html$Html$Attributes$class('grid-fullwidth')
+						$elm$html$Html$Attributes$class('grid-fullwidth'),
+						$elm$html$Html$Attributes$class('grid-addressbus')
 					]),
 				_List_fromArray(
 					[
@@ -8520,7 +8622,8 @@ var $author$project$Main$viewPC = function (model) {
 				$elm$html$Html$div,
 				_List_fromArray(
 					[
-						$elm$html$Html$Attributes$class('grid-fullwidth')
+						$elm$html$Html$Attributes$class('grid-fullwidth'),
+						$elm$html$Html$Attributes$class('grid-databus')
 					]),
 				_List_fromArray(
 					[

out/script.js

@@ -1,26 +0,0 @@
-let text_de = document.getElementById("langDE");
-let text_en = document.getElementById("langEN");
-
-let btn_changeToDe = document.getElementById("langPickerDE");
-let btn_changeToEn = document.getElementById("langPickerEN");
-
-let lang = (typeof document.documentElement.lang == "string") ? document.documentElement.lang: "en"
-
-
-function changeLang(lang){
-	if(lang == "de"){
-		text_de.classList.remove("hidden");
-		text_en.classList.add("hidden");
-	}else{
-		text_en.classList.remove("hidden");
-		text_de.classList.add("hidden");
-	}
-}
-
-btn_changeToEn.addEventListener("click", () => { changeLang("en") } );
-btn_changeToDe.addEventListener("click", () => { changeLang("de") } );
-
-
-
-// Do stuff on loading
-changeLang( lang );

src/Main.elm

@@ -16,7 +16,7 @@ import Json.Decode as JD
 import Html.Events exposing (targetValue)
 import Http
 
-modelVersion = 1
+modelVersion = 2
 examplesListUrl = "examples-list.json"
 
 -- Note that general Stuff is at the end of the document
@@ -33,7 +33,7 @@ port localStorageRecieve : (String -> msg) -> Sub msg
 
 
 type alias PC =
-    { ram : List Int
+    { ram : List (Int, String)
     , dataBus : Int
     , addressBus : Int
     , instructionReg : Int
@@ -138,19 +138,19 @@ uCodeMaps =
     ]
 
 
-initialRam : List Int
+initialRam : List (Int, String)
 initialRam =
-    [ 100005 -- 000  -- LoadA    #005
+    [ (100005, "LoadA #005")    -- 000  -- LoadA    #005
-    , 300000 -- 001  -- IncA
+    , (300000, "IncA")          -- 001  -- IncA
-    , 200005 -- 002  -- StoreA   #005
+    , (200005, "StoreA #005")   -- 002  -- StoreA   #005
-    , 400000 -- 003  -- JMP      #000
+    , (400000, "JMP #000")      -- 003  -- JMP      #000
-    , 0 -- 004
+    , (0,"")                    -- 004
-    , 5 -- 005
+    , (5,"val")                 -- 005
-    , 0 -- 006
+    , (0, "")                   -- 006
-    , 0 -- 007
+    , (0, "")                   -- 007
-    , 0 -- 008
+    , (0, "")                   -- 008
-    , 0 -- 009
+    , (0, "")                   -- 009
-    , 0 -- 010
+    , (0, "")                   -- 010
     ]
 
 
@@ -238,6 +238,7 @@ type Msg
     | MsgRamEditAddress Int String
     | MsgRamEditInstr Int String
     | MsgRamAddBelow
+    | MsgRamEditComment Int String
     | MsgCuEditAction Int String
     | MsgCuAddBelow
     | MsgCuInstrRegEditAddr String
@@ -291,10 +292,10 @@ update msg model =
             case String.toInt may_int of
                 Just int ->
                     let 
-                        (inst,_) = seperateInstructionsEntry ( valueAtInt addr model.pc.ram )
+                        (inst,_) = seperateInstructionsEntry ( Tuple.first <| valueAtRam addr model.pc.ram )
                         new_val = inst * 100000 + int
                         old_pc = model.pc
-                        new_pc = { old_pc | ram = (changeAtInt addr new_val old_pc.ram) }
+                        new_pc = { old_pc | ram = (changeAtRam addr new_val old_pc.ram) }
                     in
                     updateModel { model | pc = new_pc }
                 _ -> (model, Cmd.none)
@@ -303,10 +304,10 @@ update msg model =
             case String.toInt may_int of
                 Just int ->
                     let 
-                        (_,address) = seperateInstructionsEntry ( valueAtInt addr model.pc.ram )
+                        (_,address) = seperateInstructionsEntry ( Tuple.first <| valueAtRam addr model.pc.ram )
                         new_val = int * 100000 + address
                         old_pc = model.pc
-                        new_pc = { old_pc | ram = (changeAtInt addr new_val old_pc.ram) }
+                        new_pc = { old_pc | ram = (changeAtRam addr new_val old_pc.ram) }
                     in
                     updateModel { model | pc = new_pc }
                 _ -> ( model, Cmd.none )
@@ -314,7 +315,15 @@ update msg model =
         MsgRamAddBelow ->
             let
                 old_pc = model.pc
-                new_pc = {old_pc | ram = old_pc.ram ++ [0]}
+                new_pc = {old_pc | ram = old_pc.ram ++ [(0, "")]}
+            in
+            updateModel {model | pc = new_pc}
+
+        MsgRamEditComment addr str ->
+            let
+                (val, _) = valueAtRam addr model.pc.ram
+                old_pc = model.pc
+                new_pc = { old_pc | ram = changeAt addr (val, str) (0,"") old_pc.ram }
             in
                 updateModel { model | pc = new_pc }
 
@@ -328,7 +337,7 @@ update msg model =
                 _ -> ( model, Cmd.none )
 
         MsgCuAddBelow ->
-            updateModel {model | uCode = model.uCode ++ [ ActNothing ]}
+            updateModel {model | uCode = model.uCode ++ List.repeat 10 ActNothing}
 
         MsgCuInstrRegEditAddr text ->
             case String.toInt text of
@@ -522,6 +531,11 @@ executeInstruction model =
 
 encodeModel : Model -> String
 encodeModel model =
+    let
+        tuple2Encoder : (a -> JE.Value) -> (b -> JE.Value) -> (a, b) -> JE.Value
+        tuple2Encoder enc1 enc2 (val1, val2) =
+            JE.list identity [ enc1 val1, enc2 val2 ]
+    in
     JE.object
         [   ( "model-version", JE.int modelVersion )
         ,   ( "pc"
@@ -532,7 +546,7 @@ encodeModel model =
                 , ("programmCounter", JE.int model.pc.programmCounter )
                 , ("uCounter", JE.int model.pc.uCounter )
                 , ("accumulator", JE.int model.pc.accumulator )
-                , ("ram", JE.list JE.int model.pc.ram)
+                , ("ram", JE.list (tuple2Encoder JE.int JE.string) model.pc.ram )
                 ]
             )
         ,   ( "uCode", JE.list JE.string (List.map uAction2String model.uCode) )
@@ -565,12 +579,19 @@ exampleListDecoder =
 
 modelDecoder : JD.Decoder Model
 modelDecoder = 
+    let
+        tuple2Decoder : JD.Decoder a -> JD.Decoder b -> JD.Decoder (a,b)
+        tuple2Decoder enc1 enc2 =
+            JD.map2 Tuple.pair
+                (JD.index 0 enc1)
+                (JD.index 1 enc2)
+    in           
     JD.map3
         (\a b c -> Model a b c [] False Waiting Waiting)
         ( JD.field "pc" 
             ( JD.map7
                 PC
-                (JD.field "ram" (JD.list JD.int))
+                (JD.field "ram" <| JD.list <| tuple2Decoder JD.int JD.string)
                 (JD.field "dataBus" JD.int)
                 (JD.field "addressBus" JD.int)
                 (JD.field "instructionReg" JD.int)
@@ -657,11 +678,11 @@ viewPC model =
                 ]
             , button [ onClick MsgToggleLoadExample ] [ text "Load Example" ]
             ]
-        , div [ class "grid-fullwidth" ] [ lazy viewAddressBus model ]
+        , div [ class "grid-fullwidth", class "grid-addressbus" ] [ lazy viewAddressBus model ]
         , lazy viewRam model
         , lazy viewCu model
         , lazy viewAlu model
-        , div [ class "grid-fullwidth" ] [ lazy viewDataBus model ]
+        , div [ class "grid-fullwidth", class "grid-databus" ] [ lazy viewDataBus model ]
         , lazy viewExamples model
         , lazy viewExamplesLoaderError model
         ]
@@ -678,6 +699,7 @@ viewRam model =
                     [ Html.tr []
                         [ Html.th [ class "address" ] [ text "Addr" ]
                         , Html.th [] [ text "Value" ]
+                        , Html.th [] [ text "Comment" ]
                         ]
                     ]
                 , lazy viewRamContent model
@@ -702,13 +724,13 @@ viewRamContent model =
         indexedRam =
             List.indexedMap Tuple.pair model.pc.ram
 
-        ram2table : ( Int, Int ) -> Html Msg
+        ram2table : ( Int, (Int, String) ) -> Html Msg
         ram2table entry =
             let
                 id =
                     Tuple.first entry
 
-                val =
+                (val,comment) =
                     Tuple.second entry
 
                 (instruction, address) = seperateInstructionsEntry val
@@ -719,21 +741,28 @@ viewRamContent model =
                 , Html.td [ class "num " ] 
                     [ Html.input 
                         [ HAttr.type_ "number"
-                        , HAttr.value (addLeadingZero instruction 3)
+                        , HAttr.value <| addLeadingZero instruction 3
-                        , onInput (MsgRamEditInstr id)
+                        , onInput <| MsgRamEditInstr id
                         , class "ram-entry"
                         , class "instruction"
                         ]
                         []
                     , Html.input 
                         [ HAttr.type_ "number"
-                        , HAttr.value (addLeadingZero address 5)
+                        , HAttr.value <| addLeadingZero address 5
-                        , onInput (MsgRamEditAddress id)
+                        , onInput <| MsgRamEditAddress id
                         , class "ram-entry"
                         , class "address"
                         ]
                         []
                     ]
+                , Html.td[ class "comment" ]
+                    [ Html.input
+                        [ HAttr.type_ "text"
+                        , HAttr.value comment
+                        , onInput <| MsgRamEditComment id ]
+                        []
+                    ]
                 ]
     in
     Html.tbody [] 
@@ -746,6 +775,7 @@ viewRamContent model =
                     [ onClick MsgRamAddBelow  ] 
                     [ text "Add Entry"] 
                 ]
+            , Html.td [][]
             ]
         ]
         )
@@ -1014,7 +1044,7 @@ actRam2DataBus pc =
             pc.addressBus
 
         db =
-            valueAtInt ab pc.ram
+            Tuple.first <| valueAtRam ab pc.ram
     in
     { pc | dataBus = db }
 
@@ -1098,7 +1128,7 @@ actDataBus2Ram : PC -> PC
 actDataBus2Ram pc =
     let
         newRam =
-            changeAtInt pc.addressBus pc.dataBus pc.ram
+            changeAtRam pc.addressBus pc.dataBus pc.ram
     in
     { pc | ram = newRam }
 
@@ -1108,14 +1138,14 @@ actDataBus2Ram pc =
 -- HELPERS
 
 
-valueAtInt : Int -> List Int -> Int
+valueAtRam : Int -> List (Int, String) -> (Int, String)
-valueAtInt n l =
+valueAtRam n l =
     case valueAt n l of
         Just a ->
             a
 
         Nothing ->
-            0
+            (0, "")
 
 
 valueAt : Int -> List a -> Maybe a
@@ -1123,9 +1153,12 @@ valueAt n l =
     List.head (List.drop n l)
 
 
-changeAtInt : Int -> Int -> List Int -> List Int
+changeAtRam : Int -> Int -> List (Int, String) -> List (Int,String)
-changeAtInt pos newVal list =
+changeAtRam pos newVal list =
-    changeAt pos newVal 0 list
+    let
+        (_,comment) = valueAtRam pos list
+    in
+    changeAt pos (newVal, comment) (0, "") list
     
 
 changeAtUCode : Int -> UAction -> List UAction -> List UAction