diff --git a/resources/ecs/diceroller.ecs b/resources/ecs/diceroller.ecs index bf9ba2c..d9b55d8 100644 --- a/resources/ecs/diceroller.ecs +++ b/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 diff --git a/resources/ecs/imageswitcher.ecs b/resources/ecs/imageswitcher.ecs index 2217bdd..a5856b5 100644 --- a/resources/ecs/imageswitcher.ecs +++ b/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 \ No newline at end of file + stop diff --git a/resources/md/diceroller.md b/resources/md/diceroller.md new file mode 100644 index 0000000..afe5f8c --- /dev/null +++ b/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. diff --git a/resources/md/examples.md b/resources/md/examples.md index 58c9493..059c43e 100644 --- a/resources/md/examples.md +++ b/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/