Slingshot Shop

Inspiration

We wanted to build something frustrating to use. Imagine trying to shop and buy items, but you don't know the price, you can't simply click and buy, black holes prevent you from getting the item into the cart, and the UI mocks you if you miss slingshotting the item into the cart.

What it does

The user is given a list of items on the left side of the screen. The user then has to slingshot the item into the cart, the price being revealed only if they make it in. The total price is shown on the top right of the screen. Popups show up if you miss or even if you make it in, making it more frustrating to use.

How we built it

Drag Interaction Users drag a shopping item from under the "browse items" header to slingshot it to the right side. If released with the correct angle and distance, the item can fall into the cart area. Otherwise, it will either miss or enter a vacuum. When releasing the item, a whoosh sound effect plays. The trajectory of the item is determined by the angle and distance that the item is pulled back at. The further is is pulled back, the further it will travel.
Cart Collision Items must land through the top opening of the cart to count. Once inside, items stack with random rotations to simulate a messy shopping pile. Feedback: A successful hit triggers a pop sound, shows a popup displaying the item price, and updates the total price badge.
Vacuum Collision The Obstacles: Beware of the floating black Vacuum Holes! If a shopping item touches a vacuum, it instantly shrinks and is sucked into the void. The items getting sucked in are accompanied by a suction sound effect.
Miss Logic If the item misses the cart and falls off the screen, a "MISS" popup appears to let you know you need to do better! When you have successfully put 8 shopping items into the cart, a red message pops up saying cart is full. ## Challenges we ran into We ran into a couple of challenges with styling, the slingshot motion & the physics surrounding it, and just overall merge errors with git. ## Accomplishments that we're proud of We're proud of making it functional and getting the slingshot physics to work, and especially proud of getting the items to stay in the cart and stack on top of each other. ## What we learned We learned a lot about how to use React.js and more frontend programming, and also learned a lot about CSS properties. ## What's next for Slingshot Shop If possible, we could add a checkout with even more counter-intuitive UI to make checkout of the items you've somehow gotten into the cart more difficult.