Merge pull request #41 from easycoder/dev

Examples

Author: easycoder

resources/ecs/diceroller.ecs

@@ -5,6 +5,7 @@
     div Container
     div Dice
     div Dot
+    div Text
     variable NDice
     variable M
     variable N
@@ -15,6 +16,10 @@
     variable Patterns
     variable Left
     variable Top
+    variable Markup
+    variable ECPayload
+    variable Payload
+  	callback DecoratorCallback
 
     attach Container to `ex-diceroller`
     on message
@@ -47,17 +52,24 @@ Start:
         10 10 10 70 40 10 40 70 70 10 70 70
 
     set the elements of Dice to NDice
+    put 0 into N
+    while N is less than NDice
+    begin
+        index Dice to N
+        create Dice in Container
+        add 1 to N
+    end
+    gosub to AddDescription
 
 Redraw:
     put 0 into M
     while M is less than 10
     begin
-        clear Container
         put 0 into N
         while N is less than NDice
         begin
             index Dice to N
-            create Dice in Container
+            clear Dice
             set the class of Dice to `ec-dice`
             gosub to RandomiseDots
             add 1 to N
@@ -92,3 +104,26 @@ RandomiseDots:
     	add 1 to D
     end
 	return
+
+!   Add the description text
+AddDescription:
+ 	 on DecoratorCallback go to Decorate
+	rest get Markup from `/resources/md/diceroller.md`
+	create Text in Container
+    set the content of Text to showdown decode Markup with DecoratorCallback
+    return
+
+Decorate:
+  put the payload of DecoratorCallback into Payload
+  if Payload is `ec` put ECPayload into Payload
+  else if left 5 of Payload is `code:`
+  begin
+  	put `<span style="font-family:mono;color:darkred">` cat from 5 of Payload into Payload
+    put Payload cat `</span>` into Payload
+  end
+  else if left 5 of Payload is `html:`
+  begin
+  	put from 5 of Payload into Payload
+  end
+  set the payload of DecoratorCallback to Payload
+  stop

resources/ecs/imageswitcher.ecs

@@ -10,11 +10,11 @@
     img Thumb
     img Image
     a Link
-    variable Markup
     variable ImageCount
     variable N
     variable M
     variable Width
+    variable Markup
     variable ECPayload
     variable Payload
   	callback DecoratorCallback
@@ -101,6 +101,7 @@ DoThumb:
     index Image to N
     go to Select
 
+!   Add the description text
 AddDescription:
  	 on DecoratorCallback go to Decorate
 	rest get Markup from `/resources/md/imageswitcher.md`
@@ -121,4 +122,4 @@ Decorate:
   	put from 5 of Payload into Payload
   end
   set the payload of DecoratorCallback to Payload
-  stop
+  stop

resources/md/diceroller.md

@@ -0,0 +1,7 @@
+## Notes
+
+Dice Roller can be run as an independent web page; see [Dice Roller](https://easycoder.github.io/examples/dice). If you view the page source you will see the entire script inside its special preformatted element.
+
+After declaring all its variables, the script attaches a variable to the <div> element defined at the top of the file. It then creates 2 dice and paints onto each one the number of spots chosen by a random election. Both the dice and its spots are <div> elements; the latter have rounded corners of 50% radius so they appear as circles.
+
+There are many ways of drawing dots on a dice. In this example we use a table with 6 rows, one for each possible value. In each of these rows are 6 pairs of top/left values giving the position of a dot. The renderer finds the right line then works its way along it, taking each pair of values and creating a dot using absolute positioning. When it reaches a zero in the line it stops.

resources/md/examples.md

@@ -10,7 +10,7 @@ The following websites were all built entirely in EasyCoder script:
 
 ## Dice roller /SHOW-DICEROLLER/
 
-This simple demo shows two dice with a random choice of faces. Click either dice to select a new pair of value. A simple animation simulates the rolling of the dice.
+This simple demo shows two dice with a random choice of faces. Click either dice to select a new pair of value. A simple animation mimics the rolling of the dice.
 ~<div id="ex-diceroller"></div>~
 
 ## Image switcher /SHOW-IMAGESWITCHER/