Merge branch 'master' into cclover-hint-fix

docs/hardware.md

@@ -135,10 +135,10 @@ These boards run MakeCode Arcade games. They are based on our guidelines, adhere
         "variant": "hw---rpi"
     },
     {
-        "name": "Arcade cabinet",
-        "description": "Full size Arcade cabinet powered by a Raspberry Pi.",
+        "name": "Arcade cabinets",
+        "description": "Choose one of three options.",
         "imageUrl": "/static/hardware/raspberry-pi/wooden-cabinet/gallery.jpg",
-        "url": "/hardware/raspberry-pi/wooden-cabinet",
+        "url": "/hardware/cabinets",
         "variant": "hw---rpi"
     },
     {

docs/hardware/arcade-cabinets/cardboard-arcade.md

@@ -0,0 +1,83 @@
+# Cardboard Arcade Cabinet
+
+---
+
+You can turn your Surface PC (or Chromebook) into a cardbord arcade cabinet in a single day! 
+
+Grab some cardboard scraps and a ruler, and let's get started!
+
+![Cardboard Cabinet](/static/hardware/arcade-kiosks/cardboard-kiosk.png)
+
+## Materials
+
+* Computer with 1 USB port (or 2 USB ports for 2-player games), internet connection
+* Cardboard boxes with large panels 
+* 1 joystick, 4 buttons (or 2 joysticks, 6 buttons for 2-player kiosk) with JST cables and USB – note that you usually order these in an Arcade Game Kit. We used the [Hikig 2-Player LED Arcade DIY Kit for USB](https://www.amazon.com/dp/B07JFXQSM5) which is $45 on Amazon.
+* Ruler
+* Pen knife or scissors
+* 4 small zip ties (8 for 2 shoeboxes)
+* Tape (packing tape and/or duct tape)
+* Pen or Pencil
+* Decorating materials – paint, markers, glitter, stickers, contact paper, etc.
+
+![Project materials](/static/hardware/arcade-kiosks/materials.png)
+
+## Instructions
+
+### Step 1
+
+Measure your laptop and make sure you know the dimensions of the total surface when opened, as well as the screen portion. 
+
+Use those measurements to make a paper template that you can use throughout the rest of the project.  
+
+  ![Project materials](/static/hardware/arcade-kiosks/template.jpg)
+
+### Step 2
+
+Figure out how your laptop will be situated inside your cardboard arcade cabinet shell.  Does the laptop open all the way to 180°? You can try pushing it flat against the wall of a large box and secure it directly to the side. Does it only open to around 150°? You may need to plan for your screen to be at a bit of an angle or for your arcade cabinet to have a shelf to contain the lower portion.  
+
+Use your computer’s measurements to draw a few possible designs for your cabinet.  Don’t forget to leave room for your controller buttons and all the wires that attach to them. 
+
+ ![Project materials](/static/hardware/arcade-kiosks/example.jpg)
+
+You’ll also need to figure out the support structure that will hold your computer.  Will it be taped inside? Propped up by a box? Will you build handles and slats into the inside of your cabinet to keep it steady? 
+
+### Step 3
+
+Start building!  Use your template to help you measure your cardboard pieces and start cutting and folding to get the cabinet you designed.  You will probably need a good amount of heavy-duty tape to keep it all together.  
+
+Make sure you test fit your laptop along the way to be certain that everything is going to come together in the end.  
+
+### Step 4
+
+Add the buttons.  For this activity, we used the Hikig 2-player LED buttons for Raspberry Pi and Windows (aka.ms/buttonsUsed) but you can select whatever set of buttons works with your computer. You can even use USB or Bluetooth handheld controllers, or a normal keyboard. 
+
+The controllers you select will likely come with clear instructions about how to hook the buttons into the circuit board and how to plug them into your machine.   
+
+  ![Project materials](/static/hardware/arcade-kiosks/testing.jpg)
+
+If you’re using a keyboard, no additional steps should be necessary in that area, but keep these key codes in mind so two players can play on the same machine: 
+
+ ![Project materials](/static/hardware/arcade-kiosks/key.jpg)
+
+### Step 5
+
+Put it all together!  Now that you have the shell of your arcade cabinet and your buttons are wired, it’s time to put everything together.   
+
+Insert the buttons into your cardboard cabinet, plug them into your laptop, and slide your laptop into the box.  
+
+### Step 6
+
+Test it out!  How does it work? Can you navigate the kiosk using your controller buttons? How does everything look? 
+
+It’s perfectly normal to require some debugging at this stage. Make sure to read through the controller instructions again or ask a friend for help if you get stuck.   
+
+### Step 7
+
+Perfect and decorate!  Now is the time to wrap your cabinet in contact paper to keep it looking all clean and tidy.  Feel free to draw designs, add stickers, or just trim it out with a bit of tape! 
+
+ ![Project materials](/static/hardware/arcade-kiosks/kids-kiosk.jpg)
+
+Once you’re done, show off what you made with family and friends.  
+
+_If you decide to share on social media, don’t forget to tag Microsoft MakeCode using @MSMakeCode. We might just feature one of your designs!_

docs/hardware/arcade-cabinets/full-size-kiosk.md

@@ -0,0 +1,101 @@
+# Wooden Arcade Cabinet
+
+These instructions will show you everything you need to build your own inexpensive full-size arcade cabinet with the help of your local makerspace or woodshop.
+
+![Arcade cabinet](/static/hardware/arcade-kiosks/cabinet-small-image.png)
+
+_Note: This project is meant to be run via a standard internet enabled laptop, pointed to [arcade.makecode.com/kiosk](https://arcade.makecode.com/--kiosk)._
+
+### ~ hint
+
+#### WARNING: Power Tools required
+
+To complete this project as written, you will need access to power tools and a CNC machine. If you don't have a CNC machine available, you can take the SVG files to a local printhouse to have full-size vinyl patterns made.
+
+Make sure to follow all safety procedures or ask a professional for help.
+
+### ~
+
+## Materials
+
+The cabinet is built out of 3 - 8' x 4' plywood sheets of 1/2" thickness.
+
+* **3** - 8' x 4' x 1/2" maple plywood sheets. Feel free to use other sheets based on your availability.
+* **1** - arcade button set for 2 players (https://www.amazon.com/gp/product/B00WDQWK5M)
+* **1** - 17" monitor with VGA input (https://www.pcliquidations.com/p6789-dell-e177fp-17-lcd)
+* **1** - Set of speakers (https://a.co/d/82D1zYo)
+* **1** - HDMI to VGA Adapter (https://a.co/d/4NyKmNO)
+* **2** - Containers of screws: 2.5" #8 and .375" #4 
+
+## Suggested Tools
+
+* CNC or jigsaw, router, table saw, impact driver, wood glue, etc... The kind of tools you find in a wood shop.
+
+
+## Template
+
+This [SVG template](/hardware/cabinet.svg) will serve as the outline for the top cabinet on your CNC, or you can print out the pieces at full-scale and follow along the outline with a jigsaw.
+
+![Top Template](/static/hardware/arcade-kiosks/arcade-cabinet.png)
+[Download top of cabinet here...](/hardware/cabinet.svg)
+
+<br/>
+
+The following [SVG template](/hardware/control-panel.svg) provides the outline for the cuts in the control panel that allow you to add the two-player buttons and joysticks.
+
+![Control Panel Template](/static/hardware/arcade-kiosks/control-panel-image.png)
+[Download control panel cuts here...](/hardware/control-panel.svg)
+
+<br/>
+
+## Kiosk Top Instructions
+
+
+* Cut your cabinet pieces from plywood as indicated in the [SVG file](/hardware/control-panel.svg).
+
+![Cutting the template](/static/hardware/arcade-kiosks/cnc.png)
+
+* Cut the control panel from the second [SVG file](/static/hardware/arcade-kiosks/control-panel-image.png).
+
+![Rough edges](/static/hardware/arcade-kiosks/control-panel-image.png)<br/>
+
+
+* Cold-fit the pieces together using the tabs & notches to check for places that need to be sanded or filled.
+* Take the control panel off again and add the buttons and joysticks according to the manufacturer's recommendations.
+
+![Control Panel](/static/hardware/arcade-kiosks/inside-wooden.png)<br/>
+
+* Attach the speakers and monitors to their corresponding openings using screws. Make sure to arrange the cords and cables in a way that keeps them accessible once you attach your laptop.
+* Reattach the control panel and secure with screws. Make sure the USB cable for the control board stays accessible for the laptop once everything is in place.
+* Navigate to [arcade.makecode.com/kiosk](https://arcade.makecode.com/--kiosk) on the machine's laptop, then test-fit the laptop inside of the cabinet, making sure to connect all necessary cables. 
+* Test the kiosk by attempting to select and play one of the two-player games. You should check that the joysticks move the players in the correct direction and that the buttons control the corresponding actions on MakeCode Arcade. 
+* Once everything is working as expected, you should have a tabeltop kiosk that's ready to play!
+
+![Control Panel](/static/hardware/arcade-kiosks/desk-front-2.png)<br/>
+
+
+## Kiosk Base Instructions
+
+If you want a wooden stand for the cabinet, here are the plans for creating a base from the remaining plywood. 
+
+![Kiosk Base](/static/hardware/arcade-kiosks/base-mockup.png)<br/>
+
+
+* Mark your remaining sheet of plywood in such a way that you can cut four rectangles. 
+ * For a base that sits flush with the cabinet, you'll need 2 sheets of 27"x34" and 2 of 18"x34".
+ * For a base that sits inside the cabinet, use 2 sheets of 16"x34" and 2 of 17"x34".
+ * (or measure the points on your cabinet where you want your base to rest and cut accordingly).
+
+![Kiosk Base](/static/hardware/arcade-kiosks/base-outline.png)<br/>
+
+* Clamp the four panels together into a box with no top or bottom. Test the fit before gluing and adding screws. 
+
+_Note: Be sure to secure the top to the bottom with screws (even if temporarily) to keep students from knocking the top from the arcade during a heated game!_
+
+
+
+
+## Decoration
+
+This is your cabinet, have fun decorating it and personalize it the way you like! We have used
+https://arcade-stencils.glitch.me/ to generate stencils and drawing for cabinets in the past, but feel free to paint freehand in any way that represents your project.

docs/hardware/cabinets.md

@@ -0,0 +1,35 @@
+# Arcade Cabinets
+
+
+## Choose Your Cabinet Type
+
+Technology has come a long way and we now have *three* different cabinet types to choose from.
+
+```codecard
+[
+  {
+  "name": "Wood & Laptop",
+  "cardType": "link",
+  "description": "Modular wooden cabinet powered by any laptop.",
+  "imageUrl": "/static/hardware/arcade-kiosks/wood-card.png",
+  "url": "/hardware/arcade-cabinets/full-size-kiosk",
+  "directOpen": true
+}, 
+{
+  "name": "Cardboard",
+  "description": "Make an inexpensive and simple cardboard arcade cabinet!",
+  "url": "/hardware/arcade-cabinets/cardboard-kiosk",
+  "cardType": "tutorial",
+  "imageUrl": "/static/hardware/arcade-kiosks/cardboard-card.png"
+}, 
+{
+  "name": "Wood & Raspberry Pi",
+  "cardType": "link",
+  "description": "Full size arcade cabinet powered by a Raspberry Pi.",
+  "imageUrl": "/static/hardware/raspberry-pi/wooden-cabinet/gallery.jpg",
+  "url": "/hardware/raspberry-pi/wooden-cabinet",
+  "directOpen": true
+}
+]
+```
+