GH-347: Improved help for roomscript commands.

src/client/modules/main/commands/createRoomScript/createRoomScript/CreateRoomScript.js

@@ -8,9 +8,14 @@ import ScriptCompileError from 'components/ScriptCompileError';
 const usageText = 'create roomscript <span class="param">Keyword</span> = <span class="param">Source</span>';
 const shortDesc = 'Create a room script';
 const helpText =
-`<p class="common--formattext">Create a room script. For more information, see the <a href="https://github.com/mucklet/mucklet-script" target="_blank" rel="noopener noreferrer" title="https://github.com/mucklet/mucklet-script">mucklet-script</a> development resources.</p>
+`<p>Create a room script.</p>
+<p>For info on how to active the script, type: <code>help set roomscript</code></p>
+<p class="common--formattext">For more information and script examples, see the <a href="https://github.com/mucklet/mucklet-script#readme" target="_blank" rel="noopener noreferrer" title="https://github.com/mucklet/mucklet-script">mucklet-script</a> development resources.</p>
 <p><code class="param">Keyword</code> is the keyword to use for the script.</p>
 <p><code class="param">Source</code> is the room script source code.</p>`;
+const examples = [
+	{ cmd: 'create roomscript test = export function onActivate(): void {\n    Room.describe("Hello, world!")\n}', desc: l10n.l('createRoomScript.helloWorldDesc', "Creates a <code>test</code> hello world room script.") },
+];
 
 /**
  * CreateRoomScript adds command to create a room script.
@@ -67,6 +72,7 @@ class CreateRoomScript {
 			usage: l10n.l('createRoomScript.usage', usageText),
 			shortDesc: l10n.l('createRoomScript.shortDesc', shortDesc),
 			desc: l10n.l('createRoomScript.helpText', helpText),
+			examples,
 			sortOrder: 210,
 		});
 	}

src/client/modules/main/commands/deleteRoomScript/deleteRoomScript/DeleteRoomScript.js

@@ -8,6 +8,9 @@ const helpText =
 `<p>Delete a room script.</p>
 <p><code class="param">Keyword</code> is the keyword for the room script.</p>
 <p><code class="param">#ScriptID</code> is the ID of the script.</p>`;
+const examples = [
+	{ cmd: 'delete roomscript test', desc: l10n.l('deleteRoomScript.deleteTestDesc', "Deletes the <code>test</code> room script.") },
+];
 
 /**
  * DeleteRoomScript adds command to delete a room script.
@@ -49,6 +52,7 @@ class DeleteRoomScript {
 			usage: l10n.l('deleteRoomScript.usage', usageText),
 			shortDesc: l10n.l('deleteRoomScript.shortDesc', shortDesc),
 			desc: l10n.l('deleteRoomScript.helpText', helpText),
+			examples,
 			sortOrder: 250,
 		});
 	}

src/client/modules/main/commands/roomScript/roomScript/RoomScript.js

@@ -12,8 +12,13 @@ const usageText = 'roomscript <span class="param">Keyword<span class="comment">/
 const shortDesc = "Show room script info";
 const helpText =
 `<p>Show detailed info and source code content of a room script.</p>
+<p>For info on how to create a room script, type: <code>help create roomscript</code></p>
+<p class="common--formattext">For more information and script examples, see the <a href="https://github.com/mucklet/mucklet-script#readme" target="_blank" rel="noopener noreferrer" title="https://github.com/mucklet/mucklet-script">mucklet-script</a> development resources.</p>
 <p><code class="param">Keyword</code> is the keyword for the script.</p>
 <p><code class="param">#ScriptID</code> is the ID of the script.</p>`;
+const examples = [
+	{ cmd: 'roomscript test', desc: l10n.l('roomScript.exampletDesc', "Shows information and logs for the <code>test</code> room script.") },
+];
 
 const logLvlClass = {
 	log: 'charlog--default',
@@ -60,6 +65,7 @@ class RoomScript {
 			usage: l10n.l('roomScript.usage', usageText),
 			shortDesc: l10n.l('roomScript.shortDesc', shortDesc),
 			desc: l10n.l('roomScript.helpText', helpText),
+			examples,
 			sortOrder: 200,
 		});
 	}

src/client/modules/main/commands/setRoomScript/setRoomScript/SetRoomScript.js

@@ -13,8 +13,13 @@ const usageText = 'set roomscript <span class="param">Keyword<span class="commen
 const shortDesc = 'Set a room script attribute';
 const helpText =
 `<p>Set a room script attribute.</p>
+<p>For info on how to see room script info, type: <code>help roomscript</code></p>
+<p class="common--formattext">For more information and script examples, see the <a href="https://github.com/mucklet/mucklet-script#readme" target="_blank" rel="noopener noreferrer" title="https://github.com/mucklet/mucklet-script">mucklet-script</a> development resources.</p>
 <p><code class="param">Keyword</code> is the keyword for the room script.</p>
 <p><code class="param">#ScriptID</code> is the ID of the script.</p>`;
+const examples = [
+	{ cmd: 'set roomscript test : active = yes', desc: l10n.l('setRoomScript.activateTestDesc', "Activates the <code>test</code> room script.") },
+];
 
 const defaultAttr = [
 	{
@@ -107,6 +112,7 @@ class SetRoomScript {
 			usage: l10n.l('setRoomScript.usage', usageText),
 			shortDesc: l10n.l('setRoomScript.shortDesc', shortDesc),
 			desc: () => helpAttribDesc(l10n.t('setRoomScript.helpText', helpText), this.scriptAttr.getItems()),
+			examples,
 			sortOrder: 230,
 		});
 	}

src/client/modules/main/help/HelpTopic.js

@@ -23,6 +23,7 @@ class HelpTopic {
 				examples = helpAttribDesc('', items, {
 					attribute: l10n.l('help.example', "Example"),
 					value: hasDesc ? l10n.l('help.description', "Description") : '',
+					attributeClass: 'common--pre-wrap',
 				});
 			}
 		}

src/common/utils/helpAttribDesc.js

@@ -11,6 +11,8 @@ const txtValue = l10n.t('helpAttribDesc.value', `<code class="param">Value</code
  * @param {object} [opt] Optional parameters
  * @param {LocaleString} [opt.attribute] Attribute column title.
  * @param {LocaleString} [opt.value] Value column title.
+ * @param {string} [opt.attributeClass] Attribute column class.
+ * @param {string} [opt.valueClass] Attribute column class.
  * @returns {string} Help description.
  */
 export default function helpAttribDesc(str, attrs, opt) {
@@ -23,8 +25,10 @@ export default function helpAttribDesc(str, attrs, opt) {
 			'<th>' + valueTxt + '</th>' +
 		'</tr></thead>' +
 		'<tbody>';
+	let attribClass = opt.attributeClass ? ' class="' + escapeHtml(opt.attributeClass) + '"' : '';
+	let valueClass = opt.valueClass ? ' class="' + escapeHtml(opt.valueClass) + '"' : '';
 	for (let attr of attrs) {
-		txt += '<tr><td><code>' + escapeHtml(attr.key) + '</code></td><td>' + (attr.desc ? l10n.t(attr.desc) : '') + '</td></tr>';
+		txt += '<tr><td><code' + attribClass + '>' + escapeHtml(attr.key) + '</code></td><td' + valueClass + '>' + (attr.desc ? l10n.t(attr.desc) : '') + '</td></tr>';
 	}
 	return txt + '</tbody></table>';
 }