Examples

Author: graham-trott

dist/easycoder-min.js

@@ -7973,7 +7973,7 @@ const EasyCoder = {
 			scriptLines
 		} = source ? source : program.source;
 		const lino = this.compiling ? tokens[EasyCoder_Compiler.getIndex()].lino : program[program.pc].lino;
-		var errString = this.compiling ? `Compile error` : `Runtime error in '${program.script}'`;
+		var errString = (this.compiling  ? `Compile` : `Runtime`) + ` error in '${program.script}'`;
 		errString += `:\n`;
 		var start = lino - 5;
 		start = start < 0 ? 0 : start;

dist/easycoder.js

@@ -44,7 +44,7 @@ const EasyCoder = {
 			scriptLines
 		} = source ? source : program.source;
 		const lino = this.compiling ? tokens[EasyCoder_Compiler.getIndex()].lino : program[program.pc].lino;
-		var errString = this.compiling ? `Compile error` : `Runtime error in '${program.script}'`;
+		var errString = (this.compiling  ? `Compile` : `Runtime`) + ` error in '${program.script}'`;
 		errString += `:\n`;
 		var start = lino - 5;
 		start = start < 0 ? 0 : start;

js/easycoder/Main.js

@@ -0,0 +1,94 @@
+!	Twin dice roller
+
+	script DiceRoller
+    
+    div Container
+    div Dice
+    div Dot
+    variable NDice
+    variable M
+    variable N
+    variable D
+    variable Index
+    variable Row
+    variable Dots
+    variable Patterns
+    variable Left
+    variable Top
+    
+    attach Container to `ex-diceroller`
+    on message
+    begin
+    	if the message is `hide`
+    	begin
+            clear Container
+            set style `height` of Container to 0
+        end
+    	else go to Start
+    end
+    set ready
+    stop
+
+Start:
+    set style `height` of Container to ``
+    put 2 into NDice
+    set style `.ec-dice` to `{width:100px;height:100px;margin-right:20px;`
+        cat `background:yellow;border:1px solid black;display:inline-block;`
+        cat `position:relative}`
+    set style `.ec-dot` to `{width:20px;height:20;position:absolute;`
+        cat `background:black;border-radius:10px}`
+    
+    set Patterns to
+    	40 40  0  0  0  0  0  0  0  0  0  0
+        10 40 70 40  0  0  0  0  0  0  0  0
+        10 40 40 40 70 40  0  0  0  0  0  0
+        10 10 70 10 10 70 70 70  0  0  0  0
+        10 10 70 10 10 70 70 70 40 40  0  0
+        10 10 10 70 40 10 40 70 70 10 70 70
+    
+    set the elements of Dice to NDice
+
+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
+            set the class of Dice to `ec-dice`
+            gosub to RandomiseDots
+            add 1 to N
+        end
+        wait 10 ticks
+        add 1 to M
+    end
+    on click Dice go to Redraw
+    stop
+
+RandomiseDots:
+	put random 6 into Dots
+    multiply Dots by 12 giving Row
+    put 0 into D
+    while D is less than 12
+    begin
+    	add D to Row giving Index
+    	index Patterns to Index
+        put Patterns into Top
+        add 1 to D
+        if Top is not 0
+        begin
+        	add 1 to Index
+    		index Patterns to Index
+        	put Patterns into Left
+            create Dot in Dice
+            set the class of Dot to `ec-dot`
+            set style `top` of Dot to Top
+            set style `left` of Dot to Left
+    		on click Dot go to Redraw
+        end
+    	add 1 to D
+    end
+	return

resources/ecs/diceroller.ecs

@@ -4,6 +4,9 @@
 
     import module Showdown
 
+    module DiceRollerModule
+    div DiceRoller
+    button ShowDiceRoller
     module ImageSwitcherModule
     div ImageSwitcher
     button ShowImageSwitcher
@@ -20,6 +23,7 @@
     variable Message
 
     rest get Content from `/resources/md/examples.md`
+    replace `/SHOW-DICEROLLER/` with `<button id="show-diceroller">Show</button>` in Content
     replace `/SHOW-IMAGESWITCHER/` with `<button id="show-imageswitcher">Show</button>` in Content
     replace `/SHOW-USERCAPTURE/` with `<button id="show-usercapture">Show</button>` in Content
     replace `/SHOW-LIFE/` with `<button id="show-life">Show</button>` in Content
@@ -40,6 +44,17 @@
 Start:
 	scroll to 0
     send Content to Showdown
+
+    if DiceRollerModule is not running
+    begin
+    	wait 10 ticks
+    	rest get Script from `/resources/ecs/diceroller.ecs`
+        run Script as DiceRollerModule
+        attach DiceRoller to `ex-diceroller`
+        attach ShowDiceRoller to `show-diceroller`
+        fork to InitDiceRoller
+    end
+
     if ImageSwitcherModule is not running
     begin
     	wait 10 ticks
@@ -73,9 +88,19 @@ Start:
     attach ShowLifeDoc to `show-lifedoc`
     on click ShowLifeDoc send `life` to parent
 
-    send to ImageSwitcherModule
     stop
 
+InitDiceRoller:
+	send `hide` to DiceRollerModule
+    set the text of ShowDiceRoller to `Show`
+    on click ShowDiceRoller
+    begin
+        set the text of ShowDiceRoller to `Hide`
+        on click ShowDiceRoller go to InitDiceRoller
+        send `show` to DiceRollerModule
+    end
+	stop
+
 InitImageSwitcher:
     set style `display` of ImageSwitcher to `none`
     set the text of ShowImageSwitcher to `Show`

resources/ecs/examples.ecs

@@ -11,7 +11,6 @@
     div Dialog
     div Row
     div Label
-    div Text
     span Cell
     input Name
     input Email
@@ -23,7 +22,6 @@
     variable W
     variable H
     variable Message
-    variable Markup
     variable ECPayload
     variable Payload
   	callback DecoratorCallback
@@ -192,4 +190,4 @@ Decorate:
   	put from 5 of Payload into Payload
   end
   set the payload of DecoratorCallback to Payload
-  stop
+  stop

resources/ecs/usercapture.ecs

@@ -8,6 +8,11 @@ The following websites were all built entirely in EasyCoder script:
  - [Rembrandt.ie](https://rembrandt.ie)
  - [Storyteller](https://storyteller20.neocities.org)
 
+## 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.
+~<div id="ex-diceroller"></div>~
+
 ## Image switcher /SHOW-IMAGESWITCHER/
 
 There are 9 images with only 1 showing. A row of thumbnail icons lets the user move left or right or select a specific image.
@@ -17,7 +22,7 @@ There are 9 images with only 1 showing. A row of thumbnail icons lets the user m
 
 This is a rewrite of a script published in [Smashing Magazine](https://www.smashingmagazine.com/2020/03/introduction-alpinejs-javascript-framework/) as an example of how to use the Alpine.js micro-framework. It represents a block added to a web page, that displays an announcement and handles feedback from users.
 ~<div id="ex-usercapture"></div>~
-The User Capture can be run as an independent web page; see [User Capture](/usercapture.html). If you view the page source you will see the entire script inside its special preformatted element.
+The User Capture can be run as an independent web page; see [User Capture](https://easycoder.github.io/examples/usercapture). If you view the page source you will see the entire script inside its special preformatted element.
 
 ## Storyteller