Add ability to add a comment to the options macro

src/events/intro/introSummary.tw

@@ -184,8 +184,9 @@ __''General slave settings''__
 	  Slaves will ''always generate with female names'',
 	<<option true "Allow male names">>
 	  Slaves ''can generate with male names''.
+		<<comment>>
+			This only affects slave generation and not your ability to name your slaves.
 <</options>>
-//This only affects slave generation and not your ability to name your slaves.//
 
 <br>
 <<options $surnameOrder>>
@@ -202,8 +203,11 @@ __''General slave settings''__
   <<option 0 "Disable extended families">>
 	Slaves ''cannot'' have extended families, just a single relative. //Vanilla Mode.//
   <<option 1 "Enable extended families">>
-	Slaves ''can'' have extended families instead of just a single relative. //May cause lag.//
-<</options>> //Extended family mode must be on for the incubation facility to be enabled.//
+    Slaves ''can'' have extended families instead of just a single relative.
+    //May cause lag.//
+	<<comment>>
+	  Extended family mode must be on for the incubation facility to be enabled.
+<</options>>
 
 <<if $familyTesting == 1>>
 	<br>
@@ -265,9 +269,11 @@ __''Slave age settings''__
   <<option 1 "Enable aging">>
 	Slaves will ''age naturally.''
   <<option 2 "Semi aging">>
-	Slaves ''will'' celebrate birthdays, but ''not age.''
+    Slaves ''will'' celebrate birthdays, but ''not age.''
+	<<comment>>
+	  This option cannot be changed during the game
 <</options>>
-//This option cannot be changed during the game//
+
 <br>
 
 <<if $minimumSlaveAge < 3>>

src/js/optionsMacro.js

@@ -7,7 +7,7 @@
   */
 Macro.add('options', {
 	skipArgs : false,
-	tags     : ['option'],
+	tags     : ['option', 'comment'],
 	handler  : function () {
 		try {
 			var currentOption = this.payload[0].args[0];
@@ -18,20 +18,21 @@ Macro.add('options', {
 			}
 			var variable = this.payload[0].args.full.split(' ',1)[0].substring("State.variables.".length);
 			var passageName = this.payload[0].args[1] || passage();
-
 			var found = false;
-			var hasDescription = false;
+			var comment = null;
+			var description = null;
 			/* First print out the string for the current value */
 			for (var i = 1, len = this.payload.length; i < len; ++i) {
 				if (this.payload[i].name === 'option') {
 					if (this.payload[i].args[0] === currentOption) {
 						if (found) {
-							throw new Error("Two 'option' found with the same value")
+							throw new Error("Two 'option' found with the same value");
 						}
-						hasDescription = !!this.payload[i].contents;
-						jQuery(this.output).wiki('<span class="optionMacroDescription">' + this.payload[i].contents + " </span>");
+						description = this.payload[i].contents;
 						found = true;
 					}
+				} else if (this.payload[i].name === 'comment') {
+					comment = this.payload[i].contents;
 				} else {
 					throw new Error("Only valid tag is 'option' inside 'options'")
 				}
@@ -40,21 +41,29 @@ Macro.add('options', {
 				throw new Error("No option found for value " + this.payload[0].args[0]);
 			}
 
-			var showSelectedOption = this.payload.length != 3 || !hasDescription;
+			var showSelectedOption = this.payload.length != 3 || !description;
 
 			/* Now print out the list of options */
 			var output = "";
 			for (var i = 1, len = this.payload.length; i < len; ++i) {
-				var args = this.payload[i].args;
-				var extraComment = args[3] ? (' ' + args[3]) : '';
-				if (args[0] !== currentOption) {
-					var onClickChange = args[2] ? (', ' + args[2]) : '';
-					output += '<span class="optionMacroOption">[[' + args[1] + "|" + passage() + "][$" + variable + " = " + JSON.stringify(args[0]) + onClickChange + "]]" + extraComment + "</span>";
-				} else if (showSelectedOption) {
-					output +='<span class="optionMacroSelected optionMacroOption">' + args[1] + extraComment + '</span>';
+				if (this.payload[i].name === 'option') {
+					var args = this.payload[i].args;
+					var extraComment = args[3] ? (' ' + args[3]) : '';
+					var className = "optionMacroOption " + (args[1].startsWith("Enable") ? "optionMacroEnable" : args[1].startsWith("Disable") ? "optionMacroDisable" : "");
+					if (args[0] !== currentOption) {
+						var onClickChange = args[2] ? (', ' + args[2]) : '';
+						output += '<span class="' + className + '">[[' + args[1] + "|" + passageName + "][$" + variable + " = " + JSON.stringify(args[0]) + onClickChange + "]]" + extraComment + "</span>";
+					} else if (showSelectedOption) {
+						output +='<span class="optionMacroSelected ' + className + '">' + args[1] + extraComment + '</span>';
+					}
 				}
 			}
-			jQuery(this.output).wiki('<span class="optionMacroOptionsList">' + output + "</span>");
+			jQuery(this.output).wiki(
+				'<span class="optionMacro">' +
+					'<span class="optionMacroDescription">' + description + "</span>" +
+					'<span class="optionMacroOptionsList">' + output + "</span>" +
+					(comment ? '<span class="optionMacroComment">//' + comment + "//</span>" : '') +
+				'</span>');
 		}
 		catch (ex) {
 			return this.error('bad options expression: ' + ex.message);