Full project: SuperCodingBall

[Clément Contet]

Hello,

I'm working on my first project based on Blockly (as part of an internal competition in my company)
It's free and open source => https://www.supercodingball.com (https://github.com/Orange-OpenSource/super-coding-ball)
The goal is to teach teenagers some programming, based on a football game (I have done some Scratch teaching with 10+ children, and while I love Scratch, I found that children are often overwelmed by the number of blocks and the "blank page" syndrome).

So SuperCodingBall aims to be a fun, and simplified introduction to Scratch.

The principle is simple:

• the player will train a team of 4 footballers (the humans) who will face 4 monsters
• the team's strategy is made with blocks, then the game takes place automatically following the strategies of the two opponents
• there is an offline mode to face ready-made teams, and an online game to face your friends

 
On the technical side:

• made with Angular+Bootstrap (it works on mobile, but it's more usable on bigger screens)
• Blockly Typescript typings are used when available
• teams strategies use Javascript code generator
• almost all blocks are custom blocks (generated with Blockly Developer Tools)
• custom categories (to show only an icon, and save space on mobile)
• slightly customized Zelos renderer (to make blocks more compact)
• there is a tutorial, scrolling from block to block
• data hosted on internal platform of my company
• available in English and French (translators welcomed!)

I'd love to see some adoption in schools. I'll try to promote the app for back to school (even though I don't really know how yet!).

In the meantime, don't hesitate to report bugs/improvements/etc !

[Aaron Dodson]

This looks really cool, thanks for sharing! I really like how you're appealing to students' existing interests - I can definitely see that making the programming concepts more approachable and engaging.

[Uwe K]

Hello,

this is incredibly well done, congratulations! It could be an advertisement for Blockly as well as a great teaching tool.

Suggestions:
 * there is a rendering issue with the bottom of action blocks (run,sprint,kick) overlapping their parent block
 * maybe disable the idle animations when the game is not running
 * offer example programs of basic tactics, to give students something to build on

[Clément Contet]

Hi, thanks for your feedback!

• there is a rendering issue with the bottom of action blocks (run,sprint,kick) overlapping their parent block

If you are talking about this, I think it's a bug with Zelos (it works better with Geras, but I really like how Zelos looks like Scratch).

The root cause is that my actions blocks (blue ones) are not stackable (one can only perform one action at each moment), so that there is no bottom connector on the block.

• maybe disable the idle animations when the game is not running

But I like them!! :D

• offer example programs of basic tactics, to give students something to build on

There is one basic tactic shown at the bottom of "How do we play?". Maybe it's not visible enough?

[Beka Westberg]

Hello,

This is so cool :D thank you for sharing it! I really love the game design, and the block design. The images for the players are so cute, and the blocks are really readable!

> Uwe: there is a rendering issue with the bottom of action blocks (run,sprint,kick) overlapping their parent block...
> clement: If you are talking about this, I think it's a bug with Zelos...

Oof yeah that's a bug with zelos. I've filed #5170 to track it. Thanks both of you for finding it :D

Suggestions:

  * One thing I noticed was that in the tutorial/example some of the comments get cut off. I'm not sure why that's happening though because when I tested it in core just now, they still have the behavior from #2917. But it looks like your other ones are working just fine, so it probably just needs linebreaks :D

  * I think you can remove the number block from your toolbox, and add it to the math operation block above instead. That way people don't have to do as much dragging :D (I'm lazy haha)

Questions:

  * I really like the toolbox with the icons! Are you using the new toolbox API? Or did you roll it yourself? If you're using the new API, what did you think of it?

  * Are you using custom rendering for some of your dropdown fields, so that they don't have the box around them? If so, what did you think of the fields API?

Thank you again for sharing this! It's a really well made project with a great premise :D I especially loved the design of all of your 'controls' blocks, like "I am closest to ball", "myself is attacker on the right side". They are so readable and clear! I reminded me a lot of a different conversation about if blocks I was having last week :D

Best wishes,

Beka

[Clément Contet]

> This is so cool :D thank you for sharing it! I really love the game design, and the block design. The images for the players are so cute, and the blocks are really readable!

Thank you :)

> I've filed #5170 to track it.

Great, thanks!

> One thing I noticed was that in the tutorial/example some of the comments get cut off. I'm not sure why that's happening though because when I tested it in core just now, they still have the behavior from #2917. But it looks like your other ones are working just fine, so it probably just needs linebreaks :D

I don't think comments got cut off (they already have line breaks).

The '...' at the end of some comments indicate that they are 'continued' with the next comment.

> I think you can remove the number block from your toolbox, and add it to the math operation block above instead. That way people don't have to do as much dragging :D (I'm lazy haha)

You're right! I've just set the math_number as shadow block of math_arithmetic.

> I really like the toolbox with the icons! Are you using the new toolbox API? Or did you roll it yourself? If you're using the new API, what did you think of it?

Yes! To be honest, I've just followed this Codelab. I didn't really know I was using a new API ;)

> Are you using custom rendering for some of your dropdown fields, so that they don't have the box around them? If so, what did you think of the fields API?

Nope, they are standard dropdown.

Thanks again for feedback and support!

Clément

[Uwe K]

I found the "How do we play?" section, but since I looked at the editor first, it took me a good while to figure out that I had to go back two pages. It would have helped me if the editor page had a link to it.

[Clément Contet]

I found the "How do we play?" section, but since I looked at the editor first, it took me a good while to figure out that I had to go back two pages. It would have helped me if the editor page had a link to it.

The link is on the homepage so I figured it was visible enough.

But I'll try to think about how to make it visible from the editor.

[Beka Westberg]

> I don't think comments got cut off (they already have line breaks).

> The '...' at the end of some comments indicate that they are 'continued' with the next comment.

Derp, thanks for the clarification!

> Yes! To be honest, I've just followed this Codelab. I didn't really know I was using a new API ;)

Haha sweet! That's what we like to hear :D

> Nope, they are standard dropdown.

Huh interesting, I guess that's something that Zelos does. Good to know!

Thank you again for sharing =)

-- Beka