Micro-chat (#1425)

* added microchat tutorial

* animations

docs/projects/games.md

@@ -13,15 +13,21 @@ Fun games to build with your @boardname@.
   "description": "Make the Rock-Paper-Scissors game on your micro:bit and challenge your friends.",
   "imageUrl":"/static/mb/projects/a4-motion.png"
 }, {
-  "name": "Magic Button Trick",
-  "url":"/projects/magic-button-trick",
-  "description": "Build a magic trick that uses the compass to detect a nearby magnet!",
-  "imageUrl":"/static/mb/projects/magic-button-trick.png"
+  "name": "Coin Flipper",
+  "url":"/projects/coin-flipper",
+  "description": "Guess the coin toss and see if you're lucky.",
+  "imageUrl": "/static/mb/projects/coin-flipper.png",
+  "cardType": "tutorial"
 }, {
   "name": "Reaction Time",
   "url":"/projects/reaction-time",
   "description": "Make a reaction time experiment that responds to your body's conductivity!",
   "imageUrl":"/static/mb/projects/reaction.jpg"
+}, {
+  "name": "Magic Button Trick",
+  "url":"/projects/magic-button-trick",
+  "description": "Build a magic trick that uses the compass to detect a nearby magnet!",
+  "imageUrl":"/static/mb/projects/magic-button-trick.png"
 }, {
   "name": "Snap the dot",
   "url": "/projects/snap-the-dot",

docs/projects/messenger.md

@@ -1,66 +0,0 @@
-# Messenger
-
-![](/static/mb/projects/a9-radio.png)
-
-Use the radio in an app that sends "YO" messages.
-
-## Step 1
-
-Use ``||input:on button pressed||`` to send the number `0` over radio.
-
-```blocks
-input.onButtonPressed(Button.A, () => {
-    radio.sendNumber(0);
-});
-```
-
-## Step 2
-
-Use ``||radio:on data packet received||`` display "YO" when the number ``0`` is received
-by radio.
-
-```blocks
-let message = 0;
-radio.onDataPacketReceived(({ receivedNumber }) => {
-    message = receivedNumber;
-    if (message == 0) {
-        basic.showString("YO")
-    }
-})
-```
-
-Download the program to one @boardname@ and then to another. Press button **A** on one and see if the other gets a message.
-
-## Step 3
-
-Use ``||input:on button pressed||`` to send the number `1` over radio.
-
-```blocks
-input.onButtonPressed(Button.B, () => {
-    radio.sendNumber(1);
-});
-```
-
-## Step 4
-
-Add blocks in ``||radio:on data packet received||`` to display "BYE" when the number ``1`` is received
-by radio.
-
-```blocks
-let message = 0;
-radio.onDataPacketReceived(({ receivedNumber }) => {
-    message = receivedNumber;
-    if (message == 0) {
-        basic.showString("YO")
-    }
-    if (message == 1) {
-        basic.showString("BYE")
-    }
-})
-```
-
-Download the program to the @boardname@s again and try your messenger!
-
-```package
-radio
-```

docs/projects/micro-chat.md

@@ -0,0 +1,77 @@
+# Micro Chat
+
+## Introduction @unplugged
+
+![Two @boardname@ connected via radio](/static/mb/projects/a9-radio.png)
+
+Use the **radio** to send and receive messages with other @boardname@.
+
+## Sending a message @fullscreen
+
+Use ``||input:on button pressed||`` to send a number over radio with ``||radio:send string||``.
+All @boardname@ nearby will receive this message.
+
+You can also add ``||basic:show icon||`` and ``||basic:clear screen||`` blocks to show a little animation when the message is sent.
+
+```blocks
+input.onButtonPressed(Button.A, () => {
+    radio.sendString("Yo");
+    basic.showIcon(IconNames.Chessboard)
+    basic.clearScreen();
+});
+```
+
+## Receiving a message @fullscreen
+
+Add a ``||radio:on received number||`` block to run when a message is received. 
+
+```blocks
+radio.onReceivedString(function (receivedString) {
+})
+```
+
+## Displaying text @fullscreen
+
+Add a ``||basic:show string||`` to display the string on the screen. You will find the ``receivedString`` variable
+under the **Variables** toolbox.
+
+```blocks
+radio.onReceivedString(function (receivedString) {
+    basic.showString(receivedString);
+})
+```
+
+## Testing in the simulator @fullscreen
+
+Press button **A** on the simulator, you will notice that a second @boardname@ appears (if your screen is too small, this might not happen). Try pressing **A** again and notice that the "Yo" message gets displayed on the other @boardname@
+
+```blocks
+input.onButtonPressed(Button.A, () => {
+    radio.sendString("Yo");
+    basic.showIcon(IconNames.Chessboard)
+    basic.clearScreen();
+});
+radio.onReceivedString(function (receivedString) {
+    basic.showString(receivedString);
+})
+```
+
+## Try it for real @fullscreen
+
+If you have @boardname@s, download the program to two @boardname@. Press button **A** on one and see if the other gets a message.
+
+## Groups @fullscreen
+
+Use the ``||radio:set group||`` block to assign a **group** number to your program. You will only receive messages from @boardname@ within the same group. Use this to avoid receiving messages from all the other @boardname@.
+
+```blocks
+/**
+* Pick a unique group in your classroom!
+*/
+radio.setGroup(123)
+```
+
+
+```package
+radio
+```

docs/tutorials.md

@@ -38,10 +38,10 @@ Here are some cool tutorials to get you started with your @boardname@!
   "imageUrl":"/static/mb/projects/a3-pins.png",
   "cardType": "tutorial"
 }, {
-  "name": "Coin Flipper",
-  "url":"/projects/coin-flipper",
-  "description": "Guess the coin toss and see if you're lucky.",
-  "imageUrl": "/static/mb/projects/coin-flipper.png",
+  "name": "Micro Chat",
+  "url":"/projects/micro-chat",
+  "description": "Build your own social network made of @boardnames.",
+  "imageUrl": "/static/mb/projects/a9-radio.png",
   "cardType": "tutorial"
 }]
 ```