Add diff mode

[tjvr]

Some early experiments at adding features for rendering "diffs".

  when flag clicked
+ repeat (10)
  move (10) steps
- turn ccw (9) degrees
+ turn cw (x position :: +) degrees
+ end
+ moo :: pen

[tjvr]

[tjvr]

-move (10) steps
+move (10) steps
-say [Hello!] for (2) secs
+say [Hello!] for (2) secs
-play sound [meow] until done
+play sound [meow] until done
-set pen color to (0)
+set pen color to (0)
-set [moo v] to (0)
+set [moo v] to (0)
-add [thing] to cows
+add [thing] to cows
-broadcast [message1 v]
+broadcast [message1 v]
-wait (1) secs
+wait (1) secs
-ask [What's your name?] and wait
+ask [What's your name?] and wait
say (pick random (1) to (10))
say (pick random (1) to (10) :: +)
-make the cow moo :: custom
+make the cow moo :: custom

[aldreth]

@tjvr This looks great. Is there anything we can do at RPF to help move this on? The code on your PR looks pretty clear - what were you thoughts about next steps or changes that you'd like to make?

[tjvr]

Hello! :) I think I'm still waiting for design feedback—it's not clear what the best design is here. Specifically the colors to use for the outlines and strikethroughs. (I think we're agreed on outlines for insertions, and strikethrough for deletions.)

[aldreth]

@tjvr Thanks - I'll chase!

[gregorywood]

Hello @tjvr! I'm a web designer at RPF. I have a little design feedback for you:

• Using red as the outline or strikethrough is probably not a good idea because of accessibility considerations. Same goes for green.
• Black feels like a logical choice - can we see a version with black outlines & strikethroughs?
• Could we also perhaps see a version with black outlines and white strikethoughs please?
• Also, is there a way to fade out the block that is being changed? Setting it at 50% opacity or similar would increase legibility further, I think.

[tjvr]

Hey, nice to meet you :-)

is there a way to fade out the block that is being changed? Setting it at 50% opacity or similar would increase legibility further, I think.

We did consider that, but I'm concerned opacity won't look good when printed.

What do you mean by the "block being changed"? I can't imagine fading the inserted blocks would work well! :-)

[tjvr]

    .sb-diff {
      fill: none;
      stroke: #000;
    }
    .sb-diff-ins {
      stroke-width: 2px;
    }
    .sb-diff-del {
      stroke-width: 3px;
    }

    .sb-diff-ins {
      stroke-width: 2px;
      stroke: #000;
    }
    .sb-diff-del {
      stroke-width: 2px;
      stroke: #fff;
    }

[tjvr]

I'm going to merge this experimental diff mode to master for now :)

[rik-cross]

Thanks @tjvr -- if this has been moved to master does that mean we can experiment with this new feature on https://scratchblocks.github.io?

[tjvr]

@rik-cross I shall have to work out how to rebuild it first! :-)

_{Sent with GitHawk}

[rik-cross]

@tjvr thanks! let us know if there's anything we can do to help, we'd love to be able to use this feature.

[tjvr]

I added a dev page, where you can play around with the dev version :)

http://scratchblocks.github.io/v3.2/#when%20flag%20clicked%0A%2Bmove%20(10)%20steps%0A-move%20(10)%20steps%0A

[rik-cross]

@tjvr thanks for setting this up for us! 👍
It looks great -- I'll have a test this week!