The Jenga component contains a button that creates an interactive Jenga tower. Pushing the button will create and reset the Jenga blocks to their initial position.
You can demo the project here: https://aelatgt.link/rfMDfvW or http://aelatgt.link/JKHJVgF.
- Create a new project on Glitch. You may need to enable cross-origin resource sharing, so Hubs can access the scripts on Glitch.
- Import this repo into the Glitch project. Do this by going to Tools > Import and Export > Import from GitHub and entering
aelatgt/jenga-hubs-component - Add the following custom script URL to hubs: https://incandescent-psychedelic-spark.glitch.me/rooms/8-interaction-jenga.js. But replace
incadescent-psychedelic-sparkwith the name of your Glitch project. - Refresh the page. You should see a spherical button that appears near the origin. Give it a click!
Instead of trying to clone this repository, you can add the project files to a Glitch project that already exists.
The two most important files are the following:
public/rooms/8-interaction-jenga.jsis the file that should be added to Hubs as a custom script.public/components/jenga.jscontains the meat of the Jenga tower creation code.
You can ignore the public/rooms/6-interaction-click.js script.
Make the Jenga blocks work properly over the network.
- https://github.com/aelatgt/hubs-scripting-guide used to make interactive components in these repo
- https://github.com/mozilla/hubs/tree/master/src/components components used in Hubs look identical to custom components
- https://glitch.com/edit/#!/incandescent-psychedelic-spark this project hosted on Glitch