From 2838d896ceef727ab0f307b2302bf9fcc3305a76 Mon Sep 17 00:00:00 2001
From: Graham Trott <gtanyware@gmail.com>
Date: Wed, 15 Apr 2020 23:10:33 +0100
Subject: [PATCH] Examples

---
 dist/easycoder-min.js         |  2 +-
 dist/easycoder.js             |  2 +-
 js/easycoder/Main.js          |  2 +-
 resources/ecs/diceroller.ecs  | 94 +++++++++++++++++++++++++++++++++++
 resources/ecs/examples.ecs    | 27 +++++++++-
 resources/ecs/usercapture.ecs |  4 +-
 resources/md/examples.md      |  7 ++-
 7 files changed, 130 insertions(+), 8 deletions(-)
 create mode 100644 resources/ecs/diceroller.ecs

diff --git a/dist/easycoder-min.js b/dist/easycoder-min.js
index 536b757..320f622 100644
--- a/dist/easycoder-min.js
+++ b/dist/easycoder-min.js
@@ -212,7 +212,7 @@ keyword:"goto",lino:a,goto:this.getPc()+1}),this.continue=!1):this.addCommand({d
 name:f.token,elements:1,index:0,value:[{}],element:[],extra:d};"dom"===d&&(a.element=[]);this.addCommand(a);return a},compileToken:function(){var a=this.getToken();if(a){this.mark();for(var b=$jscomp.makeIterator(Object.keys(this.domain)),c=b.next();!c.done;c=b.next()){if((c=this.domain[c.value])&&(c=c.getHandler(a))&&c.compile(this))return;this.rewind()}console.log("No handler found");throw Error("I don't understand '"+a+"...'");}},compileOne:function(){var a=this.getToken();if(a){this.warnings=
 [];var b=this.program.length;if(a.endsWith(":")){a=a.substring(0,a.length-1);if(this.symbols[a])throw Error("Duplicate symbol: '"+a+"'");this.symbols[a]={pc:b};this.index++}else this.compileToken()}},compileFromHere:function(a){for(;this.index<this.tokens.length;){var b=this.tokens[this.index].token;if("else"===b)return this.program;this.compileOne();if(-1<a.indexOf(b))break}},compile:function(a){this.tokens=a;this.index=0;this.program=[];this.program.script=0;this.program.symbols={};this.symbols=
 this.program.symbols;this.warnings=[];this.compileFromHere([]);this.addCommand({domain:"core",keyword:"exit",lino:this.getLino(),next:0});for(var b in this.symbols)a=this.program[this.symbols[b].pc],!a.isSymbol||a.used||a.exporter||console.log("Symbol '"+a.name+"' has not been used.");return this.program}},EasyCoder={name:"EasyCoder_Main",domain:{core:EasyCoder_Core,browser:EasyCoder_Browser,json:EasyCoder_Json,rest:EasyCoder_Rest},elementId:0,runtimeError:function(a,b){this.lino=a;this.reportError({message:"Line "+
-(0<=a?a:"")+": "+b},this.program);this.program&&(this.program.aborted=!0)},nonNumericValueError:function(a){this.runtimeError(a,"Non-numeric value")},variableDoesNotHoldAValueError:function(a,b){this.runtimeError(a,"Variable '"+b+"' does not hold a value")},reportError:function(a,b,c){if(a.message)if(this.compiling||b){c=c?c:b.source;var d=c.tokens;c=c.scriptLines;d=this.compiling?d[EasyCoder_Compiler.getIndex()].lino:b[b.pc].lino;b=this.compiling?"Compile error":"Runtime error in '"+b.script+"'";
+(0<=a?a:"")+": "+b},this.program);this.program&&(this.program.aborted=!0)},nonNumericValueError:function(a){this.runtimeError(a,"Non-numeric value")},variableDoesNotHoldAValueError:function(a,b){this.runtimeError(a,"Variable '"+b+"' does not hold a value")},reportError:function(a,b,c){if(a.message)if(this.compiling||b){c=c?c:b.source;var d=c.tokens;c=c.scriptLines;d=this.compiling?d[EasyCoder_Compiler.getIndex()].lino:b[b.pc].lino;b=(this.compiling?"Compile":"Runtime")+(" error in '"+b.script+"'");
 b+=":\n";var e=d-5;for(e=0>e?0:e;e<d;e++){var f=(""+(e+1)).padStart(4," ");b+=f+" "+c[e].line.split("\\s").join(" ")+"\n"}b+=a.message+"\n";a=EasyCoder_Compiler.getWarnings();if(a.length)for(b+="Warnings:\n",a=$jscomp.makeIterator(a),c=a.next();!c.done;c=a.next())b+=c.value+"\n";console.log(b);alert(b)}else a="Error: "+a.message,alert(a),console.log(a);else console.log("An error occurred - origin was "+a.path[0])},getSymbolRecord:function(a){a=this[this.symbols[a].pc];return a.alias?this.getSymbolRecord(a.alias):
 a.exporter?EasyCoder.scripts[a.exporter].getSymbolRecord(a.exportedName):a},verifySymbol:function(a){return this.symbols.hasOwnProperty(a)},encode:function(a){return EasyCoder_Value.encode(a,this.encoding)},decode:function(a){return EasyCoder_Value.decode(a,this.encoding)},evaluate:function(a){return EasyCoder_Value.evaluate(this,a)},getValue:function(a){return EasyCoder_Value.getValue(this,a)},getFormattedValue:function(a){a=EasyCoder_Value.evaluate(this,a);if(a.numeric)return a.content;if("boolean"===
 a.type)return a.content?"true":"false";if(this.isJsonString(a.content))try{var b=JSON.parse(a.content);return JSON.stringify(b,null,2)}catch(c){return this.reportError(c),"{}"}return a.content},getSimpleValue:function(a){return!0===a||!1===a?{type:"boolean",content:a}:{type:"constant",numeric:Number.isInteger(a),content:a}},run:function(a){a&&(this.program=this,EasyCoder_Run.run(this,a))},exit:function(){EasyCoder_Run.exit(this)},register:function(a){$jscomp$this.program=a},require:function(a,b,c){var d=
diff --git a/dist/easycoder.js b/dist/easycoder.js
index 3182c8e..0f32cd6 100644
--- a/dist/easycoder.js
+++ b/dist/easycoder.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;
diff --git a/js/easycoder/Main.js b/js/easycoder/Main.js
index e71f12d..3b02844 100644
--- a/js/easycoder/Main.js
+++ b/js/easycoder/Main.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;
diff --git a/resources/ecs/diceroller.ecs b/resources/ecs/diceroller.ecs
new file mode 100644
index 0000000..bf9ba2c
--- /dev/null
+++ b/resources/ecs/diceroller.ecs
@@ -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
diff --git a/resources/ecs/examples.ecs b/resources/ecs/examples.ecs
index d9e3ede..f47b2aa 100644
--- a/resources/ecs/examples.ecs
+++ b/resources/ecs/examples.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`
diff --git a/resources/ecs/usercapture.ecs b/resources/ecs/usercapture.ecs
index bce0a5a..fd4be17 100644
--- a/resources/ecs/usercapture.ecs
+++ b/resources/ecs/usercapture.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
\ No newline at end of file
+  stop
diff --git a/resources/md/examples.md b/resources/md/examples.md
index feb9a7a..58c9493 100644
--- a/resources/md/examples.md
+++ b/resources/md/examples.md
@@ -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