Basic help functionality

graham-trott · graham-trott · commit 4bffb88575b9 · 2020-06-11T13:53:06.000+01:00
diff --git a/dist/plugins/iwsy.js b/dist/plugins/iwsy.js
@@ -39,6 +39,18 @@ const EasyCoder_IWSY = {
 						action
 					});
 					return true;
+				case `remove`:
+					if (compiler.nextTokenIs(`styles`)) {
+						compiler.next();
+						compiler.addCommand({
+							domain: `iwsy`,
+							keyword: `iwsy`,
+							lino,
+							action: `removeStyles`
+						});
+						return true;
+					}
+					return false;					
 				case `script`:
 					const script = compiler.getNextValue();
 					compiler.addCommand({
@@ -176,6 +188,11 @@ const EasyCoder_IWSY = {
 						EasyCoder.iwsyFunctions.stop();
 					}
 					break;
+				case `removeStyles`:
+					if (EasyCoder.iwsyFunctions) {
+						EasyCoder.iwsyFunctions.removeStyles();
+					}
+					break;
 				case `onstep`:
 					const cb = command.pc + 2;
 					if (EasyCoder.iwsyFunctions) {
diff --git a/iwsy/iwsy.js b/iwsy/iwsy.js
@@ -204,7 +204,7 @@ const IWSY = (player, text) => {
                     for (const text of script.content) {
                         if (text.name === item.content) {
                             const converter = new showdown.Converter({
-                                extensions: [`Extension`]
+                                extensions: [`IWSY`]
                             });
                             block.textPanel.innerHTML =
                                 converter.makeHtml(text.content.split(`%0a`).join(`\n`));
@@ -307,7 +307,7 @@ const IWSY = (player, text) => {
         for (const content of script.content) {
             if (content.name === step.target) {
                 const converter = new showdown.Converter({
-                    extensions: [`Extension`]
+                    extensions: [`IWSY`]
                 });
                 const newText = converter.makeHtml(content.content.split(`%0a`).join(`\n`));
                 for (const block of script.blocks) {
@@ -732,7 +732,7 @@ const IWSY = (player, text) => {
         if (typeof showdown === `undefined`) {
             require(`js`, `https://cdn.rawgit.com/showdownjs/showdown/1.9.1/dist/showdown.min.js`,
                 () => {
-                    showdown.extension(`Extension`, {
+                    showdown.extension(`IWSY`, {
                         type: `lang`,
                         filter: function (text, converter) {
                             return text.replace(/~([^~]+)~/g, function (match, group) {
@@ -837,6 +837,14 @@ const IWSY = (player, text) => {
         document.head.appendChild(style);
     };
 
+    // Remove all the CSS styles
+    const removeStyles = () => {
+        const styles = document.getElementsByClassName("iwsy-css");
+        for (const style of styles) {
+            style.parentNode.removeChild(style);
+        }
+    };
+
     // Initialize the script
     const initScript = () => {
         document.onkeydown = null;
@@ -847,10 +855,7 @@ const IWSY = (player, text) => {
         script.singleStep = true;
         script.labels = {};
         script.stop = false;
-        const styles = document.getElementsByClassName("iwsy-css");
-        for (const style of styles) {
-            style.parentNode.removeChild(style);
-        }
+        removeStyles();
         for (const block of script.blocks) {
             const element = block.element;
             if (typeof element !== `undefined`) {
@@ -955,6 +960,7 @@ const IWSY = (player, text) => {
         block,
         run,
         stop,
-        onStep
+        onStep,
+        removeStyles
     };
 };
diff --git a/iwsy/resources/ecs/content.txt b/iwsy/resources/ecs/content.txt
@@ -164,7 +164,7 @@ Restart:
             set the text of ItemNameInput to property `name` of Item
             set style `display` of Editor to `block`
             create TextArea in Editor
-            set the style of TextArea to `width:100%;max-width:100%;height:8em`
+            set the style of TextArea to `width:100%;max-width:100%;height:20em`
             put property `content` of Item into Content
             replace `%0a` with newline in Content
             set the content of TextArea to Content
diff --git a/iwsy/resources/ecs/help.txt b/iwsy/resources/ecs/help.txt
@@ -0,0 +1,115 @@
+!   Help Manager
+
+    script HelpManager
+
+    import div Container
+
+    callback DecoratorCallback
+    variable Mobile
+    variable Page
+    variable Content
+    variable Payload
+    variable ImageCount
+    variable Function
+    variable Data
+    variable Source
+    variable Style
+    variable Item
+    variable Len
+    variable N
+
+    if portrait
+    begin
+      	if mobile set Mobile else clear Mobile
+    end
+    
+    set style `padding` of Container to `0 1em`
+    set style `overflow-y` of Container to `scroll`
+    
+    load showdown
+  	on DecoratorCallback go to Decorate
+
+    on message go to Show
+    set ready
+    stop
+
+Show:
+	put 0 into ImageCount
+    set style `display` of Container to `block`
+    get Page from storage as `.help`
+GetPage:
+    if Page is empty
+    begin
+    	put `start` into Page
+        put Page into storage as `.help`
+    end
+    iwsy remove styles
+    rest get Content from `/resources/help/` cat Page cat `.md`
+    or begin
+    	put empty into Page
+        go to GetPage
+    end
+    set the content of Container to showdown decode Content with DecoratorCallback
+    stop
+
+!------------------------------------------------------------------------------
+!	This is the Showndown extension.
+
+!	Decorate is called for every occurrence of ~...~ in the topic data
+Decorate:
+    put the payload of DecoratorCallback into Payload
+    put the position of `:` in Payload into N
+    if N is -1
+    begin
+    	if Payload is `clear` put `<div style="height:1px;clear:both"></div>` into Payload
+    end
+    else
+    begin
+        put left N of Payload into Function
+        add 1 to N
+        put from N of Payload into Data
+        if Function is `img` gosub to ProcessImage
+    end
+    set the payload of DecoratorCallback to Payload
+    stop
+
+!	Process an image, including positioning and class information
+ProcessImage:
+	put the position of `:` in Data into N
+    if N is -1 return
+    put left N of Data into Source
+    add 1 to N
+    put from N of Data into Data
+    json split Data on `,` into Data
+    put empty into Style
+    put 0 into N
+    while N is less than the json count of Data
+    begin
+    	put element N of Data into Item
+        if Item is `left` put Style cat `float:left;` into Style
+        else if Item is `right` put Style cat `float:right;` into Style
+        else if Item is `center` put Style cat `margin:0 auto;` into Style
+        else if Item is `border` put Style cat `padding:2px;border:1px solid black;` into Style
+        else if Item is `clear` put Style cat `clear:both;` into Style
+        else if right 1 of Item is `%` put Style cat `width:` cat Item cat `;` into Style
+        else
+        begin
+        	if left 1 of Item is not `{` go to NextItem
+            if right 1 of Item is not `}` go to NextItem
+            put from 1 of Item into Item
+        	put the length of Item into Len
+            take 1 from Len
+            put left Len of Item into Item
+            put Style cat Item cat `;` into Style
+        end
+    NextItem:
+    	add 1 to N
+    end
+    put `<img id="ec-image-` cat ImageCount cat `" src="` cat Source
+    	cat `" style="` cat Style cat `" />` into Payload
+    add 1 to ImageCount
+    return
+
+Exit:
+    set style `display` of Container to `none`
+    stop
diff --git a/iwsy/resources/ecs/iwsy.txt b/iwsy/resources/ecs/iwsy.txt
@@ -19,6 +19,7 @@
     div Player
     div UserPanel
     div FileManPanel
+    div HelpPanel
     div Panel
     div Div
     span Status
@@ -32,12 +33,14 @@
     img Delete
     img User
     img FileMan
+    img Help
     a Link
     module StepsModule
     module BlocksModule
     module ContentModule
     module UserModule
     module FileManModule
+    module HelpModule
     variable Mobile
     variable LastSavedState
     variable Content
@@ -111,7 +114,7 @@ L2:
     
     create Masthead in Left
     set the style of Masthead to
-    	`border:0.2em solid purple;text-align:center;color:	lemonchiffon;background:darkmagenta;position:relative`
+    	`border:0.2em solid purple;text-align:center;color:lemonchiffon;background:darkmagenta;position:relative`
     create Title in Masthead
     set the style of Title to `font-size:4em;font-weight:bold`
     set the content of Title to `I Wanna Show You`
@@ -173,6 +176,11 @@ L2:
     set attribute `src` of RunStop to `resources/icon/run.png`
     set attribute `title` of RunStop to `Run`
     create Link in Buttons
+    create Help in Link
+    set the style of Help to `width:40px;margin-right:1.5em`
+    set attribute `src` of Help to `resources/icon/help.png`
+    set attribute `title` of Help to `Help`
+    create Link in Buttons
     create User in Link
     set the style of User to `width:40px;position:absolute;top:0.5em;right:0.5em`
     set attribute `src` of User to `resources/icon/user.png`
@@ -184,6 +192,9 @@ L2:
     
     create FileManPanel in Left
     set the style of FileManPanel to `flex:1;display:none;margin-top:0.5em;border-top:1px solid black`
+    
+    create HelpPanel in Left
+    set the style of HelpPanel to `flex:1;display:none;margin-top:0.5em;border-top:1px solid black`
 
 !	The right-hand panel
     create Right in Body
@@ -353,10 +364,27 @@ L2:
             run Script with FileManPanel as FileManModule
         end
         set style `display` of Player to `none`
+        set style `display` of HelpPanel to `none`
         set style `display` of FileManPanel to `block`
         send to FileManModule
     end
     
+    on click Help
+    begin
+    	if Running stop
+    	if HelpModule is not running
+        begin
+      		require js
+            	`https://cdn.jsdelivr.net/gh/easycoder/easycoder.github.io/dist/plugins/showdown.js?v=` cat now
+            rest get Script from `/resources/ecs/help.txt?v=` cat now
+            run Script with HelpPanel as HelpModule
+        end
+        set style `display` of Player to `none`
+        set style `display` of FileManPanel to `none`
+    	set style `display` of HelpPanel to `block`
+        send to HelpModule
+    end
+    
     on click RunStop go to DoRunStop
     
     on click User
@@ -690,6 +718,7 @@ DoRunStop:
             send Message to StepsModule
         end
 
+		set style `display` of HelpPanel to `none`
 		iwsy run then
         begin
 			gosub to ClearStepsButtons
diff --git a/iwsy/resources/ecs/steps.txt b/iwsy/resources/ecs/steps.txt
@@ -34,6 +34,7 @@
     input DurationInput
     input TargetInput
     input URLInput
+    textarea InitCSS
     img AddStep
     img Up
     img UpContent
@@ -298,6 +299,7 @@ Restart:
     json add `aspect ratio` to InitProperties
     json add `background` to InitProperties
     json add `border` to InitProperties
+    json add `css` to InitProperties
     set ContinueTypes to array
     json add `true` to ContinueTypes
     json add `false` to ContinueTypes
@@ -455,8 +457,12 @@ ReloadStepEditor:
     set the style of TD to `padding-bottom:0.2em`
     create InsertBefore in TD
     set the style of InsertBefore to `width:calc(100% / 3)`
-    set the text of InsertBefore to `Add Step Before`
-    on click InsertBefore go to AddStepBefore
+    if SelectedStep is 0 set the text of InsertBefore to `---`
+    else
+    begin
+        set the text of InsertBefore to `Add Step Before`
+        on click InsertBefore go to AddStepBefore
+    end
     create Save in TD
     set the style of Save to `width:calc(100% / 3)`
     set the text of Save to `Save`
@@ -487,12 +493,24 @@ EditInit:
         create Cell in BlockRow
         set the style of Cell to `width:6em;padding-left:0.2em`
         set the content of Cell to InitProperty
-        index InitInput to B
-        create InitInput in BlockRow
-        set the style of InitInput to `flex:1`
-        put property InitProperty of CurrentStep into Item
-        replace `&quot;` with `"` in Item
-        set the content of InitInput to Item
+        if InitProperty is `css`
+        begin
+        	create InitCSS in BlockRow
+            set the style of InitCSS to `flex:1;height:20em`
+            put property InitProperty of CurrentStep into Item
+            replace `%0a` with newline in Item
+            replace `&quot;` with `"` in Item
+            set the content of InitCSS to Item
+        end
+        else
+        begin
+            index InitInput to B
+            create InitInput in BlockRow
+            set the style of InitInput to `flex:1`
+            put property InitProperty of CurrentStep into Item
+            replace `&quot;` with `"` in Item
+            set the content of InitInput to Item
+        end
     	add 1 to B
     end
 	return
@@ -893,7 +911,7 @@ SaveCurrentStep:
     index StepButton to SelectedStep
     set the text of StepButton to the content of TitleInput
 	index LabelInput to SelectedStep
-    set property `label` of CurrentStep to the content of LabelInput
+    if SelectedStep is not 0 set property `label` of CurrentStep to the content of LabelInput
 	put property `action` of CurrentStep into Action
     if Action is `init`
     begin
@@ -902,7 +920,12 @@ SaveCurrentStep:
         begin
             put element N of InitProperties into InitProperty
             index InitInput to N
-            put InitInput into Item
+            if InitProperty is `css`
+            begin
+            	put the content of InitCSS into Item
+                replace newline with `%0a` in Item
+            end
+            else put InitInput into Item
             replace `"` with `&quot;` in Item
             set property InitProperty of CurrentStep to Item
             add 1 to N
diff --git a/iwsy/resources/help/start.md b/iwsy/resources/help/start.md
diff --git a/js/plugins/iwsy.js b/js/plugins/iwsy.js
