DEV Community

Discussion on: Frontend Shorts: Vue.js + Vanilla.js — Digital Dices

Collapse
 
gtanyware profile image
Graham Trott • Edited

This looked like a good way to spend an hour or so of lockdown (as well as providing a neat addition to my collection of demos), so I prototyped the same thing using my own DSL. My main aim was to see how efficient I could make the algorithm for drawing the dots, so I used a table of coordinates, with 6 rows each having 6 pairs of values that specify the top/left coordinates of a dot, which is itself constructed as a rounded DIV with absolute positioning. The renderer runs along the row for the dot count requested and stops when it hits a zero. I added a simple animation for when a dice is clicked.

I've put it up on a demo website. The script is in the BODY of the page and is compiled and run by a JS library called in by the HEAD. The actual code looks like this:

!   Twin dice roller

    script DiceRoller

    div Screen
    div Dice
    div Dot
    variable NDice
    variable M
    variable N
    variable D
    variable Index
    variable Row
    variable Dots
    variable Patterns
    variable Left
    variable Top

!   Set up constants
    put 2 into NDice
!   Poke some CSS styles into the HEAD
    set style `.ec-dice` to `{width:100px;height:100px;margin: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}`

!   'Patterns' contains 6 rows of data. Each is a set of 6 top/left pairs
!   to set the dot positions. Iteration stops at the first zero.
    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

!   Create the screen
    create Screen
    set the style of Screen to `padding:1em`
    set the elements of Dice to NDice

!   Draw or redraw
Redraw:
!   Run the randomiser 10 times to simulate the dice spinning
    put 0 into M
    while M is less than 10
    begin
!       Create a single dice
        put 0 into N
        while N is less than NDice
        begin
            index Dice to N
            remove element Dice
            create Dice in Screen
            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

!   Randomize the dots for a single dice
!   This is done by reading from the appropriate row of the data table.
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