• 

  doodad Logo

• 

  GameGrid

• 

  Dark Mode Level

• 

  Microphone Level

• 

  Audio Frequency Level

doodad

Mini brain puzzles that you solve without touching the screen.

Live link: doodad.live

Our Team

• Peter Joh
• Kevin Tung
• Jacob Benowitz

Inspiration

This is a clone of the Blackbox game found on the Apple App Store.

What it does

• A collection of mini brain puzzles. Simple as it may look, the only hint you have is the icon on the screen. Your goal is to find a way to solve it without directly clicking on the screen.

How we built it

• Wix EditorX + Velo
  • Leveraged powerful elements such as Repeaters and Lightboxes
  • Populate the gameGrid and level Lightbox dynamically for each member
  • Combination of frontend and backend scripts to provide level functionality
• Utilized CustomElements to tap into powerful Web APIs

APIs & Wix Elements Utilized

• wix-window
• wix-storage
• wix-data
• wix-members // wix-members-backend
• CustomElements + CustomEvents
• Wix LottieFiles
• Wix Repeaters
• lottie-web npm package
• Web Audio API (media streams)
• Window API (matchMedia, mousemove, popstate)

New Things We Learned

Web Audio API

• How to implement the Web Audio API to establish an input microphone audio stream. With this audio stream we are able to check for mute status and fire a CustomEvent when mute is detected, catch that on the Velo frontend to assign the success badge and update the DOM accordingly. Using the public autocorrelation algorithm we learned how to calculate the pitch of the steam and visualize the pitch of the stream on the DOM.

So Many Web APIs!

Took advantage of this opportunity to fully utilize the vast amount of Web APIs. We discovered the power of adding event listeners that trigger CustomEvents. Thanks to Velo, these custom events can easily be listened for on the CustomElement. We applied these learning to APIs we normally wouldn't use such as 'popstate' and 'mediaDevices`.

Built With

• custom-elements
• custom-events
• editorx
• javascript
• lottie
• velo
• wix
• wix-data